When I first started in design over 20 years ago, I would go straight into Fireworks or Photoshop and begin composing the look and feel of the website without much thought about content or messaging. I guess this is how web design was back in those days.
Today, everything has changed, and it’s the complete opposite. Displaying the most appropriate content and messages to push conversions has become integral in today’s websites. Nowadays, I can’t design a website without creating wireframes first, and they are a crucial stage of my project process.
What is a wireframe?
A wireframe is defined as…
“An image or set of monotone images which displays the functional elements of a website or page, typically used for planning a site’s structure and functionality.”
In the beginning, I used to email static jpegs and then more recently, used tools like InVision and Marvel to create interactive comps. However, I’ve now ditched these tools in favour of using HTML, CSS and JavaScript to produce a more realistic experience that:
- Helps to create out a layout that is most appropriate to the target audience.
- Shows the actual content and how it will adapt to different devices.
- Defines the navigation and structure of the site across mobile and desktop devices.
- Ignores distracting images, fonts and colours
Since making the switch to web-based wireframes, I’ve found clients understand more clearly what they are getting, it reduces the number of questions that would otherwise result from presenting static comps, and it helps them to focus on their content and message rather than the look and feel of the site.