Click to close searching.

Elements of Design in Practice: Line & Shape

By Corrie Oberdin   •   16 July, 2014



Elements of Design in Practice: Line & Shape

In Design, Web Design by Corrie Oberdin     Comment Bubble  Leave a Comment      Like

In our Elements of Design overview, we talked about the elements of design and how they contribute to all forms of design. This time, we are going to take a look at two of the elements – Line and Shape – and focus on how they contribute to the design of a website.

Elements of Design: Line

You know what a line is (right?).  The most basic element, it can be straight, curved, diagonal, thick, thin or dotted. Lines can also be implied, rather than literal. Lines can show movement, define space or break it up.


In websites, lines can be used to break up chunks of information – to denote topics, categorize information or give visual cues to a change in subject. In our design for Metropolitan Utilities District, we use lines to break up the menu options at the top of the page, differentiating between subsections of the site like Community, About Us, Contractor Services and more.  We also use lines between news stories at the bottom to differentiate between individual stories.

MUD Line

Elements of Design: Shape

Shapes are areas that stand out from the space next to or around them, because of boundaries made by the shape. Shapes can be flat or two dimensional and can sometimes be seen in outline, or shaded in.


In website design, shapes can help denote areas of content.  One of the most popular uses of shapes online is buttons. Buttons can tell you what to do – when we see a button that says “Click Here” or “Pay Now,” we know what that link will do much more clearly than a standard hyperlink.

In our design for the St. Francis Mission website, you can see the use of shape in buttons indicating two calls to action – the first encourages donation, the second to sign up for an email newsletter.


Once you know the elements, you can start finding them across a number of different graphic design applications. What’s your favorite use of line or space on a website? Let us know!

Have something to add?

Your email address will not be published.