From the archive: Here’s what our web design team was predicting in 2014. Interestingly, plenty of these “trends” hold true in 2023 – and will in the future. The tech might have changed, but the fundamentals – designing for the user – will never go away.
One of my favorite things about being a web designer is how quickly design “fashions” evolve. Web design styles change even faster than clothing styles. What looked cutting edge and modern even five years ago looks stale and dated today. Here are seven web design trends to watch for in 2014.
“Hero” blocks replacing sliders.
Sliders have been used for years. It was a great way to shove a bunch of great content into a single block. Your visitors could simply cycle through and read all about your company, who you serve, what your products are and more. The only problem is, your visitors aren’t using them as often as you might think. They’re scrolling right past them. There have been a lot of different studies and posts on the matter—the simple fact is that they just aren’t fashionable anymore.
The new trend is to use what has been coined the “hero” block. Basically it’s a big block right at the top of the homepage that is usually very visually appealing, with a single block of text describing the product or service and a call to action below that. It looks great, it gets to the point and more importantly—it gets conversions if done right.
Long scrolling home pages
The web-browsing world has finally adopted the mouse wheel. It’s second-nature for most people to scroll down a page. Now designers can confidently take advantage of the vertical nature of a website by creating long scrolling home pages. It’s important to note that the content of these long pages should be minimal ~ 30 to 50 words per block at the most. Get to the point and the visitor will actually read what you have to say. If they wanted to read large blocks of text they would have picked up a New Yorker magazine. People on the web want instant information. The quicker you can give that to them, the more successful your homepage conversions will be. Include infographics, embedded videos, rotating testimonials, anything to engage visitors and push them to contact you or take some action.
“Sticky” navigation
The potential downside to a long scrolling home page is the main navigation. Scroll down too far, and it can be quite a hike to get back to the top of the page to navigate the rest of the site. Making something “fixed” in the same position on a page has been around since the early days of CSS. What we’re seeing now is the use of it on navigational elements. That way, when you scroll down these new long homepage designs, the navigation “sticks” to the top, so you have instant access to the rest of the site. Take Cabinet Paperless for example. Scroll down the page, and the navigation will stick to the top — and also brings the phone number into view to provide easy access to interior pages and a quick way to give them a call.
“Flat” design
This is the “anti-design” trend that came about after too many years of drop shadows, gradients, curling edges, floating boxes and textures. In my opinion it’s long overdue, and I’ve embraced it completely. While one of the more famous moves in this direction was Apple’s iOS7 update, it had started to take shape long before that. Essentially it’s classic minimalist design updated for 2014. There’s big, beautiful typography, lots of great color palettes and designs that don’t overcrowd the content, and vice versa. This is modern UX (user experience) design at its best, and it allows designers to take a step back, stop over-designing, and focus on the most important design elements—structure, typography and color.
Dynamic form elements
People hate forms. Our patience at this point is probably limited to two—maybe three—form fields at a time. The trend these days is to make forms very clean and simple in design. Hide anything that doesn’t need to be there. For example, make your eCommerce form smart so that I don’t have to choose my credit card type from a list. The form should know “Mastercard” as soon as I start typing “55” into the credit card field. A great example of something you could use is Skeuocard. It’s amazingly cool and super user-friendly. Some more great ideas:
- Put the field labels into the fields themselves, hiding them as soon as you start typing. Or even better, use something like this.
- Show the submit button only after the form is filled out to prevent user error and confusion.
- If there’s an error, make it crystal clear and leave the other fields intact.
- Make uploading files easy.
Mobile optimization is a must
We’re almost at the point where a non-mobile-optimized site is unacceptable. Whatever type of mobile optimization you use (responsive, a mobile plugin, a separate mobile theme, etc.), make sure it works for the task at hand. Just remember, the whole point of a mobile site is not to make the big website smaller. It’s to give people what they want when they’re browsing the web on a mobile device. You don’t need to duplicate the entire site.
Ecommerce aside, when someone visits you from a mobile device, they tend to want one of three things:
- To learn what your company does at a topline level
- To get directions to your office
- To call you immediately
For visitors who want to browse your full site on their tiny phone, provide them with a link to do so (and a link to go back to the mobile version from the full site as well).
High resolution graphics
Along with mobile optimization has come higher resolution graphics to view on mobile devices. Most mobile devices come equipped with a high resolution display, which means it can serve up graphics that are twice the resolution of the graphics you’re probably displaying now. Can they still display lower resolution graphics? Sure they can. But they won’t look as crisp and clear as they should. Make sure you optimize your graphics for those high resolution displays, which at this point are no longer just on mobile devices but laptops as well. Soon we’ll be seeing them everywhere, and it’s only a matter of time before they replace almost all screens as we know it. So get ahead of the game and be sure to optimize those graphics and photos!
