Thousands of Material Design-Inspired UI Components for Sketch & Ps(

9 years ago from Scott Hurff, Co-founder,

  • Evan DinsmoreEvan Dinsmore, 9 years ago

    I'd advise using caution before using any of these for actual Android 5.0 designs. At the very least, read through Google's Material guidelines first:

    The menus, back icons, button usage, and various other things in the UI kit are a direct match to the "Don't" examples in the guidelines, or have been changed needlessly.

    This is the first time Android's guidelines have been thorough and, well, nice enough, to retain consistency between apps. Don't be different for the sake of being different!


    1 point
    • Chris SlowikChris Slowik, 9 years ago (edited 9 years ago )

      We did thoroughly study those guidelines. I just went back through the menu section and I'm fairly certain there are no "Don'ts" perpetrated. Just curious about some of the specific examples you warn about.

      You can have subtle variation on a theme without losing consistency on an OS-level. We feel like anything designed using this kit will fit in just fine!

      0 points
      • Evan DinsmoreEvan Dinsmore, 9 years ago

        A lot of what makes native apps so successful vs mobile websites is a consistent user experience between apps on the same platform. A back button looks/acts the same. A navigation icon looks/acts the same. An overflow button looks/acts the same. Minor variations (round vs sharp corners, colour) don't inflict any cognitive load, but the more different they look, or the more different they behave, the more a user has to re-orient themselves and re-learn an experience, jumping between contexts of different apps. Needlessly changing the back button to look like a chevron serves no purpose but aesthetic, yet affects a user's recognition and expectations. Changing the way a nav drawer works (sliding the top layer away, instead of sliding the drawer in over top as is shown in the material guidelines) again serves no purpose besides aesthetics, but breaks the pattern that the user is used to, which can disorient them:

        Multiple floating action buttons are specifically called out as a "Don't"

        Text fields are enclosed similar to how iOS does things vs the guidelines

        Don't get me wrong, it looks like a tremendous amount of work went into this, and it looks great. But if it's going to be used for Material, it may as well play off of a user's expectations and pattern recognition.

        0 points
        • Chris SlowikChris Slowik, 9 years ago (edited 9 years ago )

          Good conversation so far =] I like discussing this stuff.

          I think you may be missing a very key point of the Floating Action Button - the 'floating'. The guidelines indicate that it's floating over the rest of the UI, and they specifically show it overlapping multiple things in the example. We included a floating action button style but don't use it much in the screens we designed.

          The guidelines you linked show inset text fields as well as the sparse line style.

          The menu movement is a fair point, but it's a slight visual tweak to the style of the menu.

          Minor variations are how apps are able to have distinct style and convey the brand feeling throughout. One of the goals of this kit was to show people that they don't have to follow the guidelines as strict rules - the core tenets of material design are present in this kit for sure.

          We knew there would be a lot of feedback about not being exact about guidelines (our colors aren't necessarily given by google either), but we don't think that makes this kit any less Material-based. We believe there's room to play and experiment within the guidelines and still deliver an app that has a distinctly "Material" feel.

          Google isn’t treating these ideas as rules that other companies must follow: “When you have rules, you have to have ways to enforce them.” Instead, with Google’s guidelines and technical framework, the company is trying to create “paths of least resistance.”

          Yes, as designers we should absolutely be working within user expectations and pattern recognition - but for such a new thing, there's no defined pattern that users are used to, and we haven't yet seen the bulk of app designs that will be inspired by this. There will certainly be a wide range of levels of adherence.

          This is a really interesting discussion and I'd love to hear what some other designers think as well. Should we consider material a strict set of rules to adhere to, or a good starting point for best practices in android app design?

          0 points