Oh CRAP. (Designing your website)
If you Google ‘how to design things for a website’ (go ahead, we’ll wait…), you will see such lists as ’24 Things to Consider When Designing and Developing a…’ (who knows what they are designing or developing because their title was too long for the search result listing page) or ’15 Things to Know Before Designing a Website’.
Wowzers. How will you get them all right?
(I read the articles, just in case. Turns out, I’m all good.)
I’ve been reading articles like these since starting as a website designer and instead of overwhelming you with options (and there are lots of things to consider), let me introduce you to the c.r.a.p. principle of design.
C.R.A.P. stands for contrast, repetition, alignment and proximity. It was introduced by Robin Williams, a woman whose design books were so very helpful when I started out on this path.
Just about any design project can be evaluated from this framework and come out the better for it.
Contrast makes for better UX
Making elements stand out on a website can draw the user’s eye to something that you for sure want them to see. (If you don’t like that sentence, feel free to read ‘This is how you start again‘). Contrast can include changing the colour of nearby elements, changing the font size or type or putting different shapes side-by-side.
The colour wheel is a great place to start if you want to built a site with some ‘wow’ colour combos to spark action. There are even online tools, like Coolors, that can help you get started. Big caution: You can’t always just plop complementary colours on the same page and be done with it. There is an art for putting colours together so that they are easy to read and make sense to the user.
I repeat…
See what I did there? I created a sub-head using the same font size and colour as the other headings on this page, making it easy to scan. Just like contrast, the repetition on your site can be the colour, the font or the shape. Repetition gives a calmness to your site, because it makes things easier to understand and ultimately, find.
Alignment
I hope that centering the sub-head above grates on your nerves as much as it does mine. It is a great example of contrast, because it sticks out as different from the rest. In this case, ‘different’ isn’t great and just causes confusion on the page (sorry about that). Aligning elements makes a page flow better for your user.
And just in case you are wondering, here’s a little gem about what is really important to your user:
That’s right: finding what they want (red arrows added by yours truly for emphasis).
If it is a big thing for them, make it a big thing for you and do what you can to help a brother out.
The ‘P’ in CRAP – Proximity
Things that are associated with each other, should be located close to each other on the page. This might mean that there is a little extra space between a title and the paragraph above it, showing that the title is a part of the next paragraph (like the headings on this page). White space, or negative space, can be used effectively to group elements and help the user to find their way through the site. Placing elements close together can make for a busy or ‘exciting’ onside experience for users, so it shouldn’t be discounted as a tool.
Putting it all on the page
Sometimes a design just needs a tweak to snap it into place. Sometimes everything needs to be broken apart and you need to start again. How do you know which is needed? A good place to start is to evaluate using the CRAP principles. Test your website using friends and family (because that’s what they’re there for, right?) who have never used your site and ask them to complete a task. Just watch them. Note where their mouse moves and what they click on. If you have a little bit more in the budget, engage the services of a web design professional (shameless self-promotion there, because of course I mean me).
Don’t let your website flounder when all it needs is to have a little CRAP applied.