Design & UX
Article

The 10 Big Web Design Trends of 2015

By Jerry Cao

Remember 2015? The Apple Watch, the new iPhone 6S, falling in love with Jurassic Park again. It seems like only yesterday.

2015 left its unique style on everything, including web design, which continues adapting this year to mobile browsing overtaking desktop. Based on my own discussions with the design team at UXPin, let's explore the top ten trends and how to continue reaping their benefits going forward into 2016.

1. Minimalism

Minimalist sites embody one of the central ideals of web design in 2015: simplicity. Stripping away all but the essential elements does more than give your site an air of elegance – it also reduces loading times, a nice advantage for mobile browsing. Plus fewer elements means easier responsive design.

As explained in the free guide Web Design Trends 2015 & 2016, the minimalist aesthetic also worked together with advancement in visual capabilities, which encourages other trends like HD backgrounds.

In the example above, OMEGA includes only what's necessary: language settings, expandable menu, and the logo for returning to the home page. This draws attention almost exclusively to the hero image of the luxury product because there's not many other UI elements to compete with.

Tips

Free Resources

2. Long Scrolling

Shadow

Source: Shadow

Smaller screens means longer scrolls.

With the "below the fold" myth proven wrong, today designers and users alike are recognizing the value of long scrolling: more creative freedom, improved storytelling, stronger interactions, and simplified navigation (if the site is small enough).

Long scrolling works best for sites with heavy mobile traffic or frequently updating content, and is less effective for sites with heavy media like videos, which drag on loading times.

Tips

  • Sticky navigation menus or jump-to-section options protect against disorienting users, which is a common concern with scrolling.
  • Draw out the playful aspects of long scrolling with effects such as parallax and scrolling-triggered animations.
  • Avoid the negative SEO effects by following the advice in this Moz article and this Quicksprout article.

Free Resources

3. The New Flat Design

Today's flat design has evolved from its roots as an alternative to skeuomorphism. The new, more nuanced iteration of flat design – Ryan Allen calls it "Flat Design 2.0" – offers more opportunity for details and flourishes:

  • Lighting glares and highlights
  • Gradient and/or drop shadows
  • Greater values for detailing

Like minimalism, flat's simplicity remains its strength. The almost cartoonish graphics, legibility-first typography, and playful colors keep the style geared for easy comprehension.

Tips

  • Ghost buttons can be used outside of flat design. Their transparency keeps focus on background image, making them a popular addition to hero images.
  • Flat's simple graphics make loading a breeze. This works perfectly for responsive design.

Free Resources

4. Powerful Animations

Bugaboo pram animation

Source: Bugaboo

Animation: Spicy Thai menu system

Because motion attracts attention, animation can influence the visual hierarchy of what gets seen first. Moreover, animation also show relations: imagine an animation of a window shrinking and flying into the menu – this animation confirms the action's success, and also shows the user where on the menu they can view the window later.

The fly-in menu, as prototyped below in UXPin with the no-code animations editor, demonstrates this principle perfectly.

At the very least, animation gives life to dull actions. A hover animation shows a link is clickable more than a simple color change.

Tips

  • Web and app animations can still make use of Disney's classic 12 rules of animation.
  • Long scrolling formats rely heavily on animation to create the appearance of smooth scrolling. On top of that, animations triggered by scrolling create a more immersive and entertaining site.
  • Loading screen animations give users an estimation on time and entertain them while waiting.
  • Subtle animations in the background, as long as they're not excessive or distracting, can add a little energy to an otherwise stale visual.

Free Resources

  • CSS3 Animation Cheat Sheet – This useful collection of ready-made, plug-and-play animations lets you apply premade CSS classes to any element you wish.
  • Web Animation – A frequently updated guide to synchronization and timing for animation in web pages and APIs.
  • Interaction Design & Animations – Free 80-page guide teaching interaction design techniques based on 47 examples of the year's best designs.

5. Lively Colors

In the past designers were limited to 216 web-safe colors, but now there are millions, an advancement timed nicely with the rise of HD screens.

As explained in Web Design Trends 2015 & 2016, this year saw a rise in bright, lively colors to coincide with the tone of flat design, but these "happy" colors fit well with other trends as well.

The attention-grabbing colors reduce the likelihood of a site appearing dull – minimalism's natural weakness. When used actively with typography, colors can draw attention to certain words or phrases. Moreover, colors serve a valuable function for suggesting usability: think of cards that change color when hovered over, an obvious indicator of interactivity.

Tips

Free Resources

  • ColourLovers – A global community showcasing their own clever palettes and discussing color theory across all mediums.
  • Tint UI – A color picker for copying hexadecimal codes. Allows for browsing by platform (Material Design, iOS, etc.), brands (Twitter, Firefox, etc.), or current trends.
  • Design Trends: Vibrancy of Color – Free guide teaching color techniques based on 22 examples of the year's best designs.

6. HD Backgrounds

With more and more people owning high definition devices, it was just a matter of time before this trend caught on.

HD is any resolution greater than 200 ppi (dpi), while standard definition is 72 ppi. This makes images designed with standard definition in mind appear blocky or blurry on HD devices, but HD images appear fine in SD. That means users with SD displays won't notice the difference – but those with HD certainly will.

Tips

  • Device backgrounds don't usually conform to the 1:1.5 aspect ratio of cameras, so take an active role in cropping. Otherwise, you won't control what's cut and what's seen.
  • Scalar vector graphics (SVG) translate images using lines and points; raster formats (.jpg, .png, .gif) work pixel-for-pixel. Use SVGs for new graphics, and save raster formats for real-life images and video because they have a fixed number of pixels from the start – that's why it's important to capture the media in HD from the beginning.

Free Resources

7. Expressive Photography

Thanks in part to the increase in HD screens, web design continues using higher quality (and at times more artistic) photography.

This is most obvious with the prevalence of hero images – single photos that fill the entire background. Hero images draw users in more quickly, making them perfect for landing and login pages.

Tips

  • Combine custom and stock photography in such a way that the stock photos also look custom – for example, consistent themes and subjects.
  • For free stock photos, try Unsplash, Pixabay, and Pexels.
  • Influence how an image is perceived with color overlays. For example, a yellow overlay on an otherwise drab photo will make it more upbeat.
  • Product photos in natural environments increase sales more than traditional product images by creating context about how it feels to actually own the product.

Free Resources

8. Dynamic Typography

With font rendering no longer a concern and the availability of new, free fonts, typography has begun playing more of a role in web design.

Google Ideas

Source: Google Ideas

Dynamic typography doesn't always mean wild or elaborate fonts – in fact, the most common is simple typography, fitting in with trends like flat design and minimalism. The trend of dynamic typography refers to any text that draws attention to itself, whether simple or elaborate. This includes the typeface that's extremely large or extremely small.

Tips

  • Most of the time, two fonts per site is enough. For variety, experiment with more typefaces, but stick within the same typeface family.
  • Remember the primary goal of typography is legibility and readability. It doesn't matter how impressive your typeface is if it's not understood.
  • Dynamic typography can turn text into eye candy, and it's common to see pages with beautiful text as the central "image."

Free Resources

9. Fuller Interactions

The advancements of HTML5, CSS, Javascript, and jQuery now allow fuller interactions, which actually boost business. This trend developed from the increase in:

  • -Elements that can be clicked (or swiped)
  • -Push notifications
  • -Usage of personalization tools (like geolocation)
  • -Control over revealing content
  • -Scroll-based navigation
  • -Transitions and loop functions

The year also saw more micro-interactions, i.e., a ding sound when you send an email, or an animation to draw attention to a new notification.

Tips

  • Signifiers bypass explaining how things work and make interaction easier. Think about how a hamburger icon labeled "MENU" communicates a pullout menu or how a play button communicates a clickable video.
  • To better understand how users interact and what they expect, try role-playing between user and interface, where one person actually speaks for the future site.

Free Resources

10. Card Layouts

Behance

Source: Behance

Rounding out the top ten is another trend attuned to mobile devices.

The card layout allows sites and apps to display a wealth of content in a clean, organized manner, making them great for browsing, especially when linking to external sites. And because rows and columns can be automatically rearranged to fit different screen sizes, this layout is perfect for responsive design.

Tips

  • The entire card should be clickable, as opposed to only the image or textual links. Fitts's law states that this makes interacting easier.
  • The negative space between cards, called "gutters," should be clearly defined. Don't make users guess the boundaries.

Free Resources

Takeaway

It's more important that you apply the trends based upon the needs of your users than the desire to be trendy. Not all of these trends will work for each site, so always work your way backward from the user.

If you'd like to learn more, the free 185-page guide Web Design Trends 2015 & 2016 elaborates on these 10 techniques, with more best practices and handpicked links to 100 free resources.

Web Design Trends 2015

Read about how to apply these trends, then see them practiced in over 160 examples from household sites like Google, Apple, Dropbox, Spotify, BMW, Versace, Reebok, Adidas, and more.

  • http://www.adriansandu.com Adrian SANDU

    This is a very good analysis of the current web design ecosystem. There are also a lot of reference materials that I will have to find the time to read. Good job!

    • Jerry Cao

      Thanks Adrian!

  • Christer Fernstrom

    Thanks Jerry. I planned to skim through this article in 2 minutes and ended up spending my evening. Lots of good thoughts and great stuff in the references

  • Zeno

    Very informative article. And thank you for introducing me to UXpin. Very good resource, thanks!

  • https://mrdaniels.ch/warz/ Daniel Schwarz

    Hey @jerry_cao:disqus, thanks for mentioning my Sketch 3 article on Designmodo (although the link is wrong). I also write about Sketch here on SitePoint, if you’d like to check my stuff. Great article mate.

    • http://sitepoint.com Alex Walker

      Thanks for the heads-up, @mrdannyschwarz:disqus. Link fixed.

      • https://mrdaniels.ch/warz/ Daniel Schwarz

        (Y) :D

  • John Smith

    Thanks for creating such blogs which will help many web designers to create their websites with latest web design and according to industry standards to stand out in this competitive world .

  • Chris Finiksopoulos

    Nice article !! well explained. Thanks

  • Raghav

    Hey @jerry Cao nice article :)
    I would just like to clarify one thing. In the “Apple Resurrects the Scroll Wheel” link i could not find much about scrolling websites, it was more about the scroll wheel on the apple watch. Am i correct?

  • http://www.proweb365.com/services Minnesota Design

    Thanks for nice remind about these trends. I am looking for a great article about 2016 web design trends…hope to see on this site. ;)

  • http://2slick.com angelo bonavera

    I like ‘Lively Colors’ the most. Most of my customers aren’t big fans of scrolling.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.