June 20 2017

Wireframing a Website to Plan for The Future

website wireframingIf you built a house without a blueprint, what would the end-result look like? You’ve seen houses before, so you know generally what to include. You would have walls, a roof, windows and doors but without proper planning you could end up with a very confused construction crew, rooms that don’t flow well, and furniture that doesn’t quite fit in the room. While your structure might have all of the elements of a house, it could be completely uninhabitable and will never feel like home sweet home.
Like building a house, when planning a website, you need to think of what the goal is before you start your project. At the outset, you probably have a lot of ideas for elements you want to include, such as a way to feature ongoing promotions or to keep visitors aware of your latest news. If you don’t start with the architectural plans for your website – aka wireframing - you may run the risk of creating a user experience that is confusing and less likely to focus on visitor conversion.

Wireframing: Sketching a Strategic Blueprint

Wireframing is the development of the basic layout and information hierarchy of your website, but without imagery, content or color. That might not sound interesting, but it allows for your website to be designed strategically with a clear focus on your business goals, without the distraction of branding. If it’s been determined that your home page is going to have a Quick Links section, it can be tempting to worry first about which links will be there, rather than how the tool interacts with the other resources on the page. Without filling in all the blanks, you can quickly assess if there are any areas that are redundant, distracting from your overall goals or not appropriate for the pages that will align with that template.
Wireframes should be created for your home page and every unique page template or screen that you want to ensure you strategize before applying your brand. Once wireframes are approved, designers will work to apply your brand to the approved structure – focusing on how to translate your unique brand positioning to a design that is already strategic. Function may come before fashion, but that doesn’t mean you shouldn’t care about how the site looks. While revisions might be made during the design phase in terms of color or content, no one has to worry that the overall layout needs to change, as the blueprint has already been laid out. In other words, doing wireframing before design will mean you won’t be moving walls, and instead just deciding what color paint you should apply.

Getting Started: Attach Washer A onto Bracket J

Think that wireframing might be right for your website redesign project? Let’s explore what you can expect. First, together with a digital agency, you will dig into the experience you want your visitors to have, and how that translates into different sections of your website’s pages. All of the different content blocks, tools, and required areas will be laid out like a builder’s materials. Separately they won’t accomplish anything, but arranged properly they can influence your visitors, drive conversions, and deliver an amazing user experience.

As each section is added to a template, you need to be mindful of the purpose and goals of that section and whether it will apply to all pages or just some of the pages aligned to the template. Additionally, it’s important to think about the functionality that will be built into each page so that you can optimize the user experience. As you’re adding sections to your templates, think about how your website will eventually grow to use them for on multiple pages. For example, if your website is going to have a high page-count, are you setting yourself up to write an unreasonable amount of content, or will some content be shared across multiple pages? Asking questions like this during the strategy phase will help manage content development later on.

Each template should become a blueprint, where the different elements you’ve added all have a purpose in achieving a goal. These elements may include a content block to promote the focus of that page, call-to-action buttons that indicate intent, an area to highlight customer testimonials, or a section to promote similar pages. Each template will have its own elements that should be able to be used for multiple purposes.

Populating a Wireframe with Content: Picking Paint Colors and Furniture

Once your wireframes are approved it’s time to add branding, imagery, and content. Since everything has already been determined to make sense strategically, you’ll know that adding these elements will be inline with your goals. The overall flow of information will be meaningful and each section of each page will have a purpose that you’re not trying to establish as you go.

If you’re thinking of a website redesign, and want to make sure that your goals are addressed every step of the way, wireframing is a great way to do so. Let's talk about your website wireframing needs.

  • Content
  • Responsive Design
  • Website

posted by
Patrick Trayes
Patrick Trayes
Associate Director of Client Analytics

ZAG Interactive is a full-service digital agency in Glastonbury, CT, offering website design, development, marketing and digital strategy to clients nationwide. See current job openings.
Related Article
Essential Guide to Design File Types