One of the easiest ways to achieve an organized design is to apply a grid system. Grids in interactive design can also help provide a consistent experience across multiple devices with different screen sizes. Users are happy when they see familiar features laid out as they would expect to find them.
One of the easiest ways to control the structure of a layout and to achieve a consistent and organized design is to apply a grid system. This helps align page elements based on sequenced columns and rows. We use this column-based structure to place text, images, and functions in a consistent way throughout the design. Every element has its place that we can see instantly and reproduce elsewhere. The grid system was first used to arrange handwriting on paper and then in publishing to organize the layout of printed pages.
Creating a grid system for the virtual page
This is a little more complex than for the physical page – browsers handle information differently, and screens vary in size. Happily, however, the principle remains the same. The best layout is one that provides no distraction from the content. Thanks to its mathematical precision, the grid system is a great example of this kind of layout.
We divide the web page layout into columns that we separate with margins, using whitespace, between them. The width of the columns and the margins are equal, and we can place content in one or more columns based on the layout of the design. The application of a grid means that the design can be divided into multiple columns that can help designers organize content. For example, we can have one, two, three, six, twelve, or more columns. Today's screen resolutions reach very large sizes compared with what was available in the early days of computers. Even so, using a 960-pixel width can ensure that the design is properly displayed on many computer screens. It can also help designers modify the layout for mobile devices.
Image from Material Design Specification
There are several principles of UI design that construct each design composition. These principles include balance, Hierarchy, Alignment, White Space, Contrast, and Proportion.
Introducing Alignment
This is the design theory that builds order, organization, and as a by-product from successful implementation, improves readability. Composition alignment is often a subtle art and one which requires close attention to small detail, yet if delivered accurately, the distinction between a polished and non-polished interface is clear to see. Alignment is especially important amongst publication sites and news platforms. If delivered successfully, alignment vastly improves the customer reading experience. It’s quite easy to confuse vertical and horizontal alignment, let’s have a look at the difference:
Vertical alignment is when the placement of the top, center, and bottom elements align together on the same horizontal plane.
Horizontal alignment is the alignment of the left, center, and right edges of components. Articles that are recommended in the Based On Your Reading History segment, use horizontal alignment to align all content elements of each article to the outer left edge. Horizontal alignment is also used in each article image. The horizontal positioning of the Reading List and Dismiss icons also ensures that all icons sit consistently on the same vertical axis.
A good tip for remembering the difference between vertical and horizontal alignment is to consider the movement of objects. For example, moving the Reading List or Dismiss icon left or right is repositioning the icon on its horizontal axis and is therefore using horizontal alignment.
The aforementioned object/icons bring me onto discussing object alignment. UI objects can include images, graphics, or icons — all of which are typically inconsistent in their width and their height. As such, aligning objects can prove to be quite tricky, and often misalignment occurs but a good tip when combining objects with content is to align objects centrally and to align content left.
Photo by Bryan Colosky on Unsplash