2019 State of the wireframe CHRISTOPHER HALLAHAN World IA Day Kent - PowerPoint PPT Presentation

2019 State of the wireframe CHRISTOPHER HALLAHAN World IA Day Kent 2019 chrishallahan.com

A year Of Change

“ Wireframes aRE great for getting clients to sign off on a project, however they also lock you into a signed off s***** version of your project. Zakary Kinnaird

“ we’ve noticed that wireframes tend to kill creativity… Heleen van Nues & Lennart Overkamp, A List Apart

QUIZ Which Is a Wireframe?

COLLABORATIVE DISCUSSION HOW DO YOU USE WIREFRAMES?

bit.ly/wireframe2019

WIREFRAMES DEFINED

WIREFRAMES DEFINED An asset used early in the UX design process, after user flows and strategy have been defined. Communicate and prioritize an interface’s structure, content hierarchy and basic functionality/behavior. Establish basic structure before visual design (typography, color and layout). Skeleton of a user interface.

1 Establish Focus CONCENTRATE ON CONTENT AND PRIORITY

Surface Concrete Skeleton Wireframes Structure Scope Strategy Abstract Jesse James Garret, The Elements of User Experience

2 Reduce Risk ESTABLISH SHARED UNDERSTANDING

3 Facilitate Team and Client Communication VISUAL STRUCTURE FOR DISCUSSION

4 Rapid Iteration RELATIVELY INEXPENSIVE TO REFINE

Low Fidelity High Fidelity HTML Wireframes, Greyscale Wireframes, Sketches, Content Stories, 
 Mockups/Comps, Programmatic Prototypes Grey Box Wireframes, Clickable Prototypes Lower risk / cost Higher risk / cost Very abstract Less abstract

Prototypes can be created from low or high fidelity wireframes Simulate user flow and interactivity prior to development TODAY’S TOOLS 
 PREVIOUS TOOLS 
 Rapid HTML 
 Clickable PDFs 
 Linked Art Boards 
 Programmatic Complex Animation

WHERE They FALL DOWN

1 Make Design Assumptions COLORING BOOK EFFECT & LOCK IN

2 Can Be Time Consuming THROW-AWAY DELIVERABLE


 USED IN END PRODUCT NOT USED IN END PRODUCT 
 Written Content 
 Research Reports 
 HTML Wireframes / Prototypes 
 Sitemap 
 Living Pattern Library 
 Static Wireframes 
 Exported Vector Graphics 
 Mockups

3 Overly Simplistic “WE CAN’T SHOW THAT TO OUR CLIENTS / USERS”

https:/ /uxplanet.org/the-art-of-ux-sketching-and-paper-prototyping-5dae5a1efc7d

4 Perfection and Polish LOOK TOO GOOD

https:/ /steadfastcreative.com/low-fidelity-vs-high-fidelity-wireframes

5 Responsive Design and Interactivity A STATIC ABSTRACTION

In web design, there is no such thing as “mobile” and “desktop” sizes.

A New World of Wireframes

HTML Wireframes

www.codepen.io

Priority Guides

www.mural.co

Content “Storyframe” 
 Documents

https:/ /uxdesign.cc/storyframes-before-wireframes-starting-designs-in-the-text-editor-ec69db78e6e4

UI Libraries

Interactive Wireframes

www.adobe.com/xd

Wireframes as Internal Artifacts Instead of Deliverable

Photo by rawpixel on Unsplash

Hybrid “Experience Designer” Roles Research 
 Visual Design 
 Information Architecture 
 Interaction Design 
 Wireframes Prototyping

FINAL THOUGHTS

FINAL THOUGHTS Wireframes ≠ equal UX Content and strategy inform wireframes Every organization and project is di fg erent Use time and resources wisely Early design collaboration is essential

MY Wireframe Toolkit Mural 
 Pen/Paper/Sticky Notes 
 www.mural.co Your Local Retailer CodePen 
 Sketch (Bohemian Coding) 
 www.codepen.io www.sketchapp.com InVision 
 Adobe XD 
 www.invisionapp.com www.adobe.com/xd Google Apps 
 www.google.com/apps

bit.ly/wireframe2019 DISCUSSION REVISITED How Do You Use Wireframes in Your Design Process?

Thank You! CHRISTOPHER HALLAHAN chrishallahan.com

Sources How to get value from wireframes - https:/ /medium.com/@dustin/how- Getting Started with Wireframes - Marvel Blog - https:/ /blog.marvelapp.com/ to-get-value-from-wireframes-f40c2cf27960 getting-started-wireframes/ Why Wireframes Are Important in the Design Process - https:/ /medium.com/ Wireframes are dead—why I haven’t used wires in over a year. - https:/ / @protoio/why-wireframes-are-important-in-the-design-process-de4e773e611 medium.muz.li/wireframes-are-dead-why-i-havent-used-wires-in- over-a-year-8027fcce1b3f A Comprehensive Guide To Wireframing And Prototyping — Smashing Magazine https:/ /www.smashingmagazine.com/2018/03/guide-wireframing-prototyping/ How to use wireframes with design systems – freeCodeCamp.org - https:/ /medium.freecodecamp.org/how-to-use-wireframes-with- Basic UI/UX Design Concept Di fg erence Between Wireframe & Prototype https:/ / design-systems-46f3040829b6) uxplanet.org/basic-ui-ux-design-concept-di fg erence-between-wireframe- prototype-e38cd3580543 An Alternative to Wireframes — Page Content Maps | Aten Design Group - https:/ /atendesigngroup.com/blog/alternative-wireframes-page- Wireframing | usability.gov https:/ /www.usability.gov/how-to-and-tools/methods/ content-maps wireframing.html Are wireframes really dead?! – Prototypr - https:/ /blog.prototypr.io/are-wireframes- HTML Wireframes | Brad Frost - http:/ /bradfrost.com/blog/post/html- really-dead-868a78c9561b wireframes/ Priority Guides: A Content-First Alternative to Wireframes · An A List Apart Article - Wireflows: A UX Deliverable for Workflows and Apps - https:/ / https:/ /alistapart.com/article/priority-guides-a-content-first-alternative-to- www.nngroup.com/articles/wireflows/ wireframes Start Coding with Wireframes | A List Apart - https:/ /alistapart.com/ Storyframes before Wireframes - https:/ /uxdesign.cc/storyframes-before- column/start-coding-with-wireframes wireframes-starting-designs-in-the-text-editor-ec69db78e6e4