Click on the audio file below to listen to this blog post (2 mins).
Website Wireframes made easy
Website wireframes help to facilitate effective project managing when designing a visual and verbal identity for your client. In this video tutorial, I show you a simple way to create website wireframes. Firstly, I talk about how to choose the colors to use and where to obtain them.
Secondly, I explain the collaboration process with a client when creating and refining content to be published.
Thirdly, I show how to bring both the color and content components together so as to weave them into the website’s structure through the use of a website wireframe.
There are several website wireframing tools on the market (lucidchart and miro to name a few) but some are costly and training is involved. Whereas PowerPoint can be found on most business machines, and many users already possess basic knowledge. And basic knowledge is often all that is required, at least as a solid starting point.
“Very simply put, when you are trying to create a website, very often, people will actually open up Squarespace, WordPress, or whichever tool and they’ll start typing away. This is one such example. And the key to saving time and money is that when you are designing a website, it is not only the colors, but it is also the content.
Once you know what the content is, this will help you create the website tabs. I always propose starting with a Word document and using heading styles to reflect the hierarchy headings on your website
Introducing ‘Athlete4Athletes’
In this video tutorial, I share the process of wireframing a website. This 5-hour process was for a friend’s sport website called Athlete4Athletes.
Certainly, I could have shown examples created for investment managers and larger organizations, but using a simple website is a more practical means of demonstrating the principles that should be applied regardless the industry.
Website wireframe tutorial and video chapters
As you’ll see, PowerPoint is fast and effective. Please get in touch if you have questions or would like to discuss any requirements.
I have listed below the various sections of the video. This same list in the actual video if you click through to YouTube to watch it
- 00:00 Host introduces speaker Kathleen Muir
- 01:53 Intro to Sports website used in the tutorial
- 02:38 Discovering that ZOOM can’t share my desktop. IGNORE 🙂
- 02:52 How to create color palettes but also content at the same time
- 03:44 Intro to original mockup pages
- 05:17 Until 06.29 please IGNORE
- 06:30 Client’s content re brand values and services, written in Word (traffic lights content)
- 08:58 Revised mockup pages
- 10:57 Defining website pages with content in mind using PowerPoint text boxes 14:16 Folding content into web pages
- 19:04 Website sources to help create color palettes
- 23:56 Browser color eyedropper
- 24:48 Using Word’s Styles hierarchy to scope out content
- 25:27 Why use PowerPoint for website wireframes? cons and pros
- 26:36 Q&A: how to prioritize content; is this method a time saver?
- 30:44 Advantage #3 use website wireframes as a sign-off document to reduce time and errors
Referenced Tools
Color Palette Demo upload an image or photograph to obtain its Hex values
Adobe Capture mobile app that takes color swatches of what your photographing
The Meaning of Color a visual diagram representing the meanings of and associations with color
Nature’s Color Palette a selection of color palettes on your doorstep
Adobe color generator insert a color value, apply a color harmony rule and see what colors spark the imagination
Color Pick Eyedropper on Chrome Store chrome browser extension allows you to sample any color on your screen