After we presented our logo ideas, color schemes, etc. for our digital hub project 2.0 we were told to have the wireframe for our website finished by the next class. Russ and Ike suggested we use https://balsamiq.com/ as a template. Wireframes are visual guides that represent the framework of a website; it’s like a screen blueprint.
The importance of a wireframe
Wireframes create a more tangible grasp of the site’s functionality and shows navigation paths between pages. The ultimate use of a wireframe is to help the site designer identify call-to-action, construct the layout and placement of content, determine features, etc.
Since they are static they do not effectively show the interactive details like hovering over the navigation menu, but other than that wireframes are very helpful and smart to use. It’ll be very difficult to develop a website without wireframes because you’ll be simultaneously figuring out the flow of the site and the visual layout of it all while starting from scratch.
Types of wireframe
Low-fidelity and high-fidelity are the two types used to recognize the level of production or functionality. Low fidelity is quick to develop since they’re more abstract. Simple images are often used to block off space and apply mock content/text as fillers. The most detailed wireframe is High-fidelity. It includes information about everything on the page, including dimensions and any other interactive elements.
Things to consider when developing your wireframe
Always remember to depict the most important content and its behavior, not the visual design of the site. Avoid using colors and images, instead use different shades of the color gray and rectangular boxes with an “x” through it to keep it simple. Making the design responsive is very important since most sites are looked at from different devices like computers, phones and tablets. Lastly do not worry about the typography, that will come during the visual design stage.
To help you get started with your wireframe here are some standard elements all sites should have.
1. Have you created a website without using a wireframe?
– If so what are some things that you could’ve avoided with a wireframe?
2. How detailed do you think you are going to be when developing your wireframe for the digital hub project 2.0?
3. Do you feel that wireframes are a necessity when creating a website?