Hands-On UX Design for Developers

Hands-On UX Design for Developers

by Elvis Canziba
Released July 2018
Publisher(s): Packt Publishing
ISBN: 9781788626699

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Learn every step you need for product design and development

Key Features

  • Explore all the tools that you need to be a complete UX designer
  • Code the product designs you've created to become a full-stack designer
  • Build an amazing portfolio with real-world projects

Book Description

Designing user experience (UX) is one of the most important aspects of a project, as it has a direct effect on how customers think of your company. The process of designing a user experience is one of the most challenging yet rewarding aspects of product development. Hands-On UX Design for Developers will teach you how to create amazing user experiences for products from scratch.

This book starts with helping you understand the importance of a good UX design and the role of a UX designer. It will take you through the different stages of designing a UX and the application of various principles of psychology in UX design. Next, you will learn how to conduct user research and market research, which is crucial to creating a great UX. You will also learn how to create user personas and use it for testing. This book will help you gain the ability to think like a UX designer and understand both sides of product development: design and coding. You will explore the latest tools, such as Sketch, Balsamiq, and Framer.js, to create wireframes and prototypes. The concluding chapters will take you through designing your UI, dealing with big data while designing a UX, and the fundamentals of frontend. Finally, you'll prepare your portfolio and become job ready in the UX arena.

What you will learn

  • What UX is and what a UX designer does
  • Explore the UX Process and science of making products user-friendly
  • Create user interfaces and learn which tools to use
  • Understand how your design works in the real world
  • Create UI interaction, animation, wireframes, and prototypes
  • Design a product with users in mind
  • Develop a personal portfolio and be well-prepared to join the UX world

Who this book is for

Hands-On UX/UI Design for Developers is for web designers who have knowledge of basic UX design principles.

Publisher resources

View/Submit Errata

Table of contents

  1. Title Page
  2. Copyright and Credits
    1. Hands-On UX Design for Developers
  3. www.packtpub.com
    1. Why subscribe?
    2. PacktPub.com
  4. Contributors
    1. About the author
    2. About the reviewer
    3. Packt is searching for authors like you
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
      1. Download the color images
      2. Conventions used
    4. Get in touch
      1. Reviews
  6. What is UX?
    1. What is UX design?
    2. UX Design versus UI Design 
    3. Why is UX so important?
      1. Who is a UX designer?
      2. UX design process
    4. Full stack design
      1. Who is a full stack designer?
        1. A roadmap to becoming a successful full stack designer
    5. Summary
  7. UX Design Process
    1. UX design process
    2. Discovery and planning
      1. The planning phase
      2. Project proposals
      3. Project objectives and methodologies
    3. The UX strategy
      1. Understanding the client's business
      2. Understanding our competitors
      3. Understanding our customers
      4. Discovering your own UX strategy framework
    4. UX research
      1. The discover stage
        1. Field study
        2. Diary study
        3. User interviews
        4. Stakeholder interviews
      2. The explore stage
        1. Competitive analysis
        2. Design review
        3. Persona-building
        4. Task analysis
        5. Journey-mapping
        6. Prototype feedback and testing
        7. Writing user stories
        8. Card-sorting
      3. The test stage
        1. Qualitative usability testing
        2. Benchmark testing
        3. Accessibility evaluation
      4. The listening stage
        1. Surveys
        2. Search-log analysis
        3. Usability-bug review
    5. UX analysis
      1. User analysis
    6. Design
      1. Concept, sketching, and flows
      2. Wireframes and prototyping
      3. Visual design and interactions
      4. Documentation
      5. Development
    7. Production
    8. Summary
  8. User Behavior Basics and User Research
    1. User behavior basics
    2. The Gestalt theory
      1. The Proximity law
      2. The Similarity law
      3. The Closure law
      4. The Figure-Ground law
      5. The Common Region law
    3. Things you should know about psychology in UX
      1. Understanding the user's motivation
        1. Extrinsic motivation
        2. Intrinsic motivation
      2. Understanding the user's ability
      3. Understanding what triggers our users
      4. A quick summary of this section
    4. User research
      1. Setting objectives and a brief
      2. Defining the audience
      3. Selecting our research method
      4. Designing and validating your research
      5. Organizing interview
      6. Conducting the research
      7. Analyzing and validating the results
      8. Defining the problems
    5. Market research is not user research
    6. The benefits of user research
      1. Helping to create the right product from the beginning
      2. Increasing conversions and revenues
      3. Avoiding surprises saves time and money
      4. Improving SEO and marketing
      5. Customer retention and loyalty
      6. Providing competitor insights
      7. Development resources
      8. Early design guide
    7. Summary
  9. Getting to Know Your Users
    1. User Research
      1. Grouping customer information
    2. How to conduct user interviews
      1. Preparing for the interview session
      2. Identifying who we want to talk to
      3. Setting up screener surveys for filtering the participants
      4. Conducting the interview
    3. Summary
  10. User Personas
    1. What are user personas?
      1. Creating a persona
    2. Four different perspectives on personas
      1. Goal-directed personas
      2. Role-based personas
      3. Engaging personas
      4. Fictional personas
    3. Benefits of personas
    4. Summary
  11. Designing Behavior
    1. Designing behavior
      1. Five factors/preconditions for users to take actions
      2. Models of behavior change
      3. Behavioral approach for product design
    2. Summary
  12. Visual Design Principles and Processes
    1. Introducing visual design principles and processes
    2. Basics of visual design
      1. Using lines
      2. Using shapes
        1. Types of shapes
        2. Shape usage in visual design
      3. Using colors
        1. Color theory
        2. Color systems
        3. Using the color wheel to understand the meaning of colors
        4. The meaning of each color
      4. Using the appropriate font/typography
      5. Textures
      6. Forms
    3. Design principles
      1. Alignment
      2. Hierarchy
      3. Contrast
      4. Repetition
      5. Proximity
      6. Balance
      7. Space
    4. Visual design tools
    5. Summary
  13. Wireframes and Prototyping
    1. Wireframes and prototyping
    2. What is a wireframe?
      1. How to create wireframes?
      2. Types of wireframes
        1. Low-fidelity wireframes
        2. Medium-fidelity wireframes
        3. High-fidelity wireframes
      3. Wireframing tools
        1. Sketch wireframes
        2. Stenciling and paper cutouts
        3. Wireframing software
          1. Balsamiq mockups
          2. Wireframe.cc
          3. Moqups
          4. InVision
          5. UXPin
          6. Axure
          7. Other wireframing tools
        4. Creating wireframes using graphic design software
    3. What is prototyping?
      1. Prototyping methods
        1. Paper prototyping
        2. Digital prototypes
        3. Coding prototypes
      2. The process of creating prototypes
        1. Planning
        2. Drawing and sketching
        3. Mockup and design
        4. Animations and interactions
        5. Exporting and testing
      3. Prototyping tools
        1. MarvelApp
        2. Origami.Design
        3. Justinmind
        4. Flinto
        5. Principle
        6. Other prototyping tools
    4. Summary
  14. UI Design and Implementation
    1. User interface design
      1. UI design tools
        1. Designing the UI with Sketch
          1. The toolbar
          2. Artboards
          3. Pages
          4. UI components templates
          5. Colors
          6. Typography
          7. Icons and symbols
          8. Exportation
          9. Preview of the UI design
          10. Sketch plugins
      2. Creating the Design System in Sketch
        1. Creating a structure for files and folders
        2. Following the proper naming convention
        3. Choosing the colors and creating the palettes
        4. Choosing fonts/typefaces
        5. Creating and configuring the grid
        6. Designing the UI components
    2. Summary
  15. Frontend UI Implementation and Process
    1. UI Design handover
      1. Communicating with the frontend team on the early stages of design
      2. Explaining to the developer how you expect the design to work
      3. Sharing the mock-up/user interface designs
      4. Sharing the prototype
      5. Sharing the design specification, assets, and the design system
      6. Status checklist
    2. Using a handover design tool
      1. Handing-off UI design using Zeplin
      2. Handing over design using Sympli
    3. Frontend development/UI development
      1. CSS layouts
        1. Float-based layout
        2. Flexbox-based layout
        3. Grid-based layout
      2. CSS preprocessors
        1. Sass
        2. Less
        3. Stylus
      3. CSS postprocessors
      4. CSS methodologies
        1. Object-Oriented CSS (OOCSS)
        2. Scalable and Modular Architecture for CSS (SMACSS)
        3. Block, Element, Modifier (BEM)
        4. Atomic CSS (ACSS)
      5. CSS frameworks
    4. Summary
  16. Post-launching UX Activities
    1. Post-launch UX activities
    2. Collecting the correct user feedback
      1. Customer feedback surveys
      2. Emails and contact forms
      3. Feedback through social media
    3. User accessibility testing (UI testing)
    4. A/B testing
    5. Tracking and recording user UI sessions
    6. Creating and analyzing conversion funnels
    7. Summary 
  17. Designing for Big Data
    1. UX Design with big data
    2. The role of big data in UX design
    3. Data visualization
    4. Summary
  18. Other Books You May Enjoy
    1. Leave a review - let other readers know what you think

Product information

  • Title: Hands-On UX Design for Developers
  • Author(s): Elvis Canziba
  • Release date: July 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781788626699