Books UI Typography Layout

Lines of force

Lines of force are a good way to build a solid and eye-catching layout that is based on vertical points of attraction. It can be several lines or even just one.

Building the layout with lines of force can create an exceptional and cohesive design.

Lines of force provide focal points and control chaos, helping to make a solid layout. Often, lines of force are tied to the logo or top navigation, giving strong points for shifting and distributing content vertically with a meaningful offset.

Sometimes the lines of force can be stronger than building a layout with a grid and columns. In the example below, there is a grid and six columns in it, but the lines of force are more clearly structured and guiding. They make the composition even stronger and more cohesive.

Leibal Website by Alexandra Maximenko

Lines of force help you to make content more exciting and attention-grabbing. It's common and boring to make four blocks as monotonous modules.

Too simple and square.

It is compelling and unusual to make four blocks along the lines of force and arrange them with an offset. This would look strong and thrilling.

Interesting, varied, and stable.

Lines of force can work not only for the whole screen or page. They can also be applied within modules, such as forms, cards, etc. Try applying this method to your design in general and to any content modules, and it may help make a more expressive interface.

Prev

Next

Check out my other books

PDF Ebook

Web Interface Handbook

PDF Ebook

Designing Design Systems

User Interface Colors

Coming soon

User Interface Colors