I know, I know. It's very important that a website does not look like an old potato bag. But for search engines and users who want to scan websites, it's not that important. So this section will hurt. A lot.聽

Content first, design second

First, if I was a computer or an HCI (human鈥揷omputer interaction) maniac, I would say that colors and images don't matter at all. Fortunately, I'm welling to compromise and say that humans (some) are not computers. But since we still have to write a guideline and this should be it:聽

鈥淒esign is there to allow people access to the content鈥� (Nielsen, 2000, p. 77).

Images

One of my favourite quotes from Jakob Nielsen is this one:聽

鈥淕eneric and pointless images are about as compelling as a garden slug鈥� (Nielsen & Pernice, 2009, p. 196).聽

Ouch. This is hard to hear because we humans have the tendency to put images everywhere only because they look nice.聽

The thing is, according to eye tracking, users 鈥渋gnore stock images 85 percent of the time鈥� (Nielsen & Pernice, 2009, p. 213) and "users appreciate a short page with clear, large text or a single, useful image鈥� (Nielsen & Pernice, 2009, p. 200).聽

The bottom line is that we should lay out the page differently instead of adding images only to fill white space (Nielsen & Pernice, 2009).聽

鈥淲eb pages are not bank accounts: Full is not better. Cluttered or difficult designs make people less likely to find what they want鈥� (Nielsen & Pernice, 2009, p. 47).聽

Also, on images, 鈥減eople look more at images of attractive people who also look real and have imperfections than they do at stock art or perfect faces鈥� (Nielsen & Pernice, 2009, p. 230).聽

Colours

Another of my favourite quotes from my friend Jake:

鈥淒on't over-do it. An interface should not look like an angry fruit salad of wildly contrasting, highly saturated colors鈥� (Nielsen, 1994, p. 119).

Here it's more about branding, but also about usability.

First, 捆绑SM社区 primary and secondary colour palette does not include blue, pink, brown or orange. Here's what you should use:

• Red #ED1B2F聽
• Black #000000
• Grey #D7D7D9
• White #FFFFFF

Also, to make sure the website does not transform into an angry fruit salad, please use simple HTML markup language and our centrally defined stylesheets (Nielsen, 2000).聽

Can't see this image? Here's a text version.

References

by Jakob Nielsen

by Jakob Nielsen

by Jakob Nielsen and Kara Pernice