DrawAFriend In-progress stills, iconograhy and screenshots from the facebook game “DrawAFriend� Designed by Emily Sappington in a collaborative effort with students and faculty from Carnegie Mellon University and Microsoft Research. Fall 2011-Present
DrawAFriend • Game Progression: Step 1: Choose a friend to draw
Step 2: Pick a photo to draw
Step 3: The drawing studio page
Step 4: Select a tool and customize size and opacity (example shown: paintbrush)
Step 5: Save to your gallery and view gallery
Step 6: View drawing close-up in the gallery
• About page mockup for DrawAFriend with credits • Popup screenshots • Iconography for DrawAFriend
DrawAFriend
ca ncel
save
studio
DrawAFriend
ca ncel
save
studio
DrawAFriend
ca ncel
save
studio
DrawAFriend
ca ncel
save
studio
DrawAFriend
gall er y wi th mouse rollo ver name popup sty le 1
my gall ery
DrawAFriend
my gall ery
“Alex Limpeacher ” “Alex Limpeacher ” by Adrien Treuill e by Adrien Treuill e Nov. 12, 2011 Nov. 12, 2011
save
DrawAFriend
save
choose a f riend
pick a photo
draw a f riend
save to galler y
About DrawAFriend Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit essquis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor.
Alex Limpeacher Game Designer
Prashanth K P Programmer Cool Title Here
Adrien Treuille Principle Investigator
Larry Zitnick Principle Investigator
Michael Cohen Principle Investigator
Emily Sappington Designer
studio about
Save to my gall ery? Save Cancel
Drawing saved to your gallery go to my gall ery back to draw ing
studio tools
friend’s galleries bar rollover popup with buttons
draw
“draw” clicked/selected
gall ery on/clicked
draw sliders
width
“x” only appears for user’s own gallery save
transparency
on/clicked
save
normal button state
save
clicked state (darkened)
save
clicked state option 2
save
User Name draw gall ery
“gallery” clicked/selected
inactive art
friend selection frame
discard
scalable friend photo selection frame
gall ery
close-up gallery page
breadcrumbs bar (actual size)
pick friend/photo slider
normal popup button state on mouse rollover
fail whale page
frame for “go back to my gallery”
back & forward (left/right) arrows for gallery page go to studio