Responsive design for websites is becoming a necessity. People expect to have to have a good user experience and to be able to access the same content whether they are using their computer, tablet, or phone. This forces web designers to create their website mock-ups in a new way. No longer can designers simply focus on how the website will look on a computer monitor.
OUT WITH THE OLD
The problem with only creating a mock-up that fits a computer monitor view is that it forces the developer to make design decisions when scaling the site down for other screens. This can cause problems and force the developer to make assumptions when they don’t have all the information they need. Here are some of the major issues:
- A traditional mock-up does not show how the layout should adjust for smaller device screens.
- It doesn’t provide a hierarchy of importance based on purpose for the page elements.
- It doesn’t show how the navigation will be displayed on smaller screens.
IN WITH THE NEW
Drew Clemens has thought up a new design process that caters to responsive design. He has created a mobile-sized content prototype wireframe that he calls the Priority Guide. The Priority Guide is a “single deliverable that provides direction for content-focus design and mobile-first development in something resembling a wireframe.”
Since this wireframe is shown in a mobile-sized view, the content is forced into a single column layout that shows a linear display of content and features. This makes it easy to see the priority and hierarchy of the page elements. After the designer has the Priority Guide ready to go, it’s easy for them to create the computer monitor version of the site.
THE BENEFITS
With the Priority Guide, the developer is provided with direction for the smallest and largest views of the website. This still means the developer will have to do some guesswork for tablet views, but they will have a lot more information to go off of.
The Priority Guide gives the designer a wireframe that dictates hierarchy, but still gives them lots of creative freedom when it comes to the desktop-size view.
The hierarchy can be easily seen in the Priority Guide. The guide also gives a foundation for the mobile-view layout.
The Priority Guide saves time and money with its two-deliverable process.
