According to Wikipedia, a wireframe is a “visual guide that represents the skeletal framework of a website”. If you’re going through a design project, you’ll likely see wireframes after a user research phase and possibly a sitemap phase. It’s where the information architect or designer takes pen to paper and starts sketching out actual pages of the website. Often times, wireframes will start as just that – paper sketches. Once the designer has an idea you really like, technology will be used to move the sketch into a digital format. You might see wireframes as static digital images, or you might see interactive web pages instead. Either way, you’re going to see a lot of black and white that makes up the skeleton of the web page.
The purpose of wireframes
The purpose of wireframes is to provide detail around intended features and functionality. Wireframes are vital to the design process because they serve to establish the visual hierarchy of design and content elements. Think of the visual hierarchy as the pecking order of a page’s content, providing cues to what’s most important. For example, if your organization wants to bring in online donations, then a compelling “Donate Now” call to action should rank high in your list. Or, you may prefer to get visitors to take an action alert or even read a new study you’ve published. Regardless, your visual hierarchy should reflect your organization’s goals.
Design Note: Your designer will use the agreed-upon visual hierarchy to determine the position of elements on the page. Typically, the most important content is in the top-left corner of the page since people read left-to-right and top-to-bottom. The least important content then lands in the bottom-right corner. Wireframes include other cues for visual hierarchy as well. We use larger, bolder text in some places and also use color very sparingly to indicate items that should stand out.
Providing valuable feedback
When providing feedback on wireframes, make sure that the visual hierarchy you experience aligns with your organization’s goals. In addition to establishing the visual hierarchy, wireframes should also include space for every piece of content and design element you want to include on the page. If you want to include pathways to other parts of your website via promos or related items, make sure those are reflected in the wireframe. Also, make sure you review the tablet and mobile views of the wireframes. Sometimes, designers will condense content for smaller screens (especially navigation!) so you want to make sure that you agree with the decisions made.
Here’s a list of questions you should ask yourself as you review wireframes:
- What catches your eye when you look at this page? What is the first thing you see and the first thing you want to click on? Does this align with your organization’s goals?
- Is there any content missing from this page? Anything you expected to see that is not reflected?
- Do the tablet and mobile views reflect your desired visual hierarchy? Do they include all of the content you expected to see?
- Are all of the interactions you expect detailed in the wireframe and/or the annotations? Is it clear what happens when you click on each element? Do the annotations describe any functionality you don’t understand or disagree with?
And here’s a list of things you should not focus on when reviewing wireframes:
- Colors used, or lack thereof
- Fonts (although text size is important!)
- Photos, which will likely be placeholders
- Copy, which may be a placeholder as well
As the wireframes get revised and you are satisfied with the answers to the questions above, you are ready to approve the wireframes! Once approved, your designers will apply your organization’s branding and personality to the wireframes to bring them to life as designs.
from npENGAGE http://ift.tt/2dD0ziE
0 comments:
Post a Comment