Design for Developers

Design for Developers

by Stephanie Stimac
Released September 2023
Publisher(s): Manning Publications
ISBN: 9781617299476

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

Solve common application design and usability issues with flair! These essential design and UX techniques will help you create good user experiences, iterate smoothly on frontend features, and collaborate effectively with designer colleagues.

In Design for Developers you will learn how to:

  • Use color, typography, and layout to create hierarchy on a web page
  • Apply color palettes consistently in a user interface
  • Choose the correct typefaces and fonts
  • Conduct user research to validate design decisions
  • Quickly plan a website’s layout and structure

In Design for Developers, author Stephanie Stimac shares the unique insights she’s learned as a designer on the Microsoft Developer Experiences team. This one-of-a-kind book provides a developer-centric approach to the essential design fundamentals of modern web applications. You’ll learn how to craft a polished visual design with just color, space, and typeface, and put all your new skills into practice to design a website from scratch.

About the Technology
Developer-made design decisions can have a real impact on a site’s user experience. Learn to speak design’s language, and you’ll be able to confidently contribute to a design process, collaborate with designer colleagues, and make more informed decisions about how you build your apps.

About the Book
Design for Developers reveals essential design and UX principles every web developer needs to know. You’ll love the book’s developer-centric approach, which demonstrates new ideas with examples from popular sites and user interfaces. Discover insightful techniques for user research, and learn to use color, typography, and layout to create communicative web visuals. By the time you’re done reading, you’ll know it’s true: having good design sense will make you a better web developer!

What's Inside
  • Conduct user research to validate design decisions
  • Quickly plan a website’s layout and structure
  • Iterate smoothly on frontend features
  • Use color, typography, and layout to create hierarchy on a web page


About the Reader
For web developers familiar with HTML, CSS, and the JavaScript basics.

About the Author
Stephanie Stimac is a design technologist and senior product manager who focuses on building and improving developer experiences. She has previously worked on the Microsoft Edge browser.

Quotes
An invaluable crash course for developers! Level up your career and become the person who thrives in the space between design, user experience, and development.
- From the Foreword by Aaron Gustafson, author of Adaptive Web Design

Stephanie writes with clarity, humor, and authority—bringing just the right level of historical context and design fundamentals. A perfect guide to help developers make good design decisions at every step of the way. As a designer, I recommend it to my own team as well!
- Jason Pamental, Chewy

Design makes the difference between applications that just work and those that are user-friendly, intuitive, and attractive.
- Oliver Korten, ORONTEC

Table of contents

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

Product information

  • Title: Design for Developers
  • Author(s): Stephanie Stimac
  • Release date: September 2023
  • Publisher(s): Manning Publications
  • ISBN: 9781617299476