book

Designing UX: Prototyping, 1st Edition

by Dan Goodwin, Ben Coleman

March 2017

Beginner

216 pages

4h 7m

English

SitePoint

Read now

Unlock full access

Designing UX: Prototyping
Notice of RightsNotice of LiabilityTrademark NoticeAbout Ben ColemanAbout Dan GoodwinAbout SitePoint
Foreword
AcknowledgmentsThanksPermissions (and Thanks!)Who Should Read This BookSupplementary Materials
Chapter 1: Defining the Case for Prototyping
What is prototyping?Why use prototypes?Testing and Communicating UI DesignsSaving Time and MoneyBringing Users into the Design ProcessEngaging Stakeholders in a Meaningful WayDesigning across Devices and PlatformsCreating and Testing with Real Content and DataWhat can we prototype?Information Architecture and Structural ElementsLayout and Visual HierarchyInteractive ElementsWhat can't we do with a prototype?Use Quantitative Research to Make DecisionsTesting for Completion/Conversion Funnel ProgressTesting AccessibilityTesting the Impact of Visual DesignBeing the Sole Source of DocumentationWho are prototypes for?DesignersDevelopersProject and Account ManagersBusiness AnalystsCustomer Support RepresentativesSummary
Chapter 2: The Prototyping Process
When to PrototypeYou have an IdeaBuy-in from OthersInformation Architecture to Visualize, Present, and TestA Lengthy User Journey or Several Changes of State over TimeA Pool of Available UsersCommunicate and Test Designs across DevicesLots of Ideas–or No Ideas–for Solving a ProblemMore Time Spent Communicating than DevelopingSpecific Aspects of a Design Are Performing PoorlyPlanningWhat are you aiming to achieve?What will you test and demonstrate?Where will you place the boundaries?How will you use your prototype?Who will work on your prototype, and how?How much time, budget, and resources do you have?What’s the starting point for your prototype?Gather ResourcesExisting Design ResourcesStationery (for paper prototyping)ContentDataGet On With It!Starting Top-down versus Bottom-upRecycling Your MaterialWorking CollaborativelyIterate and Demo, Testing Early and OftenSummary
Chapter 3: An Overview of Prototyping Tools and Techniques
Segmenting and Categorizing Tools and TechniquesDesign FidelityTool Complexity and Speed of UseThe Aim of Your PrototypeSorting Tools and Techniques into Our Three CategoriesHow the Tools Have Been GroupedTools that Failed to Make the CutSummary
Chapter 4: Paper Prototyping
What is paper prototyping?ProsConsMaking Paper PrototypesWhat You'll NeedYour ApproachDrawing TipsPaper Prototypes from Digital FilesCollaboration = Team + Client + UsersCollaborative Creation of Prototypes“Responsifying” an Existing Site with Paper CollageScreen CapturePrinting and Converting to PDF for Large ImagesSlicing and DicingCreating a New DesignSketching the GapsThe Finished ArticlePaper Prototypes in UsePresenting Ideas and Soliciting FeedbackTesting the Prototypes with UsersRoles in the Test SessionAnatomy of a Test SessionDigitizing Paper PrototypesSummary
Chapter 5: Creating Clickable Prototypes from Designs
MarvelMarvel SummaryClickable PDFsLinking between Pages in a Design ToolEditing an Existing PDF to Add HyperlinksClickable PDFs SummaryTools Dedicated to Creating Clickable PrototypesInVision SummarySummary
Chapter 6: Integrated Tools for Drawing and Creating Prototypes
Common Features in this Category of Prototyping ToolsDrawing and Design FeaturesIncreased Support for Prototyping InteractivityPrototyping Workflow FeaturesBalsamiqBalsamiq SummaryOmniGraffleOmniGraffle SummaryAxureAxure SummaryKeynote and PowerPointThree Approaches for Using Keynote and PowerPoint for PrototypingSharing Prototypes Created in Keynote and PowerpointKeynote & Powerpoint SummaryAdobe XDAdobe XD SummarySummary
Chapter 7: Building HTML Prototypes
The Pros of Using HTMLResponsive DesignFlexibilityComplex InteractionsLatest TechnologyResourcesSource Control for CollaborationSource Control for a Historical RecordVarious Sources of ContentAccessibilitySpeed of ChangeAnd a Few Cons of HTMLLearning ChallengesExperience LimitationsPlanning is a MustYour HTML Prototype Planning KitUser ResearchContentStructure and FunctionalitySkills RequiredTools for Rapid PrototypingPreprocessors for Writing CSSTools for InteractivityMaking Headway with FrameworksUsing Content in PrototypesUsing a Content Management System (CMS)Example CMSs Used for PrototypingCreating Accessible PrototypesMaking Prototypes Available OnlineSharing Your Prototype RemotelyMoving Flat File Prototypes OnlineMoving Content-managed Prototypes OnlineTools to Automate DeploymentManaging DatabasesHosting ProvidersThrowaway versus Reusable Code in HTML PrototypesHTML Prototyping Case StudiesDorothy House Hospice CareAn Online StoreMacGuffinBBC Nature Prototype iPad AppSummary
Chapter 8: Using Prototypes in Your Project Workflow
Exploring and Communicating Design Ideas with the TeamEngaging with Stakeholders and Project TeamsShare at the Right Time, and Keep SharingEnsure Stakeholders Are Seeing the Latest VersionEfficiently Use Stakeholders’ Time and AttentionKeep Promoting the PrototypeBe Prepared for Stakeholder FeedbackBringing Users into the Design Process Using PrototypesExploring Motivations and Behaviors in Contextual ResearchTesting Your Designs with UsersSummary

Appendix A: Supplementary Prototyping Tools Worth Seeking
Craft by InVisionFacebook Origami StudioFramerPrincipleXcode

Overview

It's well known that identifying and fixing problems in design is easier and cheaper if it can be done earlier in the process of design and build. That's because as the fidelity of the project we're working on increases, the effort involved in making changes increases. If we can test out early ideas to see if they work, in small chunks, then we can identify whether those ideas are going to work. To do this, we need to build prototypes.

With easy-to-follow, practical advice, this book will show you how to use a number of different prototyping techniques to improve UX. It covers:

The prototyping process
Paper prototyping
Interactive wireframing tools, such as Balsamiq and Axure
Dedicated prototyping tools, including Marvel, Invision, and Adobe XD
HTML prototypes
How to use prototypes in your project workflow

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Designing and Prototyping Interfaces with Figma - Second Edition

Publisher Resources

ISBN: 9781492019251Errata Page

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills