6 Tips for Designing With Lines

by on 28th September 2010 with 28 Comments

screenshot

Today we’re going to look at one of the simplest possible design elements: a line. We’ll learn how to wield lines properly as well as what to avoid when implementing them.

Adding a few simple lines to a design can bring structure and graphical flair to an otherwise boring design. It’s a dead simple trick that, when used effectively, has the effect of adding a layer of finish your design.

#1: Use an Underline

We’ll start with the most basic trick in the typography playbook: an underline. An underlined headline feels weightier and provides a more definite separation between the header and the body. Keep in mind these are necessarily positive or negative attributes but are more neutral; you have to decide when their presence is good or bad based upon the look you’re going for.

screenshot

Notice how the line is not only acting as a separator between the two elements but also helps define the width of the column.

One thing that bugs me with underlines is the visual mess created when you have letters containing a descender that crashes into the line. There’s no official rule against this but I just find that it’s a little too distracting and guides the viewer’s interest to all the wrong places.

screenshot

So how do we address this issue? The easiest option is obviously to just avoid using descenders and underlines together, but that’s a little too restricting for my taste. Instead, what I usually do is create the underline manually by drawing a line (as opposed to simply clicking the underline button), then mask out the portions of the line that crash into my descenders.

screenshot

As you can see in the example above, this is much nicer than the previous example and contains a lot less visual complexity. If you don’t like that little bit of a stranded line after the last “g” you can simply stop the underline at the last descender (only applicable where the final letter contains a descender).

Extend It

Keep in mind that an underline doesn’t have to conform to the width of the text. Sometimes it makes an interesting statement to extend the underline all the way across or even off the page.

screenshot

If you do extend the underline, think about ways you can have fun with the line out in the negative space. You can give it some turbulence, bend it into a shape, anything you want!

screenshot

The designer below ended the extended underline with and concluded with a dot. This makes it feel connected to any content on the right and adds some nice but subtle interest to the plain line.

screenshot

#2: Break Up the Line

Don’t fall into the trap of always drawing a solid line. You can use dashes, dots, triangles, stars and anything else you can think of to create the line you want and it still accomplishes the same goal.

Check out how this designer used a dotted linen that aligns with the center of a headline to create a clear section. Though the text is center-aligned here, the design feels justified because the lines functionally extend the visual boundaries of the headline to the left and right edges of the column.

screenshot
screenshot

#3: Flank the Type

If you’re going for a formal theme, repeating the underline at the top of your headline can create an old style print feeling. I always think of a newspaper header when I see this style.

screenshot

If you want to reduce the feeling of formality, stagger the lines in different ways so it looks less structured. This also a handy effect for creating a feeling of motion on a static page.

screenshot

#4: Go Vertical

Thus far we’ve been focusing on horizontal lines but vertical lines can be used to insert some really creative graphical interest into a design. The designer below exaggerated the vertical lines in the typeface for no real reason other than the fact that it looks pretty cool and creates a nice, cohesive theme to build upon on the rest of the page.

screenshot

Obviously, a little more traditional use of a vertical line would be to simply separate two columns of content. This can be used in conjunction with either type or images and allows you to put a lot of space between your columns without having an awkward gap.

screenshot

#5: Go Diagonal

If you really want your page to look crazy, tilt your content diagonally. This usually gives the impressing of young, exciting design that breaks rules and pushes boundaries.

Tilting your content can look a bit random but extending the lines in the artwork helps it look intentional and really pushes the effect. Don’t be shy abut it, really crank the rotation and stretch those lines far enough to make a statement.

screenshot

The diagonal effect is particularly great for retro-inspired designs like the one above.

#6: Go Nuts

This is where I should tell you to take it easy. One or two simple lines can add a lot to your design and going too far with the effect can absolutely kill your aesthetic appeal. However, in the right hands, a combination of the tips above can result in a really sharp final product.

The design below from David Fooks uses a ton of line work. He combines dotted lines, solid lines, straight lines, curved lines, borders and even lines with a diamond on the end all in this one small area. The overall effect isn’t cluttered or ugly but instead is quite classy and beautiful!

screenshot

My advice is to simply use caution. Like any design element, lines can be used for good or evil. Use restraint when necessary and always look at your design with and without the added lines to make sure you’re actually adding value to the design.

Inspiration

Check out these great uses of line artwork in web design to get some ideas for how to incorporate some in your next design.

CarbonAds

screenshot

For the Record

screenshot

Evan Eckard

screenshot

Cool and the Guide

screenshot

The Pineapple Thief

screenshot

DesignSwap

screenshot

Caravan

screenshot

Conclusion

The purpose of this discussion was to encourage you to take a second look at our old friend the line and carefully consider where you can use lines to strengthen your designs either aesthetically, structurally or both.

If you have a design that makes strong use of simple lines, leave a comment below with a link so we can check it out! Also let us know what you think of the examples above.

Comments & Discussion

28 Comments

  • http://relevantdevelopment.co.uk Ash

    Some brilliant tips.

    Now I just need to resist the temptation to open up Photoshop and stick lines all over my current work!

  • http://www.vivoocreative.co.uk Luke

    Fantastic tips, thanks!

  • http://www.melissamakesthings.com Melissa Washin

    Great compilation of examples! I find intricate and detailed line work very challenging, and David Fooks definitely has an elegant touch.

  • http://www.pirated.me/ Leo Ghost

    Lines are always a touchy subject with me, I usually spend more time working with them than It’s actually worth as an end product. Thanks for the great post, there’s no better way to learn than by studying the work of others and developing your own style.

  • Pablo

    Excelentes recursos!!

  • http://www.crearedesign.co.uk Laura Meider

    I always find it a bit odd to add lines to designs, but some of these suggestions posted are good ideas.

    Just like what Ash has said, I need to resist adding lots of lines now on everything I do – it is very tempting to go line crazy.

    I really like the Designswap and the Go Diagonal logo as this works nice on an angle. It is also nice to see that lines do not have to be a typical thick line as on the Go Nuts design they are so minimal, they are hardly there, but enough to add to the design.

    Thanks for the post, it is nice to refer back to.

  • Pingback: CSS Brigit | 6 Tips for Designing With Lines

  • Tim

    Wow, I never thought adding some straight lines would matter very much, but these examples prove otherwise. Trying to imagine these sites without the lines … they just would not look as good.

  • Pingback: risorse&link | Art&Me

  • http://www.bluskymarketing.com/ BluSky

    I like the use of Vertical and Diagonal lines.

    Great article. Thanks so much.

    BluSky

  • http://geosite.com Geo

    ————-
    || LOVE LINES ||
    ————-
    _/ \_

  • http://seolar.de seolar

    Very useful tips which are helpful, too. So thanks a lot!

  • http://www.jamesmattison.co.uk James Mattison

    I was curious about the title of this post and it turned out to be exactly what it said! Nice to see some ‘back-to-basics’ typography tips.

  • http://heathwaller.com/ Heath Waller

    Little details like these can separate a good site from a great one. Especially when used judiciously, as you’ve suggested in your article.

    Thanks for providing a lot of useful info and inspiration here!

  • http://menian.eu/ Yasen Vasilev

    Thanks for the article. Its quite useful. I’m looking forward to my next project where I’ll definitely pay more attention to the lines.

  • http://webylife.com Nikunj

    This is simple superb, this article clear shows the importance of lines in design, which make designer tends to forget.

  • Pingback: What I’ve Read: 10-09-20 to 10-10-02 | CSS Radar

  • http://www.coded.ie Jamo

    Some beautiful examples of clean minimalist simple design and very well explained to boot thanks.

  • Pingback: 5E, making unique websites» Blog Archive » Design with “LINES”

  • Pingback: Multi-Link Monday – 27th September ’10 | Merlin's Developer Blog

  • http://www.trimm.nl Sebastiaan

    Great tips,
    It’s true the line as an object is easily forgotten or underrated. We tend to ‘close’ them, using frames, or page-wide underlined headers or whatever, so that the line has no real function in itself, while it can be used as such a strong and beautiful element. This article reminded me, thanks!

  • http://www.wangyufei.org/blog 王宇飞

    Good tips

    I think line is very useful and beautiful in web design.

  • Pingback: Web Design Critique #20: The Inspiration Blog | Design Shack

  • Pingback: You are now listed on FAQPAL

  • Pingback: 10 Tips for Troubleshooting a Lackluster Design | Design Shack

  • Pingback: London Underground Map – The Perfect Data Visualisation « Zabisco Blog

  • Pingback: “我的读书单”之文字的故事 | Hydrangea Land

  • Pingback: 文字的故事 | Hydrangea Land

Subscribe
Membership
About the Author