After using apps and browsing Web-optimized sites on smartphones and tablets, accessing the Web on a laptop feels unnecessarily cumbersome. Getting to content is done much faster and more easily on mobile devices, as their interfaces are less cluttered. Yet, this clutter is there for a reason, which left me to wonder how Web designers approach, or should approach, design as a means of delivering content.
Capturing audience attention on the Web is now harder than ever. People are no longer delighted by overwrought graphic elements that compete with the actual content. Many site visitors use the “Reader” button on iOS devices, or apps such as Instapaper or Readability, that strip away the design to present just the text and images. In that sense, we’ve all put away childish things, and there is a yearning out there for elegant simplicity that Web designers urgently need to address if they want their messages to be seen.
Simplicity and usability are not just functional benefits, they generate satisfaction and leave a positive emotional impression in users. Our founder, David Ogilvy, would agree that effective interfaces don’t have to come at the expense of creativity. In fact, effectiveness is intrinsic to beauty and storytelling.
A few crucial Web design tenets are beginning to make their appearance. Some of them are topics that designers have been discussing for years but never totally embraced, while others really are new, and have been prompted by technological advances. However, when applied all together, these approaches can drastically change the way people experience the Web:
Ruthlessly Focused Content Strategies
Web designers need to concentrate both on what our audience needs and on the specific business goals of our client or organization. That’s where success is to be found. But somehow, we forget about this simple maxim when decision time comes. It’s tough to choose what features to cut, but cut we must…mercilessly. Let’s offer the content that directly satisfies user and business needs, and nothing more. This is liberating. There are way too many websites out there following the “kitchen sink” approach to content strategy.
As Luke Wroblewski advises, disciplined content selection can be achieved if we start a redesign by thinking first about the mobile version. Because of smartphones’ form factor and contextual limitations, designers are forced to be judicious when deciding what content to include on their sites, and this is a great way to make some tough decisions.
But what if, instead of adopting mobile first, designers pushed themselves to think of mobile only? It really is time to make even responsive design almost unnecessary by crafting “simple” design instead. Yes, design accommodations will always be necessary for each platform, but we will minimize the need for complex cross-device coding if we start the design process with unabashed simplicity in mind.
Easy To Use, Content-Focused Interfaces
Nowadays, people enjoy Web content on four different screen sizes (smartphone, tablet, laptop, and TV) and gratuitously heavy Web design is getting in their way. Consider the ubiquitous multi-column grids with myriad content boxes all over the page; multi-level navigation schemes; long rows of tiny icons and links; rollovers, overlays and flyovers; containers with shadows, highlights and heavy color gradients.
Content and brand identity, not so much the styling of interface controls, should define the look and feel of a website or an app. Design must work in the service of the content and specific usage context, and be subordinate to both: let’s take full advantage of scroll- and swipe-friendly interfaces that require less pre-emptive visual cues. Let’s use content to navigate to content, and rely on great typography to establish clear hierarchies and a beautiful look and feel. The resulting sites will be both satisfying to browse and lightning-fast.
Simple, Flexible Layouts
Web pages need to be malleable enough to accommodate a multiplicity of screen resolutions and form factors. This fact calls for an approach to page layout that favors smart fluidity: page elements need to graciously conform to whatever available screen real estate there is.
We should consider adopting a nascent trend that’s bridging the traditional and the mobile Web. This trend is the increased usage of two main layouts for content indices: the thumbnail grid and the single-column list. Both are very flexible, fluid, and consistent. And both harken back to modernist design—a philosophy of craft that placed more importance on function than on form, while acknowledging that without beautiful form, optimal function would be unattainable.
Also, left-hand vertical navigation fell out of favor a few years ago, when horizontal navigation became the trend. We abandoned vertical navigation because of the lower resolutions available at the time—horizontal screen real estate was at a premium.
That’s no longer the case. We now have retina-level resolutions, wide displays, and tablets capable of landscape layouts. If anything, we see too much empty space to the left and right of browser windows these days. Perhaps it’s time to bring back the left-hand navigation, at least for the desktop versions of our sites, alongside truly fluid grids.
Finally, vector-based design packages, like Adobe Illustrator or Fireworks, are even more useful these days when screen resolutions and sizes vary so widely. Photoshop bitmaps need to be redone when moving a design from resolution to resolution, but vectors, on the other hand, scale easily and automatically. Starting our designs using these vector packages could save us time down the road.
Typography as the Cornerstone of Web Design
What if home pages didn’t always and automatically involve a large photo carousel at the top? What if websites didn’t need to look like “websites”?
With the current and growing ability to use beautiful, custom Web typography, and given the fact that text will be the main building block of the Web for the foreseeable future, our recipe for visual design success should revolve around good typesetting and type treatments. Even system type families, like Georgia, Tahoma, or Times New Roman can be rendered beautifully, if designers apply classic typographic principles to their craft.
This means no more hard-to-click/press, tiny clusters of utility links all over the page. It also means embracing large, luscious typography to define the look and feel of a Web page, much like type is integral to the look and feel of printed matter.
Besides a “mobile first” approach, websites should be conceived and built from a “social first” perspective. The most successful digital experiences are social experiences, by definition. Social media is attractive because it addresses a deep human yearning for connection and relationships. The first impulse we tend to have when we find something that powerfully grabs our interest is to share it with our friends and loved ones. Hence, the urgent need to create relevant, engaging content for our audiences. Social media’s word-of-mouth effect will take care of the rest, spreading our message like wildfire among our target audiences.
The five tenets above are, in fact, fairly tactical ways to approach Web design from a different angle altogether, to achieve a degree of simplicity and relevance that will both delight users and inspire brand loyalty. This approach requires a certain humility on the part of content strategists and designers, but in the end, the results will corroborate our investment.