Design Tip #1: Line it up

September 25 2009, 6:13am

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.