what material design taught me

i mentioned a flow experiment in my previous post. i’d like to share the thinking… well, just because?! let me say truthfully, it’s not that i’m all nexsuper savvy about styles of design, but the little i’ve read every now and again still turned out to be helpful for generating ideas. so here it is.

the most basic ethics of material design that stood out to me were the minimalism, simplicity and honesty. nothing pretends to be what it’s not (skeuomorphism). so i translated that in the information design to write screens in the most short, simple, honest way i could.

another nice thing that material design does – especially on my nexus apps – is provide the main function upfront. you open the gmail app, you get the compose option prominently and separately from the other ‘tucked away’ functions. so on each screen, i decided to bring out the essence of the screen in a single sentence, up front and separately – meaning, marked out explicitly for highlighting in the visual design. the idea is, reading that one sentence, the learner understands the basic message of the screen.

material design also uses bold colours and tiles. i used that as well in the information design of a screen. i pulled out the information types that would go into tiles for highlighting – here, since i had the ‘essence’ statement already, i used tiles to indicate detailed aspects of the main content. so i got a pretty neat content architecture: main screen content, essence of the screen, details/nuances of the main content.

i also like how apps like the newsstand lays out all the information in easily accessible panels. i used that to design the information access in the course menu: course modules and module topics are all visible at one glance and freely accessible.

another thing i found inspiring – the optimistic assumption about user intelligence. material design doesn’t go around labelling icons. it assumes that an average user is smart enough to be able to figure out what the button does simply by looking at the icon, without needing instructions to touch/swipe. i think especially in eLearning, this is significant. in the absence of actual information about my learners, i think it’s healthier to make a respectful assumption about their capability instead of assume the most inept user i can think of and use them as my reference point for design.

now here’s a bit about aspects that are more closely tied to layouts and visual design. no eye candy or filler images because a page looks too blank. instead, we’re designing pages to ‘float’ in a separate layer, and sizing them to suit the amount of content they contain rather than having a fixed template size that we then struggle to fill with junk.

similarly, the complaint that i’ve heard most visual designers repeatedly express to IDs – “there’s too much text on this screen!” – i think has been addressed in two ways. one, i must admit, the whole storyboard is significantly “lighter” after this entire experiment than before. two, i dug up references to discuss with a designer about pure text layouts that use material or flat design and we studied them for learnings to apply to our courses. we found some fantastic stuff that both of us think works really well. the result? the closest we can come to artistic eLearning. – and that’s one of the philosophical convictions of bauhaus, that even mass production can have artistic merit.

i know, i know, i mentioned material design, flat design, minimalism and bauhaus in the same post! but see, philosophically, they’re not so far apart. there’s a certain common orientation that’s explored and developed by all of them in similar ways. my aim is after all not to produce something that blindly apes a trend or school, but to find what works in the style and learn from it, adapting it as best i can for my purpose. and that too, is a core ethic all of them would agree with: function must define form!

so there. that was what my process, thinking and learning looked like. i hope you find it useful – and that you share the funky things you try too! 🙂

Advertisements