3 things I always consider while building wireframes

Anna Cantrell
anna cantrell
Published in
3 min readOct 8, 2017

I have to say, I do love a good wireframe. I’m currently in a position where I’m in the wireframing stage for three different interactive projects Queue, the Smith Gallery, and transhealthNC. Because of this I figured it would be a good opportunity to share some thoughts on the process.

Here are three things I always keep in mind while wireframing.

  1. Information Architecture

Information architecture is more than just a pretty graphic, before you can even begin putting sharpie to sketchbook, or pen tool to inDesign, you have to have a very thorough understanding of the website or application you’re building. Getting to know your client, your target users, and target interaction is key here. You can never really gather too much information on the website. Working on the Smith Gallery I spent a large amount of time just reviewing and understanding the content before beginning the wireframe. Being open with your clients and with your users is important here. Information architecture can be a tricky beast. Making sure your content is in the right place, along the right routes, for the desired interaction is extremely important. I’m taking the time now to get it right so I’m not making huge changes to the final website when the bounce rate is too high.

  1. User Experience

User Experience is constantly considered throughout the entire design process. From Information architecture to the final QA you need to be thinking about how the user is going to experience and navigate your website. It begins with the architecture, planning the actual pathways a user will take to reach content. Wireframing offers some of your biggest decisions, and challenges, when considering experience. How does the user experience a page? What do they see first, what paths do they feel compelled to follow. These are all decisions I’m having to make now in my projects, how can I best create and guide experience through layout.

  1. Flexibility

Web design is dramatically different in print design in that web design can, and will, constantly change. Especially for projects like mine that include data and content regularly being swapped out and adjusted, you have to maintain a flexible system to work on. I’ve been working on creating a system for the Smith Gallery that allows an administrator to choose between types of content, and designing how those types of content will interact with others. I’ve been having to consider how pages look with, and without, content, how an administrator could potentially abuse a content space, and how it looks with only partial content.

Overall I love the wireframing stage. It’s honestly kind of terrifying to stare at a blank space and start adding boxes and labels. It’s also exhilarating though. It gives you your first glimpse into what the actual site may look like. A well made wireframe saves a metric ton of work in the designing phase. If you’ve done a well enough job, you can design right overtop your wireframe seamlessly and easily.

--

--