Whenever I tackle a new web project, first things first—I have to do some planning. One of the most useful ways to plan a user experience or website is by creating wireframes.
So what are wireframes? They are a way to map out the functionality and layout of a website. Wireframes essentially look like a stripped down version of a website, with lots of boxes being used as placeholders for function/design elements. It’s important that the planning stage doesn’t get carried away with how things look since that will come later.
My go-to tool for creating wireframes is InDesign. I begin each wireframe by focusing on the homepage or landing page, and then walk through each interaction that takes the user to a new section of the website. I like to work with filler copy or copy that actually appears on the site since it gives me a better sense of spacing between images and text.
When creating your own wireframes, here are a few things to keep in mind:
- Use it as a way to plan the layout and user interaction.
- Clearly mark off areas for different functionality (I do this with a numbering system that you can see in the example).
- Include technical specifications in your notes.
- Use gray scale boxes and simple shapes that don’t distract from the main purpose of the wireframes—to plan the user experience.
- Don’t make it look like a design mock-up. The design will come after the technical side has been discussed and approved.
- Don’t use lots of colors or actual images.
- Don’t spend too much time working on them. They are meant for planning and are simply one step in the web design process.
When the wireframes are complete, what comes next? I typically go through the following steps:
- Get approval on the wireframes so stakeholders are in agreement with how users will move from page to page.
- Send the wireframes to the technical team for review. If something isn’t feasible, a new solution is proposed and added to the document.
- Once the technical requirements are rolled out, it’s time to get started on styling and designing the site.
- Plan the design by making mock-ups in Photoshop. The wireframes are used as a guide for balancing graphics and text on different pages.
- The new pages are tested to ensure consistency across platforms and devices. Any bugs or issues are corrected in the code.
- Voila! The website is ready to launch.