What Types of Wireframes Is There?
You have a general idea about what you want concerning your client’s website. The standard processes include any of these:
- Paper sketches
- Basic low fidelity wireframes
- High fidelity, interactive wireframes or prototypes
One should not go to the research stage to code a site stage. User experiences are essential when it comes to websites. It provides just that, positive experiences to define a user’s trek on the website that most favourable to business success.
*Note: It’s also unheard of having a client asking for a website asap after the meeting. Some clients may be in a rush to have an eCommerce website for Black Friday, Cyber Monday or Christmas, which could be a day away or a couple of weeks. Creating an eCommerce website with hundreds of products takes time. Not in a day. Clients like this do raise a red flag for me.
Paper Sketches or Thumbnails
I still, to this day, create thumbnails of my work. Although thumbnails are term graphic designers and photographers use, I truly believe it’s an excellent process for web designers and web developers too. Thumbnails are small doodles of sketches and drawings. I could be inspired by a design that may be relevant to a concept I am working down the road so that I would doodle this in my idea book. Or, if I am working on a client project, I would do thumbnails of the work to get inspired. Even in a client meeting, if a client says something that an idea may have popped into my head, I would quickly do a thumbnail before I forget it.
Can I Code a Website Now?
You could do that. But, in the end, when presenting the final concept, if the client tells you, you got it all wrong, you have no choice to redo the website on your dime. Meaning you can’t charge the client for more time. If you created the site with the correct stages and processes, from the get-go, there wouldn’t be many changes to your website in the end.
- the research
- wireframes
- mockup concepts
- presenting the final idea
- build the website
- show the client site. upload to the server and test site
- web marketing
No surprises, unless something was unsuspecting.
Low Fidelity Wireframes (aka lo-fi)
With websites, I still create thumbnails until I am ready to move over to the computer and lay it out. Presenting a low fidelity wireframe will encourage some feedback from the client. Typically, we create a wireframe with no colours. At this time, you don’t want the client to be all wrapped up with the colours at this stage.
The best part of using low fidelity is the client will know it’s not written in stone. With low-fi wireframes, they are relatively easy to create with blocks of gray boxes with an X across it (represents images) to line or scribbles (denotes content). The wireframe gives us a quick look at what the content will be on each page and its priority. But most importantly, it should still capture the interface layout and controls and get everyone on the same page early on.
High Fidelity Wireframes (aka hi-fi)
Sometimes, low-fi wireframes may not be enough information. The website may be more involved in nature, and this may leave too many questions unanswered before moving into the mockup design stage. I wouldn’t go into design until those questions are answered.
I will not use colour at this stage, it’s still a black and white wireframe. Hi-fi wireframes are much more detailed than the low-fi ones. A high-fi may be needed for interactive websites or complex ones. These do take a little more time to produce but not a day’s work. One could create in a few hours depending on the size of the site. The high fidelity wireframes would be a great starting point for the mockup concepts, too, thus saving some time in creating the mockups. While working on these types of hi-fi wireframes, is that it makes designing the mockup concepts much easily communicated to building the end product.
Do include clickable either type of wireframes in your design. The more useful interactions will be more accurate in user testing. For example, when a user navigates from page to page. Another instance when doing drop-down menus.
Combination Allowed?
This could be debatable? Personally, I don’t see it as an issue. One could start using low-fidelity wireframes for the more straightforward pages. When the time comes to create the more complex pages, the high-fidelity wireframes can kick in. By doing so will help in meeting all of the objectives of the project.
Type of Wireframe Software
There are a few different wireframe software one can use. In the industry itself, InVision and Sketch are probably the main ones to use. You will encounter a few companies asking for Balsamiq, Adobe XD and Figma. All of these work on a Mac or PC except for Sketch, a Mac-based software.
In the next week, we will be discussing each type of software with quite possibly a follow-up video too.