WordCamp Denver 2015

Full-Stack Web DesignA Case Study in Interactive Prototyping

What on Earth is full-stack design?Isn’t that a term for developers?

Flickr: afeitar

UX is UI is HTML

CODE

USER INTERFACE

USER EXPERIENCE

Which tools do I use for the job?

Flickr: katerha

Design or Development?

★ Flow Diagrams

★ Wireframes

★ Info. Architecture

★ Photoshop

★ JavaScript

★ HTML

★ WordPress

★ CSS

Design Tools Development Tools

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

A Prologue for Prologue

Breathe

P2

PrologueTHEME PLUGIN

o2

2008

2009

2013

2014 (v2)

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

Before We BeginSome Guiding Principles

Flickr: 29069717@N02

Do Your HomeworkDesign is still design. Research your work before beginning. Those old-school tools help here.

Flickr: tabor-roeder

Prototype Code is NOT Production CodeAt least, not usually.

Flickr: ibeamee

Code is Cheap, Throw it Away OftenSomething’s not working? Start over again, differently.

Flickr: patr1ck

Know Your LimitationsThere’s a point where it’s definitely a developer’s job to do something. That’s the stopping point.

Flickr: freakgirl

@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

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

✤ 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

Flickr: jamiesrabbits

HTML is what the web is made of.

Play with it.

o2 is available today on Github

✤ github.com/Automattic/o2

Thanks!@alternatekev

The State of Wisconsin The State of Pennsylvania Office of the Director of National Intelligence