Full stack-web-design
1 like710 views
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.
Full stack-web-design
- 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