More often than not, a customized website first began on paper with sketches and notes at every corner of the page.
Websites don’t magically become finished overnight and they actually take a lot more planning than you might expect. Every successful and well executed website starts out with a wireframe, a blueprint of the skeletal framework of a website. Each website has a purpose and it takes a well thought out design to send that message across.
A paper prototype is an easy solution to getting ideas across and making quick changes as you are still deciding your website’s goal.
So how do you begin making a wireframe? A cheap and quick method is to just start with some paper and a marker but there are free software that let you create clean wireframes online such as wireframe.cc and InVision. wireframe.cc is great for starting out with ideas as it only provides basic shapes and symbols to represent the arrangement of contents on your website. It helps get the idea across in a simple and quick design so that not a lot of work is wasted when you need to rearrange the layout around once you realize the design isn’t working out. InVision provides the ability to create a more detailed wireframe as you can create an interactive website prototype. However, just keep in mind that it’s best not to move on from a sketch to a detailed mock up until you are sure the architecture of your website fulfills its goal.
There are a couple of key points to keep in mind while deciding the main blocks of your wireframe:
- Who is your intended audience and what is the best method to grab their attention?
- How can your website’s goal be on the forefront of the page?
- What would be a good flow from content to content?
- What will the user expect from seeing each page?
Designs are never perfect on its first draft so don’t be afraid to make big changes and move things around! You never know what you might like better!
Once those points are down, it’s time to consider some smaller details in design:
- Spacing and layout of all content
- Size of images
- Amount of text
- How and where to build trust with the user
- Simple navigation throughout the website
Wireframes are not for deciding the finer details of photo selection, color theme, or real text. Those can come later once the architecture is set in stone. However, it is helpful to keep in mind a minimalist style for the website ( less words, less clutter, and more images).