We’ve got some Material
Human are all about communication, yet the key point in communication is not the medium but rather the message codification.
Humans
Humans are all about communication. We, as humans, have a very specific need to communicate; it’s part of our evolutionary path and it’s also a fundamental piece of our existence.
Communication is the medium which we are able to explain, to share and to absorb new concepts and new ideas through; it can happen in a verbal manner but it can also happen through visual or tactile feedback.
The key point in communication is not the medium itself but rather the message codification, which needs to be understood by the N-parties involved in the communicative process. In fact, as you are not able to understand people speaking different languages than the ones you’re familiar with, you won’t be able to understand a badly codified visual message; and while you can understand and share empathy for a “well-codified” song, you would not be able to do so if the “song” was simply grey noise.
This is true for all human communications, including websites and applications.
Codification
Websites that are not well designed tend to perform poorly and have sub-optimal metrics (e.g. high bounce rates, low percentages of returning visitors, low time on site, etc…) in fact, as they’re not well codified, they are less able to communicate and to engage with the end user which results in bad user experience and bad metrics.
Good codification is all about rules: from having a straightforward purpose to show relevant information at first sight, following the F-pattern design, using the right combination of colours and typefaces, etc…
On top of that, we’re so much into a Mobile and Responsive Design Era that, if your website is not responsive, Google will start penalising your website ranking in its search engine results.
Responsive Design
Responsive design is just about removing the unnecessary from the UI and make the layout fit on every screen size.
Design can either be Responsive or Adaptive: no right or wrong way.
As screen size becomes smaller or larger, content starts to vertically expand or reduce so that any content below will be pushed down or pulled up.
This is what we call the Flow.
Responsive Design is Relative.
There are no fixed sizes: responsive design uses relative units rather than static ones. — Percentages instead of pixels.
Responsive Design is Independent.
Ultimately there’s no much difference between a project started mobile first and then adapted to desktop screens or vice-versa, yet this might pose some concept or design limitations. You are the judge: be wise.
Frameworks
Following these principles, some companies have tried to build CSS frameworks that makes it easier for developers to create their own responsive designs.
The most famous example of responsive CSS framework is quite likely Twitter’s Bootstrap, which in pretty short time became the Times New Roman for web design.
Another very respectable CSS framework is Yahoo’s Pure.css; and just like this one there are many others like Foundation, Compass, Skeleton, etc…
No winners, no losers: just pick the one you’re comfortable with, stick with it and build a great design on top of that!
Some of these are lighter than others: Bootstrap, for instance, has some JS components that require jQuery, just like Foundation.
Does your project require this extra? Again, you’re the judge.
Google Material Design
But, in 2014, Google came up with a different philosophy and announced Material Design at its I/O conference.
Material Design is a design language with three principles in mind:
A material metaphor is the unifying theory of a rationalized space and a system of motion.
The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced & open to imagination.
Surfaces and edges of the material provide visual cues that are grounded in reality. The use of familiar tactile attributes helps users quickly understand affordances.
The foundational elements of print-based design — typography, grids, space, scale, color, and use of imagery — guide visual treatments. They create hierarchy, meaning, and focus. Deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space create a bold and graphic interface that immerse the user in the experience.
Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.
All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.
Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are efficient yet coherent.
This philosophy drives much more behind the curtains and you can read more about it just here.
It seems self-evident that such design language quickly received good feedback from both the dev community and consumers: a quick search on GitHub shows 401 repositories related to “Material Design”.
And if you look through it, there are few but quite popular CSS/JS frameworks that implement MD design.
Bootstrap Material Design
The most famous, so far, is Bootstrap Material Design with 11.850 stars and 1.728 forks on GitHub.
It simply extends Bootstrap 3 framework, and therefore requires jQuery for JS components.
Materialize
Not far from Bootstrap Material Design’s popularity, there is Materialize. Built from scratch using SASS, but -as BMD- it requires jQuery for its JS components.
Angular Material
Yet, if you speak AngularJS, you’re going to love Angular Material. It’s developed and maintained directly by the Angular team, so while Bootstrap Material Design and Materialize actually have a -ehm- decent Angular support, nothing compares to Angular Material as it’s built specifically for AngularJS.
Who’s the winner in this fight?
Hard to tell. I’m completely down for Angular Material as there’s no better AngularJS support. But as you can see, it’s just a matter of project requirements: if you’re using Angular it would be insane to base your design on top of BMD, as you’ll need Bootstrap 3 + Bootstrap Material Design + AngularJS + Angular Bootstrap Material.
A bit over-engineered compared to a simple AngularJS + Angular Material Design, don’t you think?
Read more on mpreziu.so
