"Judgments on website credibility are 75% based on a website's overall aesthetics."
British Computer Society
UX has finally come of age and the quality of sites has significantly improved. This is due in large part of mobile becoming the primary channel forcing simpler designs.
Here are 4 trends that have emerged in 2016:
1. Rows + Panels
Row based design is comprised of rows, not columns. Columns complete with other columns, displaying different content. A row-based design only shows the user one message or type of content at a time, delivering more impact.
Panel or card based design is a grid based layout. It was first established most prominently by Pinterest. It presents easily scannable content. Since people scan web pages, not read them, it provides a more satisfying experience.
The above example is part of a home page design we did for the software company Exa. It combines a row based design with cards as well as a horizontal scroller.
Usability tests have proven people like to scroll both vertically and horizontally as long as they are rewarded with good content. The idea that content should be 'above the fold' is a print based concept that causes overly complicated layouts.
"Infinite scrolling can lower your bounce rate. Time.com's bounce rate dropped 15 percentage points after they adopted continuous scroll."
Sam Kirkland, Poynter
2. Responsive Web Design (RWD)
Mobile is the primary channel for web searches now. Having a responsive site or responsive web design is now critical for companies looking for more business and engagement. RWD is a best practice, not a trend.
"77% of mobile searches are made when a desktop or laptop is available"
Mike McEvory, Web Presence Solutions
RWD is based on breakpoints, often there are four: 1 for a mobile phone, tablet, desktop standard and desktop large. Row and Panel layouts are RWD friendly since they adapt well to breakpoints.
3. Heroes + Hamburgers
A hero image is a full screen or full-width photo near the top of a home page. And a Hamburger menu is indicated by 3 horizontal lines, when click they expand to the full navigation. Both are firmly entrenched as a design standard now. They are simple and powerful.
The example below is a site we created for the Concussion Legacy Foundation.
While the 'Hero + Hamburger' may seem cliche, they provide a well-resolved design convention for displaying a compelling visual message and efficient navigation. This reduces the time-consuming task of created unique header navigation and visual messaging displays. This means there is less competing visual elements allowing the content to have more impact.
4. Material Design
This is a design language developed by Google. It standardizes the visual display of information Google provides such as events, movies, news, and weather. it is based on a card type of design layout as well as other types of interactive and visual conventions.
As the Google designer Matias Duarte says, "unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch."
Since Google is so pervasive this design language will have tremendous influence on the design of websites and applications.
These trends are based on simplifying the user interface. Whether it's the layout, color, and typography. Everything need to be simplified so the imagery and messaging can shine through. These trends are a critical part of an engaging digital experience. When utilized effectively they provide the foundation for a successful, high performing site.
Posted in:
Corporate Web Design
Non Profit Website Design
Web Design