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:
- 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.
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
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.
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:
- 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.
- 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. - 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.
