Had a go at a Material design Order Pickup Display

So I wanted to go and try at making my order pickup display like a material design. It didnt go how I planned but I still think I will be going and using this

If anyone was curious the link is: https://s.codepen.io/the133448/debug/KrkqzO for testing you can click the orders to remove them, but obviously I will be using some Javascript in production.

2 Likes

When implementing Material Design it has strict guidelines on when to use raised buttons and other aspects. Raised buttons I am pretty sure should not be used as category headers like you have there. That is a good start though. It also dictates how to use colors. You have the animations down great!

1 Like

I had a quick reed of material design from emres link but think I missed the intention.
Is it just a guideline made by google for interfaces?
The page about elevation and shadows seemed to be more like a dumbed down perspective/graphic design tutorial on why to use larger shadows for something with more elevation.

1 Like

I’m not sure why the animation dont look good, have a look at this gif:


if there are going to be more than 3 things to animate, anyone familar with javascript or Jquery can help me?
this is the basic code im using to hide the buttons:

$(function() {
  $("button").click(function() {
    $(this).parent().hide("slow");
  });
});

3 Likes

Material design is a design framework for clean consistant look. Its a specific look used by google. Its very detailed if you want it to be true material design. Of course you can mix and match whatever you want but if you want real material design then you follow their strict guidelines

1 Like

An example of it right on google own phone app.


That is material design. Everything is dictated. The text buttons under at this place are outlined in the guide emre posted for example. It tells when and how to use them.

1 Like