The following is an excerpt of a workshop I gave at PennApps Fall 2015.
So, let’s define what exactly design is —
“People think that design is styling. Design is not style. It’s not about giving shape to the shell and not giving a damn about the guts. Good design is a renaissance attitude that combines technology, cognitive science, human need and beauty to produce something that the world didn’t know was missing.” — Paola Antonelli
At its core, design is systemized problem solving. Design encompasses all the high level thinking we do when we come up with an idea about how we can make something better. It’s the natural ideation we go through when we realize “Hey this thing sucks! I have a couple of ideas about how to make it better!”, and all the planning, execution, testing, and improvement that follows.
“Design is basic to all human activities — the placing and patterning of any act towards a desired goal constitutes a design process.” — Victor Papanek, Design For the Real World
So really, everyone’s experienced the core of the design process — ideation. It’s a natural outgrowth of human curiosity (well, and laziness). And as hackers, all of you have taken it a step further, by executing on the random thoughts you’ve had in your heads; actually making something as a result. Congratulations, you’re all designers already!
“The role of the designer is that of a very good, thoughtful host — whose energy goes into trying to anticipate the needs of his guests.” — Charles Eames
Design as a profession takes this natural problem solving drive, and develops the systemized strategies and skills we need in order to make it useful to other people.
The first thing you learn as a professional designer is how to walk in the shoes of others — techniques for making things that work well for people not like you, and building empathy for these people. In the real world, this involves an additional factor — balancing the problems people have, and identifying the important ones worth solving given the time and technical constraints you have.
We call this high level process of identifying the problems and needs of people Product Design.
The product design role is one of finding problems, iterating on potential solutions, and refining toward one which we’ve identified as the “best”, through testing, and user research, given our needs and constraints. It’s one of the coolest and most frustrating parts of design — you get to explore the craziest ideas and go completely broad, but you do need to balance your time, and not get personally attached to things that don’t work.
This is the process that explores the tangential, the lateral — it’s our attempt at systemizing disruption. It’s what produces things like iPhones and Macbooks, Polaroid cameras, Legos, and Coke bottles.
Once we’ve figured out a problem and a way to solve it, it’s time to get into the nitty gritty — how do we make our proposal’s user experience — the way a person sees our product; touches it; hears it, and the way our product responds — as great as possible within our constraints?
That’s where User Experience (UX) Design comes in. Generally, we try to line up a product’s experience with a user’s mental model as closely as possible — that’s what people mean when they talk about how “intuitive” something is.
When making software, this usually follows a process like this:
We start with Information Architecture, where we lay out the basic structure of our product — what data should be exposed, and where, and how we organize and categorize that data. If you’re developing an app, in this phase, you’re drawing out your app’s screens — what its main user flow is, and what is needed for secondary function. What is someone’s first use experience? How does this app fit in to their day to day, and how do we line up the organization of the app with the scenarios it’s going to be used in? How does the app adapt as the needs of our users change?
Next comes UI Design. For apps, this phase involves visually arranging the content on each particular screen in a way that makes sense and looks nice. Here, we decide how input should work, and make sure to consider practicals and usability practices — is this button easy to reach on a phone? Does it get noticed at the appropriate time given how people scan the page with their eyes?
Finally, is Visual Design — does the way this product is visually presented align with what we’re trying to communicate as a brand? Does it look nice and fit in with other apps on this device? Is it a natural and non-jarring part of the user’s everyday life? Does it delight people and make them happy? If UI design encompasses what components are present in an interface and how they are arranged, visual design handles how they’re styled, how they look and the specifics of how they behave. This includes both the raw pixels and graphics, and on digital devices, how they react to changes in the application, actions by the user, and transitions in state (what we call Interaction Design and Motion Design).
There are so many ways to approach all these phases of design.
In the next couple of weeks, I’ll write about strategies I use to effectively approach design at hackathons and in agile/sprint-based workflows. Follow me and/or subscribe to the HH Design publication if you’re interested in following along!
Edit: I’ve started writing! Here’s Part I, which tackles design thinking + ideating real fast.
In addition, this is a list of design resources I shared at PennApps:
It contains everything from sites that’ll teach you the principles of design to typefaces, icons, and colors I often use. Happy hacking!
A Brief Addendum:
This article is incomplete.
Why? Because I don’t provide a detailed enough impression of what each phase of design is. What prototypes look like at each stage, how we test, iterate, and validate throughout the whole process, and just the daily life of a designer. I’m in the middle of writing about my own experiences and providing my own examples, but you can help.
Are you a designer interested in sharing your experiences, tools, sketches, workflows or just tips? Ping me.
Curious how I made the gifs in this article? See the source files and read this.
If you thought this article was useful, please click “Recommend” below. This will help to share it with others.
