If terms like “flat design” and “parallax scrolling” leave you scratching your head, you’re not alone. For those outside of the web design community, it can be difficult to keep up with the constant stream of changing trends. It’s even harder to determine just what you should apply to your own site in order to keep your business looking like it’s up to date. That’s why this month we’re breaking down all of the latest and the greatest innovations in web design. By the time you’re finished reading this article, you should have a much better sense of what’s a must and what’s a miss.
1. Flat Design
If you’ve noticed a distinct simplifying trend in web design, that’s not your imagination—that’s flat design. Rather than relying on shadows, bevels, textures and gradients to communicate a 3D look, flat design instead employs typography and colors to simply distinguish one design element from another. This results in a “flat” look and puts all of the emphasis of flat design on functionality rather than on style.
In doing so, flat design assumes there is now enough widespread computer literacy that users don’t need visual metaphors for real world objects (e.g. file folders) in order to understand the digital world. As you can see on this screenshot of the Windows tablet, there’s no need for items like a calculator to be shaped into a 2D version of the 3D tool. Instead, all tools come in the form of tiles, which are easy and fluid to process visually. Apple’s latest version of their mobile OS (iOS7) will rely heavily on this design trend. Taking a look back at the history of design, the shift isn’t so surprising, as the field often moves between ornate and simplified looks and mentalities. It is akin to architectural Modernism, in which design was stripped down to its most basic, functional elements.
2. Parallax Scrolling
How can you express movement on a 2D website? Why, with parallax scrolling, of course. One of the biggest trends of the moment, parallax scrolling essentially means moving the background at a slower rate than the foreground to impart the illusion of action. The new iOS 7 is a great example of this. As you scroll, do you see how some circles seem to be moving quickly while others barely move at all? Thank parallax for that. Parallax scrolling can either be used as a nice, subtle accent to spice up your site, or a much more obvious feature that dictates your entire site’s design. It is also often used to give flat design more depth.
3. Fixed Header Bars
Back in the olden days, menus that appeared across the top of the page disappeared when you scrolled down, meaning that you’d have to go all the way back to the beginning if you wanted to click on “Home” or “About.” Not so with fixed header bars, which keep those headers in sight at all time. For those of you who are experienced with Excel, think of this like freezing a top row of cells, except way more stylish. Just take a look at what this does for the Puffin Creative website. Scroll down the page and With the header stuck so firmly in view, visitors can navigate much more easily, and there is also a much better sense of continuity in branding, as the site logo never disappears. The clear functionality of fixed header bars makes them an excellent choice for all business sites.
4. Large Photo Backgrounds
Humans are visual creatures, and nothing intrigues us more than a captivating, high quality photo. Websites with large photos backgrounds take advantage of this fact by replacing traditional, colored backgrounds with a beautiful picture of a faraway destination, a single product photo, or the company’s logo. Often, the photo is accompanied by just a few words, all placed above the fold. The site might then be more traditional lower down, or further into the site. We designed a website with a large photo background for Durlings website. As you can see, the focus on the photo is really arresting, drawing the visitor deeper into the brand experience and showing off the company’s product at once. All that’s needed to complement the photo is a logo and a little navigation.
7. Retina Support
Retina display is a feature offered on LCD Apple display screens that places pixels so close together, the human eye can’t pick them apart. Retina support makes the most of retina displays by instantly checking for a high resolution versions of images on your server any time a user loads your page. If found, the high resolution version will then be automatically swapped in, giving your visitors a crystal clear image and an optimal viewing experience.
8. One-Page Sites
If you assumed that a one-page site was a website that existed on entirely one-page, you’re on the money. The goal of one-page sites—which, by the way, often use fixed headers—is to provide the user with an entirely continuous and fluid experience. They can be loaded all at once, or as on-demand page fragments. As you can see from the beautifully designed website for the Milk Media website one-page designs can impart the illusion of movement, as the site’s separate “pages” scroll past seemingly static images. The navigation bar can be used as a shortcut, driving users to their selected page fragment much in the same way they would traditionally be directed to a different page.
9. Responsive Layouts
Responsive design isn’t so much a “trend” as it is an absolute must for all websites, born out of necessity. With more and more users turning to smartphones and tablets to do their web browsing, it’s essential that business websites adjust to fit a variety of screen sizes, so that users can easily read, navigate, pan and scroll. Responsive design does this automatically, based on a visitor’s device. This provides infinite improvement over mobile-specific sites, which are usually just a normal site shrunk down to a smaller size. Web visitors are much more likely to bounce away from mobile sites that are difficult to navigate or look unseemly, and just expect responsive design.