A Google search of the definition of ‘user experience’ returns: the overall experience of a person using a product such as a website or a computer application, especially in terms of how easy or pleasing it is to use.

The definition of the user interface is the means by which the user and a computer system interact, in particular the use of input devices and software.

Clearly user experience is significantly impacted by the user interface design, but it is also affected by text content and process flow. The overall aim is the creation of websites and apps that provide unique and clean designs, communicating clearly with the user, which not only attracts users but makes them want to come back. User interface design uses typography, colour and layout to create the best possible user experience. Below I have described 7 user interface design trends that contribute to a great user experience and which I expect will be very popular this year and beyond.

#1 Responsive Design

Responsive design takes a website and re-arranges and resizes certain elements to display better depending on the size of the screen being used to view the content. With the enormous uptake of mobile devices for internet browsing, responsive design is becoming less of a trend and more of a common practice when it comes to web design. Last year Google announced that mobile responsiveness will affect a websites rank in search results, making responsive design a must have. “Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results.” You can read more about this announcement in our previous blog post: Mobile Responsiveness just became even more important for high ranks in Google and you can read more about responsive design techniques.

#2 Flat Design

Flat Design is a minimalistic approach in designing websites and user interfaces where all 3D elements, gradients, shadows and other effects are stripped away. Flat design is about allowing the content to speak for itself. By removing unnecessary styling, it makes for faster loading pages, simpler code, and adaptability. Whether viewed on a desktop or on a mobile screen, flat designs are always legible and adaptable.

Below are some examples of flat design icons.

#3 Material Design

A few years ago Google introduced Material Design which is design philosophy, or more simply put, a style guide for designers to follow. The name “Material Design” is a metaphor for physical materials (such as paper) which have thickness and are impacted by light sources such as directional light and ambient light, and content which is placed upon the materials. The style guide seeks to apply the rules of physics to the way material is depicted in designs, and the way content is placed upon it. Based on these guides, the goal of Material Design is to allow a unified experience across all platforms and devices. It breaks down everything from colour palettes, font choices, spacing, and animation. Just like flat design, Material Design is also content focused. The popularity of this minimalistic design approach will continue to increase as it makes a website or an app look cleaner and load faster by taking out unnecessary elements.

You can view Google’s complete guide to Material Design here.

#4 Card Style Layouts

Card style layouts for mobile and desktop websites are boxed pieces of content that looks like it is featured on a playing card. Card style boxes typically hold one unique piece of content or information. The Card style layout is a great way to organize large amounts of content. It is highly functional and can be easily integrated with responsive layouts; designers can add and collapse columns of cards to fit the shape and size of the screen. Card style layouts have been steadily growing in popularity over the past few years and developing together with other techniques such as responsive design and flat design.

Below is an example of a website designed by Contact Point which uses card style layout. Read more about in our Henry Langdon website case study.

#5 Dramatic Typography

Today’s minimal and streamlined web and app designs allow typefaces to be more dramatic and have stronger impact. With free type kits like Google Fonts, designers and developers are able to use fonts that look great on all screens.

#6 Large Background Images & Videos

One way of making a website stand out is by having great imagery displayed prominently. Large background images and videos can help engage users more; it is captivating and focuses attention on the content. With browsers supporting HTML5 video, increased bandwidth, the popularity of background images and background videos on websites will grow even more.

#7 Greater Use of Animation

When used in the right place and at the right time, animations can truly enhance a users experience and it can convey a message more effectively. Well executed animations can help guide and offer context to the user. Conversely, too much animation or transitions can disrupt the flow and distract the user from an otherwise good digital experience.

The Mollard website designed by Contact Point using parallax techniques is a great example of the use of animation.

Let me know if there are other UI / UX design trends which you believe I’ve missed!

by

This entry was posted on Tuesday, June 14th, 2016 at 9:11 am and is filed under Digital Design, electronic marketing. You can follow any responses to this entry through the RSS 2.0 feed.You can leave a response, or trackback from your own site.