25

The Bootstrap/Foundation family of design frameworks has been the main driving force behind a lot of responsive front-end web development projects. The Google Materials Design concept has also been floating around for a while, and it seems that the Materials family of design frameworks (e.g. Materialize) is starting to emerge as a competitor/alternative.

Just wondering if any of the UX gurus out there has done some analysis behind both development frameworks and looked at the pros and cons of each framework. On the surface a lot of the differences appear to be in the visual styling of elements and the interaction of UI components, but underneath each family is a set of design philosophies that are important when it comes to adopting/extending the existing framework and customizing it for your own projects and applications.

I think the things that need to be addressed in the comparison would probably include:

  • Philosophy/Intent - since Materials Design appears to be device/platform/channel agnostic in theory, but not sure if this is also the case in practice. Bootstrap appears to be dedicated to mobile devices but is probably semi-agnostic.
  • Coverage - there are many questions asked about 'gaps' in Bootstrap, probably because of the lack of standardization of UI design patterns and the need for customized UI components. It seems like Materials design may potentially cover more use cases and scenarios.
  • Flexibility/Extensibility - both seem well designed and easily customizable (at least judging by the amount of code on CodePen for Bootstrap), which actually leads to the problem that Microsoft has faced with its definition of its Microsoft Fluent design concept.
7
  • 4
    Imho you can't compare them as they aren't the same. Material design is a design guideline for ui to standardise visual aspects and ux on android platform, Bootstrap is a development framework
    – Blue Ocean
    May 8, 2015 at 3:05
  • @Razor9012 Materialize is a design framework based on the Google Material Design concept, so you can compare it to Bootstrap. Bootstrap, however, does explain some of its design concepts as well.
    – Michael Lai
    May 8, 2015 at 3:16
  • 1
    While not a bad question in general, I'm voting to close as the pros and cons of any particular UI framework are mostly going to be heavily dependent on opinion and the context they need to be used in.
    – DA01
    May 8, 2015 at 14:30
  • There is confusion as to what you area asking. Are you asking about Google's Material Philosophy or are you asking about a specific framework based on that? If the former, that's really an apples vs. oranges question.
    – DA01
    May 8, 2015 at 18:18
  • @DA01 I have asked for a comparison between the two family of frameworks based on some criteria rather than just whether people think it is good or bad. And the question is asking for a comparison between the two different type of frameworks so I don't think it is comparing apples and oranges.
    – Michael Lai
    May 8, 2015 at 22:38

3 Answers 3

21

They are both UX frameworks, but are very differently opinionated

  • Material design is very opinionated about how UX elements behave and interact visually. It starts with general principles around visual elements (physics, light, space, momentum) and expands on those principles to provide concrete examples and requirements for specific elements (buttons, cards, toasts, etc).

    • Material design is less opinionated about implementation: the docs mention Polymer and Android development framework as possibilities for implementation, but there are other non-specified packages like Materialize which provide Material Design implementations for other platforms.
  • Bootstrap is opinionated about implementation. Bootstrap provides a specific framework for constructing responsive UX using a set of HTML classes and pre-wired CSS styles and behaviors. The bootstrap documents describe HTML elements and also default styles, but the core semantics of bootstrap are captured in CSS classes.

    • Bootstrap is less opinionated about visual presentation/style....indeed, it has been designed around CSS classes so that the visual presentation can be easily customized using stylesheets.
1
  • 1
    It may make sense to say 'material design' isn't opinionated about implementation, but any particular CSS framework based on it (ie, materialize) likely is.
    – DA01
    May 8, 2015 at 14:33
6

I don't think Material is a framework, but I agree it depends on the definition of framework. If I use this:

In computer programming, a software framework is an abstraction in which software providing generic functionality can be selectively changed by additional user-written code, thus providing application-specific software. A software framework is a universal, reusable software environment that provides particular functionality as part of a larger software platform to facilitate development of software applications, products and solutions. Software frameworks may include support programs, compilers, code libraries, tool sets, and application programming interfaces (APIs) that bring together all the different components to enable development of a project or solution.

Frameworks contain key distinguishing features that separate them from normal libraries:

  • inversion of control: In a framework, unlike in libraries or normal user applications, the overall program's flow of control is not dictated by the caller, but by the framework.
  • default behavior: A framework has a default behavior. This default behavior must be some useful behavior and not a series of no-ops.
  • extensibility: A framework can be extended by the user usually by selective overriding or specialized by user code to provide specific functionality.
  • non-modifiable framework code: The framework code, in general, is not supposed to be modified, while accepting user-implemented extensions. In other words, users can extend the framework, but should not modify its code.

then Material is not a framework, but a guideline to build frameworks. For example, Materialize is a framework built on Material guidelines. Another example is what I build for my team: a very customized version of Bootstrap that uses Material (a re-work from http://fezvrasta.github.io/bootstrap-material-design/ which is a bit dirty and loads a lot of unnecessary things) and has an aditional bridge to Polymer. So in my case, the frameworks are Bootstrap and Polymer, while Material is the guideline I used to built it.

This being said, going to the OP's points:

  • Philosophy/Intent - since Materials Design appears to be device/platform/channel agnostic in theory, but not sure if this is also the case in practice. Bootstrap appears to be dedicated to mobile devices but is probably semi-agnostic.

I think it's EXACTLY the opposite: Material is agnostic until you use a framework. Also, build 10 sites with Material and everything will start to look the same. On the other side, Bootstrap has a "mobile first" philosophy, but is the most used framework for desktop nowadays

  • Coverage - there are many questions asked about 'gaps' in Bootstrap, probably because of the lack of standardization of UI design patterns and the need for customized UI components. It seems like Materials design may potentially cover more use cases and scenarios.

see my comment above. I think Bootstrap potentially covers ALL cases, not most, something Material fails to do

  • Flexibility/Extensibility - both seem well designed and easily customizable (at least judging by the amount of code on CodePen for Bootstrap), which actually leads to the problem that Microsoft has faced with its definition of its Microsoft Fluent design concept.

If I take the definition of frameworks I provided above, then yes, I totally agree

In the end, I think Bootstrap provides a framework to built code upon, and same happens with Polymer, while Material provides a set of UX and design guidelines that helps UXD maximize results, so I don't see then as opposite, but totally complementary (hence why I built what I built)

8
  • The question is a bit confusing, but the OP is talking specifically about the materialize framework. It's an actual framework based on Material Design.
    – DA01
    May 8, 2015 at 18:01
  • 1
    you edited the title, but when I answered the question it was about Material, and the body of the question still is. Also, the OP mentions Materialize between other frameworks, so by editing the title I feel like you're leaving out all other frameworks based on Material, like Lumx, Angular, Ionic, MUI, Leaf and many more
    – Devin
    May 8, 2015 at 18:15
  • valid point, though I'd say that would definitely make the question way to broad (I'd argue it's not a good question as it is right now as there is no real way to answer this sans context)
    – DA01
    May 8, 2015 at 18:17
  • @Devin sorry, I did make a mistake with the question so I have updated it.
    – Michael Lai
    May 8, 2015 at 22:43
  • @DA01 sorry, but you can see the context from the description, even though I accidentally made a mistake with the question (which I have fixed).
    – Michael Lai
    May 8, 2015 at 22:44
5

Bootstrap is mainly a responsive grid system, with some default UI look and feel decisions made for you (that you can easily over-ride).

Materialize is mainly a set of UI elements and interactions (but also has a grid).

And then there's about 2,000 other UI CSS frameworks out there as well. Rarely do you use these frameworks out of the box, so what is 'best' in terms of UX is really subjective. Which framework to choose typically has more to do with your UI development process and team preferences.

7
  • I am not really asking which is better, but just what people think about the similarities and differences between the two frameworks based on how they go about providing a solution to the modern front end development challenge.
    – Michael Lai
    May 8, 2015 at 22:40
  • @MichaelLai which particular challenge? :)
    – DA01
    May 8, 2015 at 22:44
  • Well, I assume that these frameworks exist for a particular reason, probably to try and help people interpret the Twitter and Google/Android look and feel (which Apple and Windows have really only provided guidelines), but more importantly help to standardize design pattern/components for front end development in an omni-channel, omni-device, 'modern', 'responsive', 'clean', 'sexy' brave new world of application/product/service design? :D
    – Michael Lai
    May 8, 2015 at 22:48
  • @MichaelLai Bootstrap exists specifically to make responsive web sites. Materialize appears to exist for those that want to mimic Google's material design. I'd say one is a responsive grid framework, the other is a fleshed out UI framework. Rarely would you use one or the other without understanding the needs of a particular project, though--specifically how much customization you need/want to do to the stock framework. Neither framework is really about Apple vs. Windows vs. Android, though.
    – DA01
    May 8, 2015 at 22:51
  • And you'd likely consider a dozen more most of the time. So it's not a cut-and-dried, this vs. that, unfortunately.
    – DA01
    May 8, 2015 at 22:51

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