Minimalist Design in mobile development

• Original link: The Art of minimalism in Mobile App UI Design
• Original Author: Nick Babich
• From: Nuggets translation program
• Translator: Edvardhua
• Reviewer: Owenlyn, Jiaowoyongqi, graning

The article ends with the original English

Design is a very strong user-driven work. As users more and more prefer a more concise interface, how to eliminate extraneous elements, preserving the most basic elements of the most important is the key to minimalist design. Minimalist design form and function perfect combination. Its greatest advantage is the minimalist expression, concise lines, generous white, simple graphical elements, is a very complex content, in such a design will appear very concise and capable. Of course, if these elements can be used effectively.

Minimalist design must be concise and consistent in usability . Your interaction system should resolve the user's problem through clear visual communication (clear visual communication) . That's why it's so impressive to have simple design and high-availability applications. Even just a minimalist navigation provides a strong way to interact. To do this, you need to pay attention to the following aspects.

A simple color scheme

A simple color scheme can improve the user experience, the corresponding too much color will give users a negative impact . For beginners, there are a number of pre-defined standard color schemes that allow you to easily create new color schemes.

• Single color scheme. A single color scheme is composed of different shades, shades, or shades of a particular color. Their principle is that by modifying the saturation and brightness of a particular color, a variety of coordinated colors can be generated, a color scheme that is more concise and elegant, without burdening the eyes.

Blue single color scheme. Material Source: Smashing Magazine

Material Source: dribbble

• Approximate color matching scheme The idea is to take three adjacent colors from the color wheel as a color. Application of full gesture operation Clear uses an approximate color scheme, which uses different colors to prioritize tasks or highlight key tasks. (the task at the top uses the most vivid color, while the task at the bottom uses a bright, refined color)

The yellow and orange gradients are also an example of an approximate color scheme. Material Source: tuts+

The Clear app for the IOS platform

Blur effect

The blurring effect that appears in the minimalist UI design is a logical thing to do, and it adds a sense of layering to the UI. If your UI has multiple levels, using the blur effect gives the user a clear understanding of the front-to-back level of the UI. This also gives designers a perfect opportunity to design a variety of menus and layered effects.

Yahoo weather shows a picture of the current location, if you need to see the weather details, you only need to swipe up and will appear immediately. This method saves the previous image as a blurred background, and helps the user to have more intuitive feedback after the operation, compared to overlaying a layer on the original page. And the interactive way is very natural, you can easily return to the previous layer.

Yahoo weather on IOS

Use only one font in an app

Using multiple fonts in one app can look messy and sloppy. Reducing the number of font types on the screen can enhance the effect of typography. When you design your app, you can optimize the layout by changing the font weight, style, size, and size, rather than replacing the font.

Typically, only one font source is used in an app: Apple

When you choose a font for your app, choosing the default font for the platform may be the safest choice:

• Apple uses San Francisco family fonts to provide a full platform-consistent reading experience. (abbreviated as Sf-ui in IOS 9)

• Roboto and Noto are the default fonts for Android and Chrome , respectively.

Reducing the font type used on the screen can result in better typography. Material Source: dribbble

Visual focus of the data

You should use large fonts and eye-catching colors to make specific data a visual focus. Use neutral colors (black and white gray) to display ordinary content, while some operating parts use strong contrasting colors to draw attention to the user, giving the user the right guidance and action.

Material Source: Smashing Magazine

Bright tones + neutral tones are the easiest solution to match, and one of the most visually compelling options. Material Source: Smashing Magazine

enlarged fonts and conspicuous colors are good for attracting attention from users without the need for extra text cues. At the same time, it provides a simple and easy-to-use information gathering experience.

Using enlarged fonts and pop-up colors in a specific area of the screen can effectively attract user attention. Material Source: dribbble

Use left white instead of lines to differentiate elements

Designers often use lines and split lines to divide the screen into areas and functional categories, but adding too many of these elements will make the UI too bloated.

　　Fewer lines and split lines will make our pages look cleaner, more modern, and more feature-focused. We can use spacing, leaving white and color blocks to differentiate between different elements. Google Calendar is a good example of using projections to clear the layers of two different chunks of content, rather than simply dividing them with segments.

The interval not only provides a clear vision but also increases the ease of use of the calendar application.

Icons: Lines and fills

We use icons to express a function or content, icons as a visual language, it should be simple and easy to identify and understand. After IOS 7, many minimalist UIs use lines or filled icons. Take a look at the effect of the same icon using lines and fills, respectively.

Clock icon material Source: ICONS8

Let's take a look at the icon at the bottom menu bar. This icon is usually used as a navigation presence in the app, so it is important to indicate the current user's area, and we usually use the highlight icon to represent the area selected by the current user. At this point, the gray linear icon is indicated as unchecked. That way our bottom menu bar is intuitive.

The bottom of the Apple Store navigation material Source: Viget

Summarize

Minimalist UI and design techniques are the key to good design, but minimalist design is not the purpose of design. Our ultimate goal is to simplify the UI while maintaining the integrity and high availability of the functionality. Simple processes, clear visual communication and a combination of design to create a seamless interactive experience is the most important.

The Art of minimalism in Mobile App UI Design

July on Mobile App Development, UI, UX

Design is one of the most important drivers of the user engagement. As users ' preferences shift toward a simpler interface, stripping the UI to their very basic, necessary elements is the key To success. Minimalism is a perfect marriage of form  and  function . It ' s greatest strength is clarity of form?—? Clean lines, generous whitespace, and minimal graphical elements brings simplicity to even the most confounding subject Ma Tter. That is, of course, if it ' s used effectively .

Minimalist design have to is concise, clear, and consistent to be usable. Your interaction system should aim to address problems for Your users through clear visual communication. Beautiful minimalist app combined with great usability are so impressive:an easily navigated, simple app can Be a very powerful form of communication. But the order to achieve this goal, you need to focus on following moments:

Simple Color Scheme

Simplifying the color scheme improves the user experience while has too many colors can have a negative impact upon it. There is a number of predefined color scheme standards that make creating new schemes easier, especially for beginners:

• monochromatic scheme. Monochromatic color schemes is made up of different tones, shades and tints within a specific hue. By modifying the saturation and brightness of a single hue, you can generate multiple colors, and color scheme it's not ov Erwhelming on the eye.

• Single-hue blue color scheme. Image credit:smashing Magazine

• 
  Image credit:dribbble

• analogous color scheme. Analogous schemes is created by using three colors, that is next to all other on the color wheel. A Minimalist Gesture-driven Task Manager app Clear use analogous colors to visually prioritize important tasks and Highlig HT the most critical ones (the topmost items would be is the boldest in color, while items lower on the list would be lighter a nd more subtle).

• Shades Yellow and Orange is a example of an analogous color scheme. Image credit:tuts+
  Clear app for IOS

Blur Effects

Blur effect arise as a logical solution to a minimal user interface, allowing a certain amount of play with the layers and Hierarchy of the interface. It ' s a very efficient solution when working with layered UI since it gives the user a clear understanding of mobile ' s Solu tion flow. This also gives designers a perfect opportunity to explore different menu and overlay solutions.

Yahoo! Weather app displays a nice photo of each weather location, and the most important data you need are immediately vis Ible while it's just a single tap to drill down into more detailed data. Rather than cover the photo with another UI layer, the app keeps your in context after you tap?—? the detailed information I s easily revealed and the photo remains in the background. The interaction is so intuitive, it takes nothing more than a second to return to your previous location.

Yahoo! Weather app for IOS

One App, one Typeface

Mixing several different fonts can make your app seem fragmented and sloppy. Reducing the number of fonts on a screen can reveal the power of typography. When designing a app think about how can do the typography powerful by playing with weight, style and size , not different typefaces.

In general, use a single font throughout your app. Image credit:apple

When you choosing a typeface for your apps keep in mind, a safe bet is to rely on the platform ' s default font:

• Apple uses the San Francisco family of typefaces to provide consistent reading experience across all platforms (the San Fr Ancisco font for IOS 9 is called Sf-ui).
• Roboto and Noto is the standard typefaces on Google Android and Chrome.
• Reducing the number of fonts on a screen can reveal the power of typography. Image credit:dribbble

Data Spotlight

You should use big font size and striking color to make a certain data the center of focus. Using neutral colors for the general scheme and adding contrasting colors for calls to action, helps the user focus on the Action we want them to take.

Bright accent color into a otherwise-neutral palette is one of the easiest color schemes to create. It ' s also one of the most striking, visually. Image credit:smashing Magazine

Increased font size and an accent color draws the users ' attention to a particular area of the screen without additional V Isual hints. This provides easier information-gathering experience.

Increased font size and a pop of color draws the users ' attention to a particular area of the screen. Image credit:dribbble

Divide by Elements and Spacing, not Lines

Lines and dividers often used to clearly delineate specific sections or categories within a screen. But adding too many of the these elements can result in crowded interfaces.

Less lines and dividers would give your interface a cleaner, modern and more functional feel. There is ways to separate content with a methods such as using blocks, spacing or colors. Calendar App from Google is a good example of what leveraging space and using shadows instead of drawing lines helps to Def Ine different sections in a non-obtrusive manner.

Spacing provides visual clarity and improved ease of use in Calendar app

Icons:stroke and Fill

Iconography is a visual language used to represent functionality or content. Icons is meant to being simple, visual elements is recognized and understood immediately. Since IOS 7 Many minimalist UI has a stroke and filled icons. In this article we won ' t criticize the concept itself, instead we ' ll focus on the practical aspect?—? stroked and filled T Ype of the same icon:

Clock icons (stroked and filled). Image Credit:icons8

Let's take a look at tab bar icons. Because bar icons serve as navigation to other sections of the app, it's important to indicate which sections is currently Active by highlighting it icon in some way:a solid version to show an active/selected state and a hollow versio N to show a inactive/unselected state. This makes recognition of active tabs and controls more straightforward.

The Tab bar in AppStore app is from Apple. Image Credit:viget

Conclusion

Minimalist interfaces and other design techniques is certainly a-to-achieve good design, but they is not the goal. The ultimate goal is to simplify we interfaces and make them more functional and usable. Simple user flows, clear visuals, and forgiving design help create a seamless interaction.

Thank you!

Minimalist Design in mobile development