Alignment allows us to create order and organization among elements.
Alignment is one of the most basic principles in design, together with contrast, hierarchy, balance, proximity, repetition, simplicity and function. In general design, alignment helps connect all the visual element together, make the design more cohesive.
In graphic design and web design, there are many good and bad alignment examples. Good alignment brings proper visibility, guiding the user’s eyes to the information they are looking for. It also helps to balance the design and helps provide the overall structure of the entire object. Bad alignment makes the content more complex and difficult to read, and therefore provides bad feedback to the user.
Usually, alignment is defined by the rows and columns or along its center line. Alignment can be archived with a grid to help with more accurate alignment. The grid is an invisible line system, which helps organize elements from simple to complex content.
Below is an example of the different technique of alignment on Maddison Design website. Elements usually are aligned by rows and columns. However, designers have been experienced with different layouts, which aligns along diagonals, as above samples.
Alignment helps articles with complex contents easier to read. This is an example of using grid system to align various elements. With grid system, it is much easier for the user to read the article, although there is a lot of information on the page.
This photo of the stadium I took during my trip to Toronto is an example of how alignment connects elements together in architecture. All the seats were aligned to create a form of the stadium.
Citation and References:
- https://maddisondesigns.com/2009/03/the-5-basic-principles-of-design/https://254-online.com/alignment-principle-design/
- https://www.cnn.com/
- Lidwell, William, et al. Universal Principles of Design 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design. Rockport, 2010.
Came across a pretty unique example of alignment that I thought I’d share:
http://sites.uci.edu/in4matx282f18/files/2018/10/Alignment-2.jpg
I think they do a nice job of aligning elements along a grid. It’s easy to read and certainly stands out!
Hi Annie,
Another aspect of alignment is right- or left- alignment vs. center-alignment. According to Universal Principles of Design, right- and left- aligned text have stronger alignment cues than center-aligned text. Here is an example of poor text alignment (http://sites.uci.edu/in4matx282f18/files/2018/10/Poor-Alignment.jpg). You’ll notice the headers in the title row are center-aligned while the text in the rows beneath are a hodgepodge of left-, right-, and center-aligned text. This example (http://sites.uci.edu/in4matx282f18/files/2018/10/Alignment.jpg) on the other hand, has consistent text alignment throughout, which enhances the cohesion and scan-ability of the design.