Prominent Trends for UI Design in 2016

The year is going away so fast: seems each day just melts away like a snowflake, and it’s the high time to turn away and revise what deserves to be remembered. No doubt, the 2016 design year was globally dynamic, creative, full of news, and events. Having worked over diverse design projects and tasks as well as in-house studio products in Tubik Studio, we prepared our list of trends in design for web and app interfaces, which got popular this year, illustrating some of the mentioned points with works by studio designers. Let’s get started.

Flat design

Flat design has significantly grown its presence and diversity this year, both in interface design and branding. The design approach is known for its minimalist and concise use of visual expressive means and has established itself as a style favorable for enhancing usability and visual harmony of user interfaces. The most prominent feature which actually has inspired the name of this direction is applying flat 2-dimensional visual details as the opposite to highly realistic and detailed skeuomorphic images.

The features of flat design supporting its steady popularity in interface design include:

• simplicity of shapes and elements
• minimalism
• functionality
• bold and highly readable typography
• clear and strict visual hierarchy
• close attention to details
• thoughtful appliance of bright colors and contrast supporting quick visual perception
• avoiding textures, gradients and complex forms
• applying the principles of grids, geometric approach and visual balance.

Cafe Coupon App 

Thoughtful integration of flat design via diverse interface elements, including icons, illustrations, buttons, tabs, and the like, proved itself efficient for making UI bright, attractive, clear, intuitive, and easy-to-use.

Toonie Alarm

Moreover, this year flat design has set a strong link between branding and UI design, mutually supporting each other in digital products.  One of the fields broadly strengthening this trend was creating logos and app icons flat and simplified. This trend has featured itself not only in brand new projects but also for well-established websites, apps, companies, and products, which have presented new redesigned logos and corporate style visuals redesigned according to the principles of flat design.

Conversational UI

Another broadly discussed trend is conversational UI which has been the object for hot debates and themes for many speeches and case studies this year. Basically, the term “conversational UI” is connected with interfaces that enable users to communicate directly to the system in a way imitating conversation with people. In the vast majority of cases, this sort of UI involves voice manipulation and recognition as part of the interaction.

More and more products are featuring this sort of functionality: some want it just because it’s trendy and fashionable while others find real ways to engage it for problem-solving objectives. Most often it is realized by chat-bots providing a flair of talk to the users. In automated dialogues of this kind, depending on the nature of the product and style of talk which is seen appropriate for the target audience, conversational UI can effectively involve both verbal (language) and non-verbal (emoticons, pictograms, etc.) means of communication.

Among the advantages of conversational UIs, one of the frequently mentioned is the automation of some basic and repetitive operations saving people’s effort for more creative and complex tasks. It can enhance the usability of the product and even make it proactive, giving prompts to the user and improving interaction with the product. Still, there is the trap to overload the product with this sort of communication, based on standard situations and issues while missing non-typical cases or questions which need different solutions. Moreover, by far not all target users are ready to communicate in that way, so this design solution needs to be grounded on extensive user research and testing from the early stages of user experience design. Conversational UI can easily give zest to the user interface. Yet, if it’s not analyzed and tested well, conversational UI can do the opposite and spoil user experience by poor interaction.

Anyway, this year UI designers have thought over new perspectives of applying conversational UI, in particular in combination with AI technologies, and this trend will definitely grow to show new rays of creativity next year. Conversational UI isn’t just another fad: it is the trend providing total or partial changes to certain areas of interaction design and giving an alternative approach to problem-solving and decision-making processes.

Minimalism

This year has given a great bunch of applications and websites designed on the principles of minimalism. They support positive user experience by providing clear and simple interfaces, full of space and air, focused on content and navigation. Minimalist interfaces are characterized with thorough attention to visual elements, not numerous but always transferring a particular message. Minimalist interfaces, both for web and app, also feature sophisticated work with typography and visual hierarchy supporting instant scanning and skimming the content of the page or screen. Moreover, interfaces of this sort usually provide a high level of legibility and readability.

Björn

Custom graphics

The desire of originality sprung out in UI design in the area of custom graphic design of all kinds. More and more interfaces apply custom mascots, icons and illustrations that fulfill multiple goals: adding originality to the visual design concept, enhancing usability, strengthening navigation, and marking out the content depending on its nature and functions. Graphic details play a crucial role in the usability and accessibility of the product and even the slightest changes can bring significant results, speeding up visual perception and understanding interface elements or transitions.

Visual perception is one of the most productive and quick ways through which people are able to obtain information and get it processed by the brain. It influences so many aspects of life that neglecting the issue while creating products for users would be extremely unwise. That is why the aspect of applying visual elements of high functionality in interfaces such as icons and their impact on the general efficiency of the product has been an actual topic in the global design community for a long time. In addition, images push the limits of perception for users who have natural problems with text recognition such as, for instance, dyslexic or non-reading preschoolers.

As for custom illustrations or icons, created for specific products, made according to the preferences and needs of the particular target audience and with a view at certain business goals, they are able to make the product work more efficiently solving users’ pains and satisfying wishes. Perhaps, that is one of the most popular reasons why this trend got so popular in 2016 presenting interesting interfaces with custom graphics of diverse styles and performance.

Weather in UI Design

Another side of this trend is the evolving field of wallpapers for desktops and mobile devices featuring original graphic artworks on a variety of topics. It also can be characterized as a user-friendly trend giving users the choice of means for self-expression and satisfying personal aesthetic needs.

Animated microinteractions

Interface animation is one more hot and debatable topic of this year. Although there is a big army of those who find animation an unnecessary feature overloading user interface and making it more complicated, most users expect motion as an integral part of interaction experience. So, designers and developers work over more and more sophisticated methods to make animation pleasant-looking and problem-solving characteristics of modern apps and websites.

One of the frequent methods of adding motion to UI are animated details featuring microinteractions. Microinteractions supported by clear finalization via motion create fast feedback for the user and make the experience positive and efficient while navigation simple and intuitive. Animated buttons, switchers, toggles and other interactive elements inform users in split seconds activating all the potential of fast visual perception.

Tab Bar interaction

As we mentioned in the earlier article, animation in the interface can create a pleasant illusion close to natural interaction with physical objects which often doesn’t need too much cognitive process. For example, if you pull the object, press it, move out the tab, the movements should feel natural. Most users won’t be able to see this sophisticated work accomplished by designers: they will take it for granted and the fact it makes them comfortable will be the biggest praise for design solutions.

Scroll animation

Scroll animation also got new vibes and perspectives of artistic realization. Thought-out movement of layout elements while the webpage is scrolled enhances user experience significantly and creates the harmonic feeling of one integral smooth interaction rather than perceiving several separate parts or blocks of the page. Moreover, this sort of interaction is aesthetically pleasant and engaging, and these emotions are a good factor of retaining users. This year, full of new updates in design tools and software, showed great practices of sophisticated work on scroll animation.

Organic landing page

Animated tutorials

The tutorial is a vital part of onboarding users for most mobile applications. Certainly, a wide variety of means and techniques are applied to make it clear, engaging, and informative as it is a strategically important element of involving users into further interaction with a digital product. This year designers combined traditional techniques with new popular findings: in particular, custom illustrations and animation brought new vibes to app tutorials, making them more dynamic and enhancing their informative potential.

Social Network Tutorial

Diversity of landing pages

Surely, landing pages were discovered much earlier than 2016, still, this year has brought the new lap of their development and diversity. More and more businesses and social projects take advantage of using them for effective presentation of special services, sales, offers, or issues that need focused user’s attention. Landing pages have also grown their presence in the Net as an effective method of promotion for native mobile apps. Accomplished wisely and thoughtfully, grounded on user and market research and testing, broad usage of landing pages can be also seen as the other user-friendly trend, providing users with necessary information and interactions in a clear and accessible way saving their time and effort. From the business perspective, they also work well giving businesses a flexible tool for original and effective presentation.

Coffee Wings landing page

Brutalism

The trend of brutalism in digital design has rocketed this year getting more and more expressions and diversity. It is often characterized as a web design style aiming at breaking standards and predictable design techniques. The websites created in this manner are a sort of rebellion to sophisticated designs with thought-out symmetry and harmony, complex layouts, and accents of aesthetic visual performance. Vice versa, brutalism is based on simple and raw appearance, in most cases not loaded with many visual details and sometimes even close to plain HTML page. Used wisely, for the appropriate goals and audience, this approach can bring a high level of originality to the website and make it really stand out of the crowd.

Contact List Concept 

Custom grid

According to Internet Live Stats, there are over 1 billion websites in the World Wide Web today. This milestone was first reached in September of 2014, as confirmed by NetCraft in its October 2014 Web Server Survey, and first estimated and announced by Internet Live Stats. The number had subsequently declined, reverting back to a level below 1 billion due to the monthly fluctuations in the count of inactive websites before reaching again and stabilizing above the 1 billion mark starting in March of 2016. With more and more websites coming into play, designers have to be more and more creative to not only make them attractive and harmonic but also give them a feeling of uniqueness and original appearance. That is one of the reasons, why experiments with the grid also won their place in the list of general design trends of the leaving year. A custom grid is a way to save the feeling of harmonic layout and placement of the elements with a higher level of flexibility and originality. However, this sort of experiment requires thorough research and in many cases, the final result comes via several iterations tested and analyzed in terms of usability and visual perception.

Slopes Website

Bold and catchy typography

2016 could also be mentioned as the year of further rigorous practice on typography in the global design community. It brought the world loads of new nice typefaces both universal and created with a view to particular objectives or products. Typography continued its progress as one of the crucial aspects of efficient web and app design, and one of the trends in this domain was practices of applying bold and outstanding typography for webpages, catching users’ attention, and instantly informing them about the core message. In particular, this approach got its development in the sector of landing pages whose quick and dynamic presentation of core data to users has a great influence on conversion rates.

Vinny’s Bakery

Large thematic image

One more trend often found in various designs for interfaces is applying prominent images, which could be either photos or illustrations, as the central visual element of the general composition. Important thing is that the image is never just a placeholder of nice looks: it presents a powerful way to strengthen the informative potential of the page or screen, set the theme instantly, and focus the user’s attention at the significant details. Needless to say, it takes much designer’s effort to choose the one successfully transferring the necessary message and supporting the general stylistic concept.

Healthy Food App 

Handwriting lettering

Custom handwriting lettering also got popular as a design trend and is often used for marking out significant details and images in an original way. Special lettering made by professional designers looks fresh and unique, refreshing the visual performance of the webpage or screen. On the other hand, applied in UI design, it demands additional effort to be tested in the layout as it can happen that hand-crafted lettering looks great separately, but doesn’t work effectively in combination with other elements of the interface.

Real content instead of Lorem Ipsum

This year has featured growing attention to content, its quality, and its performance. In user interfaces, content, and design and interconnected parts that should successfully support each other instead of fighting for users’ attention. That makes more and more designers prefer applying real content instead of well-known Lorem Ipsum, even in cases of creative stages or presentation of design concepts. It gets designers, clients, and users closer to real experience and a more natural feel of interactions.

Website on cooking seafood

Videos explaining or presenting products

Due to easy access to reviewing videos via YouTube, social networks, and other platforms of product presentation, video explainers have quickly established themselves as a popular trend. Naturally, it wouldn’t be logical to neglect such a powerful source of connection with clients and users, so 2016 has brought a great variety of videos presenting the products, companies and services, explaining their benefits and special offers, showing the engaging flow of interaction and connection. They took over the responsibilities of the picture which is worth a thousand words: video explainers quickly show the most important features of the product and let the users know what deserves their attention first of all.

Example of video explainer designed by Tubik Studio for Toonie Alarm

Example of promotional year-in-review video designed by Tubik Studio for Opera

Bright and dark color palettes

No secret, color is one of the most powerful and influential factors in UI design. One more trend in UI design deserving a place in the list of this year is a great variety of color palettes designers choose for applications and websites. Diversity of new fonts and typefaces, as well as research of usability studies, allow going beyond standards and trying new combinations which will take advantage of diverse colors but with it won’t lack in usability. More and more creatives are discovering new horizons combining traditional techniques with innovative approaches in the domain of work with color.

Recipe App

magic.co landing page

To sum up, we can certainly say that in the sphere of UI design 2016 has been the year of creative search and experiments, still, most of them were focused on usability and desirability of the final products. No doubt, 2017 will not lose its chance to polish these trends and open the new ones.

Originally written for Tubik Blog