See discussions, stats, and author profiles for this publication at: https://www.researchgate.
net/publication/301655519
A Guide to Material Design, a Modern Software Design Language
Article · April 2016
CITATION READS
1 5,358
1 author:
Prakash Patel
Nirma University
7 PUBLICATIONS 5 CITATIONS
SEE PROFILE
All content following this page was uploaded by Prakash Patel on 27 April 2016.
The user has requested enhancement of the downloaded file.
Developers Overview
A Guide to Material Design, a
Modern Software Design Language
Material Design is a new and continuously evolving design language. The principles and concepts
introduced by it appear realistic and pleasing, and it is platform and language independent.
A
design language or design vocabulary is an overarching design of user interfaces. The most popular examples of
scheme or style that guides the design of a suite of software design languages are:
complementary products or architectural settings. Skeuomorphism
Designers wishing to give their suite of products a unique but Metro Design
consistent look and feel define a design language for it, which Flat Design
can describe choices for design aspects such as materials, colour
schemes, shapes, patterns, textures or layouts. They then follow Skeuomorphism
the scheme when designing each object in the suite. In simple A skeuomorph is a derivative object that retains ornamental
words, software design is a set of guidelines, which provides design cues from structures that are necessary in the original.
or suggests the design aspects in your software for a consistent In simple words, skeuomorphism enforces the UIs to be
look across entire applications. Here’s an example: the themes designed to look like the original object of the real world
for all activities in Android have the same look and feel. and behave in that way too. Many computer programs have
Design languages are only guidelines; they are not rules. These a skeuomorphic graphical user interface that emulates the
guidelines are designed such that users broadly follow them, aesthetics of physical objects.
but one can surely innovate and bend all the rules of a design An example of this trend was the 1998 RealThings
language. People tend to consider them hard and fast rules and package. A more extreme example is found in many music
never do anything outside those guidelines, which is not a good synthesis and audio processing software packages, which
thing in developing engaging user interfaces. These guidelines closely emulate physical musical instruments and audio
were also generated by innovation. equipment. Functional input controls like knobs, buttons,
switches and sliders are often careful duplicates of those
The history of design languages found on the original physical device being emulated. Some
The concept of a design language has existed ever since the software even include graphical elements of the original
64 | april 2016 | OPEN SOURCE For You | www.OpenSourceForU.com
Overview Developers
Figure 4: One of the goals of Material Design, which is consistent design
across different screen sizes
Figure 1: An application showing the use of skeuomorphism it easier for those familiar with the original device to use the
digital emulation by making certain affordances stronger. On
Metro the other hand, people opposing this design language say that
Just another WordPress site HOME My Images Slideshows Jumbo
it requires resemblance of the original object, so it limits the
Sample Page About Us Contact Us
creativity of a programmer or of UI designers to design or try
Home Some images anything new in their interfaces.
Sample Post 10 New Post
Metro Design
It is a long established fact that a reader will be
distracted by the readable content of a ...
Metro is a typography- and geometry-focused design language
tablished fact that a
reader will be dis...
Sample sample post 8 created by Microsoft primarily for user interfaces. A key
Pos...
“On the other hand we denounce with
righteous indignation and dislike men who are
design principle is better focus on the content of applications,
relying more on typography and less on graphics (content
so beguiled and...
It is a long
established fact that
a reader w...
before chrome). Early examples of Metro principles can
Figure 2: WordPress theme showing the use of Metro Design be found in Encarta 95 and MSN 2.0. The design language
evolved in Windows Media Centre and Zune, and was
UserName
formally introduced as ‘Metro’ during the unveiling of
Password
Sunny Amsterdam
Windows Phone 7. It has since been incorporated into several
Today Tue WED
Log in
of the company’s other products, including the Xbox 360
26˚/ 34˚ 29˚/ 21˚ 30˚/ 24˚ system software, Xbox One, Windows 8, Windows Phone,
Sun
28
Mon
29
Tue
30
Wed
31
Thu
1
Fri
2
Sat
3
and Outlook.com under the names Microsoft Design language
and Modern UI after Microsoft discontinued the name ‘Metro’
Search 4 5 6 7 8 9 10
11 12 13 14 15 16 17
supposedly because of trademark issues.
18 19 20 21 22 23 24
Downstate Upstate
25 26 27 28 29 30 31 ITEM 1
ITEM 2
22312 331 1352
ITEM 3
Flat Design
ITEM 4
ITEM 5
Flat Design is a minimalist UI design genre, or design
70%
ITEM 6 language, currently used in various graphical user interfaces
(such as websites or Web applications). Flat Design is a style
Figure 3: An illustration of different components in Flat Design of interface design without any stylistic elements that gives
the illusion of three dimensions (such as excessive use of drop
design that serve no user interface function, such as handles, shadows, gradients or textures) and is focused on a minimalist
screws and ventilation holes. Even systems that do not employ use of simple elements, typography and flat colours. Designers
literal images of some physical object frequently contain may prefer Flat Design because it allows interface designs to
skeuomorphic elements, such as slider bars that emulate linear be more streamlined and efficient. It makes it easier to quickly
potentiometers and tabs that behave like tabbed file folders. convey information while still looking visually appealing and
Skeuomorphs need not be visual. The shutter-click sound approachable. It also makes it easier to design an interface
emitted by most camera phones when taking a picture is an that is responsive to changes in browser size across different
auditory skeuomorph; it does not come from a mechanical devices. With minimal design elements, websites are able to
shutter, which camera phones lack, but from a sound file in load faster and resize easily, and still look sharp on high-
the phone’s operating system. Another example is the swiping definition screens. As a design approach, it is often contrasted
hand gesture for turning the ‘pages’ or screens of a tablet. to skeuomorphism and rich design. (Though it should be noted
People who are in favour of this language argue that it makes that Flat Design can and does use skeuomorphs just as much
www.OpenSourceForU.com | OPEN SOURCE For You | april 2016 | 65
Developers Overview
Various guidelines for shadows, such as different shadows
for resting and the active state of objects
Motion: Motion is great. We all love motion and
animations in interfaces. It makes the application feel alive,
which is what motion in Material Design is all about. Motion
is a very important part of design nowadays. If an object is
to be placed on a screen, making it appear with some motion
(such as fade or reveal), rather than just popping it in front
Figure 5: The material shown in Mate- Figure 6: Motion in Material Design of the user, would make it easier to understand for the user.
rial Design, which lives in the 3D world
However, putting random animations anywhere does not
help users either; rather, it could irritate them. Motion is to
provide continuity between different states of the application.
System Status Bar
Motion should be applied so that it guides the user
about where the flow of the application is headed and
Background
what’s the result in response to the input of the user. For
example, suppose there is a card on the screen, showing
Floating Button
some information; when the user clicks on the card, it
Content card
expands to fill the whole screen and shows more information.
This provides continuity between these two states of the
System Navigation Bar application. Going back would shrink the card again, and
users will get continuity back and forth in the application.
Layout: Layout in Material Design is composed of many
Figure 7: Stacking in layouts following Material Design components. Mobiles, tablets and desktops—all share almost
the same elements such as toolbars, bottom bars, floating action
as a realistically designed UI can.) buttons, SideNav bars, etc. The Material Design specification
shows different layout arrangements for these elements on the
Material Design different screen sizes of phones, tablets and desktops.
Material Design is a modern design language which enforces It also explains each element, and shows some Android-
a consistent look and feel of the application across devices specific elements and how these can be used in user interfaces.
such as a phone, tablet and a computer. It is a very broad In layout, a very important thing to note is the stacking of
concept now, and has guidelines for almost all the user elements. As stated before, objects in Material Design move
interfaces and patterns. Material Design is a live process; it is and exist in a 3D space. In 3D space, material is stacked one
continuously evolving and making itself better by including on top of the other rather than every object being on the same
other design patterns in the document. This language is plane. So the layout section shows how all the elements, such
mainly about concentrating on three things: as the background plane, toolbar, floating action button, etc, are
Material placed on one another, and how they cast crisp or soft shadows
Motion according to their position along the z-axis.
Layout
Material: In Material Design, one of the goals is to make
the UIs natural. In nature, everything is in a 3D space, so References
elements in Material Design exist and behave like objects in [1] https://www.google.co.in/design/spec/material-design/
introduction.html
the real world. It provides meanings and visual cues to the
[2] http://papyros.io/qml-material/
user. Material in Material Design instantly reacts to user input. [3] https://github.com/samvidmistry/PyMaterial
An example would be the button; when the button is pressed, [4] http://www.materialup.com/
it rises from its position to make contact with the finger of the [5] https://www.materialpalette.com/
[6] http://www.hongkiat.com/blog/material-design-resources/
user. In that process, the button also casts a shadow as it rises,
giving the impression that the button is in a 3D world. This also
implies that the material is opaque and solid, so that touch or By: Samvid Mistry and Prakash Patel
any kind of input events cannot pass through the material and Samvid Mistry is in the final year of his diploma in computer
interact with the material behind the foremost material sheet. engineering at Nirma University. He is an Android developer.
Other guidelines are: He can be contacted at
[email protected],
http://www.samvidinfotech.in
To show stacking of material, usage of shadows to
separate them Prakash Patel is an assistant professor in computer engineering at
Nirma University. He can be contacted at
[email protected] Material can grow or shrink, but it cannot bend or fold
66 | april 2016 | OPEN SOURCE For You | www.OpenSourceForU.com
View publication stats
