30 Great Looking Web Designs Built With Diagonal Lines

by on 24th September 2012 with 9 Comments

screenshot

Too often, we fall back on the same old design techniques and aesthetic feel. Why not mix it up every now and then and try something new? One technique that really seems to be gaining traction lately is the implementation of strong diagonal lines in web design.

After years of strict, standard grids that utilize clear vertical and horizontal directionality, a bold diagonal design can make a refreshing statement that’s eye-catching and attractive. Read on to see thirty recent examples of designers using diagonal lines in their work.

Trends

Before we jump into the web design examples, let’s briefly discuss some of the trends that are evident in this type of design. Whether you’re looking to blend in with the crowd or go your own way, you need to understand what other designers are doing.

For the most part, the designs that I came across were pretty easy to break up into a few different categories as far as how the diagonal lines are implemented:

  • Diamonds – Probably the most obvious and popular path to diagonal lines in a design. All you need to do is implement a diamond-based pattern or toss in some diamond-shaped elements. You can slap these right on top of an otherwise plain design to add in some nice, unexpected variation.
  • Hexagons – Hexagons are all the rage right now. Don’t make the mistake of using octagons mind you, that would just be crazy talk (that’s sarcasm folks). For whatever reason, hexagons definitely seem to be the up and coming shape for web design. Watch out for more of this into 2013. You heard it here first.
  • Type – If you really want a bold, unique look, try whipping up some custom diagonal type. It will make your message feel edgy, fast-paced and young. Alternatively, you can make use of diagonal lines that naturally appear in type such as in the “/” character for a more technological look.
  • Fat Lines – I couldn’t think of a decent name for this category so I simply called it “fat lines.” Basically, it uses really thick, bold diagonal lines that you simply can’t miss. There’s no subtlety here. The lines are often used to slice up photographs and place them together. It’s a cool technique that makes for some really interesting and non-standard photo crops.

Hispanic Cultures

Another interesting trend that I noticed is that many of the diagonal line designs that I came across were from non-English-speaking countries. It seems that Hispanic countries in particular like this trend.

“How a specific group of people choose to communicate and portray information can tell you a lot.”

I love to study trends in design and it’s always amazing to me when you come across cultural tendencies. How a specific group of people choose to communicate and portray information can tell you a lot. It speaks to where the people of that place are culturally, artistically, politically, generationally, and more. As a designer, you can use these trends to learn about how to effectively market products in different places from a visual perspective.

Diamonds

Shiny Demos

screenshot

KIKK Festival

screenshot

Zag Studio

screenshot

Shopping Paseo Itaigara

screenshot

Samsung Smart TV

screenshot

DNA Vapaus

screenshot

Greteman Group

screenshot

Reklamebyrået NeoLab

screenshot

The 360 degree product

screenshot

National LGBT Museum

screenshot

Hexagons

HDLive 2012

screenshot

Nerisson

screenshot

Bespoke

screenshot

Type

ICF Mensworld 2012

screenshot

Build 2012

screenshot

-The Social Games

screenshot

Fat Lines

Capture Camera Clip System

screenshot

Fifteen Robin

screenshot

Brand Fever

screenshot

Geeza

screenshot

Cielo

screenshot

Dunlop Tire CIS LLC

screenshot

Kryptis

screenshot

Miscellaneous

5 Minutos Antes

screenshot

Mokhtar SAGHAFI

screenshot

Fernando Conti

screenshot

Matej Kvasňovský

screenshot

CreativeDose

screenshot

Atelier

screenshot

Squarefactor

screenshot

Pioneer Steez

screenshot

How Do You Use Diagonal Lines in Your Work?

Diagonal lines can help you convey a range of ideas and concepts: action, excitement, beauty, symmetry, progress, and more. Now that you’ve seen how the designers above used diagonal lines to communicate, tell us how you use them in your work. Be sure to leave a link to any examples that you have so we can check them out!

Comments & Discussion

9 Comments

  • carles

    Perhaps It would be interesting to do a tutorial about diagonal design.

    • Chris

      I’ve already taken firebug to all of those sites, no time to wait for a tutorial :)

  • http://www.anchorstl.com Michael Meininger

    Awesome examples

  • http://www.anchorstl.com Michael Meininger

    And one more for the list

    http://unfold.no/

  • http://www.lettier.com/ LETTiER

    Well, as my art history professor always said, “Diagonals are exiting!”

    • http://www.lettier.com/ LETTiER

      *exciting

  • http://www.internetbuff.co.uk Internet Buff

    Some great inspiration to get away from all those rectangles!

  • http://www.cartridgesave.co.uk Cartridge Save

    Some of these designs are really great, but I think I prefer minalism to some of the more flamboyant attempts. The Sassy Willa has a real impact, on me anyone, but the Shiny Demos one is a bit overwhelming. With those types of sites you often have to do a lot of exploring to find out what you can actually do on the site, and what it’s for. I know the idea is to really stand out and look supremely modern, but sometimes simplicity and humility are more effective.

  • http://www.native.co.za/ Darryn

    Hello, here’s another one.

Subscribe
Membership
About the Author