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:
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.
Content is designed to fit on mobile and smaller screened devices first, then you work up towards the larger-screened devices.
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.
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.
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.
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.
- 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.
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.
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.
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.
More card and grid UIs
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.
Scrolling and parallax
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.