Material Design guidelines,The Lighthouse

-


Probably, you have been hearing about Material Design for a while and yes it has been with us since 2014. Also,  you have seen it in almost all the Google Apps on your phone and desktop.

But... what really is Material Design and why should you take advantage of its guidelines?

Well, in a nutshell, Material Design is the way Google describes the best practices of how your object and everything on your app should look and feel. This whole thing about Material Design comes after years of study of how users react to the different interfaces in different apps.

Now, the real question is, what are the advantages of reading the Material Design guidelines?

Sometimes frontend developers and UX/UI designers meet the problem of how an app should look like on some point of the user interface development and some questions that come to mind  are:

  • Should be this button here? 
  • Is this notification in the right place?
  • What can I show when I perform an action in this part? 
  • Is my combination of colors right?
  • etc.


Material Design guidelines can help you to take those ambiguous decisions by telling you where and what you have to place in your app to make it more intuitive. Let me give you some examples of DOs and DON'Ts:


Dealing with Colors:


Positioning floating button:


Showing messages:

For each component of your UI they give you examples and an explanation of how to use it, components such as: Data tables, Cards, List, Menus, Tooltips, Buttons, etc. Like a lighthouse which guides the ships through the night, Material Design will give you the right orientation, a huge help for the non-designers skilled developers.

So don't skip it and give it a read. It will save you a lot of time and will make your app more intuitive for the users, I assure you.


See also the Material Design implementations for your framework:
material-ui.com - React
vuetifyjs.com - Vue
material.angular.io - Angular

Popular posts from this blog

The Micro Frontend Orchestrator: single-spa

-
Image
In the dynamic world of modern web development, micro frontends have emerged as a pivotal strategy to break down monolithic frontend applications into manageable, independently deployable units. For the past two years, I've had the pleasure of working with single-spa (yes, all in kebab-case), a framework that has revolutionized how we orchestrate these micro frontends. Let's talk about why single-spa is an excellent tool for managing micro frontends and how it simplifies the complexities of modern web architecture. A Seamless Orchestrator for Micro Frontends single-spa stands out as a robust framework that seamlessly orchestrates different micro frontends without the need to worry about the internal tooling of each. When I first encountered single-spa, I was struck by its straightforward approach to managing multiple frontend applications within a single project. This flexibility allows you to use multiple JavaScript frameworks (React, Vue, Angular...) in one place, making it ...
Read more

Let's talk about Web Accessibility

-
Image
Most web applications are developed for users with no disabilities, under the assumption that all users have the same  physical abilities and resources , when in fact it's the opposite. The circumstances of our users will vary from having internet issues to being physically disabled, and here is when Web Accessibility comes into play,  so you can optimize your web app and adapt it to all audiences. Web Accessibility  (a11y for short)   refers to designing/developing web apps so people with some kind of physical disability, situational disability, and socio-economic restriction (like low internet speed) can use them. Web Accessibility encompasses all disabilities that affect web navigation, including: 👁 visual 🧠 neurological 👂🏽 auditory 🖐🏽 physical  🗣 speech The first time I heard about this concept, I was surprised by the number of people who are restricted to fully use web applications. My first guess was that around 1% to 5% percent of the population h...
Read more

A Closer Look at Pair Programming

-
Image
Last June 11th, I had the opportunity to participate as a speaker in the Vue.js Global Summit by Gleekle to talk about one of my favorite topics, Pair Programming. My intention with this talk was to motivate teams to adopt this wonderful technique to improve their productivity. Here I bring you a summary, we will be covering: What is Pair Programming? Benefits of Pair Programming Pair Programming styles Implementing Pair Programming (tips and tricks) Common Pushbacks Takeaways Before start talking about Pair Programming, it’s important to mention some of the most common problems inside a development team: First, Lack of communication between team members - This could be partialized or generalized problem depending on the company Another one is Centralized knowledge - This happens when one team member is the to-go person for any particular technology, codebase familiarity, or domain knowledge. And yeah somebody is coming to your mind right now Never-ending code reviews - A ...
Read more