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

Notice of RightsNotice of LiabilityTrademark NoticeAbout Ben ColemanAbout Dan GoodwinAbout SitePoint
AcknowledgmentsThanksPermissions (and Thanks!)Who Should Read This BookSupplementary Materials
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
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
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
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
MarvelMarvel SummaryClickable PDFsLinking between Pages in a Design ToolEditing an Existing PDF to Add HyperlinksClickable PDFs SummaryTools Dedicated to Creating Clickable PrototypesInVision SummarySummary
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
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
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

Craft by InVisionFacebook Origami StudioFramerPrincipleXcode

Content preview from Designing UX: Prototyping, 1st Edition

Chapter 7: Building HTML Prototypes

When we say HTML prototypes, we mean a website comprising HTML markup, CSS for presentation, and JavaScript for additional interactivity. It may be a simple HTML website, or a website that runs on a framework or content management system (CMS).

This chapter is not a detailed step-by-step guide; nor will it teach you how to use HTML, CSS, JavaScript, or frameworks. It aims to help you understand all the options for creating HTML prototypes and their benefits. You'll find out what's needed to get started, and gain some guidance on how to approach creating an HTML prototype. We'll also include some real-life prototyping case studies from some of the projects we've worked on at fffunction.

After reading this chapter, ...