Are Web Design Trends of the 2010s Here to Stay?

In the early days of the World Wide Web, it was trendy for webmasters to use every possible effect: animated gifs, blinking text, and auto-playing midis vied for attention on every site you surfed.

While the wild frontier days of the Internet were exciting and revolutionary, trends like red text on patterned backgrounds weren’t exactly easy on the eyes or user-friendly.

Thankfully, we’ve come a long way since the birth of the web. The technology we use to go online has evolved since the days we used to listen to screeching dial-up modems connect, crossing our fingers that no one kicked you offline by picking up the landline.

Web designers have had to evolve to keep up with the changing technology, too. In the past few decades, waves of design trends have come and gone, evolving to place the focus on the user’s experience. Designers today more than ever are focused on minimalism, readability, and ease of use.

But, while things are continually improving, there’s always the possibility of wrong turns and pitfalls along the way, even with trends that seem to be improvements. Infinite scrolling may help display more information and keep the visitor on the page longer, but users may find it frustrating when trying to view a website footer that keeps jumping away when more articles load.

The popularity of fixed elements is understandable: you want to keep crucial information in front of your visitor’s eyes. But it may backfire if those share buttons start blocking your page content. Web designers should keep up with the trends, but also use their creativity to come up with innovative new solutions to problems like these.

When it comes to this year’s trends, it’s impossible to say which innovations will win out and remain, and which we’ll be laughing at 10 or 20 years from now. With this breakdown of 2014’s web design trends, you can decide for yourself which trends are worth continuing, and which ones should be left behind.

Design of the Times: 2014 Web Design Trends

The web has evolved dramatically from the early ’90s where we saw crazy colors and fonts and automatic music playing in the background as soon as a website loaded. Today’s web sees a more minimalist approach, all designed to make it simple and more user friendly. Here’s what you can expect to see more of in 2014.

Responsive Design

• Responsive design means a website automatically adjusts to the size of the screen it is being viewed on.
  • This is critical for web design as people shift away from a traditional computer screen.
    • 90% of American adults now own a cell phone
    • 58% of American adults now own smartphones
      • 60% of cell phone owners use their phone to connect to the Internet
    • 42% of American adults now own tablets
• Responsive web design involves using a mix of flexible:
  • Layouts
    • Everything is sized by proportion, rather than pixels.
  • Images
    • Everything is sized by relation, rather than pixels.
  • CSS queries
• Examples of responsive design include:
  • com
  • com
  • com
• Create your own responsive templates or purchase an existing responsive framework.
  • Examples include:
    • Karma
    • Avada
    • Enfold
• Pros:
  • Less maintenance: one site, instead of multiple sites to design and maintain.
  • Better Search Engine Optimization (SEO): one site means one set of URLs, which makes SEO more manageable.
  • No need to worry about whether or not your site will be compatible with the dozens of new devices that continually hit the market.
• Cons:
  • Implementation can take longer than expected.
  • Technology is still developing.
  • Since images are just scaled down, rather than resized, this can negatively affect page load time, upsetting visitors.

More Scrolling

In 2014, we’ll see more scrolling, because of how easy it is to implement.

• Parallax scrolling: Allows the background of the website to move at a different speed as the rest of the page.
  • Example: Nasa Prospect
  • Pros:
    • Can wow visitors with animation
    • Direct users to call of action
    • Encourage visitors to stay on the page longer as they scroll through the entire thing
  • Cons:
    • SEO takes a hit because there’s only one set of meta information
    • A lot of data on a single page slows page loading time, which can lead to frustrated users
• Horizontal scrolling: Scrolls from left to right rather than up and down.
  • Example: World Wildlife Foundation Earth Hour 2012
  • Pros:
    • Allows designers to house more content on the screen.
  • Cons:
    • Users may not realize they have to scroll to the side, or may not want to scroll to the side to get the full experience.
• Infinite scrolling: Loads page content as a user scrolls
  • Example: Facebook news feed
  • Pros:
    • Faster browsing
    • Interacts well with touch devices
    • Content exposure: infinite scrolling equally exposes new and old content, giving older content a longer “shelf life.”
  • Cons:
    • Navigation:
      • Users are not able to scroll back to or bookmark a particular thing, and will need to start from the top again.
      • Infinite scrolling does not tell users how much data there is to wade through.
    • User focus: When you move away from the scroll, you’ll be brought back to the top, rather than the previous point of reference, making it harder for users to focus on what they were doing/reading.

Less Text

• Instead of text heavy design, we’ll see more design focused around images, icons, and video.
  • com features less than 10 words and requires users to watch a video to understand how to use the app.
  • com features a small paragraph of text and a few words in the navigation bar on its homepage.
  • The-Studio.co.il features only a few words and images.
• Pros:
  • More sophisticated web design
• Cons:
  • Harder to make website designs 508 compliant
    • 508 compliance refers to making the web compliant for those with disabilities who cannot access the internet in the traditional manner.

Flat User Interface

• Flat User Interface (UI) refers to a design that focuses on functionality, rather style.
  • Elements are made to look more like what they are named after.
  • Everything is designed for:
    • Clarity
    • Simplicity
  • It means removing:
    • Shadows
    • Gradients
    • Beveled Edges
    • Reflections
• We’ve seen it already in:
  • Windows 8
  • Apple iOS 7
  • WordPress 3.8
• Flat design works against skeuomorphic design.
  • Skeuomorphic design uses visual detail to make one thing look like something else.
    • Example: Use of wood paneling in car interior
• Pros:
  • Simple user interface
  • Use of bright/bold colors boosts mood
  • Focus on great typography
  • Visuals are sharp and clean
• Cons:
  • Usability concerns: People may not always know where to click or touch to interact.
  • Color palettes can be hard to match: the more colors you use, the tougher it can be to match them properly.
  • Weak typography design becomes easier to spot.
  • Overall design can look too simple.

Fixed Content

• This refers to a page element, such as the navigation bar or a section of content that stays in place on the page while the user scrolls.
  • ca allows horizontal scrolling while the sidebar navigation remains in place.
  • net features a fixed position social media bar on the left side of the website, allowing users to scroll through content while the bar remains in place.
• Pros:
  • Usability advantages: users can find what they’re looking for much easier.
• Cons:
  • Fixed content can waste space beyond the scroll.
  • Some fixed elements, such as a navigation bar, can be difficult to translate to a mobile environment.

Sources

• Mobile Technology Fact Sheet – pewinternet.org
• Responsive Web Design: What It Is and How To Use It – coding.smashingmagazine.com
• What is Responsive Web Design? – smallbiztrends.com
• 17,389 Website Templates and Themes From $3 – themeforest.net
• The Pros and Cons of Responsive Web Design – business2community.com
• What Is Parallax Web Design? – Definitions, Tips & Considerations – unleashed-technologies.com
• NASA: Prospect – nasaprospect.com
• WWF Food Story – assets.wwf.org.uk
• Infinite Scrolling Is Not for Every Website – nngroup.com
• To Infinity and Beyond! The Pros and Cons of Infinite Scrolling – inspiredm.com
• Snapchat – snapchat.com
• The Studio – the-studio.co.il
• Less Text more Multimedia – New Approach in Website Design – designmodo.com
• Lost and Found – Mapping Page – howto.gov
• What Is Flat Design? – gizmodo.com
• Pros and Cons of Flat Design – designmodo.com
• 18 Pivotal Web Design Trends for 2014 – econsultancy.com
• Fixed Navigation Bars: Pros and Cons – awwwards.com