Wireframing Essentials

By Matthew J. Hamm

An easy to follow, examplebased guide introducing you to the world of user experience design through the author's real world experiences

Whether you are looking to become a professional UX Designer, or just need to get the job done, the principles and processes discussed in this book will help you understand how to craft reliably effective and successful design solutions.

• Language: English
• Publisher: Packt Publishing
• Release date: Jan 24, 2014
• ISBN: 9781849698559

Book preview

Table of Contents

Wireframing Essentials

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why Subscribe?

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the color images of this book

Errata

Piracy

Questions

1. The Design Process

A high-level look at the design process

Research

The importance of research

Designing in an agile environment

Information architecture

Introducing flowchart development

Defining the shapes in flowcharts

Transitioning to wireframes

Usability testing

Visual design

Applying the visual layer

Delivery

Summary

2. Example Project – E-commerce Website

Research

Stakeholder interview

Competitive analysis

Personas

Weighing and prioritizing features

Information Architecture

Site map

Wireframing pages and content

Home page

Popular wireframing applications

Initial home page wireframe

Refined home page wireframe

Category pages

Product detail page

Shopping cart

Video library page

Mockups

Delivery

Reviewing the development efforts

Summary

3. Example Project – Mobile Device Application

Research

Stakeholder interview and persona development

Weighing features

Information Architecture

Interaction maps

Our first map

Our refined map

Sketches and mockups

Creating a new account

Finding your team

Joining a team

Your team's home page

Navigation options

Portal navigation

Global navigation

When to remove navigation

The Futbol Finder storefront

Shopping by product category

Usability testing

Presenting our deliverables

Summary

4. Research Techniques

Commonly used, effective research techniques

Stakeholder interviews

Design tenet scorecard

Competitive analysis

Personas and user profiles

Creating personas

Heuristic evaluation

Card sorting

Focus groups

User surveys

Brainstorming

Summary

5. Information Architecture and Visual Design Techniques

Information architecture techniques

Reality mapping

Task flow techniques

Page-level detail diagrams

Site map diagrams

Persona-based task flow diagrams

Screenshot interaction maps

Paper prototyping

Visual design techniques

Mood boards

Design scorecard

Designing in the browser

Summary

Index

Wireframing Essentials

An introduction to user experience design

---

Wireframing Essentials

An introduction to user experience design

Copyright © 2014 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: January 2014

Production Reference: 1200114

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84969-854-2

www.packtpub.com

Cover Image by Aniket Sawant (<[e-mail]>)

Credits

Author

Matthew J. Hamm

Reviewers

Jeromy Condon

Jerome M. Griffith

Acquisition Editors

Andrew Duckworth

Joanne Fitzpatrick

Lead Technical Editor

Sruthi Kutty

Technical Editors

Shiny Poojary

Siddhi Rane

Faisal Siddiqui

Copy Editors

Alisha Aranha

Adithi Shetty

Project Coordinator

Aboli Ambardekar

Proofreader

Paul Hindle

Indexer

Mehreen Deshmukh

Production Coordinator

Nilesh R. Mohite

Cover Work

Nilesh R. Mohite

About the Author

Matthew J. Hamm has been designing visual solutions and interactive user experiences in the Pacific Northwest since the mid 1990s. Specializing in User Experience (UX) design and Information Architecture (IA), Matthew has been active as a full-time in-house designer, UX consultant, freelance designer, and entrepreneur. This has given him a comprehensive view of the many different venues in which websites and applications are designed.

He has worked for and with clients such as Amazon.com, Atlatl Software, Microsoft, SumTotal Systems, Drugstore.com, Napera Networks, Target.com, ToysRus.com, BabiesRus.com, and Imaginarium.com.

When not designing software, he spends his time with his family in Portland, Oregon. In his spare time, he is a linocut printer and gold panning enthusiast. He also enjoys kayaking the beautiful rivers of the Portland area.

I would like to thank my wife, Janelle, for being so supportive at such a busy time in our lives. Though a small number of pages, this book required many late nights and busy weekends to process, write, and illustrate. All of this was added to the hours needed to get a small software startup and running. Many thanks for your patience.

I would also like to thank those who acted as mentors to me early on in my career and who are very much responsible for bringing me into the world of software design: Billy Haffner, Loren Imes, and Troy Turner. Though nearing 20 years since all this started, I am still extremely aware of how you have influenced my life and career, and you have my deepest appreciation.

About the Reviewers

Jeromy Condon is a college instructor and freelance web developer based out of Seattle, Washington. He specializes in custom WordPress theme development and design using HTML5, CSS, PHP, and JavaScript. When he gets a spare moment, he loves to draw, take photographs, and explore the great outdoors.

Professionally, he is a big fan of minimalist, typographic-based design, and mobile user experience study. He teaches web development principles, web graphic design, UX, and web animation at Clover Park Technical College in Tacoma, Washington. He also runs his own freelance web business under the name Rufusmedia, specializing in custom website design and development.

Jerome M. Griffith is a highly motivated graphic designer, web designer/developer, artist, illustrator, and aspiring writer. He has completed many computer graphics, web development, and illustration projects for various clients around USA and in the Republic of Trinidad and Tobago, where he was born and raised. He has more than 17 years of professional experience working with various print, graphic, and web technologies, including food packaging designs, corporate desktop publishing, website design, and website publishing.

While working full-time as a production specialist in a well-known financial establishment in USA, he is also enrolled full-time as an undergraduate student in a distance learning program pursuing a Bachelor of Science degree in Information Technology-Software Emphasis, with projected graduation in 2016. He is building his portfolio and furthering his career in Information Technology with specialization in web development, UI/UX design, software development, and Java Oracle development.

He holds an Associates degree in Visual Communications-Interactive Design (2001) and has earned the industry-recognized CIW JavaScript Specialist, CIW Web Foundations Associate, and CIW Web Design Specialist Certification (2013). He also holds diplomas in Java E-Commerce Application Development and Oracle 9i SQL Development (2005).

Working under the pen name Jerome Matiyas, in his spare time, he writes and illustrates a series of historical fantasy adventure novels entitled the Epic Adventures of Mekonnen (Mekonnen Epic), thus demonstrating skills in original concepts, advanced computer graphics, web design, drawing, and creative writing, with a deep fascination for graphic novels, comic books, animation, movies, cultures, languages, exotic locations, and ancient civilizations.

To view Jerome's portfolio and artwork, go to Pinevergreenstudios.com and mekonnenepic.com.

www.PacktPub.com

Support files, eBooks, discount offers, and more

You might want to visit www.PacktPub.com for support files and downloads related to your book.

Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at for more details.

At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.

http://PacktLib.PacktPub.com

Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read, and search across Packt's entire library of books.

Why Subscribe?

Fully searchable across every book published by Packt

Copy and paste, print, and bookmark

Reviews for Wireframing Essentials

[mrko · Rating: 5 out of 5 stars]

Great overview of design process which is helpful for self taught designers

[Marko Lukic · Rating: 5 out of 5 stars]

Simple, easy to understand and grasp, a highly recommended overview of basic UX principles and wireframing for you and your team!