Mobile design has me sketching more vertically. And I don’t think it is just me.
I am seeing more and more sites across platforms incorporating more vertical components into their overall design. Forget “above the scroll,” let’s talk about going vertical.
Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.
Horizontal vs. Vertical Design
For a long time, website design has centered around a pretty distinct “above the scroll” mentality. Designing for tablets and mobile devices requires you to change your default orientation and all of the well-designed mobile sites out there are really adding a vertical influence to design projects, both online and in print.
Many of the same basic principles apply whether you are working horizontally or vertically. Clean typography, a strong color palette and images, and overall organization are important.
Designing in a vertical space is not a new concept though. Print designers have been doing it for years – think about newspapers and magazines as classic examples. What is new is the nearly unlimited vertical possibility. In vertical web projects, you can extend the depth as far as you like (although this is not always recommended).
Create a Vertical Space
Sometimes the first challenge is creating a vertical space that is appropriate for your project. It will happen almost by default when working on any project that includes a mobile counterpart, but what about the website itself? (This, in the current browser environment, will never truly have a consistently vertical shape.)
If you have a blog or a website with a sidebar, your workspace may already be more vertical that you think. Emphasize that shape with other vertical parts, such as a strong up-and-down image or a short text block that reads vertically.
Another option is to extend your space beyond the scroll. Create cascading “screens” that are navigated from top to bottom. This is a concept that was frowned upon for some time but it is gaining ground again because users have been “retrained” to scroll through a website thanks to the abundance of mobile and tablet applications that work in that very way.
You can also plan your design around several vertical spaces by creating a grid of several wide columns. In this configuration, each column has a distinct purpose (very much like a sidebar) that creates a vertical workspace. You can create a single column vertical workspace by narrowing the pixel width of your workspace and filling the rest with a background image.
The key is not to force it. Sometimes you just will not be able to make a vertical space work. If you can’t design using a fully vertical orientation, try to use a few vertical design elements, such as navigation bars or images, within your overall design.
Using Vertical Elements
Sometimes planning a vertical design is about more than just the overall space. Consider using vertical elements in a horizontal space to create an up-and-down feel. Experiment with vertical photos or tall, thin text blocks. But again don’t force it; these tools are only effective if they work with (not against) your content.
Create static elements, such as navigation bars or logos, vertically as well. Just remember to structure these elements so that they remain usable. Navigation bars work best for a scrolling layout when they are not too deep and move with the page as users navigate. (You don’t want users getting frustrated trying to find things.)
You may also use color to establish a more vertical feel to your site. Think about the background – vertical stripes can add a “taller” feel when placed behind other objects.
Vertical Design in Action
Print design has relied on a vertical canvas for hundreds of years. Some of the most well-known publications – The New York Times, USA Today, Vogue and People – have formats that are taller than they are wide.
But it does not end there. Movie posters are one of the most well-known examples of vertically-oriented design projects.
More and more business cards, though most often printed horizontally, are taking on a vertical format. Why? Because it makes them stand out among the hundreds of others in the stack. The same is true for other printed promotional materials such as magnets and stickers. For print projects, the decision to use a vertical orientation when most others are working horizontally can really add some pop and flair to the project.
Vertical Considerations
“Vertical layouts can get weighty and hard to navigate in a hurry.”
Vertical layouts can get weighty and hard to navigate in a hurry. Make sure to give ample weight to headers and navigational tools when designing in a vertical space so that your user (or reader) does not lose track of what they are looking at.
You may consider making text a few points larger (and with additional leading) when using a vertical format and you will likely want to include navigational devices (whether they be scroll bars or descriptions) that follow the user through the website.
Also be wary of the horizontal space in the vertical layout. Resist the temptation to force a horizontal style into a different space; it will likely fall short. You don’t want to mash other elements together just to make them fit in a narrower space. Look at ways to rearrange or stack elements so that the workspace does not feel crowded.
Vertical Love
Here are a few of sites that are taking the vertical concept and running.
Activate
The site is built vertically and they help you navigate by using the scroll to “open” the bottle and rest of the site. (This never gets old.)
Enviro Homes
This navigation bar at the top of this vertically-based site, adjusts so that you always have the perfect visual on your computer screen.
Lotta Nieminen
This site uses vertical columns to establish shape. The mixing of rectangles encourages you to move through the page.
100% Pure New Zealand
Scrolling down this page creates a video effect that allows you to see more of New Zealand.
Conclusion
I love the resurgence and emphasis that mobile concepts are having on vertically-orientated projects. Changing user environments and the emergence of responsive design are also influencing this trend.
Overall, designing vertically is really no different than its horizontal counterpart. It may be a little unfamiliar in the beginning, but by using the same tools and concepts that relate to good design in a horizontal scheme you can create great vertical projects. If you are worried about the outcome, start small and develop a few vertical parts to incorporate into a project before going completely vertical. You might just find how much you enjoy the new view!
Discussion
- Rod says:great article, really interrestingSource: http://designshack.net/articles/layouts/think-vertical-the-influence-of-mobile-design-on-orientation/
Rod says: