Per Aspera Ad Astra – Through Skeuo & Flat to Material Design

We are sure that the community around this blog knows much enough about material design, its history, main goals and principles. So, we are not going to bore you with these details all over again. The point of our interest is an argle-bargle among web designers and developers about the original roots of material design. Some see them in skeuomorphism, others in flat web design trend. There are experts that notice the characteristics of both in material design.

Let’s try to find out what makes them think so. We’ll start with skeuomorphism if you have nothing against it. What similarities do web designers distinguish in skeuomorphism and material design?
Skeuomorphic elements imitate the objects existing in real world. As you know, this likeness was deliberate, intended to place the user into familiar, comfortable virtual environment, engage them, help to communicate with the targeted audience and of course boost sales funnel. The fact that skeuomorphic UIs attracted the customers has been exploited by such blue-chip corporations like IBM (with their RealThings software released in late 90s), Microsoft (with their Microsoft Bob software product released in March 1995 widely publicized prior to that date under the codename “Utopia”) and, of course, Apple (with Steve Jobs Roll Your Own Calculator Construction Set).

Surely, skeoumorphism has lots of cons, which we won’t discuss here as they have no connection to the topic of our article. However, if you feel nostalgia for skeoumorphic designs, click this link and study everything you would like to recollect with interactive skeuomorphic design infographic. We promise it will be fun and simple.

At this point we can arrive at the intermediate conclusion that web designers match skeuomorphic and material design because both are grounded in tactile reality. Though, the trends can hardly be called the same thing as material design is so technologically advanced that this comparison doesn’t stand serious critics.

We can let the above information sink for a minute and continue with flat vs material design.

Undoubtedly, this couple is closer to each other if we consider time lapse…

Main principle of flat design style is that UI should not have any elements that can give the illusion of three dimensions. No drop shadows, no textures or gradients. Flat interfaces are differentiated by minimalist approach, simple shapes, typography and loud colors. The trend inspired by Swiss style, Modernism and Bauhaus has been firstly realized in 2006 in Zune mp3 player (Microsoft’s brainchild), then continued by Windows Phone 7 in 2010 and Windows 8 (the latest operating system released by Microsoft). Colored Metro-style blocks with grid shapes, sharp edges, bright hues and clean typography moved into company’s current products: Xbox 360, Microsoft Office, Microsoft website.

The initiative has been swooped up by Apple’s iOS7 released in 2013.

We guess there is no necessity to immerse deeper into flat design philosophy as it’s still on everyone’s lips and before everyone’s eyes because flat sites have simply flooded the Internet.

The purpose of this short excursus was to understand why material design is so frequently compared to flat style. We guess this happens because of juicy colors used in both trends. You can’t but agree that material style objects and elements can’t be called flat. On the contrary, Google made everything possible to create an impressive 3D environments for its users. We can suppose that they wanted to create a virtual reality, a better world based on physical laws of the real world, a cyberspace, where the objects look and act identically to their high-tech analogues across all popular platforms. In such layout every user will feel at home no matter what gadget he/she prefers.

Based on everything said above we would like to admit that material design is a fully independent trend aimed on absolute crossbrowser and cross platform compatibility, focused on simplicity and usability. What’s more, material design is extremely eye-pleasing and almost alive thanks to mind-boggling animated effects.

We are even not sure if it’s correct to call material design a trend. Maybe some of the blog readers know the story behind material design? If so, we would like to ask them to share it at the comment section.

As long as there are no your stories here yet, we offer you to read the one we know.

There is no exact material design story, but a thought process. This is what material design is according to Matias Duarte, the vice president of design at Google, “It’s the unifying metaphor behind Google’s new design direction, providing a unified set of physics and rules for how software should look and act. It’s also a little weird.”

Rather than starting with a palette of colors or a big set of guidelines, the guys started with a question. – “What is Software made up of ?”

This question became a powerful spark. It led the team come up with a new way of thinking about the software elements we use and (virtually) touch every day. Instead of just talking about pixels on a screen or abstract layers, the team imagined that these cards and the surfaces they slid around on were actually real, tangible objects.

Material design is a constraint because it is grounded on physical laws. But these constraints made design decisions easier and more consistent.

The screen can do things that physical paper can’t, like grow and shrink with animations. Those animations were important to Google, because they help users understand where they are inside an app.

It’s basically safe to say that material design is a design strategy chosen to help people relate with transitions and actions on the screen more than in real life. Material design is an idea, the very beginning of more software shipped by Google that uses it. Now material design is about moving it forward. The whole world is applauding those cute little animations of morphing shapes and those off-color buttons that expand when clicked.

Material Design is the evolution of Holo and ultimate design guideline for developers & designers of Android and web applications. In many ways it is a more flexible design language that was created for a global community – Google was only the first user. Material Design allows a more objective approach to the design adoption choices. It sets reasonable limits, but not excessive restrictions.

We know that it’s difficult to surprise you with something about material design trend, but we will try to. Here are three brand new themes developed in material style by TemplateMonster’s professionals which you can considerably simplify a web design job for you.

Materal Joomla Template

This theme was created for web designers and web design agencies. It is designed in cheerful colors and has a sticky menu. It is responsive and enhanced by Bootstrap functionality. The theme is supplied with online chat. HTML plus JS animation and Parallax scroll imparts depth to the layout and breathes life into it. The theme has Sortable Gallery, Social options and a heap of other cool features.





Live Demo


Material Theme

This bluish theme in material style is suitable for Blogs and Portfolios. It is built on Cherry Framework which makes its customization easy as a pie. This theme can also boast a trendy Parallax scroll as well as other visual effects. Main menu is hidden. It pops up on click and has a drop down option. Audio and video integration makes web presentation even more memorable and engaging. Slider enhances this positive impression.




Live Demo


Material One

This bright orange theme was also designed for a Blog or Portfolio. Drop down fixed position menu constantly stays before the users’ eyes. It is crossbrowser compatible and Search Engine Friendly. Social Options are also available for viewing company’s social profiles. Switch between Accordion, Carousel, Isotope and Slider to make your web page even more visually appealing.





Live Demo


To wrap up everything said above we would like to ask if you share our opinion that there is no need to search for similarities in skeuomorphism, flat and material design. Material design can be considered an independent web design language (a concept, a philosophy) developed for best user experience (by saying that we mean the experience that is much better than in real life), erasing the boundaries between all modern gadgets and involving more users of all ages, education levels and professions into virtual world through its simplicity and intuitiveness. The history of material design is based neither on skeuomorphic nor on flat design trends. It’s something completely different that started with an innocent question and nobody can predict what grand future is waiting for material design. The title of this blog post was not a result of random choice. We believe that the only possible reference to skeuomorphic and flat design in terms of material ideology will be relevant if we speak about the milestones of web design in general. And what do you think? Speak up! Any feedback is welcome.

#templates #materialdesign #webdesign #trends #blog #websites #development #Google #Apple #themes #Wordpress #tools #HTML5

2 responses on “Per Aspera Ad Astra – Through Skeuo & Flat to Material Design

  1. Looks really good. Still waiting for Viber and Skype material design 😀 They should add a feature to stop downloading group chats when the user does not want to be bugged with 100 messages a minute.


    Awesome Blog! I appreciate that you mention brief description about themes and so no.

Leave a Reply