30 Great Looking Web Designs Built With Diagonal Lines
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.
19 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 19+ million design resources, themes, templates, photos, graphics and more. An Envato subscription starts at $16 per month, and is the best unlimited creative subscription we've ever seen.
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.
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
KIKK Festival
Zag Studio
Shopping Paseo Itaigara
Samsung Smart TV
DNA Vapaus
Greteman Group
Reklamebyrået NeoLab
The 360 degree product
National LGBT Museum
Hexagons
HDLive 2012
Nerisson
Bespoke
Type
ICF Mensworld 2012
Build 2012
-The Social Games
Fat Lines
Capture Camera Clip System
Fifteen Robin
Brand Fever
Geeza
Cielo
Dunlop Tire CIS LLC
Kryptis
Miscellaneous
5 Minutos Antes
Mokhtar SAGHAFI
Fernando Conti
Matej Kvasňovský
CreativeDose
Atelier
Squarefactor
Pioneer Steez
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!