Web Design Trends: What Can We Expect in 2017?
Former front-end dev, now trying his hand at drawing and taking pictures.
2016*, served with its very own asterisk, a turbulent year to say the least. It is only appropriate that we take a moment to remember the wealth of iconic musicians, authors, actors and revolutionaries that we sadly said goodbye to this year. Kick starting 2017, let's look at some of the web design trends to keep in mind when starting your designs this year.
Looking Back at Web Design Trends of 2016
I asked around the Big Dog office to think back over the defining web design trends of 2016. The rise of the bot, Apple’s (questionable) touch bar, wearables and smart home technologies were some of the standout moments of the year.
Bold Type & Courageous Colours
Limitations to screen real-estate has always been a concern for designers, now more prevalent than ever, with the increasing amount of expanding mobile and tablet screen sizes emerging. This has seen designers learn how to let headings breathe again. White space is and always will be a designer's friend.
Bold, concise, eye catching statement headings are key to this. The trend over the last few years has seen large impactful image or video backgrounds with the over laying header text allowed the space to breathe and promote what the website has to offer.
Credit: RMS Media Group
This web design trend is sure to continue over the course of 2017, there's no doubting that it is an extremely functional approach. Lately, however, we're noticing designers are breaking away from the norm and using custom made images created for the website, or a mix of illustrations, animations and varying geometric shapes. In the same vein, designers are moving away from the box-centric, responsive driven layouts and looking towards incorporating graphic design styles from the 60s/70s onwards.
Credit: Ville de Val d'Or
Credit: The center for dream research
As a result of CSS3 becoming more powerful, and with browser support for it increasing, we've seen a trend of duotone gradient style images appearing across the web. Yet despite the growth in popularity of Flat Design, Spotify and Instagram were still early adopters of the the duotone style. This trend is set to continue, one might even say "2017 - The Year of Duotone", don't quote me on that however, unless of course it's transpires. Look out for an post update circa December.
Tinkering With The Grid
2017 will be the year where display: flex; will be popping up throughout css stylesheets. Flexbox is an efficient CSS3 tool for page layouts, making expanding world of screen sizes easier to structure.
Flexbox, sometimes a word that strikes fear into some developers due to the ease of which the likes of Bootstrap's grid has allowed developers to build website. However, once you've come to terms with flexbox, aims to provide a more efficient way of positioning and reordering elements within a websites container space. Designer Sarah Parmenter explains how she came upon her 'aha moment' when it came to learning flexbox on her website.
Credit: Sarah Parmenter
If you want some more information, check out Chris Coyier of CSS Tricks guide to flexbox; once you crack it, you'll thank me and him.
Page load-speeds are always a concern for website; as web a web developer I am always looking for ways to lower page load-speeds. When it comes to images, SVGs are the future. Originally developed in 1999, they have only started making waves across the web over the last number of years. A major benefit of SVG images is that they do not make a http server request, therefore lightening the load-times across the site.
So why have we been relying on jpeg and png image formats for so long? The fact of the matter is that we will still rely on other formats. SVGs are not the be all and end all when it comes to images. But when we're working with iconography SVGs wear the crown for the best method of displaying scalable vector graphics no matter what the size change. Cross browser support isn't completely perfect yet, however SVGs are rapidly gaining momentum. No doubt we'll see a lot more articles written during the course of the year.
The Designer and Developer Correlation
Staying away from the 'should a designer code' argument. Thankfully we no longer need to discuss this, because we are seeing designers eager to put an end to handing off static PSDs to developers. Designers and Developers have a wealth of tools such as InVision, UxPin, Marvel, FramerJS available to them. These tools provide the addition of creating dynamic visualisations of their designs, even in browser; thus making the transition from designer to developer as smooth as possible.
The Power of Good Content
Finally, before I wrap up this year's list of web design trends, I have to mention, content. Content is still king, and should be considered at the forefront of the design process. Websites can have all the bells and whistles available to it, but without engaging content a website can appear hollow. I cannot stress enough the importance of strong copy.
2017, should see the design and development process turned on its head, by leading with content-first design. Brenda Barron suggests on wpmudev.org that this needs to be strongly considered. Brenda is of the opinion as a designer, that content-first design will provide clearer guidelines to follow. Realistically, we'll end up with higher quality content instead of trying to cut and paste content into our already approved designs. This ultimately leads to greater consistency throughout the design and build process, making for a smoother streamlined process. If you have the patients and time to restructure your process, this approach sounds like the payoff could be worth it.
Websites with content presented in a concise, intuitive way, are hugely important to a websites search engine ranking also. Google rewards sites with appropriately structured content. The frequency in which a site can produce new content, such as regular blog posts, is music to Google's ears. Our SEO specialist Martin has written a post outlining this in more detail.
The future of web design is bound to be filled with brightly coloured spacious content driven layouts; while I for one am excited to see what designers produce for the web this year. Let me know thoughts on what your own web design trends for 2017 are; tweet me @cathalmacan.
Be sure to keep an eye on Big Dog throughout 2017 we have some exciting projects in the pipeline. Finally according to the Chinese calendar 2018 is the year of the dog; here at Big Dog we're excited to announce 2017 as #YearOfBigDog.