Let’s focus on solving the actual design problems instead of spending too much time thinking about what to put ‘above the fold’.
We used to design mostly for desktop browsers in the past. But now we are designing for so many different devices. We don’t even know what’s coming tomorrow!
‘Above the fold’ design concept should not limit our creativity.
Also ‘above the fold’ concept is slightly different for mobile browsers. It’s actually higher than the actual height. On a mobile device, people are very impatient and they want to see things instantly. That’s why most of the users actually scroll down to see if anything is loaded ‘below the fold’ right after opening a page.
100 Thin (Hairline)
200 Extra Light (Ultra Light)
600 Semi Bold (Demi Bold)
800 Extra Bold (Ultra Bold)
900 Black (Heavy)
font-family: proxima-nova, sans-serif;
Following websites are great if you need to create realistic looking mockups right now.
The new google logo blends properly with their brands. It’s fun and easy to animate. Especially for mobile. We are going to see more and more UI animations on mobile. As a vector/SVG icon, it has less connecting points which make it easy to render. It’s clean and easy to read on a smaller screen.
HEX or RGB or HSL?
HEX is the most common used color code. It makes the CSS clean and compact. Example: #CCC
RGB/RGBa is designer friendly and easy to understand. It’s easy to manipulate using Java Script. Supports alpha channel which is very handy. Example: rgba(204, 204, 204, 1)
HSL/HSLa is another designer friendly color code. Percentage makes it easy to understand it’s output. I read somewhere rendering time is slightly slower than HEX and RGB. Example: hsla(0°, 0%, 80%, 1)
I prefer both HEX and RGB, but I don’t use both in a same project.
Yes! Only when your tablet/mobile website is not enough.