{"id":201,"date":"2018-06-02T16:05:04","date_gmt":"2018-06-02T16:05:04","guid":{"rendered":"http:\/\/www.bullcrane.com\/angular\/?p=201"},"modified":"2018-06-02T16:05:04","modified_gmt":"2018-06-02T16:05:04","slug":"look-of-mat-raised-button-verses-mat-card","status":"publish","type":"post","link":"http:\/\/www.bullcrane.com\/angular\/2018\/06\/02\/look-of-mat-raised-button-verses-mat-card\/","title":{"rendered":"Look of mat-raised-button verses mat-card"},"content":{"rendered":"

I choose raised<\/em><\/a> for my upload to Spotify <\/em>button because I wanted to convey its significance over the other buttons on the page.\u00a0 The upload button commits the user’s changes.\u00a0 Everything else is “just playing around” and easily discarded until the user clicks this button.\u00a0 It’s the “serious” button.<\/p>\n

One morning, looking at my interface with a fresh mind, I realized this creates an inconsistent UI when also using mat-card.\u00a0 They both have the same raised style:<\/p>\n

\"\"<\/p>\n

A user might think “the session minutes remaining button doesn’t do anything when I click it.”\u00a0 It’s not a button but it looks like the button that is sitting right next to it, the most serious button of all.<\/p>\n

I could have changed the upload button to a flat button, so it would be consistent with all of the other buttons on the page, but I still wanted to set it apart somehow.\u00a0 So I decided to make it green.\u00a0 My picklist for downloading a playlist is also green.\u00a0 With this change, I am consistently using the color green to indicate where the user initiates playlist data transfer with Spotify, download and upload.\u00a0 I like the tie to Spotify’s branding color, which is a similar shade of green.<\/p>\n

This still leaves the upload button and the card with the same raised style, but I am satisfied.\u00a0 When I make Shufflizer available to users, I will get some feedback about this.<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n

 <\/p>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

I choose raised for my upload to Spotify button because I wanted to convey its significance over the other buttons on the page.\u00a0 The upload button commits the user’s changes.\u00a0 Everything else is “just playing around” and easily discarded until the user clicks this button.\u00a0 It’s the “serious” button. One morning, looking at my interface … <\/p>\n

Continue reading “Look of mat-raised-button verses mat-card”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/posts\/201"}],"collection":[{"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/comments?post=201"}],"version-history":[{"count":3,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/posts\/201\/revisions"}],"predecessor-version":[{"id":207,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/posts\/201\/revisions\/207"}],"wp:attachment":[{"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/media?parent=201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/categories?post=201"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.bullcrane.com\/angular\/wp-json\/wp\/v2\/tags?post=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}