10 main web design trends of 2015

Leonid Zverugo

wrote this on Дек 17, 2015

Looking back on 2015, there are many things to remember in all spheres. As for web design, mobile browsing overtakes desktop. Jerry Cao along with UXPin design team have investigated top trends and how to use their benefits in 2016.

 

1. Minimalism

Simple and easy minimalistic design is the main idea of 2015 web design. Leaving only prominent elements makes your site elegant and reduces loading time which is great for mobile browsing. Moreover, fewer elements mean responsive design.

Web Design Trends 2015 & 2016 guide explains that minimalism also works with advancement in visual capabilities, which encourages other trends like HD backgrounds.

Tips

• Save space with slideouts or pulldown menus.
• Apply different degrees of symmetry to make your site look vivid.

Free Resources

• Gallery of Minimal One-Page Websites – A collection of the best one-page websites.
• Best Minimalist WordPress Themes – A nice launchpad for minimalist templates, though not all are free.
• Design Trends: Elegance of Minimalism – A free guide explaining web minimalism techniques basing on 28 examples of the year's best designs.

 

2. Long Scrolling

Smaller screens = longer scrolls.

The myth about scrolling has been proven wrong. Nowadays both users and designers recognize the value of long scrolling. I gives simple navigation, improved storytelling, creative freedom and simplified navigation.

Long scrolling will suit sites with heavy mobile traffic or frequently updating content and it will be not so good for the ones with much media like videos.

Tips

• Sticky navigation menus or jump-to-section options will keep users from disorientation.
• Use playful aspects of long scrolling with effects such as parallax and scrolling-triggered animations.
• Moz article and Quicksprout article will help you to avoid the negative SEO effects.

Free Resources

• One Page Love – A collection of the best single-page websites.
• "Apple Resurrects the Scroll Wheel" – A TechCrunch article which investigates the way Apple Watch breathes new life into scrolling websites.
• How to Create a Parallax Website – A tutorial consisting of 2 parts which explains fundamentals as coding for parallax design.

 

3. The New Flat Design

Jerry Cao says that "Today's flat design has evolved from its roots as an alternative to skeuomorphism." "Flat Design 2.0", the way Ryan Allen calls it, is a new, more nuanced form of flat design. It offers new opportunities:

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

Flat’s strength is its simplicity. It’s easy to comprehend with its cartoon graphic and nice colors..

Tips

• Ghost buttons can be used outside of flat design. Being transparent, they keep concentration on background image.  
• Flat's simple graphics make loading a breeze. It suits responsive design very well.

Free Resources

• Design Trends: Evolution of Flat Design – A free guide explaining flat techniques basing on 18 examples of the year's best designs.
• 25 Flat Device Mockups: Templates for creating flat design mockups on a variety of devices.
• 50 Flat Icon Sets: Digital Synopsis's roundup of 50 flat icon sets that are free to use or peruse.

 

4. Powerful Animations

As motions motion attracts attention, animation affects the order of things that should be seen first. What’s more, it displays relations. Jerry Cao provides an example “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.”

Here’s a demonstration of the principle with the help of fly-menu.

 

Animation breathes in life into boring actions. A hover animation shows that a link is clickable and it’s a way better than a color change.

Tips

• Disney's classic 12 rules of animation.
• Long scrolling depends on animation a lot as they should create an impression of a nice and smooth scrolling. What’s more, animation triggered by scrolling creates a more entertaining website.
• Users are entertained by loading screen animations.
• Subtle and smooth animation give energy to visual (on condition animation isn’t distracting).

Free Resources

• CSS3 Animation Cheat Sheet – Ready-made, plug-and-play animations will you to apply premade CSS classes to any element.
• Web Animation – A guide to synchronization and timing for animation in web pages and APIs.
• Interaction Design & Animations – A Free 80-page guide explaining interaction design techniques basing on 47 examples of the year's best designs.

 

5. Lively Colors

Earlier, designers had only 216 web-safe colors at their disposal. Now, during the rise of HD screens, there are millions of them.

According to Web Design Trends 2015 & 2016, 2015 is the year of a rise in bright, playful colors which match the tone of flat design.

Eye-catching colors can make your site lively and exciting. Colors also draw attention to definite words and phrases.

Tips

• Various colors evoke different emotions, so choose them wisely.
• Find out how color theory applies to design.

Free Resources

• ColourLovers – A worldwide community sharing their own 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 – A free guide that teaches color techniques basing on 22 examples of the year's best designs.

 

6. HD Backgrounds

The number of people who own HD devices has increased greatly and as a consequence, the trend appeared.

HD is any resolution greater than 200 ppi (a standard one is 72 ppi). So, the images designed with standard definition look blurry on HD devices, though, high definition ones look fine in standard definition.

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

• Improving Image Quality on the Retina Display – Advice on tackling HD displays and how to use CSS media queries.
• Browser Shots – An online tool for testing your site's screen resolutions and browser capabilities.
• 20 HD Blurred Background Sets – A collection of free blurry HD backgrounds.

 

7. Expressive Photography

Web design uses HQ and artistic photography which is also due to HD screens.

Herp images prevail now. These are single photos filling the whole background. They are great to attract users so use them for landing and login pages.

Tips

• Use both custom and stock photography but make stock ones look like custom ones (consistent themes and subjects).
• Go to Unsplash, Pixabay, and Pexels for free stock photos.
• You can change the perception of photos by using color overlays.
• 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

• "10 Pitfalls to Avoid When Using Stock Photography" – Design Shack article on ten common mistakes with stock photography.
• TinEye Reverse Image Search – A tool for stock photography for finding a photo's locations on the Internet.
• "The Ultimate Guide to Beautiful DIY Photography – A beginner's guide to taking your own web photography.

 

8. Dynamic Typography

Typography is now of a great importance in web design.

Dynamic typography doesn't have to use wild or elaborate fonts. Simple typography is the most widespread. It also fits popular flat design and minimalism.

Dynamic typography is any texts that stand out and draws attention to itself.

Tips

• 2 fonts are enough for one website. You can experiment but stay within one typeface family.
• Legibility and readability. Any text should be easy to understand.

Free Resources

• Design Trends: Dramatic Typography – A free guide telling about typography techniques basing on 21 examples of the year's best designs.
• Awwwards Typography in Web Design Gallery – Awwward-winning sites selected for their typography.
• "41 Best Free Web Fonts of 2015" – Theme's list hand-picks the best from this year.

 

9. Fuller Interactions

Fuller interaction is available now with enhanced Javascript, CSS, jQuery and HTML5. And it boosts business. The trend has grown from development 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

Tips

• Signifiers bypass explaining how things work and make interaction easier.
• Try role-playing between user and interface in order to understand the way users interact and what they expect to get.

Free Resources

• Interaction Design Best Practices Volume 1 – A free 109-page guide explaining  IxD techniques basing on 33 case studies.
• 2016 IxD Awards – Interaction Awards' best picks for IxD.
• Making and Breaking UX Best Practices – UX Booth's guidelines on the roots of UX design.

 

10. Card Layouts

The card layout makes it possible for apps and websites to show content in a neat and organized way. It’s also easy to browse this in this case. There’s an option to automatically rearrange columns and rows to fit various screen sizes which is great for responsive design.

Tips

• The whole card should be should be clickable.
• "Gutters" the negative space between cards, should be clearly defined.

Free Resources

• How to Build a Card Interface with Sketch App 3 – How to create simple cards with the help of Sketch.
• 10 Material Design Cards for Web in CSS and HTML – A resource for designing cards for Google's Material Design.
• Design Techniques: Cards & Minimalism – A free guide explaining card UI & minimalist techniques basing on 43 case studies.

 

Takeaway

The most important thing is that you should use the trends that correspond to your users’ needs, not your wish to be trendy.

Web Design Trends 2015 & 2016 is a free 185-page guide describing the 10 above mentioned techniques in details along with practices and links to a hundred free resources.