Website wireframes are guides that help you visualize a web page. They portray the structure of a web page without using any graphics or text. A good website wireframe shows the entire structural layout of the website, including where pages link to. Wireframes range from quite simple to hugely complex, but they serve as a great way to start off the design of your website. Complex wireframes include huge amounts of details, while the simplest ones can be drawn by hand on a napkin!
Effective wireframes leave out all visual elements and utilize boxes and lines instead to represent pictures and text. Follow these tips to make your first wireframe:
In order to build a simple wireframe, follow these simple steps, and you will be ready in no time.
1. Use a rectangle to represent the visible portion of your website, or the whole web page, however it suits you. It is a good
practice to start with the visible portion, and then you can add elements to it for expansion.
2. Draw the layout by sketching the number of columns that would be on your page.
3. For the header graphic, add a box over the columns where you want to place it.
4. Use the word ‘Headline’ where your H1 heading will be.
5. Use ‘Subhead’ where your subheadings (H2, H3, etc.) will be placed.
6. Add boxes wherever you want to add images or any other graphical details.
7. If you want to have tabs on your website, draw boxes and just write ‘navigation’ over them.
8. Add other elements that you want on your page, such as a call to action. Don’t write the actual content, just draw a box and
write ‘CTA’ inside it.
These steps can be used to draw your wireframe on paper as well as through computer software like https://www.gliffy.com/.
Previous Article- Website Architecture (Site Map)
Next Article- Website Content
Look at what a difference a website redesign makes!
- Before and After- cainvalentine.com
In 2022, we completed our transition to Advanté-BCS. Our team provides the same high-quality service that our clients have come to enjoy under a new brand.
Please visit us at https://advantebcs.com/website-design/ to get started with your new website!