Z-Layout

Introduction

The state of Web Design continues to evolve every single day. It has always been in a constant state of flux — pretty much since the iPhone was released in 2007. The iPhone was a doozy, because it forced developers and designers to find workarounds with Flash. Steve and Apple were not intent on bringing flash to mobile users. However, the web really became an exciting place when Google Chrome overtook Internet Explorer sometime in between 2011-2012. It signaled a shift in usage, technology and design thinking — and that just about brings us to now.

Layouts

When designing a layout, it’s important to keep an objective in mind. For example, Stripe is a product for developers and web-stores so their main objective is to completely wow developers from all walks of life (Stripe.com has some insanely cool cutting edge Front-end CSS). Another example is Lyft, whose primary goal is to convert visitors into users. What it really comes down to, what is this layout supposed to do for us and for visitors?

Even though we all know above-the-fold is kind of bullshit, it’s still important. Just so we’re all on the same page, we’ll call anything above-the-fold, The Hero. Designing a Hero component of a webpage can be really fun!

First, we figure out an objective: e.g. convert visitors into customers, signup users for a newsletter, or maybe there is no objective at all. Second, we need to figure out a design strategy. This is where the Z-Layout comes in.

Z-Layout Design Variations

Let’s take a look at some classic examples. If you are the head of product for an app, or wish to drive visitors to a specific page elsewhere on the website — chances are you want to go with a Z-Layout optimized to move customers around. Let’s look at some variations on this theme.

Slack – The E-mail replacement app has a lighthearted design, and aims to convert visitors into users.

Lyft – No paragraphs of copy, just high contrast, a simple form to become a driver and that’s it. If half of your visitors just want to become a driver, or a customer — make it easy for them.

Asana – Project management can be a hard sell, but communicating a simple product can be more effective than talking about bells-and-whistles.

Southwest – This airline gets an honorable mention. It’s not very sexy, and booking a flight itself is not fun here. But it is important to note that a vast majority of visitors here probably go straight to the booking form — so at the risk of being annoying to repeat users, it seems Southwest values their reward program over actual ticket sales. In fairness, this Hero area above the form likely changes all the time for various promotions and deals.

Coinbase, Caviar, Medium and Blue Bottle Coffee – more examples of Z-Layouts (yeah yeah some are stretching it) that promote engagement (e.g. interacting with a form or scrolling down). A single input on the form is key here. If there’s more than one, such as First Name and Last Name… forget about it. Medium is the exception because the product is reading. If you’re not into scrolling and reading, you’re probably not an ideal user for the platform.

Various – Above are some examples of heroes that are designed to convert visitors into customers. Key takeaways here on these, high contrast, elements along a “Z” path for eyeball scanning, and a button. The button is very important to driving engagement. It is 100x easier to just click a button than fill out a form.

Conclusion

Before I get destroyed in the comments, a layout is not a blueprint. If you’re a product designer looking to spice up your homepage or wish to drive customers to a sale happening at your webstore — look to the examples above for inspiration. The basic rule of this layout is this: simply align elements along a Z-shaped path above-the-fold. The secondary objective is: keep it simple. The less copy, the better. High contrast helps a lot. Make sure to check your colors for accessibility’s sake. And lastly, add your objective last along the Z-path (e.g. a button, form, or link). I hope this helps anyone in need of inspiration or direction!

—

If you have any questions, feedback or comments drop me a line below 🙂