Flat and simple to attack

Translator Note: This writer, Adrian Taylor, is an interactive creative director and founder of Pushstart Creative, focusing on a variety of research, such as physical polymerization, human-computer interaction technology, and brand experience. Despite his current focus on product development, strategic development, UX, and so on, pixels is passionately. For more information, go to designtaylor.com or Twitter to find Adrian Taylor.

Original address: http://www.smashingmagazine.com/2013/09/03/flat-and-thin-are-in/

in the past few years, the software and app interface design style has changed rapidly, from 3D, the object developed to flat, simple. Although this trend is prevalent, we think about how it has developed and how it affects the entire interface design field. In addition, I will share some tips and attention issues in flat interface design.

Windows Phone 8 and Apple ' s IOS 7 user interface

What happened to

?

So why does the mass consciousness change from a favorite textured, perspective-and-shadow design to a flat-color and minimalist graphic design? There are, of course, many factors contributing to this shift, but some are more pronounced.

Information overload

As the world becomes more interconnected, we continue to receive a great deal of information, which is important, relevant, but mostly not. We constantly evaluate its value, filter out unwanted information, or create new content, all of which are exhausting. Also, most content consumption has shifted to small-screen devices, exacerbating the overload phenomenon. So we can easily drown in the information, cut off the user interface (UI) of the complex elements is the King of visual design.

Get rid of clutter: Geckoboard's design makes critical data appear at a glance and is easy to understand

Simplicity is the golden rule.

The same trend is that disruptive web apps and services are providing highly specialized tools that only design a few features. While traditional software developers tend to load too many functions for a product in order to get a high price position, the current trend is focused on micro applications with a preference for simplicity. Simple application means there is a simple interface.

Beautiful and exquisite: Blue weather application designed by oak.

Again, with the content of the core

When new equipment and technology come into the market, it often happens that we are keen to think about what they can do and how we can improve interactivity. But focus on the interface design and then return to focus on the content. The consumption of media resources, regardless of text, music or video, audio and video, and so on our equipment most commonly used activities, when you enjoy it, certainly do not want to be unrelated to the interface elements disturb.

Level

As smartphones and tablets have penetrated the tens of thousands of households, overt operations are diminishing. In the past, if the pop-up window didn't jump out of the screen, we feared that the user would miss the operation, and now we'd rather let the user explore the subtle interactive experience. In view of this, many Internet products have supported touch instructions without any visual guidance.

The visual design of Fitbit's dashboard is refreshing, daring, and affinity

The impact of technology

Most software is limited to running platforms. Screen size and pixel density are also limited by hardware device conditions. A minimalist interface requires very limited design elements, which means that every element has to be played. Layout layouts and font weights largely determine the beauty and ease of use of flat designs.

If your target device can't handle the nuances of this, you're not lucky. As the screen size and pixel density increase, the finer, smaller styles also show the best clarity. Of course, the support for @font-face attributes increases the focus on text spacing and increases the appeal of minimalist typography.

Wallmob Market Data Monitoring application: Data can be detected from any device that has a browser

Responsive design

With the popularization of various size networking equipment, the interface becomes more need to emphasize the adaptability, and the response design comes into being. Although response design does not require a specific style, a flat interface is clearly easier to handle than other styles. Another advantage of minimalist design is that you can reduce the weight of the page and shorten the load time.

No weight response design: OnSite. (Large size display)

the courage to Practice

Well, no nagging theories. Let's take a look at the practical operation. Designing an effective minimalist style is challenging. When you discard the fancy decorative elements (drop shadows, perspective relationships, textures, etc.) on the interface, you immediately realize that the remaining elements are critical and important. The following tips are generally useful in design, especially for flat UI design:

Before you start designing

The first step in any project is to make sure you choose the right style. Before you dive into the design, make sure that the style meets the perceived needs of the target audience and adapts to the target platform, the hosting device, and the application type. If the style of the scheme does not match the project, then the next direction is meaningless.

Process

The design process is very important, no matter what style you choose! Simple design with the following points in mind:

1. When designing the minimal interface, I will seek inspiration from the pre-pc era, when the artist, with a small amount of resources to do a lot of design. For example: Josef Müller-brockmann and Wim Crouwel, revisiting the works of these masters is a good learning opportunity. But sometimes I also refer to the works of minimal painters, such as Ellsworth Kelly, architects such as Mies van der Rohe and industrial designers such as Dieter Rams.

2. It is helpful to put down your work and have a rest. Everything about flat and minimalist design is a matter of detail. So it's more effective to go back to work after a short nap and work with a whole new eye.

3. It is also helpful to compare each layout side by side. Even if it takes 20 minutes to move a line down each 5 pixel separately, compare two layouts to quickly distinguish between the good and the bad.

4. As the relative proportions of physical presentation are critical, early testing on different target devices is essential.

5. The whole design process constantly ask yourself "really need?" ” 。 Support the project, find some clever way, for example, add some interesting elements, style will be easy and attractive, but must always pay attention to eliminate unnecessary elements, keep streamlining. Getting rid of your tail is always difficult, but the process of modification must be critical.

Global Closet: An interactive game designed by the workshop for the American Geography magazine Education Section

Grid

Grids play an important role in interface design, and this is no exception. The grid is helpful if you want to make the whole design sequential and intuitive by creating visual specifications.

1. The grid not only shows visual order. You can also use grids to divide content and feature groups. You can not always use lines or boxes to divide object groups, in fact, simple alignment and spacing settings can also help users understand the interface structure.

2. Try to break the structure of the grid, highlighting important elements to attract users ' attention. After the false 3D element decoration, the basic layout principles of physical proportions and orientation are the key to show the visual order.

3. Try a more dense grid design that you're not used to. When you reduce the visual color of these elements, you will find that this design can carry more complex structure, nor appear messy. If you have additional content information you would like to express you can place it separately.

Rossul-Designed live parochial IPad app

Color

Of course, color plays an important role in visual design and is more critical to the minimal interface.

1. Consider a broader color scheme. If you are like me, then you will understand that similar color matching often makes the interface more functional. It's easier to design with a strong, broad color. Now is your chance to use a small amount of elements to extend the color scheme to make you feel good.

2. When setting the color scheme, test the selected hue to be in a very wide spectrum, only to ensure that the display of light and shade contrast.

3. If you want to try the same line color and contrast. Test the color palette early to ensure that subtle changes and high contrast elements have enough space to choose from.

Triplagent ' visual design uses a rich color palette

Text typesetting

Content-led flat Web pages, text typesetting is a great hero, the work must not.

1. The lining is a choice, the line will appear cleaner.

2. Find the fonts you need in a wide variety of font lines with different weights and styles. Of course it's not all, and a broad selection helps you define hierarchies more accurately, and you'll find that some fonts are better suited to a particular environment.

3. Do not worry about the size and thickness of the difference between the font collocation is bound to create visual clutter. It is also an attempt to use a large, ultra-fine font to do the text with a medium-weight small font.

4. Note that fonts are easy to read. I know it sounds ridiculous, but people have a lot of questions about the fonts you choose, so make sure you can read them at any scale.

Siteleaf design, text appears clean and easy to read

Interaction

In a flat design, the interaction of proof elements can be tricky. This is a few of the methods I have adopted.

1. The contrast is critical. If the composition is more white, you can give the operating elements a little color, if it is text-oriented, you can use a simple map; If the title is a large lowercase letter, the link can be in small capitals; that's what it means.

2. Traditional layouts are also useful. If you want to place a return button, place it in the top left corner where the user expects to find the return button.

3. When the page stacks more features, it doesn't make sense to have each interaction element designed as a button. interface as far as possible to design intuitive. But if the interaction is particularly complex or unexpected, it provides simple error-recovery functionality.

4. Dropdown box, Mode window, pop-up box and other level elements in the flat design is generally more difficult to deal with. Contrast, border, coloring processing, can also be visually differentiated from the level of interaction.

Concise composition and sharp contrast: Taasky.

Summary

I do not believe that design has a fixed rule to follow. See the designer dedicated to building a clean, concise user interface, it is amazing. Does flattening really need gradients and shadows? Of course not. In fact, the most interesting job I've ever seen is the kind of intelligent rendering of content while maintaining interactive intuition and balance dimensions.

In our highly connected, information-rich and full-featured digital world, simple design has been springing up again. It does not solve everything, but it can also give me an easy-to-use and enjoyable digital experience if it is well thought out and applied properly.

(This article is from the Tencent CDC Blog, reprint, please specify the source)