Material Design

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.

Flat UI Colors.

Flat UI Colors.

Google Keep’s homepage.

Google Keep’s homepage.

I Surf Because  homepage.

I Surf Because homepage.

Example  from Google Material Design.

Example from Google Material Design.

Example from Google Material Design Specs.

Example from Google Material Design Specs.

Faebric  website.

Faebric website.

d79a6f0244c3cd191d50ac5baa13196e.jpg
Gogoro  website.

Gogoro website.

Concept by  kingyo .

Concept by kingyo.

Mail Client App by  Jakub Antalik .

Mail Client App by Jakub Antalik.

The Brand Cards - our visual brainstorming tool for brand strategists, designers, and creative teams.  Check it out here .

The Brand Cards - our visual brainstorming tool for brand strategists, designers, and creative teams. Check it out here.

line2.jpg

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.

line2.jpg

Style Characteristics

Here are the design patterns we’ve identified that characterize this style.

1. Simplicity

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.

 
02.png

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.

 
01-Ex02.jpg

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.

 
03.png

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.

 
04.png

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...

video1.gif
 
video2.gif

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.

Example  from Google Material Design.

Example from Google Material Design.

 
icons.gif

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.

line2.jpg

3. Full-screen forms and inputs

mailchimp.png

“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

 
appsumo.png

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.png

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.

floating1.png

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

 
floating2.png

The blue and yellow floating buttons on Google's Doc and Keep apps are placed in the bottom right corner.

 
floating3.gif

The floating menu button concept in action. Concept above is by Salomon Aurélien.

 
floating4.gif

Another floating button example. Concept by kingyo.

 
floating5.png

The menu on the Gogoro website sticks to the top, as the user scrolls down the pages.

floating6.png

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.

 
designfiles.png

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.

 
faena.png

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.

 
dadaab.png

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.

 
isurf.png

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”.

Luxeat  website.

Luxeat website.

 

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.

 
designhotels.png

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.

 
lmnop.png

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.

people1.png

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

Example:  SeedSpot

Example: SeedSpot

“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.” by Shutterstock

hospital.png

St. Louis Children’s Hospital annual report is presented by a visually rich one-page website, designed by Alamanac.

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.

solasie.png

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.

blocks1.png

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.

faebric.png

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.

danielhotel.png

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.png

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

flatuicolors.png

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.

flatuicolors2.png

To convey a hierarchy of information, you can use different shades for text. - Google Material Design Specs

flatuicolors3.png
line2.jpg
 
03-BSK_product1.jpg

Need a tool to help you streamline your design research? The Brand Cards will help.

We’ve curated 200 best design work out there into 10 styles so you would save research time and start designing faster.

 
line2.jpg
line2.jpg