As the old saying goes: discard the rough, select the fine, discard the false and preserve the true. Sentences that we never forget since childhood not only teach us the truth of life, but also accurately reveal the essence and law of things. The Flat design trend, which started in 2013, is exactly in line with this rule. The removal of redundant, heavy and complex decorative effects is at the heart of the Flat design.
It seems pretty simple, but to make a good Flat design, it’s not. How do you get rid of the extra perspectives, textures, gradients, and things that make 3D look good so that the “information” itself is at the heart again? How to design abstract, minimalist, and symbolic design elements? These are the problems that flat design needs to consider. From a small ICON to a large design concept and style, flat design is by no means a simple “simple design”.
Today, I’ve compiled a list of 20 great examples of flat design for mobile, most of which were created by Behance and Dribbble designers. If you have a better one, feel free to share.
1. WeDo
Designer: Fabio Basile
Tools used: Sketch, PS
Highlight: I really like this little fox, whether it is the collection of shape elements, or soft and saturated color scheme, can achieve a comfortable visual effect.
Single background color, almost white solid color, with set graphics and simple lines.
Serif fonts, color and size contrast and reinforce important messages.
2. Vault financial app design
Designer: Higher
Tools used: Sketch, PS, AI
Highlights: The design of logo “V” is very clever, highlighting the theme Vault Financial App design, and the color scheme is simple.
Pure white background color, white space.
The key points in the layout are prominent, the headings and secondary headings are contrasted, and the information is clearly layered.
The interface is clean.
3. Intimate
Designer: Mockplus
Tools used: Mockplus, PS
Highlights: pure white background white, full space point.
The text should be properly set up, and the font size should be sharp and unobtrusive to highlight the main message.
The picture is simple, the style is consistent, the overall interface is harmonious and clean.
The interaction is reasonable and does not allow the user to misunderstand.
4. Upper APP
Designers: Nest Asanov, Andrey Drobovich, Vlad Taran and Sergey Valiukh
Tools used: PS, AE, Sketch APP
Highlights: Color, red, black and white three colors, sharp contrast, bright and bright, and the proportion of the UI color matching golden ratio of 6:3:1.
The color of the font is chosen to contrast with its background and highlight the text without creating dyslexia.
5. Weather App
Designer: Sergey Valiukh & Tubik Studio
Tools used: PS, AI,AE
Highlight: Use gradient highlight, which is a feature of flat design. Gradient gradient is more flat than transition gradient.
The color scheme is mild, giving a gentle and calm feeling.
6. Sea Schedule App
Designers: Khenkin, Sergey Valiukh, Tubik Studio
Tools used: Mac OS X, Axure, InVision, Flinto, PS, AI, AE
Highlights: The use of UI security color blue as a solid color background, easy to approach the user, simple interface.
The interface elements are colored with a blue background, but still gradient.
7.Analytics
Designer: Alexandr Oleynikov
Tools used: PS,AI, AE
Highlights: purple solid background color, interface neat and unified
Icon simple and smooth
8. Lines activity tracker
By Jakub Antalik
Tools used: AI, Sketch App
Highlights: The elements are simple and the text rows highlight important information without causing visual fatigue to the user.
The ICONS are simple and the lines are clean.
9. Foster Friends
Designer: George Railean
Tools used: PS, AE, Sketch App
Highlights: The logo is a variant of two “F” s, which is in line with the theme of Foster your Passion. The color contrast is reasonable, giving people a clean feeling.
Solid color background.
10. Accurun – An iOS running tracker app
Designer: Gregoire Vella
Tools used: PS, AI, AE
Highlight: Round geometric icon element.
Pure black back scenery, the primary colors are bright, and form a good contrast with the background.
Text information is highlighted.
11. Mileage Tracker – Website & Application Design
Designer: Stanislav Hristov, DTAIL STUDIO
Tools used: Wacom Cintiq, PS, AI
Highlights: The interface is clean and simple, with few colors but sharp contrast.
Text information is highlighted.
12. UI Development
Designer: Ramotion
Tools used: Adobe Illustrator Draw, Photoshop
Highlights: Simple and simple color, clean interface.
The interaction is new and smooth.
13. Travello App Concept – Plan a new travel adventure
Designers: Karol Cichoń, Adam Kalinowski, inFullMobile Team, Tobiasz Usewicz
Tools used: AE, Sketch APP
Highlight: White solid color background, simple interface.
The interaction is clever.
The text is arranged to highlight the main information.
14. Foly Mobile App
Designers: Lilit Harutyunyan, Sergey Muradyan
Tools used: Wacom Intuos, AI, PS
Highlights: Logo setup is simple to fit the theme, and bright color contrast.
Look solid color background, with a sense of senior.
The color of the interface elements contrasts with the background color.
15. Map Chat App
Designer: Vadim Gromov
Tool used: Sketch APP
Highlight: White solid background and blue interface color create a clean and simple interface.
Icon elements are simple and beautiful.
16. Smart Home App – iPhone X
Designer: Sunny UI
Tools used: PS, Sketch App
Highlight: Light solid color background, green gives a comfortable and pleasant experience.
ICONS are highlights, elements vivid and concise.
17. Weather app
Designer: Sein Baručija
Tool used: PS
Why it’s cool: Dark purple is bold and fashionable.
The use of geometric elements is striking.
18. The air conditioning control interface
Designer: Jude TU
Tool used: PS
Highlight: Solid color background interface fresh.
The icon is concise and the message is prominent.
19. Animation Set 2015 v1.0
Designer: Sergey Valiukh & Tubik Studio
Tools used: ps.ai.AE
Bright spot: icon is focus, vivid and lovely.
The interface is divided into rectangular color blocks with clean and bright contrast.
The animation is novel.
20. Eat Daily PROTOTYPE with MockPlus
Designer: Akash Khandavilli
Tools used: Mockplus, PS
Highlights: A solid white background contrasts with bright red, the preferred color for food apps.
Above are 20 excellent flat design interfaces for mobile devices, hoping to bring inspiration and inspiration to your design. I believe that after appreciating so many excellent designs, it is not difficult to find the common ground in these works. So, what are the key points to pay attention to when designing mobile Flat interface?
1. The contracted
Any element that appears on the interface must not deviate from the central idea of Flat design: simplicity. For example, use ICONS that are clear and generally accepted. Use sans serif fonts instead of overly fancy ones.
2. Color scheme
Use solid and vivid colors to emphasize the important information you want to present. But it’s worth noting that Flat design color choices don’t always rely on bright, vivid colors. Here’s an example:
3. Text layout
1) the font
Use sans serif fonts, which give a clean, crisp look and work well with other elements on the page to create a comfortable look.
2) text
Headings and text themes can be contrasted by font size and color to highlight central information. But do not exaggerate, the contrast should be moderate.
4. Interaction design
The user experience of Flat design is not only the simple and clean visual effect, but also the clear and concise interaction design, which should not lead to confusion and confusion in the process of use.
5. Select tools
If you want to do a good job, you must first improve your tools. Based on the above 20 flat designs and my own experience, I recommend some tools to help you make flat design easier and more convenient.
1) Prototyping tool — Mockplus
Focus on the design itself, rather than learning about a tool, Mockplus is a prototyping tool that is both easy to learn and functional. The package contains more than 200 highly encapsulated components such as pop-up panels, content panels, scroll areas, drawers, and more than 3000 vector ICONS that can be designed with simple drag and drop. The interaction design in Mockplus is completely visual; what you see is what you get.
2) Vector drawing tool –Sketch
Sketch is a professional vector drawing tool, mainly for UIS design and Web, with vector editing and perfect pixel capabilities. Smart guides can quickly and accurately determine the size between two elements, which is very beneficial to the design. Sketch has excellent output functions. It can be output in native multiple formats and supports its own suffixes.
3) Image processing software –Photoshop
The power of Photoshop is very clear, but for new designers, it is important to remember that Photoshop is a powerful tool for image processing, not graphic creation. There are many more design tools that are not listed here. But tools are not many, but mastery. In particular, finding the right tool can often result in twice the result with half the effort. For example, photoshop processing graphics creation is not appropriate.
Finally, I recommend some download resources for Flat interface design, hoping to help you in your design:
1. User Interface Mobile Design
2. Flat Mobile App UI Design
3. Flat Mobile User Interface
4. Idealogic Flat Mobile App UI Design
5. Elegance Flat Mobile UI Kit Free
Flat design, especially on mobile terminals, can give full play to its advantages. It can show the working way of information and things more simply and directly, and reduce the generation of cognitive obstacles for users. In addition, with websites and apps covering more and more different screen sizes across many platforms, creating skeuomorphic designs with multiple screen sizes and resolutions can be cumbersome and time-consuming, while the flat design basically guarantees that the design will look good across all screen sizes. Therefore, in the future, flat design, especially on mobile, will become more popular, and every designer should pay attention to it.
