Web design has evolved a great deal over the last ten years or so. Remember the GIFs of the 1990s, or the more recent preoccupation with flat design? In the last couple of years we’ve seen responsive web design take precedence as more websites join the “mobile” movement, thanks to features such as the new Google Mobile Friendly update.
The following are a few of the most useful web design tips today.
Propagation of UI Patterns
One common side effect of responsive web design (and WordPress) is the fact that a lot of websites look similar. But creating a similar look isn’t necessarily a bad thing today. This is because a lot has changed in the way people consume content on the web, which has led to indiscriminate use of common UI design patterns.
Design patterns have evolved and as such, there’s little left in the way of innovation as far as creating new ones. So in essence, a checkout will remain a checkout and it’s supposed to function as such. The same applies for a login model: unless there’s a really good reason to reinvent it, a basic UI pattern will guide the average user through a seamless experience.
Here are a few good patterns:
• The long scroll: most mobile users are accustomed to long scrolls. The technique is particularly effective for websites that attract users through storytelling, and of course you can break the scroll into well-placed, clear sections that mimic a multi-page site.
• Card layouts: cards act as “content containers” and they are used to present information in small chunks, perfect for scanning. Every card represents a single unified concept, and their rectangular shape means they’re easy to re-arrange for a variety of device breakpoints.
• Account registration: this particular pattern appears whenever you want to register for a new website. It is normally presented as a form to fill or the more convenient “social” button that allows you to sign up using one of your social media accounts.
• Hero images: try using HD hero images to capture a user’s attention – remember vision is the strongest human sense. When using quality images, make sure to back it up with higher bandwidth and data compression so your users don’t suffer from slow load time.
When used properly, animations will help prepare a more interactive and entertaining user experience. The trick is to make sure it adds to your website’s personality and story elements. Animations can be broken down into two main groups:
• Large scale animations. These can include effects such as pop-up notifications and parallax scrolling, and they are used mainly as a primary interaction tool.
• Small scale animations. These don’t require user input and they include hover tools, loading bars, and spinners.
Let’s describe two of the most popular animation techniques.
Hover animations: these offer a more intuitive feel to a website because they encourage the user to mouse over content. If users are unsure about the purpose of a specific feature, they simply hover over it to automatic visual feedback.
Loading animations: these are meant to entertain and delight users when involved in a tedious experience. The best designs for loading animations tend to be minimalism, portfolios, flat design, and one-page websites.