Design for Developers 9781617299476
Solve common application design and usability issues with flair! These essential design and UX techniques will help you
227 127 42MB
English Pages 280 Year 2023
Table of contents :
Design for Developers
Copyright
dedication
contents
front matter
foreword
preface
acknowledgments
about this book
Who should read this book
How this book is organized: A roadmap
liveBook discussion forum
about the author
about the cover illustration
Part 1. Design basics
1 Bridging the gap between design and development
1.1 How design and user experience fundamentals benefit developers
1.1.1 Improving collaboration and communication
1.1.2 Understanding the why behind design decisions
1.1.3 Writing better code by understanding visual design fundamentals
1.1.4 Better code (and design) through less dependency on third-party frameworks
1.1.5 User experience and development
1.2 The path to understanding better design and user experience
1.2.1 The design process this book covers
1.2.2 Design experts vs. designing smart
1.2.3 Putting it all together
Summary
2 Design fundamentals
2.1 The principles of design
2.1.1 Proximity
2.1.2 Alignment
2.1.3 Repetition
2.1.4 Contrast
2.1.5 Balance
2.2 Design fundamentals for user experience and beyond
Summary
Part 2. User experience
3 User experience basics
3.1 User experience transcends visual design
3.2 What is user experience?
3.3 User experience roles
3.3.1 User research
3.3.2 User experience design
3.3.3 User experience writers
3.4 User experience methodologies
3.4.1 User-centered design
3.4.2 Double diamond process
3.5 Exploring user experience practices in depth
Summary
4 User research
4.1 Introduction to user research
4.1.1 User research seems costly, but failure is costlier
4.1.2 Initial data gathering
4.1.3 User personas
4.1.4 User needs
4.1.5 Defining site objectives: Aligning user goals and business goals
4.1.6 Creating S.M.A.R.T. goals
4.2 User research strategies
4.2.1 Qualitative vs. quantitative
4.2.2 User attitude vs. user behavior
4.2.3 User research methods
4.2.4 Research as a continuous phase
Summary
5 User experience design
5.1 Information architecture
5.1.1 Site mapping
5.1.2 Content inventory and audit
5.2 User flows and user journeys
5.2.1 User flows
5.2.2 User journeys
5.3 Designing your site and application
5.3.1 Wireframing
5.3.2 User interface design and full-color mock-ups
5.3.3 Prototyping
Summary
Part 3. Visual design elements
6 Web layout and composition
6.1 Establishing your website structure
6.2 Using a grid
6.2.1 Defining the grid
6.2.2 Grid dimensions
6.3 Choosing a layout
6.3.1 Using one-column patterns
6.3.2 Common multi-columned patterns
6.3.3 Reading patterns
6.4 Using space
6.5 Responsive design considerations
6.5.1 Designing for mobile
6.5.2 Designing for multiscreen and foldable devices
Summary
7 Enhancing web layout with animation
7.1 Why use animation?
7.1.1 Improve usability
7.1.2 Create memorable interactions
7.1.3 Use as decoration to spark an emotional response
7.2 When to use animation
7.2.1 Providing cues for navigating the site
7.2.2 Giving users feedback when interacting with UI elements
7.2.3 Navigation and page transitions
7.2.4 Indicate the status of something in progress
7.2.5 Consider the long haul
7.3 How to plan animations
7.3.1 How to storyboard
7.4 Technical considerations of animation
7.4.1 Performance considerations
7.4.2 Accessibility considerations
Summary
8 Choosing and working with typography on the web
8.1 Type basics
8.1.1 Distinguishing between a typeface and a font
8.1.2 Different type classifications
8.1.3 Font styles and weights
8.2 Choosing type for the web
8.2.1 What makes a good web font?
8.2.2 How to pair typefaces and fonts
8.2.3 Establishing a type ramp
8.2.4 Applying sizes to your type styles
8.2.5 Establish a vertical rhythm
8.2.6 Ensuring readability
Summary
9 Color theory
9.1 Color terminology
9.1.1 Shade, tints, and tones
9.1.2 Warm vs. cool colors
9.1.3 Hue, saturation, and lightness
9.2 The color wheel
9.2.1 Color relationships
9.2.2 Study examples of color, and then study some more
9.3 Color psychology
9.4 Picking and applying a color scheme
9.5 Tutorial: Pick a color scheme, and apply it
9.6 Accessibility considerations
9.6.1 Testing color contrast
9.6.2 Don’t rely only on color to indicate a state or status
9.7 Web color modes
9.7.1 RGB and RGBA
9.7.2 Hexadecimal
9.7.3 HSL and HSLA
9.7.4 CIE Lab and LCH
9.7.5 Which color mode should I use?
9.8 Color discrepancies on screens
Summary
10 Building a website
10.1 The website requirements for our project
10.2 Figuring out content placement with a wireframe
10.3 Establishing the grid system and spacing
10.4 Choosing typography
10.5 Establishing vertical rhythm
10.6 Choosing imagery
10.6.1 Using imagery to set the tone
10.6.2 Text over imagery
10.7 Pick and apply the color palette
10.8 Finishing touches
10.9 Responsive design
10.9.1 Tablet design, the eight-column grid
10.9.2 Mobile design, the four-column grid
10.9.3 Mobile-first design
Summary
Part 4. After visual design
11 Test, validate, iterate
11.1 The cycle of design
11.1.1 Replacing an existing design
11.1.2 Minimum viable product
11.1.3 When is a design good enough to start testing?
11.2 Types of testing
11.2.1 Customer interviews
11.2.2 Testing in a production environment
11.2.3 A/B testing
11.2.4 Staged rollouts
11.2.5 Initial user research methods
11.3 Applying the results of testing
Summary
12 Developer choices and user experience
12.1 The effect of the code written
12.1.1 Why writing good HTML matters
12.1.2 Performance and page load
12.1.3 Web technologies without cross-browser support
12.2 Developers building for developers
Summary
Appendix. Further resources
User experience
Grid structure and layout
Animations
Typography
Colors
Testing design
index
![Android User Interface Design: Implementing Material Design for Developers [Second edition.]
9780134191959, 0134191951](https://dokumen.pub/img/200x200/android-user-interface-design-implementing-material-design-for-developers-second-edition-9780134191959-0134191951.jpg)
