why we wireframe: progress of process
DESCRIPTION
The relevance and efficacy of wireframing has been hotly debated for a few years now...but its just a tool like any other. Its how you use it that matters. Leveraging a strong wireframing practice as an integral aspect of any creative process can have more impact than on the digital products you are creating. It can help shape your entire business. Talk adaptation can be found here: http://www.idiom.co/progress-process-wireframe/TRANSCRIPT
![Page 1: Why We Wireframe: Progress of Process](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c7e9364a795999488b4767/html5/thumbnails/1.jpg)
![Page 2: Why We Wireframe: Progress of Process](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c7e9364a795999488b4767/html5/thumbnails/2.jpg)
“Wireframing" has been around for a while…
![Page 3: Why We Wireframe: Progress of Process](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c7e9364a795999488b4767/html5/thumbnails/3.jpg)
It is the functional blueprint of our interactive systems.
low fidelity (sketching/ideation -> blocking)
mid fidelity (clickable mockups/coded prototypes)
content population/ design integration
![Page 4: Why We Wireframe: Progress of Process](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c7e9364a795999488b4767/html5/thumbnails/4.jpg)
Marketing-Based/Informational Website- Our Approach
NeedsAssementInitial
Meeting
Research /Strategy /Planning
Site OutlineSite Map
WireframesUser Flow
IA/ UX
Moodboards
Home PageArtwork
Landing/Detail Page(s)Artwork
Coding
Validation
ContentPopulation /Optimization
Browser &Platform Testing
Refinement
Launch
Search EngineSubmissionContent Outline/
Definition
ContentArchitecture
KICK OFF PLANNING CONTENT DESIGN DEVELOPMENT LAUNCH OPTIMIZATION
![Page 5: Why We Wireframe: Progress of Process](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c7e9364a795999488b4767/html5/thumbnails/5.jpg)
![Page 6: Why We Wireframe: Progress of Process](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c7e9364a795999488b4767/html5/thumbnails/6.jpg)
The Sticky Function – Wireframing is Data/Design Glue
Wireframing is the connection between the research and planning, and design phases. !• Translates documentation into
visual language
PRODUCT FUNCTIONALITY
Iteratively anticipate and design user interactions and validates usability. !• Pushes usability to the
forefront
• Improves functionality/improves design
Makes the "why?" drive the engagement !• Stay focused on project goals
![Page 7: Why We Wireframe: Progress of Process](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c7e9364a795999488b4767/html5/thumbnails/7.jpg)
An engaged client is a better client. !• Improves communication
• Lessens design pushback -clients involved will be better informed about the design and feel they have contributed to its creation.
Removing Roadblocks – Wireframes improve client relationships
Increases the value to the client, benefits the end product. !Client investment = validation
Make the project easier. !Project Road-mapping.
CLIENT RELATIONSHIPS
![Page 8: Why We Wireframe: Progress of Process](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c7e9364a795999488b4767/html5/thumbnails/8.jpg)
Everyone gets involved early = more functional teams !• Establishes Visual Language
• Everyone is on the same page
• Collaboration leads to breakthroughs
!• Creates space for the
sole prop/freelancer
Process. Process. Process. – Wireframes improve internal functionality
More exploration = more successful product. !• Wireframe for different
user groups, objectives and brand values
• Wide range of approaches can be refined, discarded, or combined for more effective solutions
Concurrent design and development + an early testing platform.
INTERNAL BENEFITS
![Page 9: Why We Wireframe: Progress of Process](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c7e9364a795999488b4767/html5/thumbnails/9.jpg)
BUSINESS BENEFITS
Saves time and money !• Identifies functionality early
• Easier changes
• Limits late stage scope creep
• Measure twice, cut once- It is more expensive to change existing work than build it right first time.
An ounce of prevention is worth a pound of cure.
Proactive Engagement !• Control the perceived value of
your services and deliverables - tangible and intangible !
• Better client relationships
• Better, collaborative work environment
Transition from cost-oriented towards value-based pricing !• credible positioning,
deep experience, & strong client relationships
![Page 10: Why We Wireframe: Progress of Process](https://reader034.vdocuments.site/reader034/viewer/2022051314/54c7e9364a795999488b4767/html5/thumbnails/10.jpg)
Thank You!
I N T E R A C T I V E
http://idiom.co @idiom_
Free Resources • konigi.com • wireframe.cc* • Invisionapp*
Paid Resources • Solidifyapp • Axure