The journey of the evolution of Design in the last decade has been quite interesting. The basic elements of design have been challenged with the way people are now consuming information. People want to read and view things on their smartphones and tablets. Simplistic, fast-to-load creatives have redefined the norms of Design. For decades, designers created 3-dimensional and close to reality UI and then came the modern day flat and material designs that disrupted what was a given; for both readers and designers. The importance of UX (User Experience) over UI (User Interface) settled in.
Let’s re-visit the journey of the evolution of Design starting right from Skeuomorphic Design or Realism Design. The original D was all about rendering close to reality experience to the viewer.
Designers created reality or real objects. This is called Realism Design or Skeuomorphic Design. It is quickly understood as the results are familiar to the real world physical objects. Having large file sizes, this design element takes longer to load up. What also contributed to the so called demise of Skeumorphism is the inability of the designs to be responsive, hence making it not so mobile friendly.
By 2010, viewers had access to multiple devices with different resolutions and wanted to have a seamless experience on Desktop, Laptop, Tablets and Mobile devices. With Flat Design, design elements are created hassle free and in no time at all. It’s low file size proves to be efficient for the world wide web. Basic shapes, vibrant colors and typography are the heroes of the Flat Design creatives. These add-ons are nothing short of a boon to designers all over the world.
Google announced Material Design on June 25 at the 2014 Google I/O conference. Material design is an evolution of the Flat Design. Google employed all the significant design concepts, z dimensions, fundamentals of light, vibrant colors, authentic motion, and interactive sense of physics in Material Design. In the essence of it, all designs are conceptualized as Material — yes, a piece of material in actuality.
Some elements of Material Design –
Z depth — Material design added another depth in the design concept like 3D world — the Z depth. In the language of a design, each object have a standard 1 dp thickness for showing distance between two surfaces along the z-axis.
Light and shadow — In the realm of material environment each object has it’s own shadow like real objects on a base of virtual lights, key lights and ambient lights. Google added this concept to Material Design.
Transforming material — Material can change shape like rectangle may become circular, or circle can become polygon and also grows and shrinks but never bends or folds.
Authentic motion — Motion in material design should be meaningful and serve as a base of physical objects, For example — Motion should be on base ofease in and ease out, avoid linear animations.
Meaningful transitions — With transitions we can quickly attract user’s attention, so transitions need be smooth, clear and pointed to grab user attention.
Color — Color in design is very subjective. In Material Design, Google has suggested a palette of 500 colors out of which we can develop our own brand color. Color should be unexpected and vibrant.
Here is a look at our logo — before and after
- Product icons — Product icons are a visual communication of any brand so It should express your brand color and brand identity. See material design guide for icons.
- System icon — System icon should be bold or geometric in simple or minimal in form.
Imagery — Imagery is more powerful tool to express more about your product so choose such images that present personal relevance and information.