Book Summaries | Refactoring UI - Starting from Scratch

December 27th, 2023

Refactoring UI - Starting from Scratch (Chapter 1)

This summary will serve to further cement my learnings taken when reading the first chapter of Refactoring UI, titled Starting from Scratch, and I hope will provide some learnings to you as well.

Feature-Centric Approach:

When embarking on a new app design, the common mistake of focusing on the overall layout, such as the navigation bar or page structure, can lead to frustration and feeling stuck. Instead, adopting a feature-centric approach involves designing specific functionalities before the app’s shell. This shift helps avoid premature decision-making about the app’s structure and layout.

Start with a Feature, Not a Layout

Example: Flight Booking Service

Illustrating this approach with a flight booking service, the recommendation is to initiate the design process with a concrete feature, like “searching for a flight.” Identifying the necessary components, such as fields for departure and destination cities, dates, and a search button, ensures a focused and informed design process.

Detail Comes Later

Low-Level Decisions Postponed:

In the early stages of designing a new feature, it’s crucial to defer low-level decisions about typefaces, shadows, and icons. Prioritizing the basic structure over intricate details allows for quicker exploration of various layout ideas. Leveraging tools like paper sketches with a thick Sharpie helps maintain focus on the broader design.

Don’t Design Too Much

Iterative Approach:

An iterative design approach involves working in short cycles, focusing on one feature at a time. Avoiding the trap of over-designing every feature upfront allows for adaptability to unexpected complexities during implementation. By iterating on a working design and addressing issues as they arise, the overall design process becomes more efficient.

Be a Pessimist

Avoid Overcommitting:

Being a pessimist in design means avoiding the inclusion of functionalities in the design that aren’t ready for immediate implementation. By designing the smallest useful version that can be shipped, the risk of getting bogged down in unanticipated complexities is reduced. Delaying the design of “nice-to-have” features ensures a more realistic and manageable design process.

Choose a Personality

Factors Influencing Design Personality:

The personality of a design is influenced by factors such as font choice, color, border radius, and language. These elements contribute to the overall look and feel of the interface. Consistency in these choices ensures a coherent and intentional design personality that aligns with the goals and audience of the application.

Limit Your Choices

Decision-Making Simplification:

The abundance of choices in design, including colors, fonts, and other elements, can lead to decision paralysis. Limiting choices by defining systems for various design aspects in advance streamlines the decision-making process. It reduces the cognitive load associated with making countless decisions and ensures a more focused and efficient design workflow.

Designing by Process of Elimination

Efficient Decision-Making:

Designing with a constrained set of values simplifies decision-making. By systematically eliminating options, designers can arrive at the most suitable choices for elements like icon size or font. Defining and adhering to systems in the design process ensures a more straightforward and effective way of making design decisions.

Systematize Everything

Comprehensive Design Systems:

Building comprehensive design systems involves establishing predefined sets of values for various design aspects, such as font size, color, margin, and more. This approach reduces decision fatigue and allows designers to focus on the creative aspects of design rather than repeatedly making minor decisions.

Designing with Systems

Recurring Theme:

The recurring theme of designing with systems underscores the importance of implementing and refining design systems. These systems provide a structured framework for making design decisions, fostering consistency, efficiency, and a more coherent overall design.

Further Notes Inspired by Chapter

Overview of the “Feel” of the Five Basic Classifications of Typefaces

Serif

  • Personality:
    • Traditional and Formal.
  • Use Cases:
    • Ideal for print media, academic documents, and formal settings.
  • Associations:
    • Elegance and timelessness, are often seen in classic literature and prestigious publications.

Sans Serif

  • Personality:
    • Modern and Clean.
  • Use Cases:
    • Versatile, is suitable for digital content, websites, and contemporary designs.
  • Associations:
    • Clarity, simplicity, and a modern aesthetic; are commonly used in online platforms.

Script

  • Personality:
    • Elegant and Handwritten.
  • Use Cases:
    • Adds a personal and decorative touch, often used in invitations, logos, and artistic designs.
  • Associations:
    • Sophistication, creativity, and a sense of individuality.

Monospaced

  • Personality:
    • Technical and Consistent.
  • Use Cases:
    • Commonly employed in coding, data tables, and documents where alignment is crucial.
  • Associations:
    • Precision, orderliness, and a functional appearance; are popular in programming environments.

Display

  • Personality:
    • Decorative and Impactful.
  • Use Cases:
    • Reserved for headings, logos, and design elements where a distinctive and bold style is desired.
  • Associations:
    • Creativity, emphasis, and a departure from conventional typography, often used for branding and visual appeal.