For the past few years we’ve experienced a steady lean toward minimalist design of digital space. As new technologies, such as higher screen resolutions and faster networks, influence the aesthetics of digital surface, our decisions in choosing the right approach for designing mobile interfaces will further shape user interactions and behaviors.
The basic influence of this approach on the graphical user interface (GUI) was the departure from skeuomorphism and elimination of gradients, shadows, textures, reflections and beveled edges. With all these limitations, the question is raised: how is dimension or depth implemented in flat UI design?
The answer goes back to the original principal of Flat design: embracing the strength of digital interface. In Flat design, depth is simulated with the combination of two main qualities:
1. Interactions such as parallax scrolling and behavior-learning responses
2. Visual clarity such as contrast in monochromatic themes, minimal use of colors, big font and less text, use of spaces and blocks instead of lines, and blurring backgrounds
Higher-screen resolutions brought the affordance to go big on fonts and images. With new technologies designers are able to play more with contrast and crisp visual effects.
Last year we saw the design of websites gravitate towards single-page websites, full-screen images, and HTML video streams on landing pages, similar to Nike’s Jordan website. These designs aim to make a big first impression upon website arrival. Carrying over the same effects to mobile platforms is challenging, but doing so becomes imperative as the use of responsive design becomes more common. As a result, this year we will experience a smooth translation of same effects on mobile platforms where we’ll see more of:
Full-screen quality photo backgrounds
Big fonts as well as combinations of font sizes and font types
Single-page apps and sites that focus most user interaction on one screen
A mobile-first design sensibility (more on mobile-first & responsive design)
1. Learn user behavior, predict and suggest the relevant content when it is needed and where it is appropriate.
2. Communicate the content visually with hierarchy so that the user spends the least amount of time possible in locating and performing a task.
A good example of communicating with a visual hierarchy is the concept of cards, which was introduced last year by Google Now. Even though the concept had been used before with window “live tiles” or in print magazines’ feature stories, popular apps like Evernote or Pinterest use a similar concept today. Cards design enables apps to provide separate, well-designed snippets of information or interactions for their users. Big photos catch their attention, while brief texts confirm that the interaction would interest the users and tapping the cards would engage them with more detail. Scanning content feels more relaxed as it appears more intuitive and in line with user behavior as opposed to purposeful searching of web content.
The 2014 design aesthetic is about embracing minimalism beyond the surface aspect of user interface. It also involves designing for user interactions and optimizing those interactions visually and behaviorally to emphasize the functionality of the digital space in mobile platforms.
As brands grow their mobile presence, the bar is raised for both aesthetics presentation and user experience of the mobile interface. It is important for businesses to evolve the mobile experience to meet expectations and crucial to keep an eye on how these trends develop.
Living the flat world
Flat design is based on the principal of: “focusing on simplicity and clarity to ease functionality and emphasize usability”. Popularity of flat user interfaces (UI) emerged recently with Windows metro style and iOS 7. In a series of minimalist trends that rose during the past couple of years, 2014 seems to be the year that Flat UI will mature and become even more ubiquitous.The basic influence of this approach on the graphical user interface (GUI) was the departure from skeuomorphism and elimination of gradients, shadows, textures, reflections and beveled edges. With all these limitations, the question is raised: how is dimension or depth implemented in flat UI design?
The answer goes back to the original principal of Flat design: embracing the strength of digital interface. In Flat design, depth is simulated with the combination of two main qualities:
1. Interactions such as parallax scrolling and behavior-learning responses
2. Visual clarity such as contrast in monochromatic themes, minimal use of colors, big font and less text, use of spaces and blocks instead of lines, and blurring backgrounds
 |
| Flat Icons (TriplAgent) are quick to design, scale well and blend with any visual design theme. |
 |
| Sherpa, a personal assistant app that learns user habits, behaviors, and provides information that is of interest to the user. |
 |
| Monochromatic or minimal use of colors (Univit) along with use of blocks and spaces instead of lines make the tap zones very clear to the user while providing a good look. |
 |
| Blurred background used to set context and draws the user’s attention to focused content. |
Making BIG impressions
Today, capturing a moment is a tap away. Quality photos are everywhere and taste in aesthetics is changed to own the accessible, resulting in more pleasing images on apps and mobile websites.Higher-screen resolutions brought the affordance to go big on fonts and images. With new technologies designers are able to play more with contrast and crisp visual effects.
Last year we saw the design of websites gravitate towards single-page websites, full-screen images, and HTML video streams on landing pages, similar to Nike’s Jordan website. These designs aim to make a big first impression upon website arrival. Carrying over the same effects to mobile platforms is challenging, but doing so becomes imperative as the use of responsive design becomes more common. As a result, this year we will experience a smooth translation of same effects on mobile platforms where we’ll see more of:
Full-screen quality photo backgrounds
Big fonts as well as combinations of font sizes and font types
Single-page apps and sites that focus most user interaction on one screen
A mobile-first design sensibility (more on mobile-first & responsive design)
 |
| Big fonts and font combinations |
 |
| Full screen photos (Bloom*) with condensed navigation menu |
 |
| Single Pages (Nike Training Club) |
Designing for short attention spans
Aside from games and other long engagement programs, mobile applications are mostly used for performing a series of quick and straightforward tasks, similar to the Move app that tracks daily activity. That pushes the interface to:1. Learn user behavior, predict and suggest the relevant content when it is needed and where it is appropriate.
2. Communicate the content visually with hierarchy so that the user spends the least amount of time possible in locating and performing a task.
A good example of communicating with a visual hierarchy is the concept of cards, which was introduced last year by Google Now. Even though the concept had been used before with window “live tiles” or in print magazines’ feature stories, popular apps like Evernote or Pinterest use a similar concept today. Cards design enables apps to provide separate, well-designed snippets of information or interactions for their users. Big photos catch their attention, while brief texts confirm that the interaction would interest the users and tapping the cards would engage them with more detail. Scanning content feels more relaxed as it appears more intuitive and in line with user behavior as opposed to purposeful searching of web content.
 |
| Cards design (Evernote) |
 |
| Cards design (Google Now) |
The 2014 design aesthetic is about embracing minimalism beyond the surface aspect of user interface. It also involves designing for user interactions and optimizing those interactions visually and behaviorally to emphasize the functionality of the digital space in mobile platforms.
As brands grow their mobile presence, the bar is raised for both aesthetics presentation and user experience of the mobile interface. It is important for businesses to evolve the mobile experience to meet expectations and crucial to keep an eye on how these trends develop.
