It can be easy to think that the visual design of a landing page is about “skinning” a wireframe with some colors and fonts. But there’s much more to a landing page than meets the eye—a truism we confirmed firsthand in our redesign of the 99designs website last year.
So we created an ebook to help customers and designers think through what they wanted to accomplish with a landing page, and what information the designer really needed to be able to successfully create one. It’s directed primarily at customers, but don’t let that turn you away. It’s a very useful read for designers. Flip through it to get an understanding of what the customer’s goals are with a landing page so you can design one effectively.
To introduce you to the e-book we have assembled a few tips here from the former 99designs Art Director Kyle Wai Lin on what he focused on for the major overhaul of the landing page for 99designs. Read through it and apply it to your own process!
Design in Action: A 99designs landing page
For this page, conversion is the highest priority. We hope users will read the headline then get started right away with a logo contest. That’s why Kyle provided a generous amount of white space around the headline and the CTA—because it helps to reduce the degree of distraction around those all-important features.
Given the importance of approachability in brand narrative, Kyle wanted our redesigned website to communicate in an open, human way. He thus punctuated headlines like standard sentences. This gives the sense that we’re just ordinary people speaking directly to you. Yet, for the rest of the text in that first view, all-caps were used. The change in case is intended to let users know they’re now looking at buttons, menu items or a call to action.
Along with the font, color can help guide users through your landing page, delivering additional information about your brand. In the case of our site, Kyle looked at the original 99designs logo. He used a great deal of orange in the above-the-fold part of the site, where messages are first constructed and actions framed. Blue, on the other hand, was used to denote on-page “utilities” like the CTA button and contact information block.
A good landing page design will include different visual states for various user interactions. Menu hovers, lightbox overlays and layouts for different devices are all part of a basic landing page design. For mobile, the same rules apply, with the added variables of size and orientation. For every one of the basic landing page sketches he begins with, Kyle creates a version for web, one for tablet and one for mobile.
So there you have it! Landing page design at its most basic. For more information on how customers are looking at this design medium, and how you can learn their perspective to help achieve their design and business goals, please check out the rest of the landing page design ebook.