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 Cultural Solutions website 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 Austin Food and Wine Festival website. 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 large photo background for Draped Austin. 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.
5. CSS Transparency
CSS, which stands for Cascading Style Sheets, is what designers use to determine the look and formatting of a document. To understand just what CSS transparency is, take a look Squarespace blog. See how the black word “big” in the background fades to a grayish color behind the main text? That’s CSS transparency, and it allows for sites to feature what would otherwise be distracting photos or text in the background of a site without detracting from the important information in the foreground. In this way, CSS transparency is another important way that web design is moving away from relatively bland backgrounds.
6. 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.
7. Lazy Loading (Infinite Scroll)
Lazy loading, otherwise known as “infinite scroll,” is the concept that a design element doesn’t need to load until the user gets to that point in the page. Sound confusing? If you’ve ever used Facebook, you’re already a master of infinite scroll. In fact, the “infinite” in this term may be why you lose countless hours to the social media giant. Mashable is another great example, presenting an infinite number of stories at the bottom of the page just as you get there, and no sooner. As you might have guessed, this is a great way to get people addicted to your site, and if you’ve got the content, it’s definitely a great idea.
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 Austin Mural Project, 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. Bold Typography Design
As you’ve probably noticed in your adventures on the web, one of the biggest trends right now is bold typography, beautifully showcased on the Austin Eastciders site. Bold typography instantly draws the visitor’s eye, emphasizing the company’s branding, products, voicing and features. Much like striking large photo backgrounds, bold typography has the added benefit of instantly intriguing visitors and drawing them further into the site.
10. 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.
Today’s many web design trends present a cornucopia of options for any site owners looking to update their look. Whether you go for a major overhaul or just a tweak, it’s important to keep your site looking fresh and professional so that every visitor is impressed with your brand.