Using Horizontal Design for Websites

horizontal_design_header

By Nick Robson

For quite a while, the idea of using a horizontal design for a website was considered a major taboo of web design. However, over the last couple of years horizontal design has seen a surge in popularity, often being used to create a fresh, vogue feel for a website that wants to been seen as unique and trendy.

And that is what horizontal design has become: unique and trendy. It is now something that is associated with websites that want a sense of personality, originality, and modern style. That means that it is a style that designers need to keep in mind when considering the options for a website that may benefit from this kind of design.

Why Should You Use It?

Not only is horizontal design becoming more popular, but it can also be really useful. Horizontal design gives the designer a lot of control over what the users sees at any given moment allowing them to direct the user’s focus to where they want it. It essentially has the ability to streamline the user’s attention in a way that vertical design typically does not manage to do.

Another benefit to horizontal design is that it makes the user think. It is counter-intuitive for most users, who are far more comfortable with the common vertical design. Making users think too hard just to get around a site is bad design, so there is potential for this to be a negative thing. That said, introducing them to something new that takes just a second or two to catch on to can lead to a sense of exclusivity, which can beexcellent for the type of websites that typically favor this kind of quirky design.

Making Horizontal Design Work

Like all styles of design, horizontal design can be done incredibly well and it can be done poorly if you’re not careful. There are some common faux pas that can end up being more confusing for the user than useful, making them much more likely to leave the website in frustration. As with all web design, the user needs to be able to figure out how everything works without a lot of effort.

  • Scrolling. This is consistently one of the areas that horizontal design can fail. Users are used to scrolling down and many of them do not use the scroll bar at all. Instead they tend to use their mouse, their space bar, or their arrow keys which do not always work well with horizontal scrolling websites. Some sites have gone so far as to remove the scroll bar completely, meaning that users have to root around the site for awhile to figure out how to get anywhere. Always leave the scroll bar visible, but also give the users some kind of easily identifiable way to move their screen.C.L. Holloway’s website does an incredible job of addressing this. Not only is the design itself very creative and fitting, but navigation is easy. The horizontal scroll bar is enabled, there are arrows you can hover over, and scrolling down with your mouse moves the page sideways.

csholloway

  • Intuitive Menus. Some horizontally scrolling websites have abandoned menus entirely and everything can be found if you just scroll far enough.  There is a positive aspect to this, which is that users have to see just about everything, but their attention spans don’t always last that long. It’s important to have an easily visible menu that can direct them to the information that they want quickly. This is especially important for return visitors who may have a specific page in mind that they want to get to quickly and easily.This site by Handmade Interaction shows excellent positioning of their menus and pages. The menu takes you directly to the information and each page is numbered. Not only that, but the scroll bar is still enabled at the bottom which is good because the scrolling on this one could be a little better.

jasonlove

  • Attention Grabbing. The main reason that horizontal design is used is to capture the user’s attention and immediately give a feeling of something different than usual. It isn’t the kind of design that lends itself to muted, corporate web pages. It should have some flare to it and most horizontal sites do that. They tend to be colorful or, on the other hand, sometimes lack almost any color but in an artistic fashion. They also often implement some of the latest in web design (if you want to keep up with the latest, Flippin’ Awesome’s “Best of” series is excellent resource for keeping designers – and coders – informed).  Either way, looking at them immediately makes an impact and, when done well, makes the user want to explore deeper into what the site has to offer.Lucuma Audiovisual has an uncomplicated design that draws the user’s attention immediately and makes an impact while still being easy to use and allowing quick access to the information that one needs.

lucuma

  • Content.   Depending on the purpose of the website you are creating, content may or may not be an issue. However, if it is a site that aims to pass information on to its users, there is no reason to neglect providing well structured, contagious content. It is important that it is delivered seamlessly with your horizontal design no matter how minimal it may be.SoLoMo’s website does an incredible job of delivering information with the horizontal stripe on a fairly basic design. It’s actually fun to scroll through it and makes you want to keep reading which is exactly what the website is aiming to accomplish.

solomo

Conclusion

Horizontal design should not be ignored by serious web designers, especially given its rising popularity and the likelihood of being asked to design something like this sooner or later. However, it is important that the designer remember that no matter how attractive the site, it still needs to follow some of the basic rules of web design: it must be easy to use, make an impact, and deliver the intended information.

Modern Web Newsletter

Subscribe to receive the Modern Web tutorials, sent out every second Wednesday.

Top