Material design By Google & iOS Human Interface Guidelines

read time: 5 min

Share on facebook
Share on twitter
Share on linkedin
Natalia-profile-picture-designme-agency
3d rendering illustration icon logo glass google edited scaled
3d rendering illustration icon logo glass google

Material design By Google

Google introduced its material design guidelines in 2014 as a design language
focused on creating a great user experience and to ensure consistency and full scalability
of UI elements across an increasing number of connected devices. The concept is intended
to provide flexible tenets that allow developers to create a responsive interface without
confusing new users.

To keep the website or mobile application feeling fresh and visually inviting, it should be
designed based on the following principles:

  • Less means more. Simple designs don’t have to be boring. The strategic and holistic use of visual elements allows to create a design that is friendly and easy to use.
  • Neutrality is better than eccentricity. Neutrality doesn’t mean monotonous. Getting rid of unnecessary elements that may distract the user from the purpose of using the design can be beneficial.
  • Clarity – users should easily be able to find what they are looking for. Attention spans have decreased and keeping the design and UX clear and straight forward,ensures a much better experience. Cluttering the website with too many options, images and copy just hinders the user experience
  • Classic and timeless approach – the latest trends do not always suit every project. Classic solutions have been proven for years. Simplicity is better than recombination.
  • Paying attention to details – making sure the entire project is consistent and understandable.
  • Designing conservatively – avoiding the use of only stimulating colors and choosing subdued colors to maintain the balance. Being careful so the design does not look sloppy and messy.
  • Not rushing – thinking over the project, designing requires strategic consideration.
  • No need to explain – the navigation must be seamless and simple, it must not require any additional instruction.
  • Aesthetics – the design must be pleasing to the eye of a user.

Google updates the design guide on an ongoing basis, including styles of UI elements
based on the following three basic rules:

  1. Material is the metaphor – Material metaphor is a theory that combines the concepts of rationalized space and a system of motion. The material is grounded in tactile reality and is inspired by sheets of paper and ink, but it is both technologically advanced and open to the use of imagination.
Material metaphor by Google
1. Material metaphor by Google

2. Bold, graphic, intentional – Fundamental aspects of designing for printing – typography, grids, light, space, color, and the use of an image – determine the variability of the design. These elements are not just for pleasing the eye, they indicate hierarchy, meaning and direct the attention of the user

Bold graphic intentional by Google
Bold, graphic, intentional by Google

3. Motion provides meaning – the movement respects the role of the user as the main causative factor. Primary user actions mark the points that indicate motion and transform the entire project.

Motion provides meaning by Google
Motion provides meaning by Google

iOS Human Interface Guidelines

iOS Human Interface Guidelines are the basic UI guidelines developed by Apple
for iOS application development purposes. They mainly focus on iOS apps but can be
applied to any other digital product including websites.


There are three key design principles for the iOS platform:

  1. Clarity.
    Throughout the whole system, text is legible at every size, icons are precise and
    lucid, adornments are subtle and appropriate, the design itself is focused on
    functionality. Negative space, color, fonts, graphics, and interface elements subtly
    draw attention to important content and indicate interactivity.
  1. Deference.
    Smooth motion and a crisp, aesthetic, clear interface help users understand the
    content and interact with it without any difficulties. Content typically fills the
    entire screen, while translucency and blurring often hint at more. Minimal use of
    bezels, gradients, and drop shadows keeps the interface light and airy, while
    ensuring that content comes first.
  2. Depth.
    Clear distinct visual layers and realistic motion indicate hierarchy, add vitality,
    and facilitate understanding. Touch and discoverability heighten delight and
    enable access to functionality and additional content without losing context.
    Transitions provide a sense of depth as navigating through content.

share on social media

Share on facebook
Share on twitter
Share on linkedin

Designme is a full-service design agency specializing in providing ui/ux design, branding, development, and hosting solutions for startups, SMEs and brick & mortar stores.

Featured case study

Need help with a project?

Book a call and let’s talk about how we can help you.

Become an agency partner!

Book a call and let’s talk about how we can help each other.

Need help with a project?

Whether it’s an app design, website development, or a brand refresh. Tell us all about it. 

Natalia-profile-picture-designme-agency

trusted by companies from over 11 countries and counting.

Shopping Basket