5 Steps for Creating Killer Wireframes and Prototypes - Pons Creative Group

5 Steps for Creating Killer Wireframes and Prototypes

Any project management course always starts with emphasizing the importance of planning. Creating a website is no different. Effective use of information architecture means you organize functionality and content in a way that your end user will intuitively be able to navigate. That doesn’t happen by chance. Designing an effective wireframe is the first step in achieving this goal. It’s the step that gives life to your ideas, the fundamental layout of what you are trying to accomplish. Consider our top five tips for creating better wireframes.

Think function.

Your wireframe should not contain any elements of design. It’s all about the functional part of your website and applications. For example, you may note that a page will contain four text boxes and three buttons. However, you would stay away from sketching the visual representation. Keeping a simple functional approach will help you focus on the big picture. You will be better able to identify issues and challenges within the functionality. Making changes at this stage is much more cost effective than after design has been coded. Keeping it simple will clear the clutter, working out the quirks before design starts.

Collect input from multiple people but have a clear leader.

Be sure numerous key players give input early on. Let your database owner review your wireframes to ensure there are fields for all the data you intend to collect. Harvesting e-mail addresses is useless if there’s no place to put them. Even though you are not in the design phase, designers often have valuable input regarding user experience and potential design obstacles. Get their input early in the process. While gathering feedback is advantageous, identifying who’s in charge is equally important. Someone should own the wireframe process, it is often the company founders or a third party. Either way, the person in charge should fully understand your ideas, vision and end goal.

Think about the end user.

It is possible to focus so much on functionality that you fail to consider the end user. How many steps are required for check-out or registration? Can users easily get back to product listings from the shopping cart? How many steps do they have to go through to recover a forgotten password? If you use a third party, such as PayPal, how does this process flow for the end user? These simple questions can affect your conversion rates down the road. It’s a lot easier to make the changes to your wireframes than to have to edit hundreds of lines of code later.

Be sure it makes sense.

A wireframe shouldn’t be a complicated schematic that only a developer understands. If it is, it’s way too complex. Ask someone who has nothing to do with development if they can follow your wireframe’s flow. If not, work on simplifying the content.

UI is not UX.

It can’t be emphasized enough that wireframing is not about presentation. You should be focusing on the functional elements and how the site will work for an end user but not the way the content is actually presented. Avoid implementing presentation methods, such as AJAX. In fact, for greater accessibility applications need to work more like a wireframe without the addition of methods like AJAX.

Get a better end product through effective wireframing. Contact us for all your Web design needs.

Share

No Comments

Be the first to post a comment.

Leave a Comment

Your email address will not be published. Required fields are marked *

*

↑ Back to top