Wireframes and Style Prototypes: What’s all this now?

The first deliverable in the Yellowberri process of building a website is the creation of wireframes and style tiles. These two tools, explained in further detail below, allow us to separate the logical and semantic from the creative and emotional.

Wireframes + Style Tiles = Full Site


Wireframes deal with structure. The purpose of a wireframe is to demostrate how we think the website is best organized. Wireframes show how the user will navigate your website, how content will be ordered, what features are present, and what areas will be most prominent.

To show how your website will react to multiple screen sizes, we have included controls on the bottom of each wireframe page. These controls will resize the window to commonly found screen resolutions, causing the content of the website to reorganize itself based on the viewing area.

Questions to ask yourself when reviewing a wireframe:

Style Tiles

Style tiles are on the complete other end of the spectrum. It’s right in the name, it’s all about sttttttyyyylle. No but seriously, style tiles demostrate the tone and visual style that your final site will have. Think carefully about the you want people to perceive your business. Do you want to appear edgy, youthful, friendly, laid-back, aggresive, modern, institutional, or some other emotion? The colors, typography, and visual elements all help shape what people think about your website and your brand.

Questions to ask yourself when reviewing a style prototype:


If you have any questions and would like further advice and clarifaction please feel free to drop us a line.