Material Design: Meta-Aesthetic for Noobs

I’m still stuck on a problem with my React Native code handling events, so for now let’s…talk about something else. Design.

One of the skills everyone who has modern dreams of making things needs to have is design. Unfortunately, too many artistic people get so wrapped up in their own aesthetic they make things horrifically unwieldy. Incidentally, the same problem happens with scientific and rational people, who get so caught up with abstract functionality they too can bury it in plain sight.

Google decided the world needed to merge the arts and the techs into something that made sense in all resolutions, so they started a project that I still revisit again and again, and it’s called Material Design.

You’ve seen it before. It’s an attempt to make user interfaces on apps for desktop, web, mobile, tablets, … pick your screen, to not be terrible. Apple are the only big holdouts trying to do their own thing, but if you use anything else, you’ve seen it. Windows 8 onward uses parts of it. It’s not the only design system. What’s important to understand is that it is a very good system that gives the average person an easy go-to for making something usable.

I highly recommend, if you have any desire for taste at all, that you spend some time with it (if you haven’t heard of it). You don’t need to be in my line of work. It’s about learning how to convey a brand or identity. Start here. They offer seven studies they did, seven comprehensive thought through examples across industries and products, to design fictional apps to show what it would look like.

Seven Designy Samples

Basil is a cooking and recipe example with an eye to food. It’s green and orange on yellow scheme is one that would make little sense anywhere else. It’s all in on evoking something memorable and showing off a list-making app of ingredients and instructions with pictures. It’s a catalog architecture, like a library.

Crane is a travel and booking example. If anything it shows that even purple can be made professional. It’s a great education on calendaring, communicating options with locations, outings, and availability. They show off picking an airline seat and timetables, and then cover doing a checkout or browsing resorts. It relies on a flow architecture, the pattern of having a linear process of steps for the user to walk through.

Fortnightly is a news example. Simple enough. Wouldn’t surprise me at all if you’re more familiar with apps designed like this. It’s all about content, content, content. Articles everywhere, a search, and readability maxed a user can get through what’s being said. I think it’s a good way to show having a memorable brand while still being super mininal, and out-of-the-way “read-friendly”. It’s also a catalog structure like Basil.

Owl is an education example. It goes hard for vibrant primary colors. The spirit of it is to have totally different main colors depending on what you’re doing, giving you a way to have multiple aesthetics within your one aesthetic. They use yellow for customizing, blue for browsing, and a red/magenta accent for the learning process, which shows a plain white or dark mode for learning/reading and watching videos. The architecture is hub and spoke, where each section has a hub, and each hub has leaf nodes – the “spokes” are the lessons in a course hub. Think of it as a tree structure, but designed as if it’s just a couple tiny ones, each root is the hub, with a bunch of immediate leaves.

Rally is a money example. It takes night mode and runs with it. The color emphasis is subtle gray variants, with a rainbow of thinly used palettes, using one accent here, and another there. The focus of this one is data representation. Bars, pie charts, graphs, wheels, goals, up/down fluctuations, and transaction listings. It also focuses on doing good warnings and other notifications. It’s a hierarchical structure.

Reply is a communication example. It’s modeled after an inbox and smells like GMail (gee, i wonder why /s). Man if only GMail was as nice as this however. It’s plain like Fortnightly, but picks excellent accents. This one shows off a text-with-pics communication medium. It shows a way to cram people into an interface with nice little avatars or “to:” fields.It has an inbox-like architecture, we’ve all used one. You have inbox,trash,drafts, etc.

Shrine is a retail example. Kinda has an Etsy or Pinterest vibe, but soft pink. It puts emphasis on how to give each image maximum attention, with some very unusual organization approaches. It does color and size selection components, but the primary goal is to give way to the products themselves, to make whatever image is placed on it pop. One pattern it shows is having a cart. As you might guess, it’s a catalog architecture.


Each of them gives you a different example of how to take a very particular kind of data and make it do its job. Basil is recipes(lists+instructions), Crane is linear signup, Fortnightly is journalism, Owl is schooling, Rally is number crunching, Reply is socializing, Shrine is sales. The seven can show a how-to, plan, read, learn, calculate, correspond, or buy design setup, respectfully.

One of the most painful parts of seeing good design studies is you’ll wish you could use these very apps that are pretend. I love Fortnightly’s aesthetic so much I’d wish to see it repurposed for something bigger than mail. I would have to put Shrine as least impressive myself, but it’s not meant for people like me so maybe I’m biased. Which one is your favorite? Least? Which one do you think does its job best?

One thought on “Material Design: Meta-Aesthetic for Noobs”

Leave a Reply

Your email address will not be published. Required fields are marked *