When I first set out to design websites I was a bit lost. I entered the field from the development side and didn’t have a formal design degree. While I’ve always trusted my eye to tell me what was good and what wasn’t, my eye often told me my early designs fell more into the wasn’t category than the was.
When I talk to others first embarking on a web design career, I get the feeling my experience isn’t so unique. The good news is a few basic principles of design can dramatically improve your skills and help take your designs from amateur to professional.
These principles have an easy to remember and ironic acronym. CRAP. Contrast, repetition, alignment, and proximity. Each is simple to understand and incorporate into your design and if you can put them into practice you’ll find your designs improving greatly.
Because these principles are so important I think a series of posts is in order. Consider this post an introduction to that series, with individual posts on each principle to come in the weeks ahead.
I first learned all these principles from Robin Williams (no, not that Robin Williams) book The Non-Designer’s Design Book. The definitions of the 4 basic principles below are Robin’s and the book will go into much more depth than I can in a single post or even a series of posts. If the information here is new to you I highly recommend the book.
While the acronym makes for easy remembering let’s talk about the 4 principles in a different order.
Have you ever looked at a website and knew immediately it was designed by an amateur and not a professional web designer? Even money says all the copy on that site was centered and most of the design elements look more like they were strewn about on the page rather than placed there with a purpose.
The principle of alignment: Nothing on a page should be placed arbitrarily. All elements should have a visual connection with something else on the page.
Consider the screenshot below from the Oxford Garden website
I’ve added some vertical and horizontal lines to the image to help show the alignment. Look at how elements from different parts of the page are still aligned with each other.
For example see how the right edge of the logo is lined up with the right edge of the first column of text at the bottom. That wasn’t an accident.
Why are all the h2s on a given page styled to look the same? Why does a site navigation look the same across pages? For that matter why do good websties maintain a consistent template across the site?
The principle of repetition: Some aspects of the design should be repeated across the entire design
Repetition lets you know certain elements are similar. All your h2s look the same (or should) because they represent the level in the structural hierarchy of your content.
Consider the image below from Matt Mullenweg’s personal blog.
Notice how each comment starts with a similar looking heading. The background color is the same, the links within the comment heading are red. Each post even has an avatar located to the left.
Take a look too at the sidebar. Every heading in the sidebar looks just like the others. Same background image, same font color and size.
The repetition lets you know these items are similar and that repetition also helps tie the design together.
Of course if every element on your site looked the same no one would be able to find anything. Nothing would stand out. You make things stand apart through contrast. Your h1s should look different from your h2s
The principle of contrast: Items that are different should look different.
Consider the image below from the Let’s Make it a Date website
An easy way to see the contrast is the squint test. Close your eyes a little and look at the image. You can still easily make out the different page elements. They contrast nicely with each other helping them to stand apart.
For example the buttons in the lower left. An obvious goal of this page is to have someone click to learn more about the company or to contact them. Because the buttons contrast with the text around them they stand out and grab your attention. You may or may not contact the company, but you should easily see how to.
Have you ever seen an image on a website and couldn’t tell right away which block of text refers to it? Ever looked at a page and had a hard time which elements are related to each other?
The principle of proximity: Related items should be grouped together
Consider the image below from the Arts Design Studio website
Looks specifically at the section marked by Solutions. It may not be clear on the reduced image, but the heading is closer to the blocks below than the paragraph above. Even more look how each block in the section contains its own heading, icon, and text grouped tightly and how the space between different blocks is more than the space within each blog.
That lets you know at a glance which heading and icon belongs with each block of text. You won’t confuse the SEO solution with the Video solution below it. It’s clear where one ends and the next begins.
As I mentioned above this post is meant as an introduction to the 4 basic design principles. In the coming weeks I’ll expand on each of the principles with a full post. My thought is to take a disorganized and amateur design and by applying nothing more than the principles above turn it into something more professional.
Between now and then I have an assignment for you. Don’t worry it’s not difficult and won’t take up any of your time, but if you want to learn you have to put in some work. Think about the contrast, repetition, alignment, and proximity as you travel the web and start to notice them in practice on the sites you visit.
That’s it. I told you it was an easy assignment.
When you come across a site with a design you like see if you can notice the above principles at work. When you see a site with a design that makes you cringe, see if the design is ignoring the above principles. As you notice these principles in action try incorporating them more in your own designs.
Also know that the best designs are often those that find a way to break or bend the rules. But before you can break a rule in a pleasing way you have to understand that rule and why it works as it does.
Absorb the above and I’ll be back next week with a more in depth post about alignment.
Posts in this series
Download a free sample from my book, Design Fundamentals.
Hear, hear! And please don’t spend lots of money trying to get around a real designer and then bring it to one of us to try to fix and say you’ve already spent way too much. My thought to add is that if you think, “I can save money and figure out something myself” – you more than likely will produce an inferior product and that’s the first point at which you should reconsider.
My recent client hired a designer (ok, they’re not all good – you do have to check portfolios and any other work you can to see what they produce) who gave her a horrible looking site. She then went on web.com and set up the function to be able to design her own. Since she knows nothing about web functions, she can’t handle that either and wanted me to come in and fix the stuff for virtually nothing. And here’s the major problem w/ that: she’s paying nearly $100/mo. and the sections aren’t adjustable w/in the template she chose so content doesn’t fit right and she’s trying to stick it other places. After several hours of making virtually no progress, she got upset and changed the password on me.
I don’t know why people choose some of those online site builders. I think they sound good at first, but all they end up doing is costing more money and allow you to do less with the site.
You could use something like WordPress to manage your content and spend less than $10/month on hosting instead of spending $100/month on the site builder.
I think anyone with a website should at least have access to their files. You may never want to edit your files directly, but you should at least have access to them otherwise you’re at the mercy of the the company hosting your site.
I think it’s thanks to ignorance (due to a better lack of words).
When I was first JUST starting out, I was under the impression that a web design program like Dreamweaver was required to make a website. Mostly because back then I didn’t know where to begin, there’s a lot of stuff out there.
To be fair though, I’ve seen some pretty “crap” designs from professionals too.
I agree people don’t really know and the online site builders sound good unless you know.
Just because someone calls themself a professional doesn’t make them professional.
Definitely true, however I was just making the point that some people who ave created really good designs have also made some pretty bad ones.
I guess it’s just a matter of opinion.
Oh yeah. And some of it is also just our own tastes. I’ve seen designs I don’t like, but I know they’re still good designs.
Reading this point I already saw elements in my site that need some attention. I know you brought alot of the elements to my attention but having a set of guidelines with examples really shows the problems with my current design.
Just being aware of the basic principles will improve your design. It’s hard to ignore them, once you know they exist.
Hopefully the coming posts in the series will offer more examples and tips that will help.
-There should be a consistent theme and design running
throughout your site ie same header image and/or logo, slogan,
navigation, copyright and colors.
-The homepage should include a summary of what products
your site has to offer. Customers can always delve deeper
into your site for more information.
I agree your site should have a consistent design throughout, though it could vary a little from section to section and page to page.
I’m not sure you need to summarize all of your products on your home page. To me home pages are meant to offer an introduction about what your site is about and to help people quickly find content deeper on your site. For many sites that will mean directing them to products.
Great article Steven. I will remember to look for CRAP in web designs. hehe. Looking forward to your next articles on CRAP. Thank you.
Thanks Raymond. Such an ironic acronym isn’t it? Easy to remember though. The next post in the series should be early next week.
Thanks again for the tips on generating a color scheme from an image. Pixelating the image first is such a great idea and so simple too.
No problem Steven. I just read that in a book and I just wanted to share it. I’m glad you found the tip helpful.
i also agree with your design skill principles. it’s really informative.
Thanks Jeevan4u. Glad you liked the post.
It is good article for the beginners of website designer and logo designer. The book you mention is great The Non-Designer’s Design Book and this book will give a lot of help if people try it
Good article enjoy it
The Non-Designer’s Design Books is a great read. Plenty of good advice and examples. I highly recommend it if you’re new to design or want a refresher course in the basics.
Wow this was actually a great read, I made it all the way down to the bottom of the article without being sidetracked :). This is a great refresher and has given me some valuable pointers to how I should go about designing websites etc for clients. Would consider linking your site up with my blog, feel free to contact me if you are interested, keep up the articles, because I will be keeping an eye on them :).
Thanks Rob. I guess that means I did something right to keep you interested all the way through. Did you read the other posts in the series?
I have some posts planned for the future on other basic design principles. Different principles, but hopefully just as useful.
Just found your article, Steven. Nice job. I’m looking forward to reading your other posts on design principles. Side note: the link to the Arts Design Studio is broken (too many h’s in http).
Thanks Michael. I appreciate the kind words and for letting me know about the broken links. The extra h is gone and the links should be good to go now.
It really does come down to taste. For a past employer with 600 internal employees, half the team thought I was great – the others thought I sucked. You can’t make everyone happy all the time as a web developer, even though this is what each one of us are striving for.
That might be true of aesthetics, but I think design is more than taste alone. A site that’s well organized and easy to find your way around is more than taste.
I think the issue is that most aspects of good or great design don’t call attention to themselves. People only tend to notice them when they don’t work. People find it much easier to recognized a poor design. When something is designed well the design doesn’t always get the credit.
Hi Steven, it seems like you have created a nice design for this here blog and you have some good ideas about design. I stumbled upon your blog and look forward to reading more of your posts. I want to improve my design skills.
Thanks Andy. I hope what’s here helps.
your web design principles are awesome. i really enjoyed the article. thanks
My first website (2008) had big hero image, asymmetric content blocks positions, bold headlines, nice colors (almost like 2016 web trends). Quickly after that I started to receive emails, and calls… Leave good job and start with web development. Today I regret. Because, after few years all my “design” started to be more and more technically clean and boring.
When I did not know anything about web design I was much better in design than today – after 10 years. Responsive…, CSS frameworks, Google speed, CMS cages… wash my brain and I lost sense for creativity.