Web & Mobile

Design Trends

a Trend briefing
last update: September, 2016

View image sources

As our experience with websites and applications is becoming more and more interchanging across web and mobile, the digital designers are looking for more seamless and interactive ways to design across the multiple devices.

The goal is to establish a more standardised and integrative way of designing interfaces that can easily adapt on multiple devices and provide a more unified experience for the users.

Here are some of the latest trends in web and mobile design that we’ve spotted. Enjoy!

1. Simplicity
Simplicity has already become the web and mobile designer's mantra ever since <em>flat</em> has been coined in the designer's vocabulary. This stays the guiding principle for the designers, especially as the interface design for mobile and web experiences is moving towards the standardization. Here are some more interesting examples we have discovered which highlight the simplicity in today's web and mobile design. This high-tech look projecting website for the <a href='http://www.gogoro.com' target='_blank'>SmartScooter</a> combines a simple look with the latest interactive subtleties (transitions, videos, moving text, etc.) found in web design. The brand image is very well created and reflects what the product is all about. <a href='http://lite.ly/' target='_blank'>Litely</a> mobile app by <a href='http://sam.roon.io/litely' target='_blank'>Sam Soffes</a> presents a very clean and minimalistic look. The simple diagonal line separating the before and after effect helps the user clearly perceive the difference. It keeps their focus on the picture (i.e. the results) instead of getting distracted by the app elements. <a href='https://itunes.apple.com/us/app/id927695605' target='_blank'>Canopy</a>, a mobile app which features Amazon products, comes with a really simple and minimalistic interface. This shines the light on the beautiful product photos and triggers that desire to buy. <a href='https://www.behance.net/gallery/T-R-A-V-E-R-S-E/8769919'>Traverse mobile app</a> created by Willis Cundall has a minimalistic geometric look that does not follow the traditional <em>flat</em> aesthetic. This gives an original touch to this weather sharing application.
<
>
Simplicity has already become the web and mobile designer's mantra ever since flat has been coined in the designer's vocabulary. This stays the guiding principle for the designers, especially as the interface design for mobile and web experiences is moving towards the standardization. Here are some more interesting examples we have discovered which highlight the simplicity in today's web and mobile design.
2. Mini animations & micro interactions
Simplicity does not mean that a digital experience needs to be dull, boring or flat in its true essence. On the contrary, we can observe more and more subtle interactive elements being added to a digital experience such as mini animations, navigational transitions, interactive icons, etc. Let's have a look at some examples... Navigational transitions are also becoming more interactive. Here is what Google designers have to say: <em>Transitioning between two visual states should be clear, smooth and effortless and not confuse the user. A well-designed transition does the heavy lifting and enables the user to clearly understand where their attention should be focused.</em> <a href='http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B2wX4iIvu8L6aHVOOGxBOW5jZlE/animation-meaningfultransitions-visualcontinuity_music-tablet-01_xhdpi.webm' target='_blank'>Check this in action ></a> <em>Consider transitions when designing screens and find opportunities to create visual connections between transition states through color and persisting elements.</em> - Google
<p><a href='http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0B2wX4iIvu8L6U0Q0M3FtYUE0VHM/patterns_navigational-transitions_parent-to-child_calendar_tablet_xhdpi.webm' target='_blank'>Check this in action ></a></p> Icons are also starting to become more dynamic as the designers are finding ways to bring them more to life. Here is one example from the <a href='http://useiconic.com/' target='_blank'>Iconic</a>, an icon set created by P.J. Onori.
<
>
Navigational transitions are also becoming more interactive. Here is what Google designers have to say: Transitioning between two visual states should be clear, smooth and effortless and not confuse the user. A well-designed transition does the heavy lifting and enables the user to clearly understand where their attention should be focused. Check this in action >
3. Full-screen forms and inputs
4. Floating elements
Floatings design elements such as share buttons, menu bars, etc are gaining new light at this time. Here are some examples that we found interesting and innovative. Here is an example from Google's Material Design specs of the bottom sheet moving up.
<p><em>Bottom sheets are especially suitable when three or more actions are displayed to the user and when the actions do not require a description. If there are two or fewer actions or detailed description is required, consider using a menu or dialog instead.</em> - Google The blue and yellow floating buttons on Google's Doc and Keep apps are placed in the bottom right corner. The floating menu button concept in action. </p>
<p>Concept by <a href='http://www.materialup.com/aureliensalomon'>Salomon Aurélien</a>. Another floating button example. </p>
<p>Concept by <a href='http://www.materialup.com/kingyoxie'>kingyo</a>. The menu on the <a href='http://www.gogoro.com/' target='_blank'>Gogoro</a> website sticks to the top, as the user scrolls down the pages. Uservoice's feedback button floats in the bottom right corner of an application it is integrated into.
<
>
Here is an example from Google's Material Design specs of the bottom sheet moving up.

Bottom sheets are especially suitable when three or more actions are displayed to the user and when the actions do not require a description. If there are two or fewer actions or detailed description is required, consider using a menu or dialog instead. - Google

5. Full-screen background images & videos
Plain backgrounds are being discarded in favor of bold and remarkable images and videos. It seems the old adage <em>&ldquo;a picture is worth a thousand words&rdquo;</em> is being taken to heart as designers and marketers go for high-impact visuals and slice out chunks of copy in order to give customers a more enriching brand experience. <a href='http://www.thedesignfilesopenhouse.com/' target='_blank'>The Design Files Open House</a> website, a spin on a traditional Australian interior design fare, creates a desire and curiosity for its visitor through full screen creative photos. There are 4 few of them in the main slideshow and all of them wet the appetite. Rather than choose images or videos, <a href='http://ba.stayfaena.com/?_ga=1.28234300.1456008460.1415790779' target='_blank'>Faena Hotels</a> opts to use both on its website. A collage of images greets the website visitors, showcasing various aspects of the hotel. One of these images, however turns out to be a video (in the top right corner) and it launches automatically and discreetly. Full-screen video backgrounds and the videos themselves are at the heart of the <a href='http://www.dadaabstories.org/' target='_blank'>Dadaab Stories website</a>. And to no surprise. The goal of this website is to share the stories of the refugees living in this largest refugee camp in the world. The video format is a perfect way to do this. Billabong, a surf brand, is very successfully engaging the surfers via the <a href='http://www.isurfbecause.com/' target='_blank'>I Surf Because</a> website. The homepage features the mini videos of the well known surfers riding the waves. At the end of each mini video, we see their <em>I Surf Because </em>quote.  As a website user, you can select any of these videos or a large photo and then customize it with your own statement. Full screen videos and images are at the core of this engaging experience.
<
>
Billabong, a surf brand, is very successfully engaging the surfers via the I Surf Because website. The homepage features the mini videos of the well known surfers riding the waves. At the end of each mini video, we see their I Surf Because quote. As a website user, you can select any of these videos or a large photo and then customize it with your own statement. Full screen videos and images are at the core of this engaging experience.
6. Typography with character
Tastefully and purposefully selected types for a website or mobile or custom designed typography can definitely enhance the user's delight. <br/><br/>

With the Google Fonts and Typekit in the horizon, designers have more choice and can be more creative. We can see them using the super sized typography, mixed typography, bold fonts, etc. The blend of typographies helps to set a pleasant experience, with one type of font used for headings, and the other used for sub headings, for example. By reusing a specific combination of fonts on all website pages or mobile app screens, users quickly acclimate to the brand&rsquo;s &ldquo;style&rdquo;.
<p><a href='http://www.luxeat.com/' target='_blank'>Luxeat's website</a> is a great example of such mixed typography. <a href='http://www.mooncampapp.com/' target='_blank'>Mooncamp&rsquo;s website</a> mixes large bold fonts with ethnic ornaments, intertwines bold San Serif fonts with more elegant Serif fonts. The overall look is very &lsquo;out-of-space&rsquo; and would perfectly suit the astronautics context. But since their product is a mobile app that enables to quickly comment on the discussions throughout the basecamp accounts, we feel that there is a disconnect between who they truly are and what their branding communicates. This will probably confuse their website visitors. <a href='https://www.designhotels.com/' target='_blank'>Design Hotels</a> uses a mixture of Infinity, Getaway, Serif and San Serif fonts. This helps to visually separate the different categories of information (headlines, subheadings, etc.), and also gives the reader's eyes a rest so that they are not looking at the same heavy blocks of text each time. Just like the name of this design studio - <a href='http://www.lmnopstudios.com/' target='_blank'>LMNOP Studios</a> - the alphabet is at the center of its brand identity and thus the website. The homepage has an originally stylized alphabet, which projects a playful vibe. Further down, we discover that each letter has a meaning for this studio and through these explanations we can understand what the studio stands for. Very original and creative!
<
>
Mooncamp’s website mixes large bold fonts with ethnic ornaments, intertwines bold San Serif fonts with more elegant Serif fonts. The overall look is very ‘out-of-space’ and would perfectly suit the astronautics context. But since their product is a mobile app that enables to quickly comment on the discussions throughout the basecamp accounts, we feel that there is a disconnect between who they truly are and what their branding communicates. This will probably confuse their website visitors.
7. Photos of real people
Recently in UI design, there has been a marked increase in the use of photography of real people vs. stock photos that look corporate or too far from our lives. The ‘human touch’ that comes with a disctinctive or creative photos connects with the website on a deeper level and engages them more effectively. We believe this trend will continue to grow. <em>Use imagery to express a distinctive voice and exemplify creative excellence. </em><em>For specific entities or branded content, use specific imagery. For more abstract content, be interpretive. Photographic stock and clipart is neither specific nor interpretive.</em>- from Google's Material Design Specs <em>&ldquo;People and other subjects in real-life, authentic settings are increasingly in demand, up 347%. This growing trend represents a desire for stronger emotional connections in design.&rdquo; </em> by Shutterstock
  &nbsp;</p>
<p>Example: <a href='http://www.seedspot.org/' target='_blank'>SeedSpot</a> St. Louis Children’s Hospital annual report is presented by a visually rich <a href='http://annualreport.stlouischildrens.org/2013/'>one-page website</a>, designed by <a href='http://www.brandalmanac.com/'>Alamanac</a>. The website uses large images of real-life patient stories and experiences. This sets them apart from a sea of other medical services websites where stock images are commonly used. A sportswear brand <a href='http://www.solasie.com/en/' target='_blank'>Solasie</a> welcomes its website visitors with a full-screen photo slideshow and the sounds of the waves. This mood instantly makes us dream of the ocean shores and the adventure. People photographed don't look like polished models, instead they feel more like our hip neighborhour next door. This creates a cohesive and personal feeling that traditional stock photos wouldn’t capture.
<
>
A sportswear brand Solasie welcomes its website visitors with a full-screen photo slideshow and the sounds of the waves. This mood instantly makes us dream of the ocean shores and the adventure. People photographed don't look like polished models, instead they feel more like our hip neighborhour next door. This creates a cohesive and personal feeling that traditional stock photos wouldn’t capture.
8. Content blocks (cards)
Another trending design pattern is the usage of <strong>content blocks </strong>to separate sections of content. The blocks themselves are arranged to create the visual layout – it’s a clean and user-friendly way to organize lots of information and works equally well on both the standard web browser and mobile devices. Websites that showcase many different types of content can be overwhelming and difficult to read – content blocks are a creative, organized and eye-pleasing solution. The <a href='http://wavesandwoods.com/'>Waves and Woods</a> website designed by <a href='http://www.victorafonso.com'>Victor Afonso</a> (Portugal) is a good example how to use content blocks in a way that does not overwhelm and rather guides the user to navigate the content. Tasteful and elegant usage of the grid layout can be found on the <a href='http://www.faebric.com/' target='_blank'>Faebric</a> website, a fashion students magazine. Photos, blocks of text and different colors are combined together without making the layout cluttered nor confusing. <a href='http://www.hoteldaniel.com/' target='_blank'>Daniel Hotel's website</a> uses blocks to present a quick overview of what it has to offer. This not only serves the purpose of segmenting information, but it’s also a very efficient manner of saying a lot without too many words. <a href='https://keep.google.com/u/0/' target='_blank'>Google Keep's </a>website and the mobile app is also based on the content blocks. Very clean and neat design.
<
>
Websites that showcase many different types of content can be overwhelming and difficult to read – content blocks are a creative, organized and eye-pleasing solution. The Waves and Woods website designed by Victor Afonso (Portugal) is a good example how to use content blocks in a way that does not overwhelm and rather guides the user to navigate the content.
9. Vibrant & retro colors. Shades.
Google has perfectly summed up the color palette which is the most popular today on the web: <em>Color is inspired by bold color statements juxtaposed with muted environments, taking cues from contemporary architecture, road signs, pavement marking tape, and sports courts. Emphasize bold shadows and highlights. Introduce unexpected and vibrant colors</em>. - Google Material Design Specs</p>
<p>Example: <a href='http://flatuicolors.com/' target='_blank'>Flat UI Colors</a> The popularity of Instagram and other apps that let users play with a variety of filters to create special effects on their own photos has contributed to the rise of the retro color palette in branding, web and mobile design. <em>To convey a hierarchy of information, you can use different shades for text.</em> <br/>
- Google Material Design Specs
<
>
Google has perfectly summed up the color palette which is the most popular today on the web: Color is inspired by bold color statements juxtaposed with muted environments, taking cues from contemporary architecture, road signs, pavement marking tape, and sports courts. Emphasize bold shadows and highlights. Introduce unexpected and vibrant colors. - Google Material Design Specs

Example: Flat UI Colors

Wrapping up...

The latest web and mobile design trends are still rooted in flat design. However, it is evolving towards visual and interactive richness. Just flat design elements are no longer in fashion. Instead, we can observe more subtle mini interactions, animations and floating elements coming in. The web and mobile design is becoming more alive, surprising us from time to time.

The Google's Material Design specifications is a great stepping stone towards standardizing the latest web and mobile design patterns. We can already observe some of its design patterns being adopted by other designers as they are striving to make our web and mobile experiences more interactive and engaging.

Let's see how the web and mobile design is going to evolve further!

My Visual Brief helps web & graphic designers and teams to set the right direction for a design project by creating a design brief quickly and visually.
© My Visual Brief 2016
Learn more
Get in touch
Drop us a line at hello@myvisualbrief.com
or let's stay in touch via