3. Fabrication Lab

We take each item from the sitemap and travel the same process from the first two phases, only to a lower scale.

Strategy & Design

  1. Key Business Goals: make sure that you set the main goals that this page or component should achieve.
  2. Articles: read relevant articles that explain how things are working in that specific area.
  3. Copy: try to mix and match different parts of headlines and articles that could be used later in the design mockups.
  4. Examples: list successfully examples of pages, not necessarily from the design point of view.


Based on the current design constraints (eg. fonts, spacing, colors, layout elements) generate a few layout directions.


It’s the moment when you move from a problem to a solution, and create the final fully-fledged prototype.

Fill in the Style Guide

If there are any new elements, spacing, font sizes or colors, make sure to add them to the overall Style Guide artboard.

Note that if there are only slightly changed items from the current Style Guide version, for better consistency, you should take into consideration to align to them, rather than creating new ones.