idea to interface

8/22/2019 Idea to Interface

1/111

Tuesday, December 13, 11


2/111

WE

MAKE

STUFFTuesday, December 13, 11


3/111



4/111

EXECUTION



5/111

CREATIVETHINKING



6/111

BADFOR YOU



7/111

BADFOR BOSS



8/111

BADFOR BUSINESS



9/111

INDEPENDENT

THINKING



10/111

INDEPENDENTPROJECT



11/111Tuesday, December 13, 11


13/111

WHATWOULDHAPPENIF ?



14/111

photo credit kycheng

http://www.flickr.com/photos/kycheng/4827399406/sizes/o/http://www.flickr.com/photos/kycheng/4827399406/sizes/o/


18/111

1000THINGSON A SHELF



19/111

ON YOUR

TIMETuesday, December 13, 11


20/111

PERMISSION



21/111

Im not the best,but Im as good asthe next guy.



22/111

HOW DO I

FLIP THATCREATIVESWITCH?



26/111



27/111



28/111



29/111



30/111



31/111

IDEATE



32/111

INCUBATE



33/111

EVALUATE



34/111

Look whostalking, honey.

Thats hideous!



35/111



36/111

DESIGNIS...



37/111



38/111



39/111



40/111

BUT ITSALSO...



41/111



42/111

photo credit laurajo

http://www.flickr.com/photos/laurajo/3893912478/sizes/o/http://www.flickr.com/photos/laurajo/3893912478/sizes/o/


43/111

photo credit meedanphotos


D
http://www.flickr.com/photos/meedan/5410528889/sizes/o/http://www.flickr.com/photos/meedan/5410528889/sizes/o/


44/111

DTuesday, December 13, 11


45/111

WHAT ARE

YOU

SOLVING?Tuesday, December 13, 11


46/111



47/111

photo credit boxman

http://www.flickr.com/photos/kycheng/4827399406/sizes/o/http://www.flickr.com/photos/kycheng/4827399406/sizes/o/


48/111

photo credit Jason Robb

http://www.flickr.com/photos/jasonrobb/3751953801/http://www.flickr.com/photos/jasonrobb/3751953801/


49/111

Big picture

photo credit evan_carroll

http://www.flickr.com/photos/15140142@N03/5152486721/http://www.flickr.com/photos/15140142@N03/5152486721/


50/111



51/111

http://www.youtube.com/watch?v=iVFTBj_BYy0&u=A5VlmG9trOA&list=FL&feature=BFhttp://www.youtube.com/watch?v=iVFTBj_BYy0&u=A5VlmG9trOA&list=FL&feature=BFhttp://www.youtube.com/watch?v=iVFTBj_BYy0&u=A5VlmG9trOA&list=FL&feature=BF


52/111

THEYHELPYOU...



53/111

IDEATE

QUICKLYTuesday, December 13, 11


54/111

INCUBATEON YOURWALLS



55/111

EVALUATEWITH

COLLEAGUESTuesday, December 13, 11


56/111

KEEP EM

PUBLICTuesday, December 13, 11


57/111



58/111



59/111

IDEATE



60/111

FORKTuesday, December 13, 11


61/111



62/111



63/111

EVALUATE



64/111

USE ITWHILE YOU

DESIGN ITTuesday, December 13, 11


65/111



66/111



67/111

http://flowplayer.org/tools/



68/111

https://github.com/defunkt/mustache

https://github.com/defunkt/mustachehttps://github.com/defunkt/mustache


69/111

CODEAINT MY

THANGTuesday, December 13, 11


70/111

http://keynotekungfu.com/

http://keynotekungfu.com/http://keynotekungfu.com/


71/111



72/111

https://gomockingbird.com/

https://gomockingbird.com/https://gomockingbird.com/


73/111



74/111

PATTERNS



75/111

NEWFANCY IDEAS



76/111

NEWHAS OVERHEAD



77/111

http://patterntap.com/

http://patterntap.com/http://patterntap.com/


78/111

follow patterns

http://developer.yahoo.com/ypatterns/

http://developer.yahoo.com/ypatterns/http://developer.yahoo.com/ypatterns/


79/111

INSERT DESIGNPATTERNS BOOK



80/111

LOWERLEARNINGCURVE



81/111

LESSCODE



82/111



83/111

https://github.com/stubbornella/oocss/

https://github.com/stubbornella/oocss/https://github.com/stubbornella/oocss/


84/111

46 LESS CSSTuesday, December 13, 11


85/111

44 LESSHTML19 LESS CSSTuesday, December 13, 11


86/111

DESIGN

BUILDFASTERTuesday, December 13, 11


87/111



88/111

AUDIENCE,

MEET...



89/111

PRODUCT



90/111



91/111

DESIGN

PERSONATuesday, December 13, 11

Design Persona

Overview

MailChimp


92/111

Brand Traits

Voice

Personality Map

unfriendly friendly

dominant

submissive

Freddie Von Chimpenhiemer IV is the face of the MailChimp, and the embodiment ofthe 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 comfortableand at home. The cartoon style lets people know that MailChimp offers a fun, andinformal 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 YouTubevideo. 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 throughwith honesty. The voice of MailChimp cracks jokes (ones you could share with your momma), tells stories, and communicates withthe 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 usessound effects like, hmmmmm.... to make it sound like youre thinking hard, or Blech, thats awful! to make it sound like youempathize. Or is it sympathize? Hmm, too lazy to Google it. Bah, you get the gist. Text for form and button labels are kept lowercaseto 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.

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


Design Persona

Overview

WSOL


93/111

Brand Traits

Voice

Personality Map

Overview

unfriendly friendly

dominant

submissive

WSOL takes on the role of the helpful outsider. Known for our ability to efficiently devisesolutions to complex problems, we're often brought in when an organization needs help.As outsiders we must be prepared to overcome skepticism especially relevant sincemany WSOL clients have in-house marketing, design and IT teams. By demonstratingexpertise early on (through actions more so than words) the outsider gains theacceptance 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. Witha bit of clever detective work, and with the support of innovative technology, the outsiderchampions the principles of good design and helps clients tackle the challenges ofcompeting within the technological landscape. Is there one man who can be theembodiment 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 becometense, WSOL remains strong and collected. The overall tone is casual and personal, so we use contractions and light slang instead of moreformal 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. Wearen'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 tellour 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. MichaelKnight 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

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



94/111



95/111



96/111

FRONTLINE



97/111



98/111

SCRATCHAN ITCH



99/111

WHATYOUKNOW



100/111

BUDDYTuesday, December 13, 11


101/111

WeekendHacker.net

http://weekendhacker.net/http://weekendhacker.net/


102/111

BIG PICTURE



103/111

A VISIBLE

IDEATuesday, December 13, 11


104/111

CLARITY



105/111

CONFIDENCE



106/111

BOSSTuesday, December 13, 11


107/111

EMPLOYEE



108/111

INDIETuesday, December 13, 11


109/111

PERMISSION



110/111



111/111

idea to interface

Documents