Design Process: 6) Wireframing and sketching ideas

Now that the Creators are likely bursting with ideas to execute on at this point, it’s finally time to start working on how the data will flow, where it will come from, and what it’ll (kind of) look like.

You already know what your technologies are that you’ll be using, what the client wants, what the users want, what your limitations are, and what the content will be going forward. Using all of this information will allow you to start planning on the types of pages you will need and elements you will be expected to account for.

Create a diagram, a site map, of which pages (or page types) you will be needing and correlate each page with the content on your Content Roadmap.

Then create a low-fidelity wireframe of each page (or page type) with the various types of content in the page. It’s important that it’s low fidelity at this point, because you don’t want to focus on the look and feel of the site at this point, and are instead focusing on the structure of the site (or the skeleton) of how things will be fleshed-out later on. Make sure each page has the necessary features, elements and content on them at this stage, and make sure your stakeholder signs-off that those details are correct. 

Many times, you will need this handy to refer to later on in the project.

This stage can be completed with any number of software or products that the designer feels comfortable with.

I generally tend to graduate my designs as I get buy-in with the idea and concepts. I may start out with a paper and pen and a series of drawings, or many times a drawing on a whiteboard that gets the point across. Then I will generally sit down and compose it in black and white and using boxes to box-out the space necessary for the elements from the content roadmap. Then I go back and fill-in the boxes with the actual content or content placeholders in a plain typeface and general colors or indicators where a photo will be.

Most times I will have at least two directions that we could pursue: a conservative and a progressive design. I like to gauge the responses and get feedback on the way the users would use something like I am formulating. This could be done in a low-tech way like having a discussing and showing it to someone, or you could start formalizing the feedback you receive by utilizing software to show the concepts and collect the feedback like InVision or Figma. It’s always nice to refer to these notes later on in the process.

Once these are at a state to be able to socialize them, you are at the next step in your process: Validating the ideas with the tech, dev and content staff.

Potential Pitfalls

This one is pretty straight forward. If you don’t sketch ideas, then you can’t get buy-in of ideas. If you don’t wireframe pages, then you lose-out on some time-saving steps that allow the development team to get started. You also will likely have to make several more unnecessary rounds of iteration in your visual designs that will add a lot of time to your project.