Design your way

Thursday, September 4, 2014

The main rule of Google has always been to follow the needs of the user. They then believe that the rest will follow.


Google believes that by developing a good sense of material design they will give the users an experience which is fluid and easy, and one that will make them want to come back again and again.


One of the key elements of material design is to allow the user the ability to interact with different functions on a platform in a way that is seamless.


The principles of material design


This idea follows the idea that there is a space that is tactile for the user and which is free to roam around. Originally it was inspired by ink and paper, but is far more advanced and incorporates a sense of magic as well.


The material is realistic in that it contains surfaces and edges for the user. However, at the same time their is the ability to move through out this space in a way that is far more advanced and flexible, whilst still staying firmly routed within the realm of modern physics.


The principles of material design

Image source


There is a focus on the use of light and movement and the fundamental elements that these processes provide. There is a focus on how these elements relate to one another and how they co exist.



There is a strong emphasis as well on the basic elements of print-based design. These can be seen in pure elements such as space, grids and typography, as well as color, scale and the use of imagery within certain spaces.


These elements and their combination with one another create far more than a simply pleasing experience for the eye. They also create conceptual meaning and provide a function for the viewer. Using other techniques such as large scale typography and wall to wall imagery creates an immersive experience for the user.


user functionality

Image source


An emphasis on the user functionality is also an important part of the design. Design needs to focus on the primary user focus points as an inflection point that helps to direct the motion to the user.


Everything has to take place in a single environment and the objects and shapes that appear need to move in a fluid and an interactive way for the user.


Motion is clear throughout the experience but transitions need to be fluid whilst simultaneously being understood by the user. Feedback also needs to be accessible and understood by the user effectively.


The layout


The layout

Image source


Material design effectively takes many functions from the world of print design and incorporates them in the more advanced arena. These two areas of design are similar in how they lay out the grids on the page. However, material design takes us to another level and can stretch and refocus to the size of the page, making it perfectly able to scale to Other devices such as tablets and mobile phones.


Having layout guidelines is also important as it sets a common list of rules throughout the design which creates a continuous feel for the user, making the navigation of the design easier and more understandable. Users will then both be able to feel more comfortable when they use the application and will feel a sense of trust when they are operating it.


The question to ask as a designer is what will the user want to do with my application. Once you have worked this out you can then start building the design around this idea.


Hotel search app design

Image source


Always make sure that the content is the most important aspect and design this so that the content sits at the front and is easy for the user to access.


Trying to navigate your users with the toolbar that they carry out actions with. And that it is situated at the top of the screen can be great for acting as a navigation control for the user who can switch between different tabs creating searchable options the user.


Decide about the functionality of your App and try to direct the user through the content effectively by getting them focused on the most important aspects of the product that you are presenting to them. Create navigation that can highlight the important destinations by making it easy to get to those areas.


Animation in material design


Animation in material design

Image source


By analyzing the objects that you use and the form that they own, you can then begin to manipulate these objects in interesting ways via their motion, their weight, as well as their flexibility. This control of the motion of objects is beautiful within material design.


The goal here is to find a balance between elegance and physicality with the objects that are used, and to create a seamless experience with those objects.


By carrying out motion design in a carefully planned way, you can effectively allow the user to understand where they should focus their attention within the application. A part of the act which has several different steps in the process will need a clear understanding from the user on how to progress through this.


Material design animation

Image source


Animation in it’s most basic form is about different transitions but an app can be enhanced in many ways when an animation goes beyond the basics. Adding small details to menu icons in a seamless way can bring the use of clarity and informs them of craftsmanship within the application.


Material design also focuses on usability, not just on good design


The product is at its best when all those who use it come away from it understanding effectively how to achieve the goals that they need to do with the app.


Managing to reach the widest audience in this way is a good goal for designers and a starting point that they should all strive towards.


Material design also focuses on usability

Image source


A designer should be there to make the life of the user easy and efficient when they’re using the app. This is done primarily by presenting the most important information that the user needs in the quickest time possible.


Think continuously about the focus of the user and make sure that they do not lose their focus when they are getting between the different elements within the website. Pop-ups, alerts and other functions may get in the way of the users experience and lead them into a corner.


The designer must also remember to add help to the user. Instructions and help should be available on the website and should be there to help the user create ways in which to be more advanced within the application.


It is also a good idea to describe the links that you put on the website with clear and efficient meanings as to where they lead. It is less useful to put a link which has the text ‘click here’ on it and is more important to try and describe where the link goes whilst integrating it within the content fluidly.


Resources


Layout templates

Layout templates


Roboto Font

Roboto Font


Color palette

Color palette


Google Design Icon Template

Google Design Icon Template


Android L – Icon Grid System

Android L - Icon Grid System


Material Design Playground

Material Design Playground


Material design with Polymer

Material design with Polymer


Ripple and others using Polymer

Ripple and others using Polymer


Material Design – Radial Action

Material Design – Radial Action


Material design morphing icons 2

Material design morphing icons 2


Google Material Design in CSS3

Google Material Design in CSS3


Material Design Menu

Material Design Menu


Meaningful Transitions

Meaningful Transitions


Conclusion


Material design is implemented to unified experience between the user and the application. It is also there to allow technology such as Google the ability to connect with the application and identify within the search engines.


Google look for websites and applications that offer good overall experience. Good material does this and is more than elegant UI. It is there to make technology easily accessible by the end user.








Source: http://ift.tt/1t3CSgB

No comments:

Post a Comment

 

The Cash Box Blueprint

Most Reading