Illustration by Kristina Zmaic
We all want to have a beautifully designed website and yet, it's surprisingly hard. So what is it that great designers know that the rest of us don't?
The key to great web design is really very simple: you've got to understand the universal rules of good design and follow them, all the time.
Let's make sure this never happens to you.
1. Learn the fundamental rules of type design:
The key to good web design, says Ryan Shafer, Lead Digital Designers at MTV & VH1, is remembering that the web is really just a bunch of text. "I encourage all budding web designers to embrace that the web is fundamentally about typography design."
And the great news is that type designers have spent the past five thousand years perfecting text design, and there are a few golden rules that all websites should adhere to:
- Make them bold and easy to scan
- San serif typefaces are great for headlines because they are stark and easy to read at larger sizes
- For lots of text opt for a serif typeface
- Make the font-size much larger than you think is necessary, we recommend 16 px at minimum
- Lines should never be more than 50-60 characters long
2. Pick a solid typeface, and maybe one with a touch of whimsy
Now, don't get us wrong, we love Helvetica as much as the next designer. When it comes to picking a font-face you want to pick something super easy to read, graphic, and maybe something a little, you know, whimsical.
Colin Nederkoorn, founder of Customer.io says that recently, "Proxima Nova has replaced Helvetica Neue as my sans-serif typeface of choice. They probably won't make a movie about it, but if you want a sophisticated sans-serif typeface that the lay(wo)man won't recognize, give Proxima Nova a shot."
Some other good choices are Montserrat and Merriweather Sans.
3. Pick a three-color pallette & then stick to it!
When it comes to picking a color pallette the key is to pick it and stick (to) it. Consistency is everything when it comes to creating a cohesive color palette for your site.
"I prefer neutral palettes that use a strong accent color in a bold way," says Mike Fortress designer at Oak Studios. "Perhaps a white background (#fff), a not- too-dark text value with a little hue in it (#45585f), and a strong accent color (#4e5fff). But," warns Mike, "Be careful with that last color!"
Check out Adobe's Kuler tool for picking colors, or get inspired by the collection of palettes at Colour Lovers.
4. Make sure your photos are the right size
Remember, the web is pixel based. So if your image isn't large enough it's going to look pixelated.
"When you are looking for images on Google or iStock, make sure to get the proper size" says designer Kristina Zmaic. "Photo clarity adds a lot of credibility to a site, even if they weren't taken by you."
If the image is too small, don't use it!
5. When in doubt, give it space
The most important design tip is also the simplest: "Make sure your content has breathing room; give it proper margins will help with legibility and focus." In particular, says Kristina, it's important to avoid overwhelming users with walls of text.
"Too much text can be a bit daunting. Text is necessary so make sure to break it up with larger sub headings and legible paragraphs. Considering using icons or images as alternative ways to communicate your point."
If there is one golden rule of design it's this: pick your aesthetic and stick to it. Consistency is key. Nothing will tank your design faster than picking one design direction and then switching it halfway through.