35

We are considering using Material Design components in our website, but since this is an "Android design", wouldn't it turn away iOS users?

What is the best practice? Is it wide-spread to use these components in web, or it's better to use something neutral?

Improve this question
12
  • 6
    Using Material Design does not make for good UX, so I would say no.
    – user428517
    Jul 7, 2017 at 16:57
  • 16
    @sgroves How so?
    – Milo P
    Jul 7, 2017 at 18:14
  • 9
    @MiloP Flat everything == terrible for UX. Google has always been shockingly bad at UX design, and Material is yet another example. I would never look to Google for UX inspiration. Pretty much every other major company does it better. Google's design is the definition of "for nerds, by nerds."
    – user428517
    Jul 7, 2017 at 19:10
  • 23
    @sgroves, this is opinionated. Personally, I'm tired of their layouts "oh hey, let's make it so large that only 2 paragraphs at once can fit in a 1920x1080 screen". Not to mention the navigation maze it is, while they could just put everything in a goddamn single page. For me that bloat is the exact opposible of "nerdy".
    – Gras Double
    Jul 7, 2017 at 21:00
  • 15
    how on earth material design = flat everything? Do you see a "floating" button on the bottom right corner? Motions are also done in layers. I bet you've never had a quick look on the guidelines "Material design is a three-dimensional environment containing light, material, and cast shadows.". It's no different from MS's Fluent Design
    – phuclv
    Jul 8, 2017 at 2:28

6 Answers 6

Reset to default
47

I was recently researching the use of Material Design in iOS apps and came across this UpLabs article which makes an interesting point:

Various elements both visual and underline mechanics could certainly be incorporated into iOS apps.

However, it is important to stay true to the operating systems nature. Forcing a user to adapt or take on new sets of habits within a an app could cause great confusion.

It is important to intelligently incorporate various elements of Material Design but it is imperative not to confuse or undermine the user in the process.

For this reason, I would only consider using the Material Design guidelines in an iOS app where it does not conflict with the Apple Human Interface guidelines, unless the Material Design element provides a significant improvement to the end user. One such area is movement/animation, which in my experience is served much better by Material Design.

But when it comes to web, there are no general HID guidelines and as such users have fewer expectations.

Because they have fewer expectations, it's perfectly acceptable to mix and match guidelines to form the best experience for your users.

Improve this answer
3
  • 7
    Although a website vs an App are pretty different things...
    – Austin French
    Jul 7, 2017 at 17:32
  • 4
    Indeed, that's what my answer is saying. Perhaps I didn't convey it clearly enough in my final two statements :)
    – user101673
    Jul 7, 2017 at 17:43
  • @SGR The OP is developing a website, so it will be the same on all platforms.
    – user101673
    Jul 10, 2017 at 14:53
16

I don't think it's a problem. There are many applications for iOS that use Material Design. Think of all the Google applications (Youtube, GMail, etc) iOS users use on a daily basis.

You might want to consider using Material Design as a source of inspiration. Make use of their behaviours or specific elements, but also use your own research and branding.

I'm working on a product that uses Material Design elements but we also use our own colours and take inspiration from other guidelines as well. They're guidelines, not laws.

Improve this answer
5
  • 4
    I feel the need to say that, just because other people do it, that doesn't make it right.
    – Rob
    Jul 7, 2017 at 12:26
  • 5
    True. What I'm saying is that people are used to it because it has been done before by big players.
    – Nick Groeneveld
    Jul 7, 2017 at 12:27
  • 13
    @Rob I feel the need to say that, just because other people do it, that doesn't make it wrong. ;)
    – maxathousand
    Jul 7, 2017 at 13:27
  • 1
    You say there are "many applications" for iOS that use Material Design, but then only mention Google apps (which would be conspicuous for not using it). Does anyone else use it?
    – chepner
    Jul 8, 2017 at 13:57
  • @chepner I couldn't find anything, but it looks like Google is trying to at least make it easy to use Material on iOS github.com/material-components/material-components-ios
    – TheWanderer
    Jul 8, 2017 at 15:14
14

Material Design is not "Android design", it's Google's all encompassing design "template" for both mobile and web apps. Many Google web products use Material Design like Angular (https://angular.io/) or, you know, Material Design site itself (https://material.io/guidelines/). They even have a library made specially for the web called Material Design Lite that comes with all the CSS that you need: https://getmdl.io/started/.

Improve this answer
1
  • This is only partially true. Material design page itself does not follow its rules (not to mention other Google apps). This design is unusable for web apps under strict adherence. For example, if you look at the Tooltip specification, it says that the web application should have a font size of 10dp #ffffff # 616161e6 R97 G97 B97 A0.90 All corners Rounded: 4dp. Try to click on Search on this site and wait for Tooltip. Large font and no rounded edges (like on Google or Gmail). Compliance with the specification would not be good for users.
    – Atiris
    May 23, 2019 at 14:41
3

Material Design offers some incredible guidelines based off of user interaction and extensive user feedback. There are many sites that incorporate various features that MD promotes without actually using the full MD guidelines. To note: the difference between apps and web pages are blurring. As progressive web apps take more center stage competing with native mobile apps (web apps have many advantages), apps and web pages (web apps) will not be necessarily distinguishable as they are now.

Material Design is great for thinking about design functions of the future. Using inspiration from the material world seems like a logical progression. MD uses paper material as its inspiration. There's also room for glass, brick, wood, etc. Think outside the box. In the end, it's about usability and the ACCEPTANCE of users.

Improve this answer
2

Yes, in fact, Google has an official Material design component library for webapps, called Polymer. I don't think Google doesn't intend to have anyone use it 😅

Improve this answer
1
  • 2
    nitpick: Polymer is a simple library that makes writing Web Components easier. The Polymer-based Material Design element collection is called Paper elements.
    – myfreeweb
    Jul 9, 2017 at 11:13
1

Material Design is not only design, it's an alround-everything guideline.

Even if you don't use material design components, you should use the writing guidelines for your website.

But yes, it is wide-spread. Google slowly changes all their pages into material design.

At the moment, Material Design is just the best of usability you can get. So be sure to stick to the minimum guidelines. Your users will thank you.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.