Design Tip #1: Line it up
by Steve Testone on September 25th, 2009

Even though we try to make web design as easy as possible with SnapPages, there is only so much that you can automate which still leaves some of the design choices up to you. Web design in general can be a frustrating thing if you don't know what you're doing. I remember when I first started out that sometimes I would finish a design but still feel that something just didn't look right even if I couldn't put my finger on what it was, and that can be a frustrating thing. Over the years I've learned a lot of basic design principles and simple tips that are easy to follow and can make a world of difference, so I thought it would be helpful to share a few of these with our users in a new series I'm starting here on this blog.

One thing that can make a dramatic difference in your designs is a basic understanding of "alignment", which basically means how elements in your design line up with other elements in your design. You might not realize it, but the human eye does a very good job of lining things up. For instance, you might not be able to draw a straight line, but you can probably very easily recognize a straight line when you see one. The other thing you might not realize is that your mind is constantly drawing imaginary lines between different objects, and when those imaginary lines are straight, meaning that the objects are aligned, this becomes more appealing to the viewer.

If you don't believe me, then think about this, which looks more appealing, a pile of papers or a neat stack of papers? Now you might think that you aren't particularly bothered by a pile of papers, but I think we would all agree that a neat stack looks more "professional". This same idea can be carried into basic design principals. When the elements in your design are neatly lined up, then it just looks more professional.

Observe the two images below to see what I mean:
You'll notice that the header text on the left is neatly lined up with the body content of your website which creates a nice appealing image. In the image on the right, none of the text is lined up which creates an image in your mind that is a little chaotic and looks less professional. Also you'll notice that the text in the header on the right looks cramped because it's so close to the edge of the page. So whenever possible, try to keep elements on your page lined up and I think you'll start to notice a big difference in how professional your designs start to look.

Please let me know if you found this article helpful as it will probably encourage me to write more. Also if you have specific design questions or you have some tips of your own be sure to let me know so that I can share them in future articles.

Posted in Tips    Tagged with no tags


Marco - September 25th, 2009 at 6:42 PM
Hi Steve,

Thanks for a great post. I think it's important to learn basic design principles, and what better place to do so than with you. I agree, aligned elements look more professional. I wonder if your next post could be about "good" color combinations? That is sometimes troublesome.

Thanks and keep up the good job,

Angie - September 26th, 2009 at 2:39 AM
The latest updates with enhanced features are great! The information on the blog is fabulous with loads of good tips and tools. Thanks! One idea that I think would also help to improve the professional appearance of the blog page (and other pages) is to provide an option for full justification of text. Perhaps this could be considered for a future update. Thanks, Steve!
vittal - September 26th, 2009 at 10:54 AM
Awesome post Steve. Keep them coming! May be you could discuss the usage of fonts in one of your upcoming posts?

Thanks again for sharing these tips with us
Amy - February 8th, 2015 at 9:20 PM
When I switch to mobile mode on my site, my text is not aligned. Can you please help? I have submitted this question on "help," but they say they don't see anything wrong on their end. The main text and headers are all aligned at different points.
Leave a Comment

Tips (6)
Updates (47)
2016 (4)
2015 (2)
2014 (10)
2013 (7)
2012 (12)
2011 (21)
2010 (35)
January (2)
February (5)
March (7)
April (1)
May (2)
July (3)
August (3)
September (4)
October (2)
November (2)
December (4)
2009 (22)