you are viewing a single comment's thread.

view the rest of the comments →

[–][deleted] 5 insightful - 2 fun5 insightful - 1 fun6 insightful - 2 fun -  (5 children)

There's not a designer proper on the team. I think that having some design help around here would be awesome!

I think the most effective way to propose changes is to get screenshot(s) together, so everyone can have a look and we can get some feedback going on?

We've been overwhelmed with backend stuff lately. Lots of upgrades and updates to do.

[–]0eye[S] 9 insightful - 4 fun9 insightful - 3 fun10 insightful - 4 fun -  (4 children)

Ok, so I did a rough mock-up with some open source images/icons and a little bit of CSS.

https://imgur.com/a/wwOXLW1 (These screen shots have the page magnified to show the icons better)

The changes I made were:

  • Changed the Insightful and Fun icons to something cleaner and aesthetically similar.

  • The light-bulb (insightful) lights up when it's clicked and the smile (fun) winks when clicked.

  • Both icons turn orange when they are active.

  • Visited links are orange instead of dark blue, this makes it easier to see on the (default) dark theme.

  • Changed the top banner on the homepage to a blurred CC image of a nebula, and made it cover the full width regardless of window size.

This is just a rough proof of concept, but I'm excited to see what people think. I work as a web developer and while I've never touched the saidit or reddit code bases I think I could manage a PR.

Edit: You can try these changes out by applying this CSS as a user style. I used the 'User CSS' browser plugin to do this.

#header{
  background-image:url('http://138.68.219.81/img/saidit/banner.jpg');
  background-size:cover;
}
.arrow.up{
  background-image: url('http://138.68.219.81/img/saidit/light.png');
}
.arrow.upmod{
  background-image: url('http://138.68.219.81/img/saidit/light-set.png');
}
.arrow.down{
  background-image: url('http://138.68.219.81/img/saidit/fun.png');
}
.arrow.downmod{
  background-image: url('http://138.68.219.81/img/saidit/fun-set.png');
}
.thing .title:visited, .thing.visited .title {
  color:#ff7500;
}

The images are temporarily hosted on my personal server.

[–]portcity 4 insightful - 2 fun4 insightful - 1 fun5 insightful - 2 fun -  (0 children)

Thanks for all the work you put in. Can't wait to see what it looks like.

[–][deleted] 4 insightful - 2 fun4 insightful - 1 fun5 insightful - 2 fun -  (2 children)

Beautiful. Not sure if I like the block headed head but this is a huge improvement for sure, especially:

something cleaner and aesthetically similar

Can you make a post with this for AskSaidIt "Should this icon change be made?" Then post your screenshot again and ask people to comment yes or no. A little busy work, but it should let everyone see it.

/u/magnora7 please chime in if you don't want this to happen or want some different process

[–]magnora7 4 insightful - 2 fun4 insightful - 1 fun5 insightful - 2 fun -  (1 child)

That does look pretty cool. I'm down for the change. Nice work /u/0eye, thanks for taking care of some of the "low hanging fruit" :)

One other effect youtube does that might be cool is to add a parallax effect, where the background image scrolls down less quickly than the rest of the page, giving the illusion of depth. Here's an example: https://www.youtube.com/user/caseyneistat

Just an extra idea, but I'm obviously no graphic artist professional haha

[–]0eye[S] 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 1 fun -  (0 children)

That's a really cool idea and wouldn't be that difficult to implement at all. I'm going to post on askSaidit later about this and I will include a mention of that idea.