Wireframes, Style Guides, Mockups & Clickable Prototypes

At Get It Built we divide the design process into steps. Each with its own focus. Here are the examples of deliverables for each.

Wireframes

This is critical to understanding the functionality and flow of the product. This is a “not yet styled” version of the product. This defines pages, features, positioning, etc.

Styleguides

This is the guide to the look and feel of your product. It includes colors, fonts, images, themes, in some cases templates, or similar products as inspiration.

Mockups

When we combine the two, we get a realistic view of what we are going to build.

Clickable Prototypes

When mockups are created and we add “transitions” we can create a visual representation of the final version of the product in action. You can click through it and get a feel for how it will work. This enables you to “walk through” the site or application. This step is optional if the goal of the project is creating a demo or proof of concept. The following are gifs made from actual products, but you can achieve the same effect (minus some of the interactive nuance) with one still image per page.

Note: The styleguides are just examples from Google (we don’t want to share any of our clients personal brand details), everything else is our own work.


Do you want us to help you make any of these? We provide structural support for this process as well as technical services that help you move forward with your idea quickly. Here is a list of our services. If you want to learn more don’t hesitate to reach out to us at info@getitbuilt.today

Like this post? Sign up for our mailing list to keep in touch.