Design for Developers

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 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 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. Foreword by Aaron Gustafson. 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. Table of Contents PART 1 DESIGN BASICS 1 Bridging the gap between design and development 2 Design fundamentals PART 2 USER EXPERIENCE 3 User experience basics 4 User research 5 User experience design PART 3 VISUAL DESIGN ELEMENTS 6 Web layout and composition 7 Enhancing web layout with animation 8 Choosing and working with typography on the web 9 Color theory 10 Building a website PART 4 AFTER VISUAL DESIGN 11 Test, validate, iterate 12 Developer choices and user experience 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 In Design for Developers , author Stephanie Stimac shares the unique insights shes 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. Youll 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. Foreword by Aaron Gustafson. About the technology Developer-made design decisions can have a real impact on a sites user experience. Learn to speak designs language, and youll 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. Youll love the books 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 youre done reading, youll know its having good design sense will make you a better web developer! What's inside 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. Table of Contents PART 1 DESIGN BASICS 1 Bridging the gap between design and development 2 Design fundamentals PART 2 USER EXPERIENCE 3 User experience basics 4 User research 5 User experience design PART 3 VISUAL DESIGN ELEMENTS 6 Web layout and composition 7 Enhancing web layout with animation 8 Choosing and working with typography on the web 9 Color theory 10 Building a website PART 4 AFTER VISUAL DESIGN 11 Test, validate, iterate 12 Developer choices and user experience