Quick Summary
Design Systems Engineering Volume 1 is a collection of articles by James Stone from early 2017 that chronicles his workflow and advocates for a systems-based approach to web design. The book emphasizes the shift from traditional design deliverables to programmatic systems of design, highlighting the importance of modular, consistent, and maintainable design systems. It provides practical insights from real industry projects and experience working with diverse engineering teams.
Detailed Summary
Overview
The book addresses the significant trend in web design of moving away from static design deliverables (like Photoshop or Sketch files) towards programmatic systems of design. It emphasizes that designers must evolve beyond aesthetics to think in terms of modular, interchangeable components that can adapt to different environments and maintain consistency throughout the product development cycle. The author shares real-world examples, including a case study of Capital One’s redesign of 2,500 pages using only 20 components.
Key Concepts
The author stresses the importance of designers embracing new technologies, particularly shared symbol libraries and tools that facilitate collaboration with engineering teams. The book discusses how web projects have reached a level of complexity that requires adopting established processes and methodologies from other industries, where early miscalculations can significantly impact project budgets and timelines. Key topics include:
- The importance of living/coded styleguides
- Component-driven development approach
- Front-end code organization and maintenance
- Documentation strategies for engineering teams
- Handling complex projects with multiple stakeholders
- Working with offshore teams and time zone challenges
Practical Applications
The content is based on the author’s real-world experience working on industry projects and helping translate design intent into optimal user experiences across diverse engineering teams. The book includes practical examples, such as:
- A detailed walkthrough of a real-world coded styleguide implementation
- Insights into project Sass file organization and structure
- Strategies for creating minimal feature demos for stakeholder buy-in
- Solutions for CMS integration challenges
- Techniques for managing offshore development teams
- Real-world case studies of large-scale redesigns