How to get started with designing a user interface: build components or pages?



  • It seems a UI designer starts by making a bunch of components a developer can put together like a jigsaw to create pages. Once the components have all been designed, the UI designer can move on to a prototype of a whole page.

    How can you create a bunch of components when you have no idea of what the page will look like? Who would even want a bunch of components / a "UI kit" when they have no idea of how a page would look?



  • I happens exactly the opposite way. User goals, and not components, drives the flows and screens.

    Start by researching what your user is trying to do, what do they need, what they are looking for, what pain points they have, user journeys, etc. Those behavior trends and product goals will drive your task flow and screen needs. Without this, there is no UX. Without this, the designs will be templated and directionless with no purpose.

    Only after you have designed the screens, you can start thinking about components. And this is really only applicable to larger more complex application ecosystems.

    There must be an ROI to composing a component library (e.g. you ecosystems of applications is becoming so large that branding is inconsistent, developers and designers are doing repeat work, there are multiple versions of the same component, etc).

    If you can justify the effort, then the component library / design system development starts. This is generally a process of systematizing components which starts with an audit of all the components you have across all applications, grouping them, merging similarities and functionality, discussing with dev, design, etc, questioning and re-questioning the purpose of each component.

    The result is a consistency library used across your products so everything is consistent, from branding, voice and tone, coding, design, etc. It has rules of when and where to use, etc. All that knowledge stems from the endless discussions when composing the library. Also, the library is constantly updated for every new features the product might have. Find examples here - https://designsystemsrepo.com/design-systems/

    I think the "defining components first" stems from the misconception of "defining features first". How can anyone define what a product should or should not have based on zero understanding of the user it's intended for?



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2