A couple of weeks ago I promised to expand on each of the four design basics. Today that expansion begins with an example of alignment.
Amateur Design
If you remember I promised to take a bad design and rework it using nothing more than the four basic design principles. Let’s take a look at out starting point. Click the image for a larger size view.
I’ll be reworking this image throughout the series and quite honestly have no idea how the final design will turn out. The goal is to create a design using only the four design principles of contrast, repetition, alignment, and proximity. C.R.A.P as they are sometimes ironically known.
You can see the design elements have been placed somewhat randomly. There is a header, footer, and two columns, but the elements within aren’t placed with a purpose. Text is centered. Elements fall where they will. Overall the design is very amateur.
Improved Alignment
Let’s improve things by aligning the different design elements
While it’s hardly a great design, look how much better it looks simply through alignment. It’s already looking like there’s some purpose to things. There’s now a plan where before there was randomness.
Here’s another look at the above image with some vertical and horizontal lines added to highlight the alignment
Not only is the main copy aligned with itself, but notice how its left edge aligns with the right edge of the logo and the left edge of the footer navigation. The left column is aligned not with the logo itself, but with a visual element within the logo graphic.
The top of each column is now aligned horizontally as are the different elements in the header, though I’ve now switched the contact info from being left aligned to a center alignment.
You certainly could have chosen a different alignment for any or all of the design elements. There is no absolute right or wrong here. The idea is to place things with a purpose. Connect your design elements to each other, though understand it’s ok to have something that breaks the alignment.
Logo Alignment
Let’s take a look at the logo itself and see how we’ve aligned things within this single design element.
Before
After
The original logo placed the text without much thought. The second aligns the company name and the tagline and attempts to create some kind of alignment with the lines in the graphic. The longer line of the text does help reinforce the horizontal lines in the graphic, though that’s an example of repetition, which we’ll get to next time.
Summary
Look over the images in this post and notice how much more professional the design looks simply by aligning design elements.
Again this is hardly a finished design, but the differences with and without alignment are significant. More than anything the principle of alignment brings a design from amateur to professional.
As you travel the web start noticing how the elements of different web pages are aligned. Also take note of when pages break alignment and ask yourself if that break was done purposely or by accident. Breaking alignment (or any design rule) with a purpose can be a great way to create a more interesting design.
Posts in this series
Download a free sample from my book, Design Fundamentals.
Seeing the visual lines is a good idea. It helps to show how lining this up creates visual continuity.
Glad the lines helped. You can see how much more designed the page looks just by aligning the elements.
Visual Lines help the eye not strain so much as well. It will also keep a readers interest, and with a little creativeness draw a readers attention to different areas you want them to read.
What a wonderful article. Ill be using this in my work from now on. thanks again for being there.
Glad you liked the post.
Dear Steven Bradley,
I like the way you explain things and you are very good in it!
May I use this C.R.A.P, example for a lesson? Of course I will put this link and I will put your name!
Kind regards
Angelika
Thanks Angelika. You can use this example as a lesson if you want as long as you don’t copy everything word for word and place it online somewhere.
This reminds me of the Before and After Magazine. 😀
I’m not familiar with the magazine, but based on the title I can guess why this post reminds you of it.
It’s a design magazine concentrating mostly on logo and typography design. The site link is: http://www.bamagazine.com/
Btw, I learn a lot from this design principles series. Will be applying these cool techniques in my coming projects. Thanks a lot Steven. 😀
Thanks got the link. Looks like the only way to get the magazine is through the site, which is probably why I wasn’t familiar with it.
I see they have some free samples though so I’ll check it out.
Very useful articles for beginners. May I translate these articles of C.A.R.P into Chinese with full length? It will be more convenient for readers in China. Of course I will keep original links.