Top

WordPress Material Design

Home    Inspiration    WordPress Material Design
Wordpress Material Design

You can find good examples of WordPress material design below.

Given the world not so long ago the own vision of user interface of the future, Google has combined the principles of good design with innovations and new technologies opportunities, improving both visual and functional part.

Wordpress Material Design MaterializeCSS is a modern responsive CSS framework based on Material Design by Google

 

Google experienced a real design revolution with the task to create a visual language that would help unite the entire user experience, regardless of the variety of platforms and devices. Soon the work started and it introduced a new design standard known as Material Design.
Wordpress Material Design

Matrox is a Material Design Multi-Purpose HTML Template

Such trend as WordPress Material Design allows to improve UX, causing a desire to turn back to the resource again and again. Furthermore one of its key elements is an opportunity of seamless interaction of different functions on a single platform.

Wordpress Material Design Halo – Material Design Mobile Template

Simple and useful applications of Material Design began to transform and now stand out from the crowd with magnificent and thoughtful design. The company began to focus not on tiny changes in colors shades, but to develop a philosophy which was to unify all platforms subordinated to Google. Wordpress Material Design

UpLabs is a place for designers and developers to find, share and buy inspiration and resources to build apps and sites.

Material Design is a common concept of construction of the logic for both services appearance and applications. It unifies all the Google products to make user’s experience as easy and intuitive as possible. The idea is so ambitious that will transform not only the appearance of all the Google’s products. Coming of the new concept will change the role of the company in people’s lives.
Wordpress Material Design

Material Design Blog is a great blog where first-class Material Design resources.

What are the features of Material Design?

materialdesign_principles_metaphor

Tactile surfaces. The Material Design interface consists of tangible layers of so-called “digital paper”.These layers are located at different heights and cast shadows on each other, which helps users to better understand the anatomy of the interface and the principle of interaction with it.

materialdesign_principles_bold

Print-based design. If we consider the layers as pieces of “digital paper”, then, in terms of “digital ink” (all that is depicted on “digital paper”), an approach is taken from traditional graphic design: for example, magazine and poster.

materialdesign_principles_motion

Meaningful animation. In the real world, objects do not arise out of nowhere and do not disappear into anywhere – this only happens in movies. Therefore, in Material Design, we always think about how to use the animation in layers and in “digital ink” to give users hints about the interface.

image

Adaptive design. It’s about how we apply the previous three concepts on different devices with different resolutions and screen sizes.


Tactile surfaces. Surfaces and edges of elements in Material Design combine visual images and signals, by that creating tips which help user to intuitively navigate on a site (as if all this was happening in the real world).

Material design is a three-dimensional environment containing light, material, and cast shadows.

interface-for-it

Layers in 3D-space have its coordinates on x, y and z axis (z-axis is perpendicular to the plane of the screen display sideway user’s view). Each of them occupies one position in z-axis and has an unwavering standard 1 dp thickness (abstract unit of measurement that allows applications to look the same to a different resolutions). Except physical characteristics, material design has unique properties. Layers can instantly change its dimensions in x and y axis. The round shape could turn into a square one, and a small dot could stretch out to dimensions of the whole screen. The layer can arise from nowhere and disappear just as suddenly, it can be divided into several segments and join several parts, creating a single canvas.

canvasAn important aspect of Material Design are shadows. They arise due to two sources of lighting: directed and diffused light. Directed light produces pronounced shadow, which can be clearly seen in motion, and scattered light evenly illuminates the entire surface of the layer. Shadows give an idea of how high the objects are on top of each other and allow user to quickly navigate the new interface for it.
Print-based design. Material Design is characterized by rich and smooth colors, large typography and a lot of padding between elements. Together these elements create a new reality with the conceptual meaning and a host of features that give the user unique UX.

Material design rule: Motion provides meaning. Motion strengthens the user as the prime mover. Primary user actions appear to be inflection points that initiate movement, changing the entire structure. All the action takes place in a single environment. Objects are presented to user without disturbing the continuity of experience, even to the extent of transformation and reorganization.

Animation in Material Design is often used to create a smooth transition, but we should not only be confined to this framework. With the help of animation many details of the interface and navigation pane can be improved. In addition, you can use small details in icon menu that will not only add clarity, but also emphasize your concern for applications aesthetic.

The main thing in Material Design concept is that the objects properties and its behavior on the screen should be as clear and predictable as normal events in a person’s life. Pressing the button should trigger action that affects the entire interface completely, regardless of device’s size and screen diagonal.

Adaptive design. Interface structure of Material Design borrowed lot of “tricks” from print design, though they are not applied in its original appearance, but in improved one. Material Design adds to these “tricks” unlimited scalability and change the page size that allows to adapt design to any device such as a tablet or smartphone. All of these features give a feeling of supreme comfort while working with navigation and interface (as the unlimited opportunities are subject of simplicity principles) and evoke a sense of confidence.

2_-_preview

Note that Material Design focuses on usability and not only on good design as such. Its principles may become the best starting point for building an application that will conquer the huge audience with its elegance and comfort.

The purpose of Material Design is to unite and make common the logic of work to all services, make it look convenient for users.

Conclusion: In a short time Google will not be perceived by users just as a search engine, Android-smartphone, Chrome browser or a separate GMail service. The concept of unified interface design and the integration of all the services will create an entirely new user experience. This cutting-edge technology can simplify the user’s life and save his time, demonstrating that Material Design is more than just an elegant user interface.

Material design by Fruitful Code

Supporting the trend, it’s convenience and excellent UX, our team made a new WordPress plugin “Soon” using Material design.

Снимок экрана 2017-03-23 в 17.48.312

1

“Soon” plugin transforms your temporary unavailable website into a stunning page. Customized splash page attracts visitors and gives them a taste of what they’ve got to look forward to.

✓ Add up to 4 sections providing information about your company
✓ Customize skin and background
✓ Add logo
✓ Customize title
✓ Enjoy material design

Join our Beta Test team and become one of the first users to enjoy the functions of the “Soon” plugin.

 

Ilya Pavlov

Ilya Pavlov

Creative director, web designer, developer and founder of Fruitful Code.

'