Hands-On UX Design for Developers电子书

Title Page

Copyright and Credits

Hands-On UX Design for Developers

www.packtpub.com

Why subscribe?

PacktPub.com

Contributors

About the author

About the reviewer

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the color images

Conventions used

Get in touch

Reviews

What is UX?

What is UX design?

UX Design versus UI Design

Why is UX so important?

Who is a UX designer?

UX design process

Full stack design

Who is a full stack designer?

A roadmap to becoming a successful full stack designer

Summary

UX Design Process

UX design process

Discovery and planning

The planning phase

Project proposals

Project objectives and methodologies

The UX strategy

Understanding the client's business

Understanding our competitors

Understanding our customers

Discovering your own UX strategy framework

UX research

The discover stage

Field study

Diary study

User interviews

Stakeholder interviews

The explore stage

Competitive analysis

Design review

Persona-building

Task analysis

Journey-mapping

Prototype feedback and testing

Writing user stories

Card-sorting

The test stage

Qualitative usability testing

Benchmark testing

Accessibility evaluation

The listening stage

Surveys

Search-log analysis

Usability-bug review

UX analysis

User analysis

Design

Concept, sketching, and flows

Wireframes and prototyping

Visual design and interactions

Documentation

Development

Production

Summary

User Behavior Basics and User Research

User behavior basics

The Gestalt theory

The Proximity law

The Similarity law

The Closure law

The Figure-Ground law

The Common Region law

Things you should know about psychology in UX

Understanding the user's motivation

Extrinsic motivation

Intrinsic motivation

Understanding the user's ability

Understanding what triggers our users

A quick summary of this section

User research

Setting objectives and a brief

Defining the audience

Selecting our research method

Designing and validating your research

Organizing interview

Conducting the research

Analyzing and validating the results

Defining the problems

Market research is not user research

The benefits of user research

Helping to create the right product from the beginning

Increasing conversions and revenues

Avoiding surprises saves time and money

Improving SEO and marketing

Customer retention and loyalty

Providing competitor insights

Development resources

Early design guide

Summary

Getting to Know Your Users

User Research

Grouping customer information

How to conduct user interviews

Preparing for the interview session

Identifying who we want to talk to

Setting up screener surveys for filtering the participants

Conducting the interview

Summary

User Personas

What are user personas?

Creating a persona

Four different perspectives on personas

Goal-directed personas

Role-based personas

Engaging personas

Fictional personas

Benefits of personas

Summary

Designing Behavior

Designing behavior

Five factors/preconditions for users to take actions

Models of behavior change

Behavioral approach for product design

Summary

Visual Design Principles and Processes

Introducing visual design principles and processes

Basics of visual design

Using lines

Using shapes

Types of shapes

Shape usage in visual design

Using colors

Color theory

Color systems

Using the color wheel to understand the meaning of colors

The meaning of each color

Using the appropriate font/typography

Textures

Forms

Design principles

Alignment

Hierarchy

Contrast

Repetition

Proximity

Balance

Space

Visual design tools

Summary

Wireframes and Prototyping

Wireframes and prototyping

What is a wireframe?

How to create wireframes?

Types of wireframes

Low-fidelity wireframes

Medium-fidelity wireframes

High-fidelity wireframes

Wireframing tools

Sketch wireframes

Stenciling and paper cutouts

Wireframing software

Balsamiq mockups

Wireframe.cc

Moqups

InVision

UXPin

Axure

Other wireframing tools

Creating wireframes using graphic design software

What is prototyping?

Prototyping methods

Paper prototyping

Digital prototypes

Coding prototypes

The process of creating prototypes

Planning

Drawing and sketching

Mockup and design

Animations and interactions

Exporting and testing

Prototyping tools

MarvelApp

Origami.Design

Justinmind

Flinto

Principle

Other prototyping tools

Summary

UI Design and Implementation

User interface design

UI design tools

Designing the UI with Sketch

The toolbar

Artboards

Pages

UI components templates

Colors

Typography

Icons and symbols

Exportation

Preview of the UI design

Sketch plugins

Creating the Design System in Sketch

Creating a structure for files and folders

Following the proper naming convention

Choosing the colors and creating the palettes

Choosing fonts/typefaces

Creating and configuring the grid

Designing the UI components

Summary

Frontend UI Implementation and Process

UI Design handover

Communicating with the frontend team on the early stages of design

Explaining to the developer how you expect the design to work

Sharing the mock-up/user interface designs

Sharing the prototype

Sharing the design specification, assets, and the design system

Status checklist

Using a handover design tool

Handing-off UI design using Zeplin

Handing over design using Sympli

Frontend development/UI development

CSS layouts

Float-based layout

Flexbox-based layout

Grid-based layout

CSS preprocessors

Sass

Less

Stylus

CSS postprocessors

CSS methodologies

Object-Oriented CSS (OOCSS)

Scalable and Modular Architecture for CSS (SMACSS)

Block, Element, Modifier (BEM)

Atomic CSS (ACSS)

CSS frameworks

Summary

Post-launching UX Activities

Post-launch UX activities

Collecting the correct user feedback

Customer feedback surveys

Emails and contact forms

Feedback through social media

User accessibility testing (UI testing)

A/B testing

Tracking and recording user UI sessions

Creating and analyzing conversion funnels

Summary

Designing for Big Data

UX Design with big data

The role of big data in UX design

Data visualization

Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think