Skip to content

2 Minute Master: Using Line Elements in Web Design

blurred abstracted diagonal blue and brown lines implying motion

Line is a Foundational Element of Visual Design

Specifically, the ‘Line’ Element of Design one of 7 Elements of Visual Design. Lines can be straight, angled, curved, or even implied. They can be straight, or very gestural.

The basic definition of a line is an object whose length exceeds its thickness. However, some argue that a line can have no thickness, otherwise it becomes a Shape (another Element of Design).

Why Lines Matter

Lines serve a ton of purposes in web design, providing separation, indicating links, lending focus, and making associations.

Lines are also very useful for invoking emotions in users.

three vertical lines, one straight, one zig zag, and one curved, all illustrating the different emotions they invoke
See how different line types can invoke very different feelings for the viewer?

Last, but certainly not least, lines have the ability to play an important role in all the Principles of Gestalt.

Element of Line => Connection, Separation & Emotion

The Element of Line plays overlooked but important role in in visual design. Its impressive usefulness owes mostly to its sheer breadth of utility.

I hope you’re walking away with clearer idea of the role line plays in design and can start making full use of it in your own work!

Line is just one of the 7 Elements of Visual Design, and part of the longer list of Elements and Principles of Visual Design. When it comes to UX, UI and web design, these are all essential to have in your skillset.


References

  1. Tomita, Kei. “Principles and elements of visual design: A review of the literature on visual design of instructional materials.” Research Gate. Educational Studies, IERS, International Christian University, 2015.
  2. Lovett, John. “Line.” johnlovett.com. Accessed 28 May 2020.

Cover photo: Vidsplay on Negative Space

Leave a Reply

Your email address will not be published. Required fields are marked *