An Event Apart: From Idea to Interface

by Luke Wroblewski June 13, 2011

In his Idea to Interface presentation at An Event Apart in Atlanta, GA 2011 Aarron Walter encouraged Web designers and developers to tackle their personal projects by walking through examples and ways to jump in. Here are my notes from his talk:

  • If we stay focused on execution all the time, we risk losing our creative thinking. Without creative thinking, you may only be doing mediocre work or burning out.
  • So how doe we stay excited and keep the fire in our belly. One of the ways is by doing an independent project. These small projects can turn into business, collaborations, or just fun.
  • Asking “wouldn’t it be cool if..” is our creative juices flowing. But often we don’t act on the these ideas.
  • The hardest thing is to get started. Get it out of your head, put it on paper, and show it to someone. One outcome is “wow that’s cool”. The other “meh not that interesting”. Putting something on the shelf is admirable. Some ideas won’t work out because of timing but that’s ok but it’s important to get your ideas out.
  • Failure is OK. It helps you work though inspiration.
  • Many times you have to work on your ideas on your own time. It may require a few extra hours at night. You need to make the commitment yourself.
  • We need to give ourselves permission to be the person with an idea. We all deserve a shot at making our ideas real. Don’t just think about your ideas but carry them through.
  • “I’m not the best but I’m as good as the next guy” You don’t have to be. Just take the plunge and get your ideas out.

The Creative Process

  • The “eureka” moment often happens when we tune out and relax.
  • The creative process is how our brain works.
  • Ideation: have ideas, go through them quickly, think about lots of stuff in short order.
  • When you are in the ideation phase, any idea is a good idea. Don’t let others judge things too early. Share them when you have incubated for a while.
  • Incubation: time to think and digest the idea. Our brains solve problems when we are not actively thinking about them.
  • Evaluate: look back at ideas, evaluate them, and see if they’ll work.
  • Around second grade we realize people are looking at us and we are being judged. So we inject an internal judge for ourselves. This often limits what we are willing to try to pursue.
  • Ideation means let the ideas flow, let them be crazy, sort them out later.

Tips for tackling Your Ideas

  • Tackle the whole design. Design is more than elegant layouts. It’s about understanding our users, organizing our content, interaction patterns, and more. It’s not about little d = decoration. It’s about big picture designing covering everything we do.
  • Put your ideas up. Sketchboards are big pieces of paper on walls that allow you to idea rapidly. Paper on the wall is non-committal. You can rip it down and start over. You can bring people in to work with you on the evaluation process. This allows people to work together –it changes your culture because you are working together on a problem. Incubate on your walls and ideate quickly.
  • Keep your sketchboards on the wall as they invite collaboration. Make ideas part of the organization. Balance this with knowing when to get your ideas out vs. letting them incubate.
  • Prototype. Creating a prototype helps you coalesce your idea and see if you can get other people on board. You have to get things out of your head a soon as possible, draw it write it, or build it. When something is only stuck in your head you can come up with many ideas about why it is not working.
  • Keep a common CSS and Javascript folder archived so you can prototype quickly by reusing older files and primitives.
  • Prototyping allows you to use your idea while designing it. This helps you work through ideas quickly. Mustache can help you integrate real data in your prototypes using JSON objects.
  • If coding isn’t your thing, designing with Keynote can help you create light prototypes quickly.
  • New ideas have overhead. When you are working on your idea, design patterns can help you lower the learning curve for users and save a lot of code. Coming up with custom solutions for every interface adds a lot of work. If people are familiar with the patterns you use (because they have used them on other sites), it makes it easier for them to get up and running on your project.
  • Mail Chimp killed 46% of their CSS code using patterns.
  • The code you put into a prototype shouldn’t be the code that goes live
  • Sometimes you want to do something that you want to stand out. Using patterns might not be the best fit for it.
  • Get a personality. From the very beginning you want to be thinking about personality. As interface designers we create the windows between people interacting. Software has human attributes and you want to make the right introduction. A design persona: put as much time into thinking about the persona of our product as we do for our users. Think about the brand traits you want your application to embody. Make sure to include what something is and isn’t as well. Can include a visual lexicon, a personality map, and characteristics.
  • Go with what you know. You won’t have to learn a bunch of new things if you start with a domain you know and love.
  • Team up. The buddy system not only gives you complementary skill-sets but it also gives you someone you are accountable to.
  • Get clarity into your design. When you have clarity, you have confidence. Exploring ideas is good for employees, bosses, and business.