Sélectionner une page

13 Sources of Material Design Inspiration

13 Sources of Material Design Inspiration

In 2014 Google announced their release of the Material Design language. Their original goal was to address issues with app design for Android devices. The argument was that flat design did not translate well to smaller screens. They felt that a design lacking in clear visual cues impeded mobile users’ ability to take action.

Matías Duarte, Google’s vice president of design, explained:

“Unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch.”

And that’s basically what material design is now: a way to make design elements look touchable.

By releasing the new design language and guidelines, Google hoped to resolve UX issues and confusion for Android app users. Two years later, their design language has surpassed the realm of mobile apps and is now a principle regularly utilized in web design.

13 Sources of Material Design Inspiration

As its creators, Google’s own properties are likely to be the best examples of material design available. That said, a surprising number of inspiration and showcase websites have been dedicated to the topic. This is a collection of our current favorites:

1. Behance

A great example of a website perfect for siphoning design inspiration from, Behance has board after countless board of examples you can reference. Behance also happens to make use of material design well enough on their own, with boxes that subtly stand out from the grid, shaded backgrounds to help direct attention, and clear indicators for clickable actions.

2. CodePen

CodePen, the self-ascribed “playground for the front-end side of the web”, is a developer’s goldmine when it comes to material design. Not only are you getting to see some really cool examples of material design in action, but you can see the underlying CSS, HTML, and JavaScript that developers used to build that design or animation.

3. Dribble

If you’re not familiar with it, Dribble is a social network for designers, developers, artists, and other visually creative individuals. A search for “material design” within their site just goes to show you how pervasive material design really is, both within web and app design. You can find inspiration here from something as simple as an icon all the way to a full website design.

4. Google Design’s Material Design Awards

Google Design Awards
A year after Google launched Material Design, they honored six of the best-in-class apps with their first ever Material Design Awards. You’ll recognize many of the websites–along with the 12 honorary mentions–on this list. If you don’t, or if you’re not currently using their apps, we’d strongly encourage you to take a look at them now. If Google takes the time to label someone as innovative, it’s well worth the look.

Here’s a highlight reel from 2015’s winners:

5. Made with Material

Made with Material
Dating back to November 2014, this website serves as a great source of inspiration for material design. The bulk of the site showcases high-resolution screenshots of websites and mobile apps that employ the material design technique. And while it may be easy to get lost in these inspirational examples, don’t forget to check out the reference material they’ve included for developers in the top-right sidebar. Those’ll come in handy if you do choose to go this route.

6. Material Design Blog

Material Design Blog
This blog happens to be one of our favorites not only because it covers a whole host of tools and topics that might interest you as it relates to this topic, but also because it does a bang-up job of employing the design technique themselves. If you haven’t had a chance to witness their animations in action, visit the site and click on any of their blog posts.

7. MaterialUp

Part of the Uplabs family of websites, MaterialUp focuses solely on the topic of material design: website examples, mobile app screenshots, tools, tips, and more. Even if you don’t find something of use right now, take a look at the design of their website. The layout and look are reminiscent of Google Drive’s, right? If you’re looking for a resource you can trust, who better to turn to than one that does a good job of executing on those design principles themselves?

8. Pinterest

If there were ever going to be an image collection site named as the top source for design inspiration, Pinterest would share that honor with Behance. With a quick search for the term “material design”, you’ve got instant access to videos and images of websites and apps putting this design trend to good use.

9. Reddit

Reddit is probably not the first place you’d think to go when you’re looking for design inspiration. Lo and behold though, there is a Material Design sub-reddit. About half of the posts in here are design revamps people have made to improve upon a material design. The other half are original design submissions that designs want feedback on. If you’re heavily invested in material design, this would be a great place to review and discuss other designs with like-minded individuals.

10. Tumblr – Material Design

Regardless of whether you design Android apps, iOS apps, websites, or something else, if you’re interested in learning more about how to properly execute material design, this is a good resource to check out. Scroll through this Tumblr feed and you’ll find examples of all different types of content to serve as inspiration for your next project.

11. Tumblr – Material Patterns

Material Patterns
In another example of an inspirational Tumblr feed, Material Patterns showcases a lot more variety than we’re used to seeing in these types of resources. From travel booking apps to music players, and social media pages to mapping apps, this is an excellent resource for material design enthusiasts. There is a lot of color, fantastic animations, and just a great mix of content to scroll through.

12. Material Palette (bonus resource)

Material Palette
While I wouldn’t go as far as to call Material Palette a source of inspiration when it comes to material design, this is an absolutely fantastic resource for finding the bright color palette your material design needs. Pick out any two colors and then let the app generate your website’s new color palette for you based on material design best practices.

13. Google’s Material Design Resources (bonus resource)

Google Resource
Here is another bonus resource for all your material design needs. Of course, the Google Design website is the perfect model for how to execute material design, but what’s most important here are all the resources Google has provided in order to help designers and developers create the perfect material design for websites, apps, and more.


When Google came up with the Material Design design language back in 2014, the end user was always at the forefront of their mission. How could app (and later web) design be improved so that navigation and UX became more intuitive? Their solution was simple enough: build upon what worked in the past (namely, minimalistic and responsive designs) and infuse more real-life qualities into it.

When you’re ready to get started, take some time to review Google’s guidelines and specifications. They will provide you with a solid base to work from. Then, when you’re ready to start designing, you can use the material design resources above to help inspire your design process and take your material design in a unique direction.

Now over to you: Do you think material design will last or is it just a passing fad?

Article thumbnail image by Legend_art / Shutterstock.com

Source link

Poster le commentaire

Votre adresse e-mail ne sera pas publiée.