Web Design Tips: The Power of Alignment

Alignment is one of the most important features in design in that it adds to the organization and usability of a web page. Even with all other elements in good condition, such as a great use of color, effective use of typography, and visually appealing balance, a bad use of alignment can make a website layout look cluttered.

While most designers understand this principle, many don’t see that they’re not achieving it effectively. I will go over the basics of alignment in this article, but also be sure to use specific examples and ideas for designers who have a grasp of alignment, to achieve an even better understanding.

Get More Detailed Alignment

Alignment in web design means everything from the bigger elements, such as the header, content, navigation, and footer, to the inside elements, like paragraphs, ads, text headers, and images.

Most often times a designer will forget about the smaller elements that go within the large sections of a web layout. This is perhaps the biggest alignment mistake. If you read articles on design processes, you will see that one of the steps is always creating a mock-up just containing the core features of the layout. When doing this, though, most designers aren’t thinking of spacing, paragraphs, images, or other smaller elements. This, many times, creates an end result that does not look aligned as well as the original mock-up did.

There is an easy way to fix this, that requires a bit more effort on your part. This bit of extra effort can go along way, and create a much better ending design. In future mock-ups, try adding more detail, from the sample on the top, to the result on the bottom.

Alignment

Alignment

Notice how the bottom example adds a greater sense of alignment, because we’re using more elements to align to. By paying attention to the smaller elements in a website, you can create a greater visual appeal.

The bottom mock-up could be improved even more by adding in the actual feed icons, header image, and dummy text. While my example may be the quick way to get by, the more detail you add while paying attention to alignment only, the better the result will be.

Images in Alignment

An aspect of alignment that most designers miss is that an image can align with elements on the web page, using the lines, shapes, and contrasting colors of the image. Let’s take a few example header images below and find their alignment points.

chairheader-nogrid

chairheader

As you can see, there are many areas in the above image to align with, if it were to be used as an element of a web page. One of these points of alignment is the corner of the walls, and the rest are various boundaries of the chair. If we were to use the sample layout above, we could think about how to align the RSS & Atom feeds, Twitter icon, and search bar appropriately with the boundaries of this header image.

landscapeheader

landscapeheadergrid

If a landscape image were to be used in a website layout, this would be a good example of points to align with. The horizon is always a must, and in the case of this image, the top of the mountains, borders of hills, and edges of the trees would also be great alignment points.

Good Uses of Alignment

Note in the examples below how these designers used images, color contrast, and features of their respective websites to create an interesting and effective use of alignment.

screen1 screen2 screen3 screen4 screen5 screen6

Conclusion

It seems like a lot of work to go through for what seems to be such a small effect. Alignment, however, is a natural thing we see, and the proper use of it can create aesthetic beauty for all viewers. Not enough attention to alignment can make or break the beauty of a website design.

I’d love to see some more examples of great alignment, please share them with me if you find any!

Written By Kayla

Kayla Knight is a 20 year old college student, part-time web developer, freelancer, and blogger. Webitect is where she spends too much of her freetime, sharing interesting finds and valuable resources. Be sure to check out her portfolio.

14 Comments

  1. Kari

    February 23rd, 2009 at 05:46 pm

    I don’t know MUCH about professional web design, but I really haven’t heard about this concept! Interesting. I think I’ll try it on my next layout :D

  2. Jay

    February 23rd, 2009 at 06:27 pm

    This is an area I think I can improve upon. Sometimes I forget, and then other times I don’t. It comes down to a specific “type” of layout I’m trying to create. Sometimes I want a space to be present so badly, that even if it doesn’t align I use it anyway and the whole concept is ignored. I’m really really trying to get better every time, so this is now bookmarked so that I don’t forget next time around!

  3. faye

    February 24th, 2009 at 01:57 pm

    Gosh, I should really get my backside in gear and do my alignment. :I Last time I tried to center align my layout, it mucked my whole site up, and I spent HOURS fixing it up again. eeeek.

  4. Kaylee

    February 24th, 2009 at 09:44 pm

    Yay, alignment! I’ve started trying to use the 960 grid system, but I haven’t actually implemented it yet. I find that it comes somewhat naturally, but like you said, it’s important to pay attention to these kinds of considerations when designing.

  5. Kayla

    February 24th, 2009 at 11:37 pm

    @Kaylee

    It’s a great idea using the 960 grid system…I actually can’t believe I forgot to mention it in this post! A great system to abide by when aligning things, and it also helps with visual balance!

    Here’s the link to the main 960 Grid System site for everyone else:
    http://960.gs/

  6. clairessa

    February 26th, 2009 at 05:24 pm

    i think my alignment is pretty good. you should really do website reviews or something. It would be very awesome. But anyway I love the part in how you talk about the chair picture and the alignment with the corner wall. that’s genius. ah your site gives me an awesome feeling everytime i come here. tips to make designs better make my day.

  7. Save Few Bucks

    February 26th, 2009 at 10:23 pm

    Very well explained article. It took me a long time to get my layout right. Had to do sort of research on the best placement of stuff.

    http://SaveFewBucks.Blogspot.com

  8. Liza

    February 27th, 2009 at 10:37 am

    I highly recommend the 960 grid system!

    Thanks for the complement on my use of alignment! :)