Advertisement

In my last article, we talked about the Top 5 tools for Wireframing for Graphic Web Designers. Now I want to put the spotlight on the actual application of working with wireframes from planning to implementation. A wireframe is typically a visual representation of a minimalistic website layout structure and navigation. Preparation is always key in any project and Wireframing is a stripped down form of planning that can really help you focus on the skeleton of how your site works, as opposed to how it looks.

It’s important to understand why we create Wireframes and how they can more efficiently work their way into our design process.

Solve Problems

A wireframe is a means to solve functionality problems as well as save time on revisions or save money on reworking different elements on a site. Most wireframes are exceedingly flexible and easy to customize making revisions a no-brainer.

Functionality and Simplicity

Wireframes are about revealing the design’s function, not a design scheme. Don’t get too technical, this is about planning ahead.

Take Notes

Keep simple notes on the right hand side of your mockup, off of the design so that you can update the list with things that you want to mention or ideas that you have brainstormed about and want to propose. Correlate the notes with numbers on the design as not to clutter the wireframe.

Keep Everyone Involved

Keep in mind that not only the client is getting use out of the wireframe, don’t forget about your team! Keeping them involved will help everyone stay on the same page and add to the integrity of the planning stage.

Limit Revisions

Treat the revisions as a 3 round process including Initial Feedback, Revisions, and Final draft, that way you can start focusing on the design sooner.

Set a Deadline

Don’t forget that while you are planning ahead and this is all highly beneficial, once the wireframe is approved that’s when the design portion begins. Don’t spend too much time in the scope on wireframes or else you may see the design quality hurt during the final draft process due to lack of time.

Is Your Wireframe Consistent?

Consistency in your wireframe is imperative in keeping it clean and simple. It should not look confusing or have contrasting elements. Don’t hesitate to ask for constructive feedback from an internal source before submitting it to the client.

Be Creative, but Don’t Overdo It

Don’t feel limited by the wireframe, if anything, feel unlimited but don’t overdo it. You don’t want to make your plate too full or suggest erroneous things to design because they may become overkill in the design stage.

Make Sure You are Using the Right Tools

There is a wide variety of software available for wireframing. As I mentioned in the introduction, Check out my article Top 5 Wireframing Tools for Graphic Web Designers for more info on great apps and ideas that you can use to get the job done outside of the usual design software.