iNoobs: Process of Designing a Website | Part 4 Wireframe

Categories Articles, How To, iNoobs, Web Design

Welcome to Part 4 of Inspired Magazine’s mini-series on the process of designing a website (check out Part 1, Part 2 and Part 3). In our day-to-day iNoobs series we write about many of the beginning technical elements of web design, but in this 8 part series we’re discussing everything you need to know about the process of designing a website.

What is a Wireframe?

A wireframe is a sketch of various sections of your site. This sketch shows where (and what) content will go on each section. Many small sites may have just two wireframes – a home page and an internal page – as much of the site will use the same template or design.

More complicated sites may have many more wireframes. A typical content management driven site (one that runs on software that allows someone without HTML or programming knowledge to update it) may have between 5-10 wireframes.


Are Wireframes Necessary?

I used to not create wireframes when developing a site. But, in having to deal with multi-level process web design, where often different people are involved in different steps – it is an absolute necessity. So, because I needed a way to effectively communicate what a client was thinking to a designer – wireframes were implemented. However, in hindsight – I should have been doing this all along – both for my own sites, as well as for client sites.

Wireframes are a great way to illustrate, and plan, the design of the site. Sure, things will probably change, you’ll move some elements around in the final design, but having your wireframe preps your mind (or designer) for the design process, ensures that you know exactly what materials (content, copy, images, social media accounts, etc) will be needed come the final design, coding, and implementation of the site.

Wireframing & Clients

I thought I would throw a little more information in about working with clients. This might not be an issue if you won’t be working on client sites (or directly with clients), but getting a client physically involved in the process – sitting and sketching a wireframe with them in their office is fantastic on a couple of levels:

  1. Reduces Time – It will save you time on the end design period. We make sure to get approval on wireframes, so deviations (from the wireframe) or increases in time are clearly noted and either help to keep clients on track or provide for an opportunity for more revenue..
  2. Reduces Back/Forth – Back/Forth in email can take forever, a conference call, screen sharing, or physical meeting to sketch a wireframe can take 30min – 1 hour, but will save back/forth time and prep your client for the future.
  3. Improves Communication – It’s usually easier to communicate a message visually
  4. Makes Your Job Less Mystical – Getting them physically involved helps provide value to your client. Too often our jobs are done outside their view and without their input (because let’s face it – we don’t need it for most things!) but we need to prove our value and build a relationship
  5. Makes Them Feel Important – You sketch a wireframe WITH your client.

Tips For Wireframes

  1. Map Out Major Sections – Map out major sections before hand. A typical client project with a CMS/Blog will involve Home Page, 2 Col, Full-Width, Blog page. Each of these has a slightly different look/template, but will cover EVERY page of content.
  2. Understand Things May Change – The final design may look a little different than what is mapped out on the wireframe.
  3. Leave Notes – Leave notes for what sections do what, how they should behave, etc. You can do this from a design, as well as a technical section. For example – perhaps a banner needs to go in a particular area, or maybe you’d like the latest 5 news articles to display on the homepage. Make notes!
  4. When in Doubt Revert Back to Your Plan
This concludes our 4th part of the web design process iNoobs series. As always, if you have something to add about Wireframes feel free to comment.

Zach Katkin – Entrepreneur, Web Developer, Designer and Writer – is the co-founder of Florida Web Design Company Atilus. In business for nearly a decade, Atilus has more than 600 clients worldwide.

  • Any tools for Wireframe or methods to do this?

    • Zach Katkin

      Hi Radek, nothing seems to work better than a good old fashioned pad and pen. We will bump things into, visio, photoshop or another image processing tool so we can move things around more easily – but we always start with pad and pen.