Idea to Interface

When you’re working for the man, it’s hard to find time to make something fun for yourself. You’ve got ideas swimming around in your head for your next website or app, but translating abstract thoughts into a usable, successful interface is no easy task. Should you wireframe, prototype, or both? How do you know if your idea is even worth building? Aarron will share practical advice from the interface design school of hard knocks that will help you make your ideas a reality.

Notes from this talk taken by @lukew are available here: http://www.lukew.com/ff/entry.asp?1470

Transcript

1. Tuesday, December 13, 11
2. WE MAKE STUFF Tuesday, December 13, 11
3. Tuesday, December 13, 11
4. EXECUTION Tuesday, December 13, 11
5. CREATIVE THINKING Tuesday, December 13, 11
6. BAD FOR YOU Tuesday, December 13, 11
7. BAD FOR BOSS Tuesday, December 13, 11
8. BAD FOR BUSINESS Tuesday, December 13, 11
9. INDEPENDENT THINKING Tuesday, December 13, 11
10. INDEPENDENT PROJECT Tuesday, December 13, 11
11. Tuesday, December 13, 11
12. Tuesday, December 13, 11
13. WHAT WOULD HAPPEN IF...? Tuesday, December 13, 11
14. photo credit kycheng Tuesday, December 13, 11
15. Tuesday, December 13, 11
16. Tuesday, December 13, 11
17. Tuesday, December 13, 11
18. 1000 THINGS ON A SHELF Tuesday, December 13, 11
19. ON YOUR TIME Tuesday, December 13, 11
20. PERMISSION Tuesday, December 13, 11
21. I’m not the best, but I’m as good as the next guy. Tuesday, December 13, 11
22. HOW DO I FLIP THAT CREATIVE SWITCH? Tuesday, December 13, 11
23. Tuesday, December 13, 11
24. Tuesday, December 13, 11
25. Tuesday, December 13, 11
26. Tuesday, December 13, 11
27. Tuesday, December 13, 11
28. Tuesday, December 13, 11
29. Tuesday, December 13, 11
30. Tuesday, December 13, 11
31. IDEATE Tuesday, December 13, 11
32. INCUBATE Tuesday, December 13, 11
33. EVALUATE Tuesday, December 13, 11
34. Look who’s talking, honey. That’s hideous! Tuesday, December 13, 11
35. Tuesday, December 13, 11
36. DESIGN IS... Tuesday, December 13, 11
37. Tuesday, December 13, 11
38. Tuesday, December 13, 11
39. Tuesday, December 13, 11
40. BUT IT’S ALSO... Tuesday, December 13, 11
41. persona My internship provided me with the opportunity to work in Times Square. I just love all of the lights, action, and excitement! Julia has been taking Spanish since high school and is excited to study abroad in Buenos Aires next spring. She’s traveled a little in the past—to Great Britain for a vacation with her family and to Mexico for a missions trip—but this is her rst time going abroad alone. Though she has other friends who also plan to study abroad, she wanted to go at a di erent time so she would be forced to make friends with the locals and truly immerse herself in the culture. She’s heard from friends that the maturity level of some of the students plummets the moment they step on the plane to study abroad. She hopes they don’t make her look like a “stupid American.” She’s also heard that the dorms in Buenos Aires aren’t great, which solidi ed her decision to do a homestay. However, she’s concerned about commuting to classes, which she hopes to take at the NYU campus as well as a local university—if the credits transfer. She doesn’t have a lot of extra cash and is interested in a work study to pay for souvenirs and some travel around Argentina. Speaking Spanish on the job would also be great practice, but she isn’t sure what sort of opportunities there are, or even if she’s allowed to work. Julia Age: 19 - 22; Sophomore; Journalism & Communications Goals: Get a “Big City College” education, cosmopolitan experience; Build resume with internship; Take new/di erent courses; Make new/di erent friends; Experience di erent cultures Pain Points: Limited courses o ered; Costs; Organization (too much or not enough); Advantages are hidden; Challenging to transfer credits Knowledge Lifecycle THE INFLUENCER TECHNOLOGY DOMAIN EXPERIENCE 1 2 3 4 5 NOV OCT SEP AUG JUL JUN MAY APR MAR FEB JAN DEC Tuesday, December 13, 11
42. photo credit laurajo Tuesday, December 13, 11
43. photo credit meedanphotos Tuesday, December 13, 11
44. D Tuesday, December 13, 11
45. WHAT ARE YOU SOLVING? Tuesday, December 13, 11
46. Tuesday, December 13, 11
47. photo credit boxman Tuesday, December 13, 11
48. photo credit Jason Robb Tuesday, December 13, 11
49. Big picture photo credit evan_carroll Tuesday, December 13, 11
50. Tuesday, December 13, 11
51. Tuesday, December 13, 11
52. THEY HELP YOU... Tuesday, December 13, 11
53. IDEATE QUICKLY Tuesday, December 13, 11
54. INCUBATE ON YOUR WALLS Tuesday, December 13, 11
55. EVALUATE WITH COLLEAGUES Tuesday, December 13, 11
56. KEEP ‘EM PUBLIC Tuesday, December 13, 11
57. Tuesday, December 13, 11
58. Tuesday, December 13, 11
59. IDEATE Tuesday, December 13, 11
60. FORK Tuesday, December 13, 11
61. Tuesday, December 13, 11
62. Tuesday, December 13, 11
63. EVALUATE Tuesday, December 13, 11
64. USE IT WHILE YOU DESIGN IT Tuesday, December 13, 11
65. Tuesday, December 13, 11
66. Tuesday, December 13, 11
67. http://flowplayer.org/tools/ Tuesday, December 13, 11
68. https://github.com/defunkt/mustache Tuesday, December 13, 11
69. CODE AIN’T MY THANG Tuesday, December 13, 11
70. http://keynotekungfu.com/ Tuesday, December 13, 11
71. Tuesday, December 13, 11
72. https://gomockingbird.com/ Tuesday, December 13, 11
73. Tuesday, December 13, 11
74. PATTERNS Tuesday, December 13, 11
75. NEW FANCY IDEAS Tuesday, December 13, 11
76. NEW HAS OVERHEAD Tuesday, December 13, 11
77. http://patterntap.com/ Tuesday, December 13, 11
78. follow patterns http://developer.yahoo.com/ypatterns/ Tuesday, December 13, 11
79. INSERT DESIGN PATTERNS BOOK Tuesday, December 13, 11
80. LOWER LEARNING CURVE Tuesday, December 13, 11
81. LESS CODE Tuesday, December 13, 11
82. Tuesday, December 13, 11
83. https://github.com/stubbornella/oocss/ Tuesday, December 13, 11
84. 46 LESS CSS Tuesday, December 13, 11
85. 44 LESS HTML 19 LESS CSS Tuesday, December 13, 11
86. DESIGN BUILD FASTER Tuesday, December 13, 11
87. Tuesday, December 13, 11
88. AUDIENCE, MEET... Tuesday, December 13, 11
89. PRODUCT Tuesday, December 13, 11
90. Tuesday, December 13, 11
91. DESIGN PERSONA Tuesday, December 13, 11
92. Design Persona Brand Traits Voice Personality Map Overview unfriendly friendly dominant submissive MailChimp Freddie Von Chimpenhiemer IV is the face of the MailChimp, and the embodiment of the brand personality. Freddie's stout frame communicates the power of the application, and his always on the go posture let's people know this brand means business. Freddie always has a kind smile that welcomes users and makes them feel comfortable and at home. The cartoon style lets people know that MailChimp offers a fun, and informal experience. Freddie likes to crack witty jokes, but when the situation is serious, the funny business is out the window. MailChimp often surprises users with a funny easter egg, or a link to a goofy YouTube video. Fun is around every corner, but never in the way of the workflow. The voice of MailChimp is familiar, friendly, and above all human. The personalities of the people behind the brand shines through with honesty. The voice of MailChimp cracks jokes (ones you could share with your momma), tells stories, and communicates with the folksy tone that might be used with an old friend. MailChimp uses contractions like "don't" instead of "do no" because that's how real humans speak to one another. MailChimp uses sound effects like, “hmmmmm....” to make it sound like youʼre thinking hard, or “Blech, thatʼs awful!” to make it sound like you empathize. Or is it sympathize? Hmm, too lazy to Google it. Bah, you get the gist. Text for form and button labels are kept lowercase to reinforce the informality of the brand. MailChimp likes to start blog posts and other longer copy blocks with a quick story, like “I remember when...” Everybody likes stories. When people get upset, or make a mistake, MailChimp is always compassionate and sympathetic, and the feedback messages reflect that. 1 Author: Aarron Walter Fun, but not not childish Funny, but not goofy Powerful, but not complicated Hip, but not alienating Easy, but not simplistic Trustworthy, but not stodgy Informal, but not sloppy Tuesday, December 13, 11
93. Design Persona Brand Traits Voice Personality Map Overview unfriendly friendly dominant submissive WSOL WSOL takes on the role of the helpful outsider. Known for our ability to efficiently devise solutions to complex problems, we're often brought in when an organization needs help. As outsiders we must be prepared to overcome skepticism – especially relevant since many WSOL clients have in-house marketing, design and IT teams. By demonstrating expertise early on (through actions more so than words) the outsider gains the acceptance and support of the group. The stranger is valued as much for his outside perspective as for the knowledge and experience accumulated through his travels. With a bit of clever detective work, and with the support of innovative technology, the outsider champions the principles of good design and helps clients tackle the challenges of competing within the technological landscape. Is there one man who can be the embodiment of such a brand? There is...his name is Michael Knight. The voice of WSOL should be calm and cool. The voice of an expert who's seen it all, and lived to tell. When clients panic or situations become tense, WSOL remains strong and collected. The overall tone is casual and personal, so we use contractions and light slang instead of more formal terms. Trying to sound too formal comes off as stuffy...it's the personal connections we make with our clients that we want to nurture. We aren't a large faceless agency after all. Call to actions should be assertive but not pushy. We don't need to brag, we let our actions and beliefs tell our story instead. Copy should also be more about our customers than ourselves. Copy should be playful when discussing creativity, design and process. When it's time to take care of business, tone should be direct. Michael Knight does not play games. When we need to make strong recommendations, we take on a "tough love" tone. WSOL is empathetic and understanding. Reliable and smart. In communications, we want our skills and services to take a back seat to our wisdom and perspective. Speak first about why we do things, before discussing how or what we do. 1 Author: Dennis Kardys Witty, but not snide Confident, but not cocky Wise, yet humble Tech Savvy, but not geeky Charming, but not creepy Cool, but not aloof Tough, but not mean Tuesday, December 13, 11
94. Tuesday, December 13, 11
95. Tuesday, December 13, 11
96. FRONTLINE Tuesday, December 13, 11
97. Tuesday, December 13, 11
98. SCRATCH AN ITCH Tuesday, December 13, 11
99. WHAT YOU KNOW Tuesday, December 13, 11
100. BUDDY Tuesday, December 13, 11
101. WeekendHacker.net Tuesday, December 13, 11
102. BIG PICTURE Tuesday, December 13, 11
103. A VISIBLE IDEA Tuesday, December 13, 11
104. CLARITY Tuesday, December 13, 11
105. CONFIDENCE Tuesday, December 13, 11
106. BOSS Tuesday, December 13, 11
107. EMPLOYEE Tuesday, December 13, 11
108. INDIE Tuesday, December 13, 11
109. PERMISSION Tuesday, December 13, 11
110. Tuesday, December 13, 11
111. Tuesday, December 13, 11