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?

MOAR Three.JS

I am going to be writing a lot of articles about code in the coming months, and I’m doing some of one project in Three.JS.

Three.JS is (in my opinion) the first good raw JavaScript 3D rendering library and I find it to be the bomb dot com. It leverages WebGL stuff that’s been around a long time but hasn’t been super duper well kept up with or used in most mainstream web applications to my knowledge, which I find to be an absolute travesty.

Well, you might be interested to know that means I’ll be trying to include some interactive 3D rendering in my articles like this. If it ever stops working I ask that you let me know, but I think it’s going to stick around and be epic.

With thanks to ThreeJSFundamentals.org for this one, I figured I’d demonstrate this as a quick proof of concept for how far you can go with articles. Who needs to stick to flat test or even mere pictures when you can embed an entire videogame in your article if you wanted to?
Let’s GOOOOOOOOOOOOOO (note to self: get DOOM as an embed)

We’re living in a new age where crazy things are becoming possible, and I really want to open people’s minds to the possibilities, and I think this is one way to do it.

This has been a rough year for people’s optimism and I think we all need to be reminded every now and then that we are living in the greatest time in humanity’s history SO FAR. We’re just going crazy stuck at home or bored, or having issues with an unstable job market and tough finances. We’re seeing negative things people of ages past couldn’t see, which wouldn’t have to affect us but that we let make us anxious and depressed. We need to be looking for the good in the world around us because there’s plenty of that present too.

Stuff is cool and technology is awesome if you learn how to leverage it. Who knows, maybe I’ll write articles with the sole purpose to give you mini-games to play with when you’re bored. I’ll have to take a few weeks and make a template first so I can spin them up quickly, but if I can manage such a project, you and I are gonna have a lot of fun together, dear reader. Who knows, maybe I’ll start a trend and be the first blog of many like this?

I think we have a great opportunity ahead of us in coming years where we’ll be able to have another generation of the internet much like the flash-games era of so many years ago. At least some of us like myself miss those days. Those were good times. New technologies are being designed all the time and improvements to make it easier for people to develop.

Again, let me know if you can’t see it rendering. It should be rendering on mobile too. It’s well supported by all the browsers now. If you’re interested in learning more, you can go play with the threejs.org toys. Go have fun! there’s a bunch of them. You can play a french pinball or just go on this acid trip, headphones on.