Wireframes: Design Process

Prerequisites

In order to start building out wireframes, the Project Manager will go over the following items with you. If something has been left out, please raise a flag.

• Briefing on the client’s
  • Purpose
  • Mission
  • Core services
  • Core Demographics
  • Specific feature sets/requests
  • Competition and Industry overview
• Page Structure
  • Full sitemap (if applicable)
  • Page types (for Phase 1 of wireframes)
  • Should the current website be considered?
• Assets
  • Primary colors
  • Copy of the logo
  • Project in Figma shared with you
• Project timeline and deadlines
• If the project is more than a content-only, marketing website, the Developer for the project should be added to these discussions to ensure the structure of the site will allow for the technical programming that needs to be completed.

Organization

Pages

This will hold all of your Frames for each page layout

• Phase 1: There should be a Frame for each of the different Page Types
• Phase 2: There should be a Frame for each Page in the sitemap
• Each Frame for a page should use the 1440 x 1024 Frame size

Components

All of your shared Components will be stored here (we do this to ensure the original copy of the Component doesn’t live on a template)

• Any element that is repeated should be made into a Component (ie. Footer and navbar)
• The Component itself (ie. the original element) should be moved to the Components page

Visual

This is the first design that a client sees, but it is not a mockup. Use elements, like the client’s logo in the navbar and footer, to customize the wireframe, but do not go too much into detail.

Use color sparingly to denote calls to action and different page types (see the Hero section colors in the screenshot below).

Make sure to use simple icons to showcase different types of elements

Deliverable

In most cases, there are two phases for wireframes: Phase 1 will only be wireframes for the core page types to ensure we understand the objectives of the client well. Phase 2 are the wireframes for each of the pages within the sitemap. We sometimes do not do Phase 2 if the project is short, or if the quantity of pages is small to where it doesn’t matter.

The final deliverable should include a clickable prototype that ensures all buttons in the NavBar and Footer link to a Frame, along with a  Loom video explaining why you chose the elements you did. This should be completed prior to the call with the PM. This video should be no longer than 5-7 minutes for a simple marketing site.