The Process

Start with a Mock

  • Break the UI into a hierarchy

  • Single Responsibility Principle

  • Think in terms of Information Architecture

  • Atoms first, Molecules second

Component Hierarchy

  1. FilterableProductTable: contains the entirety of the example

  2. SearchBar: receives all user input

  3. ProductTable: displays and filters the data collection based on user input

  4. ProductCategoryRow: displays a heading for each category

  5. ProductRow: displays a row for each product

Last updated