Digital Design Trends for 2017

Trends are well-known changes that happen in all creative fields, and web design is no different. They are the driving factors for evolution, which (for the most of the time) push industries forward for a better image.

The web is a unique univers which is constantly changing, and with that in mind, here are some of the most important common trends, I believe, are coming for 2017:

  1. More ‘mobile-first’ approach

    As suggested in the name, mobile-first design is the process design for mobile (or smallest screens) first, then working up to the bigger ones.

    The design approach mobile-first approach isn’t new to 2016 and has been around for a couple of years now, but with mobile-phones now officially named as the primary device used for browsing the web, more companies are realising the importance of having a site that effectively delivers content on smaller screens, and are rushing to get their responsive website on-line.

    mobile-first

    Content is designed to fit on mobile and smaller screened devices first, then you work up towards the larger-screened devices.

  2. Wider use of responsive design

    Responsive design is also something which has been around for a few years, and over the coming year is going to have an even bigger number of companies, who are building responsive-based sites.

    For those who may not know what responsive design is, it’s essentially an approach to building a site using CSS media queries and flexible grids/layouts to create a single, dynamic site which adjusts and re-jigs it’s content to best display itself on various sized devices. It works hand-in-hand with mobile first, as mobile first designs the experience and the look, and responsive implements it.

    Responsive design allows businesses to pay for just a single site project delivering content on mobiles and tablets, all the way to laptops to big-screened desktops.

    Cost-effectiveness aside, the reason we anticipate even more brand’s employing this is because of an update to Google’s ranking algorithm which dropped in April last year. To sum it up, Google’s update now boosts the rankings of sites which optimises it’s content (and thus user experience, a la the mobile first principle) to mobile devices and users. Any site which isn’t optimised for mobile is set to see a major shake up in where it ranks online. See more at Google mobile-sites.

    Is your web site ‘mobile-friendly’ ?
    Make the test with this handy tool delivered by Google.

    google-opt

  3. Faster prototyping tools

    Fast prototyping tools are definitely one of the most useful breakthroughs to hit the web-design world over the last year or so and are a must-have tool for any web, UI and UX designer.

    Their ease-of-use and functionality gives an instant matching experience of how the finished product would look and work in the browser, saving precious time and resources. Above all, showing client static wire-frames and mockups, explaining in great detail every subtle animation and transition have disappeared with theses tools. Your clients get WYSIWYG kind of work and feel, without any long, complicated conversations about user experience or transition speeds.

    Rapid-Prototyping
    This screenshot above from Webflow gives an example of what can quickly be designed within the browser, as well as the code it generates for developers to be able to use and implement right away.
  4. UI Patterns and Framework

    The mobile-first and responsive approach to web design, as well as the increasing popularity of WordPress and pre-designed themes, has had a somewhat noticeable impact how many desktop sites work and look today.A great resource for looking at existing patterns for various goals can be found over at UI-Patterns.

    UI-Kit
    There are many great UI kits available today which adopt best practises, such as the above from UI8.net. These kits, which are easily styled and manipulated, give you tried and tested design functionality straight out of the box.
  5. Focus on originality and the decline of stock imagery

    As discussed above, the rise of UI patterns which now places UX as the most important aspect of design, means that many sites now look and work in similar ways, and brands now need to do away with stock imagery, videos and icons and be completely bespoke in order to stand out from the crowd.

    Dropbox
    Dropbox (right), is a great example of a brand who uses illustration to create beautiful, friendly and totally unique visuals which are full of character to appeal to their users.
  6. Big, bold, beautiful typographyTypography is also a powerful visual medium, able to create personality, evoke emotion and set tone. As device resolutions become sharper and type becomes more easy to read on-screen, brand’s will be looking to push the limits of typography even further to appeal to their users.Expect to see an increase in over-sized and full screen type which breaks the grid, beautiful, unique, hand-rendered typography and lots of dynamic text and image layering working in tandem with parallax scrolling.If you’re looking for inspiration for the typography on your own site, be sure to check out Typewolf – a great blog for all the latest happenings in digital typography.
    Typography-Jungle-Book
    The above screenshot, take from the promotional site for the new Jungle Book movie site is a great example of beautiful typography being used online.

    Unique-Photography
     Sevenhills Wholefoods uses beautiful full-screen imagery to draw users in and assist with their brand message and story-telling.
  7. Advance amimations

    As browsers and languages become more advanced, we’re seeing more websites with new ways to engage users and be unique in their approach to communicating.

    This how-to video from Adobe is a great place to start for learning about animation and creating GIFs. It covers the basics of how they’re produced in After Effects and looks at the simple shape, minimal design approach to animation which is becoming increasingly popular.

    More and more brands will be looking at their sites and services to see how they can implement animation to enhance their users experience. Expect to see the use of animation increase, from small hover-states and little touches, to full blown visuals for story telling.

    Animation-1

    Animation-3
    The two examples show how animations are now becoming more central to the design process. One designer uses animations to make UI transitions and changes more dynamic, while another uses subtle movements on an error 404 page for added personality and entertainment.
  8. Video becomes a priority

    They say a picture paints a thousand words, but a video does that tenfold. Much like with animation, a moving image on a page instantly captures the users attention, drawing them in so brands are able to get across their carefully constructed narrative and message.

    Where static imagery is flat and motionless, video is altogether more dynamic, using sound and movement to appeal to the senses and hold attention for longer. Video is quickly taking over the internet, and the above reasons are testament to how successful it is as a means for content delivery.

    Video is already huge, but it’s a trend which is set to continue even more so until it completely dominates the web and all online content.

    The benefits of video outlined above are reason enough for brands to want to incorporate it, but what may be more important is the fight to stay relevant or risk falling off the band-wagon, in what are transitional times for digital content.

    Video-Revenant
    The above screenshot from 200miles.com, a promotional site for the movie The Revenant, uses full screen video and minimal typography to create an engaging experience which instantly draws the viewer in, encouraging them to stay on-page longer and watch the video to see what unfolds.
  9. Courageous use of colours

    Super-rich colours on the internet were very dominant in 2016. Whereas in the past, many brands and designers have typically stuck with web-safe colours, more brands today are being braver in their approach to using colour, as we’re seeing with over-saturation, vibrant hues and a resurgence in the use of gradients. This in part is helped by technological advancements in monitors and devices with screens that are more apt at reproducing richer colours.

    For brand’s who are looking at revamping their colour palettes in 2016, we’d recommend checking out uiGradients, Coolors, and Adobe Color to ensure that your colour choices are bold, engaging, and bang-on trend.

    We will be seeing more vivid colour palettes online in all creative outputs, from photography, illustration, typography, video and UIs.

    Colours-Spotify
    Spotify is really being brave with their colour palette in 2016, as their recent brand update and their above Year In Music interactive site shows Expect to see more brands adopt vivid colour schemes in their online content.
  10. More card and grid UIs

    dribbble-card

    dribbble.com, an invite only sharing platform for designers, is often the go-to place to discover the latest creative trends. It’s also a great example of a functional card UI. With a simple grid, each element is clear, accessible and has equal weighting on the page, allowing user’s to navigate content quickly and easily.

  11. Scrolling and parallax

    scroll-apple

    Apple is a high profile brand making great use of scroll within their site (see above). Keeping the all important product descriptions static on the left, a series of watches cascade on scroll creating beautiful, seamless transitions throughout the page.