We can observe more subtle mini interactions, animations, and floating elements being integrated into web and mobile design. The web and mobile design is becoming more alive, surprising us from time to time.
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 standardized and integrative way of designing interfaces that can easily adapt on multiple devices and provide a more unified experience for the users.
This wave of web design was called Material Design by Google.
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.
Here are the design patterns we’ve identified that characterize this style.
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.
This high-tech look projecting website for the SmartScooter 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.
Litely mobile app by Sam Soffes 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.
Canopy, 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.
Traverse mobile app created by Willis Cundall has a minimalistic geometric look that does not follow the traditional flat aesthetic. This gives an original touch to this weather sharing application.
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:
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.
Consider transitions when designing screens and find opportunities to create visual connections between transition states through color and persisting elements.Google
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 Iconic, an icon set created by P.J. Onori.
3. Full-screen forms and inputs
“More sites and apps are going with the full-screen forms and input screens (such as signups and logins) instead of it existing in only one small part of the site.
Click on “login” and or “contact” and you may be greeted with a full-screen overlay with the form needed instead of being sent to a different page.” The Next Web
A simple Appsumo’s interface calls the attention for the newsletter sign up form. One can surely see what is expected to be done here!
Typeform allows to create interactive forms. Only one question is shown on the screen making the user experience very focused and streamlined. Clean, simple and straightforward.
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.
The example above is 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
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. Concept below is by Salomon Aurélien.
Another floating button example. Concept by kingyo.
The menu on the Gogoro website sticks to the top, as the user scrolls down the pages.
Uservoice’s feedback button floats in the bottom right corner of the My Visual Brief application.
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 “a picture is worth a thousand words” 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.
The Design Files Open House 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, Faena Hotels 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 Dadaab Stories website. 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 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.
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’s “style”.
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.
Design Hotels 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 – LMNOP Studios – 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!
7. Photos of the 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 distinctive or creative photos connects with the website on a deeper level and engages them more effectively. We believe this trend will continue to grow.
Use imagery to express a distinctive voice and exemplify creative excellence. For specific entities or branded content, use specific imagery. For more abstract content, be interpretive. Photographic stock and clipart is neither specific nor interpretive.from Google’s Material Design Specs
“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.”Shutterstock
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 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 neighborhood 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 content blocks 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.
Tasteful and elegant usage of the grid layout can be found on the Faebric website, a fashion students magazine. Photos, blocks of text and different colors are combined together without making the layout cluttered nor confusing.
Daniel Hotel’s website 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.
Google Keep’s website and the mobile app is also based on the content blocks. Very clean and neat design.
9. Vibrant & retro colors. 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
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.
To convey a hierarchy of information, you can use different shades for text.Google Material Design Specs