O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Wireframing Essentials

Book Description

If you've ever wanted to be a User Experience (UX) designer, this book will give you a great head start. It's a comprehensive handbook to the core principles and leads you through design methodologies with many practical examples.

In Detail

Designing the user experience (UX) for websites and applications can be an exhilarating and satisfying experience, but it can also be a chaotic and frustrating endeavor. The key to success lies in a thorough understanding of the industry standard design process, and in possessing a firm grasp of effective and proven UX design techniques.

This book is a comprehensive, yet concise, primer for those looking to better understand the core principles of UX design. It illustrates these principles with example projects, warns you of common obstacles, and introduces you to proven methodologies that help facilitate your efforts to find design solutions that work.

This book will put you on the road to becoming a UX designer by teaching you the process and techniques used by design professionals to create world-class applications and websites. This introduction to user experience design will instruct you on the required research and groundwork that will help you cut through the ambiguity commonly experienced when starting a project. It will show you how to turn the results of your research into task flow diagrams and wireframes that will be used to evolve your designs into solutions that will work for all of your customers and users.

What You Will Learn

  • Generate interaction maps and task flow diagrams
  • Create wireframe design proposals
  • Interact with clients who need design services
  • Understand your users with by creating personas
  • Establish design tenets that will help you stay on the right track
  • Quantify a design solution using heuristic evaluations
  • Ensure your brainstorming sessions are successful
  • Get started with the design process with the help of user survey and focus groups
  • Use paper prototyping and other testing techniques to help you predict success

Table of Contents

  1. Wireframing Essentials
    1. Table of Contents
    2. Wireframing Essentials
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers, and more
        1. Why Subscribe?
        2. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
      7. Downloading the color images of this book
        1. Errata
        2. Piracy
        3. Questions
    8. 1. The Design Process
      1. A high-level look at the design process
      2. Research
        1. The importance of research
        2. Designing in an agile environment
      3. Information architecture
        1. Introducing flowchart development
        2. Defining the shapes in flowcharts
        3. Transitioning to wireframes
        4. Usability testing
      4. Visual design
        1. Applying the visual layer
      5. Delivery
      6. Summary
    9. 2. Example Project – E-commerce Website
      1. Research
        1. Stakeholder interview
        2. Competitive analysis
        3. Personas
        4. Weighing and prioritizing features
      2. Information Architecture
        1. Site map
        2. Wireframing pages and content
          1. Home page
            1. Popular wireframing applications
            2. Initial home page wireframe
            3. Refined home page wireframe
          2. Category pages
          3. Product detail page
          4. Shopping cart
          5. Video library page
        3. Mockups
        4. Delivery
      3. Reviewing the development efforts
      4. Summary
    10. 3. Example Project – Mobile Device Application
      1. Research
        1. Stakeholder interview and persona development
        2. Weighing features
      2. Information Architecture
        1. Interaction maps
          1. Our first map
          2. Our refined map
        2. Sketches and mockups
          1. Creating a new account
          2. Finding your team
          3. Joining a team
          4. Your team's home page
          5. Navigation options
            1. Portal navigation
            2. Global navigation
            3. When to remove navigation
          6. The Futbol Finder storefront
          7. Shopping by product category
          8. Usability testing
          9. Presenting our deliverables
      3. Summary
    11. 4. Research Techniques
      1. Commonly used, effective research techniques
        1. Stakeholder interviews
        2. Design tenet scorecard
        3. Competitive analysis
        4. Personas and user profiles
          1. Creating personas
        5. Heuristic evaluation
        6. Card sorting
        7. Focus groups
        8. User surveys
        9. Brainstorming
      2. Summary
    12. 5. Information Architecture and Visual Design Techniques
      1. Information architecture techniques
        1. Reality mapping
        2. Task flow techniques
          1. Page-level detail diagrams
          2. Site map diagrams
          3. Persona-based task flow diagrams
          4. Screenshot interaction maps
        3. Paper prototyping
      2. Visual design techniques
        1. Mood boards
        2. Design scorecard
        3. Designing in the browser
      3. Summary
    13. Index