So far we don’t know anything about the look of the product. Everything we know is at a systemic, product-wide level. With the structure of the product now defined, we can dive into the structure of its component screens (or “views”, or “pages”).
So we jump in, to the screens that comprise the project. But not too far in; we keep the work schematic. This lets us move as quickly as possible while the team figures out how the product will look, without getting bogged down in iterating on time-consuming, full-fidelity designs.
On the graphic design side, we can similarly start to set a high-level direction for the visual aesthetic of the site.
You might see a similar phase referenced elsewhere as User Experience.
The house metaphor
Over in our construction project, we have fully sorted out the background and requirements for our project. We know the project’s vision (“a substantial addition to make our kitchen area more functional for our growing family”) and the parameters of the land, city ordinances, environmental factors, and so on. We’re ready to start seeing what this thing will look like.
In short, we start blueprints.
In our metaphor, this deliverable is perhaps the most direct analog. Blueprints are simplified outline drawings of the project. They’re focused on sussing out the shape and structure of the project, always checking against material, environmental, light, and client constraints. As you’ll see below, this is an awful lot like wireframes.
We start laying out our pages with wireframes. They're only as detailed as necessary; sometimes pen sketches suffice, but often we find that a digital format is more efficient. We’ll frequently start with pen sketches and get progressively more detailed as we polish our ideas.
Regardless, the goal is to work fast. We stay focused on building a shared view of the product's organization and structure, and each page's layout, functionality and interactions. We want clear navigation, information hierarchy, and interaction.
Wireframes help us answer questions like:
- What is on each page?
- What’s the most prominent part of the home page?
- What is in the navigation?
- Do we have a secondary navigation?
- How complex are our page layouts?
- What copy needs to be written?
- How are we connecting different sections of the product?
- How do pages look on mobile screens compared with desktop screens?
The wireframes fuel all subsequent work in graphic design, copywriting, development, and QA. With wireframes in hand, these different groups can productively work on their areas.
A mood board is essentially a scrapbook of assets, patterns, colors, photography, etc. that will inspire future graphic design work.
This is where we can start to do some diagrammatic work on the graphic design side of the house. We can start a conversation with you about the look-and-feel we envision and what feels right to you.
Mood boards let us have this high-level conversation well before getting into time-consuming pixel-perfect design.
For a templated site build, instead of completing full fledged wireframes, we sometimes create a content outline that establishes the hierarchy of each page on the site. Think of it like the outlines you learned in middle school (0.0 Home, 1.0, 1.1, 1.1.1, 2.0, 2.1, etc.); a structured, textual description of the elements on each screen.
The outline adds detail to the structure created in the Site map. It serves as the building blocks from which to build each page of the site in our template system.
For builds that we do on a canned system like Squarespace (our preferred choice), we'll select a Squarespace template for the site that supports the content outline we've established, as well as the intended aesthetics of the site.