Design Trends 2015

The internet is a fast moving beast, and web design chugs right along with it. Keeping up with all the new fads and trends can be tough. In this article I will aggregate and explain many important design trends from 2015 and predict new trends for 2016.

Responsive Design

With the advent of ‘Mobilegeddon’ (https://en.wikipedia.org/wiki/Mobilegeddon) Google has transformed the eventuality of ‘responsive web design’(http://www.smashingmagazine.com/2011/01/guidelines-for-responsive-web-design/) into a somewhat harsh reality. Responsive web design involves styling a website to be device agnostic, and has become a necessity for businesses that rely on SEO to bring in customers. Themes for popular content management systems like WordPress are almost all “responsive ready.” If you haven’t made responsive web design a part of your standards, now is the time to get on board.

Flat Design

Is it here to stay? How long will it last? I was never convinced flat design was truly a “design style”. For me it was always more the absence of embellishments than a philosophy of it’s own, but one thing is for certain. The dictums of flat design have been embraced and adopted. There are even sites dedicated to following and indexing the trend. Flat design is marked by a lack of drop shadows, textures, and gradients, while promoting large imagery, typography and an emphasis on spacing.
See flatdsgn.com(http://flatdsgn.com/) for inspiration and examples.

Parallax

Parallax is the asynchronous movement of images in relation to a scrolling webpage. Parallax is also often used to reference websites with other types of animations tied to scrolling. Used in moderation and in the right situations, parallax has become a staple of modern web design. Used not in moderation, parallax is something more akin to the horror days of flash animation.
Some Good Examples:
https://www.epicurrence.com/
http://demodern.com/
http://maaemo.no/about-maaemo
http://moto.oakley.com/

Single Page Sites

Since the debunking of the ‘above the fold myth’(http://uxmyths.com/post/654047943/myth-people-dont-scroll) single page websites have become commonplace. Single page sites are great for landing pages and websites that need to tell a story. You’ll often find special animations, scrolljacking, and parallax on single page websites. Link scrolling animations are often used in place of separate pages.
Some Examples:
https://www.lily.camera/
http://bakkenbaeck.com/
https://squareup.com/payroll

Hero Images

If your website doesn’t have a large header (aka Hero) image, then you must live under a rock. Hopefully you’ve noticed how many there were in the previous sections of this article. The jury is still out on whether or not they actually improve conversion, but ‘some have reported’ positive results.
Naturally the demand for high quality stock photos has gone up alongside the increased popularity of hero images. Nowadays an iPhone 6 and “filters” app are enough to create your own quality stock photos, but for those who need little extra help it’s your lucky day. There’s been a recent revolution in stock photography, and quality free stock photo sites are popping up almost every other week. My current list of these sites contains 40+ links, but for convenience I’ll just include the aggregation sites I use to search through them.
http://www.sitebuilderreport.com/stock-up
https://stocksnap.io/
http://www.pexels.com/
http://finda.photo/
http://librestock.com/

Design Trends to Look for in 2016

Apple TV Parallax

When Apple introduced the new Apple TV, they also introduced the next generation of parallax. It’s more subtle, less jarring, and the direction most well designed parallax sites were already headed. In 2016 we’ll see the maturation of parallax (and motion) in web design, and it will probably look something like what we’ve already seen from Apple.
Above Demo Example: http://designmodo.com/demo/apple-tv-parallax/

Web Apps

The lines between web and app design are becoming increasingly blurred. Apps are being built entirely in web languages, and the increased functionality of the web has necessitated change in design. The hamburger menu and drawer navigation were early indicators of this trend, and now we’re seeing it more with the introduction of iOS and Material Design styles and animation. Look for bleed over from app design into the web.
Two Examples:
http://driveshift.com/cars/los-angeles
https://www.hipcamp.com/

Shift – No hassle service for buying and selling cars	Hipcamp – Airbnb for campsites

Diffuse shadows

Flat design banished harsh shadows. The long shadow trend tried to bring them back but went too far. Diffuse shadows are the new happy medium, indicating depth without creating harsh contrast. Look for diffuse shadows in the coming year.
See this medium article for more examples (photo cred to article) (https://medium.com/@usemuzli/long-shadow-is-dead-welcome-diffuse-shadows-6a1f2ee9a6fe#.7be01nckp)

Subtle Gradients

Monotone is the new modern when it comes to web design, but monotone can also be boring. The loud gradients of the the ‘aqua era’ (https://en.wikipedia.org/wiki/Aqua_(user_interface)) may have been too much, but the monotone of flat is almost certainly too little. It may be purely aesthetic in purpose, but subtle gradients are the balance we’ve been looking for from the beginning.
Uigradients.com(http://uigradients.com/#JuicyOrange) offers up some awesome gradients for your inspiration.

The Return of Print Design

When web design first started to blossom in the 90s, all design rules were thrown out the window and a creative renaissance began. The web was a new medium to be explored, and that exploration led to highlighter colors, tiled backgrounds, and collage based designs. Believe me, sometimes I wish we could go back.
But as screen size and resolution have improved, so have our senses, and we’ve seen the slow return of the rules of print design. Print design has been around a long time, and its rules have been refined by hundreds of years of experimentation. Turns out, there’s a lot the web can learn from print. In 2016 we’ll see the implementation of even more of the rules and styles of print design.

Margins