Should this icon change be made?
Hello fellow SaidIt-ers(?),
I recently made a thread on /s/SaidIt about the design/look & feel of this site.
Over the last few days I've come up with a proposition for a revamp of the site's design and I'm excited to get some feedback from the community.
You can see some screen-shots of the proposed changed here.
Specifically, the proposed changes are as follows:
Change the "Insightful" & "Fun" icons to be cleaner and aesthetically similar.
- The light-bulb (Insightful) icon will "light up" when it's been clicked.
- The face (Fun) icon will wink when it's been clicked.
- Both icons highlight orange when they have been clicked.
Visited links are orange instead of dark blue which makes it easier to read in the default night theme.
Change the top banner on the homepage to a blurred CC image of a nebula.
- Banner image covers the entire screen width regardless of the windows size.
- Banner image is fixed to the top of the page giving a parallax like effect.
- Banner size (height) has been increased to feel less cramped.
Site logo has been enlarged to show detail.
- Logo has been moved to the top right of the screen, to help the top of the page "breathe".
Scrollbar has been themed because the default browsers scrollbars look awful in general.
- Scrollbar has been given a "material" style design to match the general site theme.
- Scrollbar handle has been made to be blue and highlight orange which matches the site theme and looks nice in my opinion.
Footer banner has been changed to match the top banner.
Possible/Known Issues:
This might cause some minor issues on mobile in it's current state. I haven't really checked the impact on mobile yet.
This could have negative effects on custom sub themes. If you run a sub with custom CSS let me know so we can look into that.
Switching to the light (day) theme breaks everything. I haven't looked into this, but I'm guessing that's because the style sheet is swapped out entirely.
The site logo is a pretty low resolution so it doesn't look super great enlarged.
The "parallax" scrolling on the banner is not truly parallax. If I'm not mistaken, implementing true parallax scrolling required JavaScript which is outside the scope of these changes.
I'm not 100% sure about the origin of the icons (face and light-bulb). They should be creative commons, but to be safe it would be be best to redesign them from scratch with slight tweaks.
Try before you buy:
If you want to check this out yourself, you can! You just need to add this "user css" to the site. I used the 'User CSS' browser plugin to do this.
Link to the CSS for download or copy/paste
Warning: These files (The CSS and images) are hosted on my own personal server with no HTTPS/SSL encryption. I set it up just for testing purposes. It should be totally safe to use, but be aware this is not a "best practice" in terms of security.
Note: This is not the final css that will be implemented by any means. This is just a "proof of concept".
I want to know what you think!
Please let me know if these changes look good to you. I'm 100% open to suggestions.
Also please let me know if you are willing and able to help with this re-design. Having some web development experience would be perfect, but having any design skill at all is great.
EDIT: Thanks for the feedback everyone. I've had a very busy week and just need to chill out today but I will be reading and responding to the messages soon. Hopefully tomorrow.
///////
EDIT #2: Thanks again for all of the feedback. I've read every comment in this thread and while I'm not going to respond to everything, this has all been taken into consideration. These decisions are not mine to make, so I'll do my best to ensure the community gets what they want. At this point, I've moved this conversation to GitHub so we can discuss the more technical points of the implementation.
[–]Liberty 5 insightful - 1 fun5 insightful - 0 fun6 insightful - 0 fun6 insightful - 1 fun - (0 children)
[–]bobbobbybob 4 insightful - 1 fun4 insightful - 0 fun5 insightful - 0 fun5 insightful - 1 fun - (0 children)
[–]Ian 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 0 fun4 insightful - 1 fun - (6 children)
[–]magnora7 4 insightful - 2 fun4 insightful - 1 fun5 insightful - 1 fun5 insightful - 2 fun - (1 child)
[–]Ian 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 1 fun4 insightful - 2 fun - (0 children)
[–][deleted] 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 0 fun3 insightful - 1 fun - (3 children)
[–]Ian 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 0 fun4 insightful - 1 fun - (0 children)
[–]Ian 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 0 fun3 insightful - 1 fun - (1 child)
[–][deleted] 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 0 fun2 insightful - 1 fun - (0 children)
[–]magnora7 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 0 fun4 insightful - 1 fun - (0 children)
[–]portcity 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 0 fun4 insightful - 1 fun - (0 children)
[–]fred_red_beans 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 0 fun3 insightful - 1 fun - (0 children)
[–][deleted] 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 0 fun2 insightful - 1 fun - (0 children)
[–][deleted] 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 0 fun2 insightful - 1 fun - (0 children)
[–][deleted] 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 0 fun2 insightful - 1 fun - (1 child)
[–]0eye[S] 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 0 fun3 insightful - 1 fun - (0 children)
[–]magnora7 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 0 fun2 insightful - 1 fun - (0 children)