This document summarizes a presentation about full-stack web design and prototyping features like @mentions in the browser using HTML, CSS, and JavaScript. The presentation discusses using prototyping tools like Flow Diagrams and Wireframes to design features before developing them. It provides the example of redesigning the @mentions feature for WordPress by prototyping it in a static GitHub repo and then porting the interactions to mobile apps. The speaker advocates for prototyping interfaces quickly in the browser rather than waiting for production-level code, and provides tips like doing research first and knowing when to hand off to developers.

1. WordCamp Denver 2015
Full-Stack Web Design
A Case Study in Interactive Prototyping

2. What on Earth is full-stack design?
Isn’t that a term for developers?
Flickr: afeitar

3. UX is UI is HTML
CODE
USER INTERFACE
USER EXPERIENCE

4. Which tools do I use for the job?
Flickr: katerha

5. Design or Development?
★ Flow Diagrams
★ Wireframes
★ Info. Architecture
★ Photoshop
★ JavaScript
★ HTML
★ WordPress
★ CSS
Design Tools Development Tools

6. Who am I and why should you listen to me?
Kevin Conboy // Designerd / Team Mercury / Automattic

7. A Prologue for
Prologue
Breathe
P2
Prologue
THEME PLUGIN
o2
2008
2009
2013
2014 (v2)

10. Major UI Overhauls in p2 (v2)
✤ Editor & Previews
✤ Action Buttons & Ellipsis Menu
✤ Hashtags
✤ @Mentions
✤ In-Page Notifications
✤ X-Posts
✤ Office Hours Widget
✤ Responsive/Mobile
✤ Oblique Strategies
All designed in the browser
with HTML/SASS/Backbone/jQuery

11. Before We Begin
Some Guiding Principles
Flickr: 29069717@N02

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

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

28. Flickr: jamiesrabbits
HTML is what the
web is made of.
Play with it.

29. o2 is available
today on Github
✤ github.com/Automattic/o2

30. Thanks!
@alternatekev
The State of Wisconsin The State of Pennsylvania
Office of the Director of
National Intelligence