Modular Design Frameworks

Abstract

Learn the basic principles of modular design, and then put them in action to create sites that are easy to use, look great, and can be adapted within the context of your business needs. With author James Cabrera—one of the thought leaders in the modular-design movement—you'll create a single, scalable project for a sample nameplate site and then adapt that same project to work successfully as a portfolio site, an e-commerce site, and finally as a news/publishing content site. Along the way, you'll learn the scientific approach to devising a sound and scalable design strategy, followed by establishing a basic foundation using various criteria relevant to that type of site. As each chapter progresses, you'll add new concepts appropriate for the project type. Modular web and app design isn't just for so-called "creatives." It's a teachable science with principles that can be replicated in a creative manner. This approach makes the design decision making process for businesses much easier (and easier to live with). And modular design is a powerful tool for software designers to replicate effective successful designs across a spectrum of needs. At a Glance; Contents; About the Author; About the Technical Reviewer; Introduction; Chapter 1: A Modular Future; Breaking Down the Buzzword; The Shift Toward Design-Led Thinking; Design and Development: Let's Bridge the Gap; Should Designers Learn to Code?; Design with the Medium; The Advantages of Reusability; Iterative Design; Taking the Focus Off Aesthetics; Taking Charge; Summary; Chapter 2: Fonts, Colors, and the Invisible UI; Defining Visual Hierarchy; Establishing a Font System; Custom Fonts and System Fonts; Think About Function Before Form; Establishing a Color System Let's Design an ExampleWearables and Conversational UI; Summary; Chapter 3: Defining Your Basic Unit; Understanding the Essence of Your Product; We Need a Product to Sell; Theory in Practice; Facebook; Airbnb; Uber; Amazon; BuzzFeed; Chase; Onward Inward; Inventory; Flow; Design; One for All; Building Our Own; Summary; Chapter 4: Adaptation, Reusability, Variation, and Iteration; Preventing Confirmation Bias in Design; How to Adapt What You Have; Recycling and Reusing Basic Units; Variation; Example: Size; Example: Availability of Data; Taking It Further; Making Iterations; A/B Testing Example: Increase Click RatesExample: Increase Scroll Depth; Summary; Chapter 5: Organization, Clustering, Pages, and Navigation; Organization; Categorically; Consumption Paradigms; Clustering; Designing with Cluster Modules; Paging; Navigational Design Elements; Titles; Main Navigation; Internal Filters; Breaking Down the Basic Unit; Summary; Chapter 6: What's Next?; Fonts, Colors, and the Invisible UI; The Basic Unit; Variations, Optimizations, and iterations; Clusters, Pages, and Navigation; A Never-Ending Job; Summary; Appendix A: Breaking Down Examples into Modular Systems Example 1: Herokid StudiosFont System; Base Unit; Variations; Example 2: Huge; Font System; Base Unit; Variations; Example 3: iPhone 7; Font System; Base Unit; Variations; One in the Same; Index