Graphic Design

There are a few new graphic and video trends for 2016 that will help set your site apart and enhance the user experience.  After all, we all want our website to be the red apple in the basket of green apples, but we still want it to BE an apple.  The main trends I’d like to discuss in this article are Responsive Design, Long Scrolling Pages, The End of Sliders, Microinteractions, Simplifying Graphics, and Flat Design. Combining these trends will produce a very appealing website that will remain so for years to come.

  • Responsive Design
    • Various size of graphics fit different screen sizes
    • Sites are easy to read and navigate with minimum re-sizing, panning, and scrolling

Responsive web design (RWD) is becoming more important as the amount of mobile traffic now accounts for more than half of total internet traffic. This trend is so prevalent that Google has begun to boost the ratings of sites that are mobile friendly if the search was made from a mobile device. This has the net effect of penalizing sites that are not mobile-friendly. If your site is not mobile-friendly, you need to update it ASAP or risk the penalties.

  • Parallax Scrolling/Long Scrolling
    • This is a technique where background images move slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion
      • Makes the user want to move with the content
    • Example

Parallax scrolling or long scrolling is a simple way to embrace the fluidity of the Web. There is some question as to whether this type of scrolling is beneficial to a user’s experience on a site. Some people believe that this scrolling engages users and improves overall user experience, however, a 2013 study by Purdue University, revealed, “… although parallax scrolling enhanced certain aspects of the user experience, it did not necessarily improve the overall user experience”. This trend is all about individual preference.

  • Death to all Carousel/sliders
    • All elements that slide, fade and scroll on a page should be retired
      • Users want quick and digestible content

The problem with rotating banners boils down to the fact that everyone thinks their message is the most important and should be the first thing users see. Every department and decision maker want their message on the home page. Remember, design by committee never fails to fail.

Chris Goward, from Wider Funnel had this to say about carousel sides, “We have tested rotating offers [banners] many times and have found it to be a poor way of presenting home page content.” With the increase in mobile users, this is only going to become more accurate; you can’t scroll through banners [easily] on a mobile device. Don’t bombard users with information without them even moving a finger.

If your site has rotating banners or image carousels on the home page please consider redesigning the site so users are engaged, stay on your site and learn more about your company. Slide04

  • Microinteractions
    • Design with detail
    • Change a setting, sync data/devices, set an alarm, choose a password, log in, set a status, favorite/like something, etc…
    • Signature Moment
      • Microinteractions that have been elevated to be part of the brand
      • Example: Facebook “Like”

Microinteractions are hard to define because they are everywhere. They are the things that make something on the web unique, useful, and user-friendly. They can be funny images, expressions, hidden functionality, smart personalized data and more. Every time you change a setting, sync data/devices, set an alarm, pick a password, log in, set a status, favorite/like something, (the list goes on) you’re engaging with a microinteraction. Microinteractions are the contained product moments that do one small task. Whenever you mute your phone, rate an app, or set a status message, you are engaging with a microinteraction.

Microinteractions are defined as “the contained product moments that do one small task.” They exist around and inside of features, in every app, website, appliance, electronic device, etc… You may only ever notice a microinteraction if it doesn’t work correctly or if it works surprisingly well and is unique, classifying it a Signature Moment. Signature Moments are microinteractions that have been elevated to be part of a brand. Dan Saffer wrote the book on microinteractions, Microinteractions: Designing with Details, and had this to say about Signature Moments, “Signature Moments are those microinteractions that are product differentiators. A custom trigger control (such as the original iPod’s scroll wheel) or an elegant “loading” animation or a catchy sound (“You’ve Got Mail!”) can be marketed as though they are features and used cross-platform or in other products by the same organization. A Signature Moment will help create customer loyalty and recognition. The Like button on Facebook is now so well known that it’s part of the brand.” When designing anything new for your site or company, try to design with microinteractions or a signature moment in mind. Slide05

  • Illustrations are overtaking IRL graphics 

The web graphic Minimalist era is coming to an end, and sites will stand out in 2016 if they have freehand illustrations built into their design. It’s more work, but it makes for better, more stunning results. (Check out our new site!) Slide06

A minimalist style that has been getting more and more traction is flat design.

  • Flat design
    • Style of interface design without any stylistic elements that give the illusion of three dimensions and is focused on a minimalist use of simple elements, typography and flat colors

This style of design makes conveying information easier while still looking visually appealing and approachable. There is no excessive use of drop shadows, gradients, or textures which allows interface designs to be more streamlined and efficient. This makes it easier to design an interface that is responsive to changes in browser size across different devices (RWD). With minimal design elements, websites are able to load faster and resize easily, while still looking sharp on high-definition screens.Slide07

There are of course loads of other trends for 2016 to consider, and I’ll just list them here.  All these topics have been covered in the past, but are still prevalent in 2016 web design:

  • Animation
    • Enhances user experiences
    • Adds powerful options for visual story-telling
  • Color
    • Moving away from the ’60s era color palettes and towards brighter/richer colors used in ’80s and ’90s
    • More use of RGB color
      • Provides a much more saturated/rich way of presenting color
    • Use no more than one or two primary colors in a palette
      • Minimize the amount of colors and get bold with the one or two bright colors
  • Craft
    • Real attention to detail
      • In both the traditional sense of drawing and making physical objects and in the digital interfaces/services
      • Pay attention to every facet of the user experience
  • Identity
    • Embraced language in all its forms
      • Motion, sound, words, images, etc…
    • Engage on a more emotional level
      • Shift from what you want your audience to know to what you want your audiences to feel
    • Try to get a more interactive relationship with your clients by embracing more adaptive and responsive design systems
  • Interactive
    • Users like interaction especially if it helps communicate your brand or service
    • Designers need to think about voice, motion, shape, sound, behavior, ritual, etc…
      • Since websites are becoming more simplistic in design, the subtle interactions can make it unique
      • Hover effects, button animations, menu takeovers can create a more interactive experience for the user
    • If you use interactions, make sure they’re optimized for mobile devices
    • Something to look forward to:
      • Web content is becoming increasingly aware of a user’s location. This will allow designers to tailor design and messages to users based on proximity
  • Cohesion

    • You need a multi-disciplined creative agency to help with everything; where strategy, video, design, digital, advertising and industrial design all sit at an interwoven table, continuously working together

 

 

Leave a Reply