Note: This is the ninth in a series of posts about the Nonprofit Web Design Process. See the end of this post for a linked index of other posts in the series.
Purposes
Wireframes are skeleton layouts of key pages or templates for a website and are used to position elements on the page without colors, styles or photography. It's best to get buy-in on wireframes first so we can truly focus on creative look and feel during the visual design phase of the project. Wireframes also allow for the team to plan out key interactions for the website and how the site might adapt to various devices and screen sizes.
Purposes for the Wireframes include:
- Creating a structure for key pages and page templates that will be used to guide the visual design
- Defining the visual hierarchy for pages to show which content should stand out the most
- Showing how navigation will work for the site at each level of depth
- Detailing interactions that will need to be designed such as rollover or hover states, drop-downs and alternative displays for logged-in users
- For responsive websites, planning for how content will transform for each screen size
Methodology
When creating wireframes, you'll first want to look at the Sitemap to determine which wireframes you’ll need. We always create a wireframe for the homepage of the website and beyond that, want to be sure that each tier is represented from the sitemap so we can plan out how navigation will work at each level. These are the basic wireframes you’ll need to provide for the visual design to commence. Additionally, for large, CMS-based sites, we would likely create a wireframe for each template that we'll need to build. Often times, we'll wait until a bit later in the project to develop these more detailed wireframes.
The first elements I typically plan for wireframes are the global elements that will appear on every page of the site. Global elements may include:
- Logo and tagline or other required branding
- Utilities (search, login, social links and/or sharing)
- Main Navigation and section-specific navigation (defined in the Sitemap)
- Footer links, content and copyright information
Once the global elements are positioned, I'll plan the content for each page. Just like with your Sitemap, it’s important to keep the end-user at the forefront when planning out the content. User Research data from Analytics, Surveys and Interviews, Personas, and Usability Tests can help identify what kinds of related content and promo items will be most appropriate to display on each page. If we created page description diagrams during the Content Strategy phase, we will also have a list of content items for each page. If not, I will quickly scribble a list to guide my work.
Speaking of scribbling, I usually start my wireframes on paper with a very rough sketch. This isn't a necessary step, but one that I find helps me to dream up new and different layouts for each project without the constraint of a particular tool or technology.
Deliverables
There are a variety of tools that can be used for wireframing. You can use Microsoft Visio, Adobe Photoshop, Axure, the free, online tool called Cacoo (I also use Cacoo for sitemaps) and plain old HTML. The deliverables from each tool may be exported as images or uploaded to the web so they can be viewed via URLs. Regardless of which tool you use to create wireframes, you'll want to be sure to provide notes or annotations for each layout to further describe what you're envisioning.
For responsive websites, I prefer to use HTML to create my wireframes since it speeds up the process of designing layouts for each screen size. It also demonstrates for clients and developers how the layouts will work once they're fully designed and built. If your wireframe deliverables are static images of each layout, you'll want to be sure to create multiple versions of each page to show how the content should display on each screen size.
What's Next
Wireframes are the key input for a website's visual design. The visual designer will use the wireframes as a starting point as they develop a new look and feel for the website. Providing wireframes to a creative designer allows them to focus on the aesthetics of the website separately from the structure or layouts so they can let loose with their ideas. Next month we'll cover the specifics of the Visual Design phase.
Other Posts in this Series
- Introduction
- Stakeholder Discovery
- User Research
- Content Strategy
- Information Architecture
- Sitemaps
- Wireframes [this post]
- Visual Design
- Solution Design
No comments:
Post a Comment