After reading a lot of guides and tutorials about design I decided to pull them together in a simple cheat sheet. The aim of this document is not to teach you how to design things. It only acts as a checklist for you to be able to tell whether you did it right or not. I am not a designer myself so it comes without any warranty. If you think there are mistakes in this document feel free to comment on it or you can send an e-mail with your suggestions.
Do I have enough content?
Content is king. Content is the primary element of any website. Make sure your site is about your content not the other way around.
Do I center my page?
If your text takes up the whole screen it can be difficult to read and puts a strain on your readers’ eyes. Keep the text centered and set a limit on the characters per line.
Did I pick the right colors?
Black text on white background is hardly ideal for brightly lit screens so you should pick some colors which have enough contrast but do not burn your eyes out. You can use Paletton to mix something up or you can pick one which is created by others from Colourlovers. If you pick one color for background and two complementary colors for content and emphasis you will do fine for start. Typical content which need emphasis: links, tables, code blocks.
Am I using the right font?
Pick a font which is pleasant for the eyes. You can use Google Fonts to pick a suitable one. You should prefer sans over serif for web. If you want to know the difference navigate here.
Are my sizes right?
Similar elements should have similar size (paragraphs for example). Different elements should have significant difference in their sizes to add contrast (a header before a paragraph for example). Keep your sizes consistent across your page.
Did I get spacings right?
Elements placed near each other form groups. Content and visuals should be grouped together if they are related. Keep some whitespace between related elements to avoid overcrowding your design but keep much larger whitespace between non-related items. Examples: - Pictures and their captions should have smaller whitespace between each other than the next picture - A header between two content blocks should be closer to its corresponding content block As a rule of thumb an 1:3 or greater is clearly separating the groups. It is also very important to avoid extra but meaningless spacing like indentation.
Did I align things properly?
Avoid unnecessary centering of content. As a rule of thumb left align for all content is fine. You can add centering selectively to put emphasis on important stuff, like primary headings.
Did I eliminate unnecessary cruft?
Just by using size, proximity and alignment you can provide enough information for your users to distinguish the various groups of content on your site. If you did it right you don’t need additional lines, boxes, bullet points or other noise in your design. Remove them.
Do I have the same style for the same kind of content?
Only make things look different (size, color, font, etc) if they convey different meaning. Slight unintentional differences makes your users think and wastes their brain power.
Did I pick the right amount of graphics?
Graphics and icons can make a wall of text more bearable but don’t over use them. Keep in mind that they should only be used sparingly and to help convey your message for the readers. From Usplash you can pick free to use images. There are loads of free icons like Ikons or Glyphicons. If you don’t like images there are Subtle Patterns for you to choose from.
Additional Tips:
- Use a grid. There are a lot of grids you can use. The two most common are Bootstrap and Foundation. They bring two advantages out of the box: responsiveness and correct spacing.
- Take inspiration from sites you enjoy. If you have no idea where to start you can always look at the work of others. Although ripping off someone else’s design is hardly ethical you can pick up ideas from it.
- Make your site as simple as possible. There is a book which can help you with this named “Don’t make me think”. You also don’t have to create that tag cloud just because a Wordpress theme has it. KISS goodbye to all the unnecessary complexity.
- Make sure every header and content block lines up, the spacings and the alignment are the same where the content is similar and you use the same colors for the same kind of emphasis or content. Small, unintentional visual differences are like sand in the engine of your visual brain. (source)
- It’s a good idea to stick to no more than two typefaces on a website and to pair a serif with a sans serif to differentiate headers from content.
Sources
Tools
- Paletton - The spiritual successor to ColorSchemeDesigner. It is incredibly useful for creating color palettes.
- Colourlovers - Pre-made palettes for you to use.
- Google Fonts - You can find all sorts of free to use fonts here.
- Usplash - Free to use background images.
- Subtle Patterns - These are subtle patterns (as the name suggests). Useful for backgrounds.
- Glyphicons - These are icons which can be colorized without extra work.
- Bootstrap - Simple UI toolkit which comes with an useful grid system.
- Foundation - Same as above with less boilerplate.