Product design learning 1 -------- flat and simplicity

Over the past few years, the interface design style of software and apps has changed rapidly, from 3d to quasi-things to flat and simple. Despite the prevalence of this trend, we still need to think about how it has evolved so far and how it has an impact on the entire interface design field. In addition, I will share some tips and notes on flat interface design.

Windows Phone 8 and Apple's iOS 7 user interfaces

　　What happened?

So, why do mass awareness transform from a design that loves textures, pivoting, and shadows to a design that loves flat colors and minimals? Of course, there are many factors leading to this change, but some factors are even more prominent.

　　Information Overload

As the world is getting closer and closer, we are constantly receiving a large amount of information. Some information is important and relevant, but most of it is not. We constantly evaluate its value, filter useless information, or create new content, all of which exhaust us. In addition, most of the content consumption has been transferred to small screen devices, which is even more overloaded. In this way, it is easy for us to immerse ourselves in information. cutting down the complicated elements of the user interface (UI) is the king of visual design.

Get rid of chaos: geckoboard design makes key data visible at a glance and easy to understand

　　Simplicity is King's Law

A similar trend is that disruptive web applications and services are providing highly dedicated tools with only a few features designed. Although traditional software developers tend to attach multiple functions to their products in order to gain a high price positioning, their current changes tend to focus on micro-applications, and their preference for concise functions. A simple application means a simple interface.

Beautiful and exquisite: Designed by oak.BlueWeather applications

　　Again, with the core content

When new devices and technologies flood into the market, this often happens. We are keen to think about what they can do and how we can improve interaction. However, after the enthusiasm for interface designFocus on Content. The consumption of media resources, whether it is text, music, video, audio and video, or the most common activities on our devices, will certainly not be disturbed by irrelevant interface elements when you enjoy them.

　　Technical Level

As smartphones and tablets have penetrated into thousands of households, dominant operations are gradually decreasing. In the past, if the pop-up window didn't jump out of the screen, we worried that users would miss the operation. Now, we are more willing to let users explore this subtle interactive experience. In view of this, many Internet products have supported touch commands without any visual guidance.

The Visual Design of Fitbit dashboards is refreshing, bold, and friendly.

　　Technical impact

Most software is limited by the operating platform. The screen size and pixel density are also limited by the hardware device conditions. A simple interface requires very limited design elements, which means that every element must be used. The layout and font width determine the appearance and ease of use of the flat design to a large extent.

If your target device cannot handle the nuances, you are not lucky. As the screen size and pixel density increase, finer and smaller styles can also present the best definition. Of course, the support for the @ font-face attribute improves the centralized processing of text spacing and adds the appeal of simple layout.

Wallmob's market data monitoring application: data can be detected on any device with a browser.

　　Responsive Design

With the popularization of various sizes of connected devices, the interactive interface has become more adaptable, and responsive design has emerged. Although responsive design does not require a specific style, the flat interactive interface is obviously easier to process than other styles. Another advantage of simple design is to reduce the page weight and shorten the loading time.

Response design without weight: onsite. (large-sized display)

　　Be brave in practice

Okay, no worries. Let's take a look at the operations in practice. Designing an effective and simple style is challenging. When you discard the fancy decorative elements (drop-down shadows, perspective relationships, texture materials, etc.) on the interface, you will immediately realize that the remaining elements are critical and important. The following techniques are generally useful in design, especially for flat uidesign:

　　Before starting Design

The first step to start any project is to make sure you select the correct style. Before in-depth design, make sure that the style meets the perception needs of the target user, and adapt to the target platform, bearer device, and application type. If the style of the solution does not match that of the project, the subsequent guidance is meaningless.

　　Process

The design process is very important, no matter what style you choose! Remember the following points during simple design:

　　1.When designing the minimal interface, I will seek inspiration from the pre-PC era. At that time, the artist made a lot of design with a small amount of resources. For example, Joseph Müller-Brockmann and WIM crouwel. It is a great learning opportunity to review the works of these masters. But sometimes I will 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 take a rest. Flat and simple design are all about the difference in detail. Therefore, it is more effective than thinking for a long time to get back to work with a brand new vision.

　　3. Compare different la s side by sideAlso helpful. Even if you move a line down five pixels each 20 minutes ago, you can quickly distinguish between the two la S.

　　4.Because the relative proportion of physical display is crucial, it is necessary to test it on different target devices as early as possible.

　　5.During the design process, I kept asking myself, "Do you really need it ?" . When supporting projects, find some practical methods. For example, adding interesting elements and styles will easily and attract people, but you must always remove unnecessary elements, simplified. It's always hard to get rid of all your painstaking efforts, but the modification process must be picky.

Global closet: an interactive game designed by the workshop for the US Geographic Magazine Education Section

　　Grid

Grid plays an important role in interface design. If you want to order and visualize the entire design by establishing visual specifications, the grid will be very helpful.

　　1.The grid not only shows the visual order. You can also use a grid to divide content and function groups. You don't always need to use a straight line or a box to divide object groups. In fact, simple alignment and spacing settings can also help you understand the interface structure.

　　2.Try to break the Grid Structure and highlight important elements to attract users' attention. After saying goodbye to fake 3D elements, basic layout principles such as physical proportions and positioning are the key to displaying visual order.

　　3.Try a more intensive grid design that you are not used. When you greatly reduce the visual color of these elements, you will find that this design method can carry more complex structures, do not look messy. If you want to express additional content information, you can place it separately.

Live school iPad app designed by rosul

　　Color

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

　　1. consider a broader color scheme.If you are like me, you will understand that similar colors often make the interface more functional. It is easier to design with a strong and broad color. Now is your chance to take advantage of it. With only a few elements, extending the color scheme will make you feel good.

　　2.When you set the color scheme, you must test the selected color in a wide chromatographic range to ensure that the image is displayed by contrast.

　　3.If you want to try the color and contrast of the system. Color Matching should be tested early to ensure that there is sufficient room for choice for subtle changes and high contrast elements.

Triplagent's visual design uses a variety of colors

　　Text Layout

For content-dominated flat web pages, Text Formatting is a great hero.

　　1.The lined line is a choice, and the non-lined line will look cleaner.

　　2.Search for the fonts you need in the font family with a wide variety of different thicknesses and styles. Of course, not all are used. The wide selection helps you define hierarchical relationships more accurately. At the same time, you will find that some fonts are more suitable for specific environments.

　　3.Don't worry about combining fonts with different sizes and thicknesses will inevitably lead to visual disorder. Using ultra-large and ultra-fine fonts as titles and using a small font with medium width as the body is also an attempt.

　　4.Note that the font is easy to read. I know it sounds silly, but people will question the font you choose a lot, so make sure you can read it at any scale.

Siteleaf design, clean and easy to read text

　　Interaction

In a flat design, it is difficult to prove the interaction of elements. This is a few of my methods.

　　1.Comparison is critical. If the diagram is mostly white, you can give some color to the operable elements. If it is mainly text, you can use a simple image. If the title is a large lowercase letter, the link can be a small uppercase letter; this is what it means.

　　2.Traditional la s are also useful. If you want to place a return button, place it in the upper left corner where you want to find the return button.

　　3.When pages are stacked with more functions, designing each interaction element as a button makes no sense. The interface should be designed as intuitive as possible. However, if the interaction is particularly complex or unexpected, simple error recovery is provided.

　　4.Hierarchical elements such as drop-down boxes, mode windows, and pop-up boxes are generally hard to handle in a flat design. In contrast, border, and coloring, the interaction level can also be visually distinguished.

A concise diagram and a clear comparison: taasky.

　　Summary

I don't believe there are fixed design rules to follow. It is amazing to see that the designer only creates a clean and concise user interface. Is gradient and shadow not required for flat? Of course not. In fact, the most interesting job I have ever seen is the kind of smart presentation of content, while maintaining interaction intuition and balance.

In our highly connected, informative, and fully functional digital world, simple design has become increasingly popular. However, it cannot solve all problems, but if it is well considered and properly applied, it can also bring me an easy-to-use and pleasant digital experience.