1. Why are they diferent?
Why some times when you craft something it turns out awesome, and in other cases (most of the time maybe) its not that good? It is all in the small details, that form the whole picture of your work.
Still, there are some hints, patterns and guidelines that even the pros follow when working on their new project. In the era of simplistic web, where most artists (yes, designers are digital artists) use flat colors, straight lines and lots of whitespace – patterns emerge. These patterns so to say, are that you always try not to clumb too much information per square centemeter (im from Europe by the way). Other patterns may be that you try to separate headings from content, or you try to add more padding in all boxes you have in your site.
2. White Space
Here is simple example, of the one pattern, that is seen in all modern sites. (compare the two images, image 1 is the way most people that haven’t made contact with designing sites before go for and image 2 is the way most designers do it)
So what is the diference.
First of all, in the secound image, there is less information you can get as user. Is that bad? Maybe not so, because when you see the first one, do you have patience and will to read it? Or when you see big chunk of text, you will just skip it.
Secound diference is the actual reason there is less content in image 2. What i changed is that i added a lot of padding in the box, so the text doesn’t touch the borders of the white box. Then i changed the font from Arial to Lato. Both are ok for web use, because can be found in Google Fonts. Arial is the most used font by new designers ( those who start dealing with this magic for first time ) or Helvetica for Mac users. I must say, that they have advantage, because Helvetica is one great font. And Arial too, but its time is going out, i think.
Third Line height. Remember this, because its something that will change your first site designs to better. This is the space between each line. In the image1 there is almoust no space, maybe 5px which is 14+5 19px line height. In the secound one its around 26 which is almoust 2em’s (maybe too much, you can decide). The most easy way to decide the line height, is this: Remember, stay between 1.3 and 1.8. The longer the lines are ( count in characters usually ) the higher the line height is. So for 80 characters, avarage line-height is around 1.6-1.7em’s. Read more about em’s and pixels.
Fourth Hierarchy. What this mean? Well in this example its easy to explain. See the heading of this block of code. In image one, its not that easy to notice it. In image 2 in other hand, the heading is the first thing you see. You have to grab your readers/users from there. Here are the diferences: 1. Diferent font. In the heading i used Merriwether (google font) which is serif and in the content i used Lato which is sans-serif. Always try to use diferent presentation for text and headins. This can be done as me, with diferent types of fonts, or same type, but diferent fonts only, like Lato for text and Oswald for headings. Or even same font, but bolder for headings and regular for text.
So these examples show perfectly the use of white space. White space is used to make your design breathe. Or else said, your user breathe and don’t feel in tight because of too much content around. Good use of white space versus bad use of white space
So, first site – national geographic news has great composition of elements and use of white space. Not too much, but not too tight. See for example the main navigation.
There is a lot of space between the borders of the navigation and the links. At least 2 ems (double the font-size). Also, its separated from all top elements and bottom elements. Its a good practise to use some type of separation between diferent contexts of data. The title and the date on the top and the title. Both have diferent role, so they have to be separated, else the hierarchy of content is lost, and this is something just as important as using white space.
And here comes that bad use of hierarchy and white space where its hard to know what are you actually reading.
What we see here. On the right column there is NO space between the list items. Some are bold, some are not. What i thought the first time i saw this is that the bold ones are the titles, as i remember from many many other sites (a pattern) but not here. Here the odd list items are bold and the other are not. Why? To be easy to see diference between list items. Well, using this trick is cool when used currectly. Here i would suggest to add litte more padding to each list item, and if the designer want to make the odd links diferent, her can add some light gray background, #f0f0f0 or #e5e5e5 for example.
Again, someone might say, that if we add more white space, the page will be too long. Well, i wont mind to scroll if i can read titles easy. Even adding 10px space between list items and some light border between will do the job of separating them.
Something i must admit to this site, is that they have somewhat ok hierarchy after you scroll a litte. Its easy to spot titles and links, because they have much diferent color than the rest, but for the overall design and feel i give 2/10. Reasons:
Bad use of white space
Bad use of colors. This blue isn’t something that grab the eye.
Alwful font. This size and font render terible under windows, i cant say for mac/linux. “A closer look at font rendering by Smashing Magazine”
It is way too repeative in some sections. Its ok to have repeating elements, but you have to know when to stop. Trick here can be using sliders or list of titles, instead of title+image+text+meta.
Bad navigation. This is crusial part of the design, because with bad navigation, you put all the content in one place, when it could be separated in difernet pages. This also give bad look to the page. Make things hard to find, and the task of the good designer is to think how to arange content and how to separate it so its easy to reach and not clumbed in one place.
Never use too vivid colors, unless you know exactly what you are doing. When picking color from the color pallet in Photoshop, try going around this area: ( remember, this is for most of the cases, there are many exeptions, but this is tip for new designers )
Ok, so here are the examples. See smashing magazine for example. They used very light gray and white for the most of the page. For links, their color is blue, which is the traditional color for links, orange for their branding and dark red for small elements like icons. Still, all the colors they pick are NOT too vivid. See the blue for example. Here is where their blue is in the color picker:
This is so to say the ideal area for blue colors. Dont go for the too vivid blue, which you can see in the right column, around 30 pixels above the curent position. This is maybe the only “restricted” area in the color palet.
As you might thought, there are expetions. They come usualy for warmer colors like orange and yelow. The best orange colors are around the red (more to red than yelow) and not too bright, they must be vivid in most cases. You can see this working in smashing magazine as well, or just check where the color #ff6000 is located for example. #ff6000 is nice web color, vivid enought to be noticed.
But always remains one thing. Keep one or two main colors to lead your design, and all other keep in monocromic way. So to say, white, light grey and very dark grey, but not black, unless of course that is your goal.
Remember these things. Always try to add space between your elements. This can be done for biggest to smallest elements. From body tag to letter-spacing. The more you add the more your page will breathe, but also remember, that you must stop at some point. Find out the moment when you think there is enought space between elements and move on to next one.
Make the important things easy to notice, but the non important easy to look at too. What i mean is, when the user enter the page, you have to make them see first the thing you want. Usually, the logo, the navigation, the main title e.t.c. Good for you, is that the users allready get used to patterns, like logo on the top left, navigation on the right.
Use good line-height, use diferent font for heading and text, or at least make them very easy to distinguish. One nice thing, is to remove the underline from links. Try it and see if you like the result. Use non-vivid colors. Pick one or two leading colors and use black, light grey and dark for the rest. ( unless you make dark site, then just invert the mono colors and keep the leading ones ).
If you are making light white design, where you have more white space, always pick light-key photograhs for images when presenting your design to the client. Don’t pick what they will use (unless you have to of course). Presentation of the product is very important. Of course, the above can be taken bad from some people. Why? Because that way you are “cheating” but actually no. You just show them, what they have to look for to have beautiful site.