12. Do Your Homework
Design is still design. Research your work before beginning. Those old-school tools help here.
Flickr: tabor-roeder
13. Prototype Code is NOT Production Code
At least, not usually.
Flickr: ibeamee
14. Code is Cheap, Throw it Away Often
Something’s not working? Start over again, differently.
Flickr: patr1ck
15. Know Your Limitations
There’s a point where it’s definitely a developer’s job to do something. That’s the stopping point.
Flickr: freakgirl
16. @Mentions:
A Case Study
✤ Feature existed but was clunky
✤ Entire codebase was thrown away
✤ Prototyped in static repo on Github
✤ Ideas conveyed in prototype were
reworked into production code
✤ Edited production SASS during
development
✤ Resulting @mentions UI is also
available across WordPress.com &
BuddyPress Core
17.
18.
19.
20.
21.
22.
23.
24.
25.
26. Benefits to Browser
Prototyping for @Mentions
✤ Determined importance of being
able to know cursor/caret location
within the field
✤ Determined hiding text input with
overlay was unusable – even if the
overlay showed what you were
typing live
✤ Speed of UI instantiation and
destruction was crucial. Slow
showing and hiding was super
annoying.
✤ Helped determine search string rules
Flickr: california_bakery
27. ✤ Strongly-defined
interactions ported to
Android and iOS
Flickr: z0mgitsryan
✤ Leveraged open-source
code that helped squash
production bugs
Flickr: smcgee
✤ Granular control over
interaction states and
displays
Flickr: quinnanya
