top of page

Power of Alignment

What is it?

  • Arrangement in a straight line or in a correct relative position.
  • Placement of visual elements so they line-up in a composition.

In Alignment

Out of Alignment

  • Alignment creates a sharper, more ordered design, clear outcome.
Proper Alignment
Mix Alignment
  • Example of Alignment in Parade.

Types of Alignment

ALIGNMENT
Edge Alingment
Center Alignment
Edge Alignment:
Center Alignment:

Alignment in Web Design

  • Following is the image of different alignment of visual elements of a website.
Good Alignment
  • Can appear clear, confident, elegant, formal & Trustworthy
Poor Alignment
  • Does not follow any layout
  •  Bad design
Mixed Alignment
  • No hierarchy
  • No formal order
  • Example of Different Alignment
1
2
3
6
4
5
  • Pic 1, 2, 4 - Good Alignment
  • Pic 3, 5, 6 - Mix Alignment

How to Archive Alignment?

  • This grid ensures accurate alignment & consistency in a large piece of design work.
Visual elements can be placed on this invisible grids to be aligned.

Numbers Always to the Right

  • Keep the numerical values/currency values right aligned.
Names to the left
Numbers to the right

Numbers Totaled

  • For making total.

Name to the Left

  • Easy to read a book.
bottom of page