SLIDE 1
CHRISTOPHER HALLAHAN
chrishallahan.com2019
State of the wireframe
World IA Day Kent 2019
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 - - 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
SLIDE 2
SLIDE 3
SLIDE 4
“
Zakary Kinnaird
Wireframes aRE great for getting clients to sign off on a project, however they also lock you into a signed
- ff s***** version of your project.
SLIDE 5
SLIDE 6
“
Heleen van Nues & Lennart Overkamp, A List Apart
we’ve noticed that wireframes tend to kill creativity…
SLIDE 7
Which Is a Wireframe?
QUIZ
SLIDE 8
SLIDE 9
SLIDE 10
SLIDE 11
SLIDE 12
SLIDE 13
SLIDE 14
SLIDE 15
SLIDE 16
HOW DO YOU USE WIREFRAMES?
COLLABORATIVE DISCUSSION
SLIDE 17
bit.ly/wireframe2019
SLIDE 18
WIREFRAMES DEFINED
SLIDE 19
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.
WIREFRAMES DEFINED
SLIDE 20
Establish Focus
CONCENTRATE ON CONTENT AND PRIORITY
1
SLIDE 21
Strategy Scope Structure Skeleton Surface
Concrete Abstract
Jesse James Garret, The Elements of User ExperienceWireframes
SLIDE 22
Reduce Risk
ESTABLISH SHARED UNDERSTANDING
2
SLIDE 23
Facilitate Team and Client Communication
VISUAL STRUCTURE FOR DISCUSSION
3
SLIDE 24
Rapid Iteration
RELATIVELY INEXPENSIVE TO REFINE
4
SLIDE 25
Low Fidelity
High Fidelity
Sketches, Content Stories, Grey Box Wireframes, Clickable Prototypes HTML Wireframes, Greyscale Wireframes, Mockups/Comps, Programmatic PrototypesLower risk / cost Higher risk / cost Very abstract Less abstract
SLIDE 26
Prototypes can be created from low or high fidelity wireframes Simulate user flow and interactivity prior to development
PREVIOUS TOOLS
Clickable PDFs Programmatic
TODAY’S TOOLS
Rapid HTML Linked Art Boards Complex Animation
SLIDE 27
WHERE They FALL DOWN
SLIDE 28
Make Design Assumptions
COLORING BOOK EFFECT & LOCK IN
1
SLIDE 29
SLIDE 30
Can Be Time Consuming
THROW-AWAY DELIVERABLE
2
SLIDE 31
NOT USED IN END PRODUCT
Research Reports Sitemap Static Wireframes Mockups
USED IN END PRODUCT
Written Content HTML Wireframes / Prototypes Living Pattern Library Exported Vector Graphics
SLIDE 32
Overly Simplistic
“WE CAN’T SHOW THAT TO OUR CLIENTS / USERS”
3
SLIDE 33 https:/ /uxplanet.org/the-art-of-ux-sketching-and-paper-prototyping-5dae5a1efc7d
SLIDE 34
Perfection and Polish
LOOK TOO GOOD
4
SLIDE 35 https:/ /steadfastcreative.com/low-fidelity-vs-high-fidelity-wireframes
SLIDE 36
Responsive Design and Interactivity
A STATIC ABSTRACTION
5
SLIDE 37
In web design, there is no such thing as “mobile” and “desktop” sizes.
SLIDE 38
A New World of Wireframes
SLIDE 39
HTML Wireframes
SLIDE 40
SLIDE 41
www.codepen.io
SLIDE 42
Priority Guides
SLIDE 43
SLIDE 44
SLIDE 45
www.mural.co
SLIDE 46
Content “Storyframe” Documents
SLIDE 47 https:/ /uxdesign.cc/storyframes-before-wireframes-starting-designs-in-the-text-editor-ec69db78e6e4
SLIDE 48
UI Libraries
SLIDE 49
SLIDE 50
SLIDE 51
Interactive Wireframes
SLIDE 52
www.adobe.com/xd
SLIDE 53
SLIDE 54
SLIDE 55
Wireframes as Internal Artifacts Instead of Deliverable
SLIDE 56 Photo by rawpixel on Unsplash
SLIDE 57
Hybrid “Experience Designer” Roles
Research Information Architecture Wireframes Visual Design Interaction Design Prototyping
SLIDE 58
SLIDE 59
SLIDE 60
FINAL THOUGHTS
SLIDE 61
Wireframes ≠ equal UX Content and strategy inform wireframes Every organization and project is difgerent Use time and resources wisely Early design collaboration is essential
FINAL THOUGHTS
SLIDE 62
Pen/Paper/Sticky Notes Your Local Retailer Sketch (Bohemian Coding) www.sketchapp.com Adobe XD www.adobe.com/xd Google Apps www.google.com/apps
MY Wireframe Toolkit
Mural www.mural.co CodePen www.codepen.io InVision www.invisionapp.com
SLIDE 63
How Do You Use Wireframes in Your Design Process?
DISCUSSION REVISITED
bit.ly/wireframe2019
SLIDE 64
CHRISTOPHER HALLAHAN
chrishallahan.comThank You!
SLIDE 65
Sources
Getting Started with Wireframes - Marvel Blog - https:/ /blog.marvelapp.com/ getting-started-wireframes/ Why Wireframes Are Important in the Design Process - https:/ /medium.com/ @protoio/why-wireframes-are-important-in-the-design-process-de4e773e611 A Comprehensive Guide To Wireframing And Prototyping — Smashing Magazine https:/ /www.smashingmagazine.com/2018/03/guide-wireframing-prototyping/ Basic UI/UX Design Concept Difgerence Between Wireframe & Prototype https:/ / uxplanet.org/basic-ui-ux-design-concept-difgerence-between-wireframe- prototype-e38cd3580543 Wireframing | usability.gov https:/ /www.usability.gov/how-to-and-tools/methods/ wireframing.html Are wireframes really dead?! – Prototypr - https:/ /blog.prototypr.io/are-wireframes- really-dead-868a78c9561b Priority Guides: A Content-First Alternative to Wireframes · An A List Apart Article - https:/ /alistapart.com/article/priority-guides-a-content-first-alternative-to- wireframes Storyframes before Wireframes - https:/ /uxdesign.cc/storyframes-before- wireframes-starting-designs-in-the-text-editor-ec69db78e6e4 How to get value from wireframes - https:/ /medium.com/@dustin/how- to-get-value-from-wireframes-f40c2cf27960 Wireframes are dead—why I haven’t used wires in over a year. - https:/ / medium.muz.li/wireframes-are-dead-why-i-havent-used-wires-in-- ver-a-year-8027fcce1b3f
- https:/