What’s Going On in Web Design - Top Trends of 2013

Let’s talk about web design for a second. As an inbound marketing agency (with a sweet spot in interactive), we know how important engaging content is to a company’s online presence. Content will always be one of the major players in web design, as a pretty website with terrible content is still a pretty terrible website. But before we delve into all the intricacies and best practices of web design, lets take a look at some of the current trends that have happened, or are continuing to happen this year:

• Responsive Web Design
• Parallax
• Fixed Headers
• Typography

While there are plenty of other examples of trends that are taking the web by storm, here are some we keep running into within our own projects.

Responsive Web Design

Future proof. It’s a popular buzz-phrase hopping around the Internet right now. It implies (or usually implies) a piece of tech that has been created with the future in mind, built from ideas of what’s next—as opposed to what’s now. And unless the breakout performance of mobile devices this year has been a fluke, future proofing also refers to responsive web design.

In today’s super-connected world, over 84% of smartphone users use their phones to browse the web. That means that over 8 in 10 people who own a smartphone use it for surf the web for both business and pleasure. So you can imagine what a problem that could be for your business if your website can’t be viewed correctly on a mobile device, whether that be your smartphone or tablet. 

Today’s user experience is dependent on responsive web design because when built from the ground up, it can save a lot of time and development later when trying to optimize your web designs for mobile. Because of the rise in mobile users, responsive design is a must now in 2013, where the ability for a website to respond to a wide range of screen sizes is an imperative function.

Parallax Scrolling

Parallax is the new ‘cool’ in web design and it’s about time, as the scrolling style has been around since the 80’s—you know, wool leggings, neon ski jackets, the works. The difference today is how it’s used to provide a seamless UI experience that not only looks good, but flows nicely and improves the overall experience. 

What parallax is, is a scrolling effect where a backdrop image is placed behind the content of your site and creates an illusion of depth by scrolling at a different speed than the content in the foreground. It’s impressive when it’s done right, used mainly on sites with heavy graphics, animations, or intricate navigation. Its uses are also being leveraged for infographics across the web to help give them more style and interaction.

The cool thing about Parallax scrolling is that it doesn’t detract from the overall experience or function of the site. And while overkill is possible with anything in succession, designers are coming up with new ideas everyday to help push parallax to its limits, in both design and imagination.

Fixed Headers

This is a trend we’re big advocates of here at Stratus Interactive. With the advent of infinite scrolling, it’s easy to dive farther and farther down a page these days than ever before… but nothing’s more frustrating than having to flick your finger over and over on your mouse or track pad just to get back to the menu on the top. And that’s why we love fixed headers.

By fixing your top-level navigation to the top of the page, it follows you—unobtrusively—as you scroll throughout the page, giving you continuous instant access to all of the sites navigation options, search functions, or whatever the designer decides to anchor to the top. 

The great thing about fixed headers is two fold:

1. They work on practically any website, with minimal coding. Like, really minimal.
2. They enable a top-notch user experience for your customers/visitors, which in turn benefits you.

When properly built, a fixed header will keep your navigation accessible, without taking anything away from the site’s content or current layout.

New Typography

Up until a couple of years ago, web typography was a nightmare. There were hardly any options to choose from, and of the already limited list of options, even less were viable to make your design pop. Today, those nightmares have turned into dreams for designers, as they can create custom web fonts, or choose from an impressive library of emotive scripts. 

However, like I stated with Parallax scrolling, good things should come in moderation. While custom typography can vastly improve your design when used correctly, it can be absolutely detrimental to your cause when used incorrectly. Regardless of the style, the content should legible—after all, if it’s not legible, what’s the point of including it? Custom typography can also wreak havoc on html processes like weight, size, spacing, and padding. As 2013 continues, and the Internet evolves, the way we view custom typography will play a huge part in the way we do web design.

Wrap Up

While there are many web design trends this year that weren’t included in this list, it’s important to note that the ecosystem changes with each passing year. Things that are relevant today may be archaic in six months time, so it’s important to stay up to date with where the industry is now in order to garner a full understanding of where it’s heading in 2014 and beyond.

Join us next week as we take a look at the importance of user interface design.