跳至主要内容

10 Flat Web Design Examples Tells the Flat Design Being in Disgrace

In recent years, the design style has been changing. Regarding this, the designers with different preferences and tendencies keep discussing and debating on web design trends for a long while. For example, Flat design vs. Material design. But our topic today is not the comparison between the two terms but learn some great flat web design examples to give you inspirations.

Before the learning on flat web design examples, you should get a comprehensive understanding of what is flat design. According to the authoritative explanation on Wikipedia: "Flat design is a minimalist UI design genre, or design language, commonly used in graphical user interfaces (such as web applications and mobile apps), especially in such graphical materials as posters, arts, guide documents, publishing products.”

In 2008, Google initially adopted the definition of Metro Design, and later on, they changed the name to Flat Design. However, the name, "Flat Design", is a controversial term that even has not been fully recognized by everyone.

From the very beginning, the flat design is affected by The International Typographic style, and it emerged and got popularization during the 1950s and 1960s. This period is regarded as the starting point of flat design, although it would not make an appearance in the digital world for some time thereafter.

In 2002, the flat design element has been contained by the Microsoft’s Windows Media Center. In 2006, the Zune MP3 player also included the elements of flat design. The design of the Zune was clean and simple, with a focus on large lowercase typography, silhouette-style logos, and monochromatic font colors. In 2010, Microsoft still kept flat design style with the release of Windows Phone 7. The bold large and bright shapes, sans-serif typography, flat images, and a menu with a grid-like pattern appeared at this time. Likewise, the later Windows 8 operating system also continued the flat design elements by using the crucial elements of flat web design, such as the bold colors, simple typography, long shadow and ghost buttons. In 2013, Apple released iOS 7 which featured the flat UI design elements instead of skeuomorphic design.

From the aspect of pros and cons of flat design, designers have their own opinions.

Advantages:

1. Reduce the hardware requirements of mobile devices, and extend the standby time;

2. Can directly present the information and things out in a simpler way, which will help to reduce the cognitive impairment;

3. With websites and applications that cover more and more different screen sizes on many platforms, creating skeuomorphic designs with multiple screen sizes and resolutions is cumbersome and time-consuming. The design is moving towards a more flat design, and you can guarantee that it will look good on all screen sizes at once. Flat design is more simple, clear, the most important thing is that better adaptability.

Flat design opponents think that:

1. It will reduce the user experience, and it's offensive on the non-mobile device;

2. It's unintuitive, and needs certain learning costs;

3. It cannot convey the rich feelings and even too cold.

Flat design can be seen everywhere in our daily life, such as Apple's mobile phone. By the using of angular lines, plus some of Apple's application design interface, monochrome contrast, the design is very beautiful. Here Mockplus team selected some of the great flat web design examples for your reference. Hope these examples will give you some inspirations. Any other designs for the recommendation, please feel free to give a comment below the article.

Space Needle

Space Needle

Stach Icons

Stach Icons

Fitbit

Fitbit

Geckboard

Geckboard

Mailchimp

Mailchimp

Wistia

Wistia

Chilicon Graphic

Chilicon Graphic

Numbrs

Numbrs

Standbuy

Standbuy

Triplagent

Triplagent




More Articles:

评论

此博客中的热门博文

Best Prototyping Tools Recommended for 4 Different Design Scenarios

Prototyping is an effective approach to turn your ideas into a crowd-funding product, but it’s not easy to pick  the best prototyping tools  for your style, especially with all sorts of tools available on the current market. From my point of view, the foremost concern while choosing a prototyping tool is whether it fits perfectly into the design goals. In the following, I’ve made a list of prototyping tools recommended for 4 different design scenarios, with both free and premium tools included. Scenario 1 – Medium-to-Low Fidelity & Quick Mobile/Web App Generally, the medium-to-low fidelity refers to those prototypes with limited functionalities and interactions, applying to showcase the design ideas, scenarios and interface layouts as well. It helps a lot in the communication, presentation and report process. As far as I am concerned, the best tool for this scenario can showcase the entire flow of the app experience in a short period of time. Here I recommend two prototyping t

Hollow Icon vs. Solid Icon: Which Is More Friendly for Recognizing?

In UI design, what  scenario  should hollow icons and solid icons be applied to? Some believe that the hollow icons are visually more complex than the solid icons, while the solid icons are in fact more recognizable. The opinions of designers on this topic varies. Some designers think that the hollow icons is made by lines, as a result of which, they are more difficult to recognize. However, they gives users a feeling of ease and exquisiteness. Others deem that the recognizability has nothing to do with this topic, but depends on the shape, color and other factors of the icon. 1. The function of icons. First, this topic focuses on a specific type of icons: functional icon. Let’s take a look at the basic functions of this type of  icons . Functional icons are common in life, usually seen in the airport, stations, hotels, shopping malls and other large public places, providing guidance to people, as shown below: In  UI design , icons are one of the most com