The 10 Big Web Design Trends of 2015

Share this article

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

OMEGA Watches
Source: OMEGA Watches

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
Toyota: Dream Car Collection
Source: Toyota: Dream Car Collection

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.

Spotify: Found them First
Source: Spotify: Found them First

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.

R/M Design School
R/m Design School

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.

Mario Frigerio: Wedding Photographer
Source: Mario Frigerio: Wedding Photographer

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

Beatbox Academy
Source: Beatbox Academy

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.

What were the most influential web design trends in 2015?

In 2015, several web design trends stood out. These included the use of large, high-quality images and videos as backgrounds, the rise of flat design, and the increased use of micro-interactions. Mobile-first design also became more prevalent, as more users accessed the internet via their smartphones. Additionally, the use of scrolling instead of clicking, the popularity of card design, and the focus on storytelling through design were also significant trends.

How did mobile-first design impact web design in 2015?

Mobile-first design had a significant impact on web design in 2015. With the increasing number of users accessing the internet via their smartphones, designers had to prioritize mobile interfaces. This led to the rise of responsive design, where websites automatically adjust to fit the screen size of the device being used. It also led to simpler, more streamlined designs that are easier to navigate on a small screen.

What is flat design and why did it become popular in 2015?

Flat design is a minimalist design approach that emphasizes usability. It features clean, open space, crisp edges, bright colors, and two-dimensional illustrations. Flat design became popular in 2015 because it is simple, easy to understand, and focuses on content, making it ideal for mobile interfaces.

How did the use of large images and videos as backgrounds influence web design in 2015?

The use of large images and videos as backgrounds became a popular trend in 2015. This trend helped to create visually stunning websites that immediately grab the user’s attention. It also allowed designers to convey a lot of information quickly and effectively, making websites more engaging and interactive.

What is card design and why was it a trend in 2015?

Card design is a design technique where information is presented in ‘cards’ – rectangular or square blocks. Each card typically contains a unique piece of content. This design trend became popular in 2015 because it is highly flexible and works well on a variety of screen sizes. It also makes it easy for users to digest information in bite-sized chunks.

How did the focus on storytelling through design manifest in 2015?

In 2015, there was a shift towards using web design to tell a story. This was achieved through the use of large images, videos, and parallax scrolling effects to create a narrative as the user navigates through the site. This trend helped to create more engaging and emotionally resonant websites.

What are micro-interactions and why were they a trend in 2015?

Micro-interactions are small, subtle animations or design elements that guide the user or provide feedback. They became a trend in 2015 because they enhance the user experience by making websites more intuitive and engaging.

How did the trend of scrolling instead of clicking influence web design in 2015?

The trend of scrolling instead of clicking influenced web design in 2015 by encouraging designers to create longer, more comprehensive pages. This trend was driven by the rise of mobile browsing, where scrolling is often easier and more intuitive than clicking.

How did the web design trends of 2015 influence the design of e-commerce websites?

The web design trends of 2015 had a significant impact on e-commerce websites. The use of large images and videos helped to showcase products more effectively, while the rise of mobile-first design led to more streamlined and user-friendly shopping experiences. Additionally, the use of card design made it easier for users to browse and select products.

How have the web design trends of 2015 influenced current web design practices?

The web design trends of 2015 continue to influence current web design practices. The focus on mobile-first design, for example, has become a standard practice in web design. Similarly, the use of large images and videos, flat design, and micro-interactions continue to be popular. These trends have helped to shape a more user-centric approach to web design.

Jerry CaoJerry Cao
View Author

Jerry Cao is a UX content strategist at UXPin – the wireframing and prototyping app . His Interaction Design Best Practices: Volume 1 ebook contains visual case studies of IxD from top companies like Google, Yahoo, AirBnB, and 30 others.

AlexWdesign trendsLong Scrollingminimalism
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form