Web Design Tutorial

Web Design with C.R.A.P

Alignment

Alignment is defined as “lining up the top, bottom, sides, or middle of text or graphic elements on a page” (source: about.com). We like to say it’s a “rhyme or reason” to things being where they are. This quality is the single most important principle in great design and typically is the difference between professional designs, and how can we say this… “Unprofessional design”.

In this example of www.manegain.com, you see how the various elements of the page, while appearing in the header, the body and in the bottom of the page all align in the same invisible grid. While most people will not realize this aspect of great design, it is quite literally CRITICAL in creating beautiful designs. The more you start looking you will see an underlying grid to nearly all great design.

Things to Consider:

  • Quality alignment is CRITICAL to great design
  • All page elements should be visually connected to something else
  • Alignment of important content items creates attractive design
  • Underlying grids help make a design flow more naturally to users
  • Choose left align, center align or right align (don’t mix)
  • Make sure to match spacing/padding when you align items
  • Back to top