Web Design Trends In 2013 (And Why)

2013-trends

Trends. Who needs them? Except the fashion industry. Let’s face it, that’s one industry that is entirely trend driven. And by extension, hair and makeup. Did you hear that Kim Kardashian went all Michelle Obama and now has bangs too?

Kim Kardashian bangs

If I’m being honest, I have to acknowledge that the digital space has its own set of trends. These trends, unlike the question of yes or no to wearing bangs, are based on what’s going on in the digital space and with technology. Here’s the deal.

The Current Situation

There’s are three technology trends, one in hardware and two others in software, that are combining to create the conditions in which web developers are working. These conditions are the basis for our Web Design Trends.

1. Users are increasingly using multiple screens. At a bare minimum they have a computer and a PC. Tablets and video game consoles also have to be considered. This creates a real need for websites to be viewed on screens both small and large.

2. The primary tech components are going to be HTML5, CSS, & javascript. The future web will be built primarily with these technologies.

3. Data tracking is giving us new insights into how users use our websites and apps.

All three of these current trends mean that one thing trumps everything else in 2013: ACCESSIBILITY.

Web Design Trends in 2013

Responsive Design Goes Mainstream

Web design trends - responsive design

In order to increase accessibility across devices, businesses are choosing to use responsive design to meet that need. Rather than having a website, a mobile site, and perhaps an app. Most companies, out of shear practicality are at least considering responsive design.

It helps that there are tools that web designers are using now that makes this somewhat easy to do. Tools like Twitter Bootstrap or HMTL5 Boilerplate. If you need to learn from scratch, that’s easily accomplished too.

A Focus on Typography

Web design trends - typography

Typography is a popular item to put on a design trend list. It’s almost always true. But the reasons this year are different. In the past year or two, Web Fonts became a thing. This led to a bunch of pretty websites that focused on typography. And all of that is still true.

The reason Typography makes it onto the list for this year is because of how it’s being used. It’s being used as part of the Swiss Style that Microsoft brought into vogue with Windows 8 (the Metro style). This can be seen all the way back as far as the first Zune, which eschewed Apple’s icon based design in favor of large sans-serif text. This is the “bangs” part of the trend. It’s a thing because a lot of people are seeing Microsoft put a lot of money behind it.

But on the other hand, accessibility is THE industry buzzword this year and typography, unlike jpgs, gifs, or pngs, can easily be resized on the fly to fit any screen. It’s for this reason that Typography is still a Big Deal in 2013.

Simplified Visual Designs

Web design trends - simplified visual designs

Since Accessibility is the Big Deal in 2013, it’s no surprise that visual designs are getting more simple. On mobile devices, there simply isn’t room. Also, that guy who loves skeuomorphic design got tossed from Apple rather recently for the Apple Maps debacle.

Also, while responsive design is becoming mainstream, it isn’t exactly a silver bullet for accessibility issues. Making a site work for a series of screen sizes means tradeoffs in design. And those tradeoffs almost always lead to a simplified visual design. Simplicity is the new paradigm of the day.

Consequently, and almost as a by-product, the days of small text and buttons seems to be over. Buttons need to be usable with stubby fingers, not just precise pointer devices. And text needs to be readable, not just sexy looking next to a sweet image.

Icons, or more specifically Glyphicons are gaining importance too. These are small icons that help users understand at a glance what the context is for what they’re seeing. Like all icons, they don’t rely on text and therefore can be understood by both non-English speakers and non-readers.

glyphicons

Story Telling Is Now a Thing

Dangers of Fracking

The Dangers of Fracking: A great example of in-browser storytelling.

Story telling has has been around for at least as long as their have been campfires. That’s not exactly what I’m talking about. For most of the life of the Internet, it’s been a text-first medium. The best way, until the past few years, to go about turning it into a graphical medium was to use Flash or to do something crazy with SVG and XHTML. Tons of people used Flash while only those nerds who felt the need to show off did it the second way. But basically, both of them were hacks.

Flash required a plugin for your web browser (one that Apple famously wouldn’t let happen on the iPhone) and the other way was really just impractical. Except for those nerds for whom it wasn’t. While it’s true you could tell a story on the Internet – via text, audio, or video – the ability to use visual storytelling in the browser is new.

Enabled by HTML5 and javascript (and the world collectively deciding to tell old versions of IE to go and toss themselves), visual storytelling lets designers use the web browser as a canvas where they can create their story or narrative. The results range from extending the familiar scrolling website with multiple layers of text and imagery to create a parallax scrolling website to something much more abstract.

Parallax Scrolling

As I just mentioned above, Parallax Scrolling is officially a thing. It’s been around for a few years but interest online is at an all-time high. It’s interesting to note that our all-time #1 most read article on our website is about parallax scrolling.

You have to admit, with this effect, Taco Bell has never looked so good.

Cantina Bell Parallax Scrolling

Part of the reason for the growth in parallax scrolling websites has to do with the availability of new tools that make designing parallax scrolling website easy. Now any average web designer can bang out a reasonable parallax scrolling website with minimal hassle.

Non-standard Navigation is Increasing

To continue with this trend of accessibility and storytelling, non-standard navigation is increasing.

muffi

You may remember the horrible, horrible, (and sometimes brilliant) navigation schemes that designers came up with for their Flash designs. Well, prepare to feel that wrath for the next few years as designers get a grip on what people like and don’t like. Hopefully, UX will speed up the process.

I’m still mad that on my Android phone, the buttons that do things are at the top of the page. While the rest of my life, and in every other way, the buttons that do things are underneath what they are affecting.

You’ll notice in the Cantina Bell example above, the primary menu is on the right side of the screen, semi-translucent. And the secondary menu is at the top of the screen. This is common among parallax scrolling websites. But I suspect it makes┬áJakob Nielsen want to pull what’s left of his hair out.

Jakob Nielsen

“I’ll take these hands and rip both sides out by the root!”

UX Centered Design

ux-honeycomb

We’ve been writing about it since 2011. Jakob Nielsen has been doing it for at least 15 years longer but finally, UX is getting the attention it deserves.

You know we have our favorite UX blogs to follow. And there are some amazing women in UX you should be following on Twitter too.

What are we all writing about? Ways to improve the user experience. The idea is simple: a happy user who can master the technology is more likely to engage with us, connect with us, buy from us, and otherwise do the things we want them to do.

Yes, there’s an evil side to UX, as there is with most other things, that involves making it easy for users to buy and hard to cancel or manipulates them rather than meeting their core needs into getting them to do something they otherwise wouldn’t.

Both of these ideas: creating a better user experience and creating a more manipulating user experience rest on the raft of new and emerging tools for doing UX. All of these tools provide more ways to track customers, to figure out their patterns, their expectations, and fundamentally what will make them buy/sign up/read/donate to your thing. As these tools continue to grow, so will UX.

In the coming years, expect Good UX and Bad UX to be more of a thing. But for right now, everybody’s still mostly just splashing around in the data provided by analytics tools, survey tools, a/b testing tools, and other ways of measuring the user experience.

6 comments on “Web Design Trends In 2013 (And Why)

  1. Pingback: Web Design Trends In 2013 (And Why) | A Better User Experience : User Experience Design Rx

  2. Pingback: Web Design Trends In 2013 (And Why) | MarketingHits.com

  3. Pingback: My Burger King User Experience Experiment | The Branded Apple

  4. Pingback: The Age of UX: Was It As Good for You as It Was for Me? | Brand New In Gotham

  5. It’s fair to say 2013 is all about Responsive design – we’re finally starting to see companies take the great design they do for desktops and ensure it works on tablet and mobile!

  6. Thank you for your post! I thought that you had most of the trends that are going on these days. Responsive is big right now and people are getting new responsive sites everyday. I also am seeing that more and more sites are becoming simple. Not as much going on.

Leave a Reply