Lines in Visual Design

A line connects two points. They can be used to define shapes, divide content and create textures. Lines have length, width and direction.
Why should I use lines?

Used on their own:

Lines help organise a page by separating or grouping content and sections. They can be used for emphasis or make a statement. For example a vertical line alongside a quote. They can be used to guide a user to specific parts of a page or content. Lines convey meaning. For example: A dotted line on a coupon could suggest that a user ‘Tears along the dotted line’. Lines can be used to define shapes. Used as part of another graphic element: Lines can be used to add texture.

They create movement:

Varied line thickness creates the illusion of shape and movement. Lines can be used to convey depth.


Types of lines

Lines on their own:

  • Vertical lines
  • Horizontal lines
  • Diagonal lines
  • Zig-zag line
  • Curved lines


Lines together:

  • Intersecting lines
  • Perpendicular lines
  • Parallel lines


Line styles

  • Solid
  • Long dash
  • Dotted
  • Dash dotted
  • Medium dash
  • Dash with two dots
  • Short dash
  • Dash with three dots


Design checklist

  • Horizontal lines indicate a sense of rest.
  • Vertical lines are seen as tall and serious.
  • Horizontal and vertical lines used together convey structure and represent stability.
  • Diagonal lines move the eye in a direction and indicate movement and fluidity.
  • Shallow curves are relaxing, while deep curves convey friction.
  • Diagonal lines with abrupt changes of direction add chaos to a design but also conveys a sense of energy to the design.

Further reading

How to Use Lines in Design
How To Use Lines To Create An Impact In Graphic Design
Visual Design Basics | Usability.gov
The Building Blocks of Visual Design | Interaction Design Foundation Graphic
Design Solutions: Robin Landa: 9781337554053: Amazon.com: Books

newsletter

Sign up to our newsletter!

Subscribe to our newsletter and for the latest news and updates.