Hello there, motion

Been itching to reintroduce myself to After Effects after some time away, and thought my first dribbble post would be a good excuse to spend an afternoon doing just that.

Household Coding: File Paths

In everyone of my classes, students struggle to understand file paths and how to link to different folders and files. Last week, I impromptu grabbed our container of mini coffee creams to demonstrate how you need to hop in and out of folders in order to link files properly.

Here is a very basic setup of a simple project structure:

In order to link from ourfile to file-green, you have to follow the file path like so:

<a href=”folder1/file-green”>

Similarly, if we are in  file-green and want to link to file-red, you have to follow the file path like so:

<a href=”../folder2/file-red”>

Here is an animation I made to explain it a little bit better…

Household Coding: Learning the Box Model

In teaching, I often explain nebulous concepts by using metaphors of random inanimate objects. Coffee creamers, picture frames, housing construction, etc. I’ve found that it takes an often-confusing concept and makes it more relatable to understand. So I’m starting a new blog series called Household Coding. In it, I will share small animations and graphics of these metaphors to explain coding concepts. Here is the first installation, Learning the Box Model.

One of the most basic concepts of CSS that my students often struggle with when first learning the language is the box model. As explained by the MDN,

In a document, each element is represented as a rectangular box. Determining the size, properties — like its color, background, borders aspect — and the position of these boxes is the goal of the rendering engine.

In CSS, each of these rectangular boxes is described using the standard box model. This model describes the space of the content taken by an element. Each box has four edges: the margin edgeborder edgepadding edge, and content edge.

For the past two cohorts, I have used an analogy of picture frames and an art gallery to visually represent the box model. So here is a little animated movie I created using Sketch and Principle to explain the box model.

Boarding Pass UI

I am heading to New York this weekend for a fundraiser by the amazing organization, Clean Hands for Haiti, so have been thinking about boarding passes and planes a lot.

One of the flaws I find with traditional boarding passes is quickly being able to see the departure and arrival times. So I whipped up a boarding pass UI in Sketch and animated it using Principle. It utilizes cards to quickly view pertinent information about upcoming flights that is readable for passengers on the go. When you arrive at the airport, all you do is tap the bar code to enlarge it.

The color scheme changes based on the airline you are flying with to fit their brand.

Airplane != Message

A few weeks ago, I was on the Instagram app (for iPhone) and ran across into a user interface snafu. When I went to revisit a private message from a friend, I just didn’t find where the inbox lived. After a frustrating time clicking what I thought was every obvious button on the app, I went to Twitter for the answer, and luckily, a friend helped me out within a few minutes.

It turns out that with the latest Instagram update, they changed the messages icon from a very practical picture of a message or card box to a picture of an… airplane?

practical message icon

non practical airplane icon

I am all about icons, especially when dealing with the small real estate that you get with a phone app, but one of the most important things when dealing with interfaces is to create clear, usable design affordances.

It turns out, you can swipe left to get to your Instagram messages or click on the airplane, but that was certainly not intuitive for this tech savvy millennial user, leaving me frustrated. Instagram is a beautiful app with few distractions that puts its content first. It doesn’t overwhelm the user with a ton of complex features, making it easy to use. However, when an app has such few features, they need to be spot on.

Icons on the web are cultural and learned quickly- the 3 line hamburger menu has become fairly ubiquitous, a picture of a house typically means home, and a picture of a letter usually means email or message. They help reduce clutter, can transcend the written language, and add some visual variety overall.

Instagram’s message icon (the airplane) is identical to the icon you can use to share content on the app (see below). While I get the connection Instagram is trying to draw between the two features, it falls a little short. To me, an airplane means “send” or “go,” not a place of storage.

Icons are powerful, but designers need to be careful about how they are used. Maybe one day the airplane icon will be synonymous with an inbox, but today is not that day. Not that I can speak for all, but I imagine most users would prefer clarity of function over ambiguity of icons even if it means adding a bit more clutter to the screen. When in doubt, a simple word (messages, inbox, etc) describing the feature would have done the trick and saved a bunch of time.

Heres a Ted talk about the process of redesigning the Facebook “like” button: How Giant Companies Design For You.

Coffee and UI

I’m creating a project for my students based around coffee mobile design. I needed a break from curriculuming, so I designed a shopping cart UI for my favorite brew.