Talking about the beginning and thinking of the flat trend

Editor's note: The flat of the fire for a year, the students are aware of it? Today @ Network Qin UEC students from abroad translated a good article, from the popularity of flat to the impact of the interface design, with some design tips and precautions, it is worth reading yo.

In the past few years, we have witnessed the rapid transformation of software and application interface design from 3D and quasi materialized to flattened and extremely simplified. While this trend is now ubiquitous, we might as well take a moment to think about how today's results are formed and how they affect the overall interface design. In addition, I will also share with you some of the design of flat interface tips and precautions.

Windows Phone 8 and Apple IOS 7 interface.

What's the situation?

How did everybody suddenly turn from the big love material, the slant and the projection shadow suddenly to the keen flat color and the simple font? This shift has been fuelled by a number of factors, some of which are notable below.

Excessive information overload

In today's cultural context of continuous information, we have to keep in touch with every day of the flow, some important, some irrelevant. We have to constantly evaluate, filter and create a variety of content, which is obviously very demanding. In addition, much of what we ingest is shifted to small-screen devices, adding to the feeling of overload. So it's easy to be overwhelmed with too much information, and reducing the elements in the user interface (UI) can bring a little visual serenity.

Clutter no longer: Geckoboard's visual tools make it easy for you to read critical data at a glance.

Simplicity is gold.

Similar to the above trends, many disruptive web applications and services can provide tools for highly functional focus. While traditional software developers prefer to add a lot of functionality to their products as an excuse for high prices, the trend toward centralized micro-applications is more likely to be a simple alternative to a variety of functional combinations. The simpler the application, the simpler the interface will be.

Beautiful simplicity: Oak Blue weather application.

Content for the King

Every time new equipment and technology enter the market, its function and the degree of interaction development will always fascinated us. After the confusion caused by the interface, we tend to refocus our attention on the content. Whether it's text, audio, or video, the ingestion of media content is probably the most important activity when we use the device, and in this case we need to ensure that the interface does not affect our intake process.

Technical proficiency

As smartphones and tablets quickly spread out to a wide variety of users, the industry's concern about the apparent nature of its controls is waning. While it was once feared that users would find it difficult to see unobtrusive buttons, we are now more willing to explore more subtle interactive content. Windows 8 and Chrome for Android even support lighting the screen with a touch command without visual cues.

The Fitbit Control Panel interface is visually bright, bold and easy to use.

The impact of technology

Most software will be limited to the platforms that are running. Screen size and pixel density are hardware constraints. A smaller interface greatly limits the scope of the design palette, which means that each element of the interface has its own expressiveness. The size of the text and the size of the font will largely determine the beauty and usability of the flat design.

If your target device doesn't show any nuance to this degree, you're lucky. As the screen size and pixel density of mobile devices increase, the later thinner and smaller devices will be able to achieve higher clarity. Of course, support for @font-face has greatly improved the appeal of simplifying the core design of text.

Real-time sales monitoring using Wallmob: Record all sales figures with browser devices.

Response-Type Design

With the popularity of various sizes of networking equipment, UI by the general trend and to ensure more fluid, and the corresponding, is the response style design trend. Although responsive design does not require special aesthetics, it is also possible to say that a flattened UI is easier to assist in the aesthetics of responsive design than other styles. Another advantage of simplifying the design is the ability to reduce the weight of the page and thus reduce the load time.

Simple but a little bit in place: OnSite

Best practices

Well, that's what the theory says. Now let's take a look at the actual operational considerations. It is difficult to create an effective and simplified design. As you peel away the regular UI elements (casting shadows, bevel, textures, and so on), you'll find how important the few remaining elements are. The following tips are especially useful for flattening the UI, although it is largely generic.

Before you start

As with any project, the first step is to make sure that the style you choose is reasonable. Before you start a flat design, make sure your design meets the target user's perception and target platform, device, and application type. It doesn't make sense to follow the trend if it doesn't work for your project.

Process

Regardless of which style you want to adopt, it is important to follow the process. Here are a few tips to help you achieve simple results.

1, in the design of the most simplified interface, I usually from the time before the advent of the PC to find inspiration, then the designers and artists often need to do "fastest." Take this opportunity to revisit many of the great designs of the past, such as Josef Müller-brockmann and Wim Crouwel. In addition, I will also look at minimalist painters such as Ellsworth Kelly, Mies van der Rohe and other industrial designers such as Dieter Rams.

2, temporary separation from the work is also very helpful. The core of flattening and simplifying design lies in the subtleties. So, after a short break with a new look back to work sometimes rather than the painstaking thinking to more effective use.

3. It is also useful to compare different versions of the border. After 20 minutes of moving an input line up and down 5 pixels, I'll keep the next two different versions for comparison, so that's a good one.

4, because the relative size of the object has a very important significance, so you need to start early on different types of equipment to view the design concept, so as to determine whether it is appropriate.

5, at the same time at work, often ask yourself: "Do I really need this?" It's always easy to read what you want to do, but we also have to find out frequently what to cut down or simplify. It is not easy to discard what you have tried to do, but editing and choosing is necessary.

Global Closet: An interactive game created by the workshop for National Geographic Education.

Grid

Grid plays a key role in interface design, no exception. The grid can help a lot when you're holding a set of restricted visual elements, trying to determine their order and making them more intuitive to use.

What the grid determines is not just the visual order. You can also use it to define content and functional groups. Sometimes it is not necessary to use a line or a box to group a group of objects. Simple alignment and spatial adjustment can often help users understand the structure of the interface.

You can also try to use elements of a particular importance to break the grid to attract users ' attention.

Try using a more dense grid. When you dramatically simplify the visual palette, you may find that your design supports more complex structures and does not seem messy. You can also try out what additional information can be conveyed only by position adjustment.

Live School Rossul design developed for ipad applications.

Color

Color is undoubtedly a key component of visual design. For the simplest interface, the meaning is more critical.

Consider a broader palette. Personally, I think the narrower palette usually creates a more functional interface. To create a dazzling color is very simple. But with this approach, you can broaden your selection and, given the small number of elements to be designed, the extended palette can also give you a good feeling.

When you set a palette, you can test the selected hue in a broad range of color values and make sure that it behaves properly in both bright and dark colors.

It is suggested to test the same color and contrast with each other. An early experiment with the palette will ensure that you can then master all the color ranges needed for subtle and strong contrast elements.

Triplagent's visual design incorporates an excellent color scheme.

Text

On the flat content-driven Web site, text is the protagonist.

Lining is certainly a way, but sans serif fonts can make people feel more concise.

You can find a font type with more weight and style. Although not necessarily full, the broader range of choices helps define the hierarchy more clearly. You may also find that a certain degree of weight is better in a particular environment.

Do not be afraid to use the extreme size and weight of the font collocation to build visual order. Try a large, ultra-fine title font with a small, medium-weight body font.

Note whether the font is easy to read. This may sound like a bit of a nonsense, but your choice of fonts will be very strong, so make sure that it is easy to identify in any size.

Siteleaf on the crisp and easy to read text.

Interaction

In a flattened UI, it is a learned activity to show which elements can interact. Here are some of my common methods.

Contrast if most of the layout content is white, you can add some additional color to the interactive element. If your design is text-oriented, you can use a simple icon to represent the interaction. If the title is large and all lowercase, the link section can be smaller and use uppercase letters. You know.

Conventional placement methods can also play a role. Let's say your back arrow uses a fine chevron to put it in the upper-left corner, because the user usually gets to this position to find the back button.

As the overlay on the page increases, we can't make all the interactive elements look like buttons. The interface should be as intuitive as possible. However, if the interaction process is more complex or unconventional, it should provide a convenient method for error recovery.

Drop-down menus, mock windows, pop-up windows, and other cascading elements are cumbersome to operate in a flat design. You can distinguish between different levels of interaction using sharp contrasts, borders, or coloring.

The design elements presented are simple in layout and excellent in contrast: Taasky.

End

There are no rigid specifications in the field of design. It is heartening to see that designers are so enthusiastic about the design that simplifies the user interface very much. But does exploring flat design mean never to use gradients and shadows? Of course not. In fact, I recently saw a few very interesting works on the one hand in a clever way to present the content, on the other hand also ensure the interactive intuitive, so as to achieve a flat and the size of a direct balance.

In this digital age of interconnected, informative, and functional, the most streamlined design of a broad renaissance is a bright one. This is naturally not an omnipotent solution (no style can do anything), but it can be done with good, comfortable digital experience as long as it is considered and properly applied.