Web Design Trends We Love From the IMA Winner List
Psst! We won some awards!
We’re pumped about our recent IMA wins. Looking at the winner list, I started thinking about what makes a web design award-winning. A lot of people think of “looks” when they think of web design, but our winning sites also scored high on feature functionality, usability and standards compliance. Good design incorporates all these factors, and our entries for Xcovery and Tyrogenex grabbed two of the top five spots in the IMA Pharmaceutical category.
Keeping things simple and obvious for site visitors, as we did with the Xcovery and Tyrogenex sites, helps drive good design.
Here are some of the other web design trends and best practices I saw on the winner list.
Go Big, Go Bold
I saw a lot of great examples of the 2016 web design trends I predicted: more vivid colors and huge type. Because people spend so much time online, designers are looking for ways to wake people up and grab their attention by being bold and bright. Harbinger Sign doesn’t hold back on color or text size. The result? Bold excitement that’s hard to ignore. In addition, Outward Hound gets a big boost of energy with the pops of colors and big, all-caps headlines in a very fat font.
So how can you incorporate these traits into your website? Here’s an easy way to try a bold color:This site is for an annual report. That should mean it’s boring and conservative. But if you scroll down on the page right past the fold, the second panel pops because of its black text on a yellow background. We’re conditioned to pay attention to black text on yellow (think of traffic signs). Try filling a whole panel or area on your homepage with a color from your company’s palette. It’ll instantly freshen things up and surprise your site visitors.
If you want to command more attention and power, make the biggest text on your homepage even bigger. Your site has a master file to control the look of all your text (it’s called the style.css file). The largest text on your page is defined as the “Headline 1 font” (or H1 for short). If you change the size of your H1 font — let’s say you double it from 28 pixels high to 56 pixels high — you’ll see just how easy it is to breathe some life into your site and stand out a bit in relation to your competitors.
Fun New Features
Color and type are some simple changes you can make to get a dramatic result. We also saw some really interesting and dynamic new features on a lot of the award-winners that get people involved in websites in different ways.
- Resort 98 Acres: This site has a cool slider navigation interface that follows the cursor and flips to a forward or backward button depending on whether you’re on the right or left side of the page. It’s very simple, and since it’s a new feature, it draws you in and makes you want to explore the site
- Generosity.org: I love the “droopy” reveal that happens as you scroll over individual panels. Applying an “ease in/ease out” transition effect, as opposed to a robot-like uniform speed reveal, catches your attention. It feels gentler, which makes it especially appropriate for a site that deals with a softer, humane subject.
- 99 Gresham Street: This site is a great example of how design reinforces a brand. The lovely “99” graphics on each panel are very dressy and make it feel like a high-end art gallery or museum site, which is right on point for a premier property.
Whether you’re looking for big changes or a subtle shift, this year’s IMA winners have plenty to offer for new ideas. Try a few and see how they look.