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
1-Simplicity-Intro-2 gogoro 01-Ex02 canopy 02-Ex02
<
>
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
Mini-animations-intro animated-buttons-2 animated-charts-2 navigational-transition1 navigational-transition2 interactive-icon
<
>
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
Floating-intro Floating01 Floating02 Floating03 Floating03b Floating04 Floating05
<
>
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
7.0-Intro 7.1-TheDesignFiles 7.2-Faena 7.3-Dadaab 7.4-ISurf
<
>
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
6.0-Intro 6.1-Luxeat 6.2 6.3-DesignHotels 6.4-LMNOPStudios
<
>
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
8.0-Intro 8.1-Google 8.2-SeedSpot 8.3-Hospital 8.4-Solasie
<
>
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)
9.0-Intro 9.1-Waves 9.2-Faebric 9.3-HotelDaniel 9.4-GoogleNotes
<
>
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.
10.0-Intro 10.1-Retro 10.2-Shades
<
>
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