Opportunities, Trends & Tools in Web Design

What makes for an exceptional website design? Can its success be measured (and in both the short and long term)? Is good design ultimately just subjective or can Internet professionals strategize, analyze, test and execute their way to something that's more than just aesthetically pleasing, but functional too?

Even as consumers bring any number and manner of biases toward the digital renderings of website designers - cultural, personal or otherwise - there are many immediate opportunities that Web businesses (and those that perform work for them) must address, leverage and capitalize upon each and every moment they exist in the virtual world. Design is more than just an everyday affair however.

This issue of Website Magazine also looks forward - delving into the current trends and highlighting the most intriguing design tactics, approaches and philosophies shaping the digital experience - not just today, but also those which will shape all online interactions in the future.

While you may already be familiar with many of the opportunities, trends and tools you'll discover below, digital design is continually evolving; those that understand where the Web is headed will be those best positioned for future success.

The Experience OPPORTUNITY

It's simply not prudent to chase every design trend that crosses your path - regardless of how appealing it seems in the moment. The time of Internet professionals like you is actually best spent optimizing the design opportunities existing in the here and now, those which are afforded to each and every competitor on the commercial Web. The chance that each one of us has to improve the virtual experience presented to users often comes down to one major element however - usability.

Visitors interact with websites as they have learned to do over time. They don't usually take the action set before them despite a brand's best efforts. They tune out the noise and tune in to the things they need to accomplish. Good designers (defined as effective in creating an engaging, meaningful experience) are those that put usability first and everything else second. Let's explore some of those opportunities and how your company can make the most of every visitor interaction.

Developing a Visual Hierarchy: There are few things more important to website design than the role of visual hierarchy - the order in which users perceive what they see. Essentially, what makes users determine the relationship of elements on a page when the most basic design principles can be leveraged?

Take a typical content page (a blog post or an article describing a company service or feature) as an example. What would the effect be of using the same font size and weight for page elements with a different business priority? That's right... confusion. Users won't have the visual cues they need to understand what it is exactly that is being communicated. Through a clear, visual hierarchy, however, designers can provide the information website visitors need to complete the actions they want.

Adhering to Web Conventions: Surprises are good... until they aren't. Over time, website visitors have come to understand there are certain ways of doing things on the Web. For example, a logo should always link back to a homepage. Users come to expect these conventions and can quickly become frustrated when the website they are visiting simply doesn't adhere to these common design principles. There are numerous unspoken rules of Web design and Website Magazine's editors have assembled an "Ultimate List of Web Design Best Practices" available at wsm.co/deslist.

Ensuring the website experience designers put forth is functionally sound is an important part of digital success today. But more often than not, users are quickly coming to the realization that brands can do more, and are beginning to expect more engaging experiences.

Current TRENDS in Digital Design

Even with your company's website firing on all its usability cylinders, users' expectations can leave them wanting something more engaging, interesting and out of the ordinary. Fortunately, for today's designers, there's no shortage of trends that can inspire and drive action among users. The three trends addressed below are far from the only ones that demand attention, but are those likely being considered by a majority of digital enterprises in 2014.

INTERACTIVE CONTENT

This isn't your older cousin's Internet - today's Web is more dynamic and interactive and, as a result, presents more opportunities to engage an audience. As the drive toward greater interactivity accelerates, designers are discovering methods to make it happen.

Data-Driven Documents (or D3) are getting some buzz in this regard. The framework enables designers and developers to build interactive visualizations and animations in the actual browser by using Web standards like HTML, CSS and SVG, as well as modifying an HTML document live in the browser using data, while offloading all the mathematical heavy lifting to a single JavaScript file.

The use of D3 is increasingly common and Internet users may have already encountered it on such popular digital destinations as Quartz, the New York Times and the Washington Post. It's easy to get on board the virtual D3 bandwagon, but it's not always easy to get started. There are, however, some new charting libraries that make quick work of the opportunity - particularly for brands that have data-driven content to spare. Ember Charts, for example, which is built with Ember.js and D3.js frameworks, includes time series, as well as bar, pie and scatter charts, which are almost impossibly easy to extend, modify and make one's own (via tooltips, labels, mouse-over effects, etc.).

D3 isn't the perfect fit for those 'Net professionals whose audiences demand greater visual detail though. Photography is of paramount importance to retailers in particular, and the ecommerce industry as a whole is seeking out creative executions to do just that. eBay, for example, just acquired visual fitting room PhiSix, which creates 3-D models of clothing from photos and pattern files. These are now common technologies and play a central role in the completed design of retail websites.

GRID-STYLE LAYOUTS

Popularized by Pinterest, there has always been a great deal of structure to social news feeds. Today, Pinterest is far from the only digital destination taking advantage of the grid-style layout, which condenses content into a format that is far easier to scan for end-users. Fortunately, for those willing to give it a try, open source JS libraries exist (e.g. Masonry) that do a lot of the heavy lifting.

Despite the increased use of grid-style layouts, there is risk associated with chasing the trend. A recent study from the University of Miami School of Business Administration found that when large assortments of products (many options) are displayed with images rather than text, shoppers are less likely to purchase. When a smaller selection of products is displayed however (e.g. four types of crackers or eight different nail polishes), it makes no difference in the likelihood of purchase - whether or not the visuals or text are used to share the information.

Essentially, even though consumers prefer to see products visually, when the choice set is large and presented visually, shoppers will spend less time examining individual options as well as the entire choice set, becoming "more haphazard and less systematic" in the examination (compared to when words are used to describe the choices).

"There is a tendency for mobile app designers to use graphics almost exclusively," said Claudia Townsend, an assistant marketing professor, who conducted the research with Barbara Kahn, of the University of Pennsylvania's Wharton School. "This study shows that although images are attractive and fun, when a large product set is shown with images only, there is a tendency among consumers to gloss over them rather than make a purchase."

MOBILE FIRST & RESPONSIVE

Bring up the topic of using frameworks, and you'll receive a variety of responses from designers. While they allow for rapid prototyping and tend to speed up development overall, the complaint is that the result is similar-looking sites, regardless of how much customization is made.

Responsive design, of course, is definitely one of the most important industry trends, but the influx of interest has driven many enterprises to rely on frameworks such as Bootstrap. It's adored by many and loathed by many too, but one thing is for certain - it's here to stay; particularly as larger brands start adopting the approach.

E-commerce solution Miva Merchant, for example, recently released a new bootstrap framework for its Miva Store owners. The framework leverages many of Bootstrap's best features including homepage sliders, drop-down navigation, modal windows and, what's more, supports all of Miva's built-in features - from its "Imagine Machine" to its breadcrumb navigation.

"The goal in creating the framework was to provide our development community a foundational framework to build responsive websites for their clients," said Brennan Heyde, VP of developer relations at Miva Merchant. "This framework will help our developer community build better websites, faster than ever before."

EVERYTHING ELSE

Web design trends are continually emerging; complete with new approaches to old problems and new technologies to make digital experiences faster, more interactive and engaging. To stay ahead of the competition, explore these trends, discover new tools and learn how to leverage tactics to improve usability and make a meaningful impression on users, by visiting Website Magazine's Design & Development Digest channel (wsm.co/desdevdigest).