Introducing:

Clear Goals

a new web app built by Velora Studios

Turn your Goals Into Reality. Launching Soon! http://cleargoalsapp.com

Awesome Website Prototyping - 3 Practices for Better Wireframe Design

Catalina Butnaru - Tuesday, October 05, 2010 |

Website prototyping has been and still is regarded as a simple incipient stage in design and in some unfortunate cases – it is simply overlooked. But there is more to sketching a mock-up than some people may think. Wireframing has more to do with the message and the core concepts of a business, than it has to do with graphic design - because a website mock-up is actually about mapping businesses and figuring out what goes where and why. It's important that both designers and clients understand this. Website prototyping needs your attention and thought (more than you might be giving it now).

Website design prototyping is a process that refers to three main practices. This blog post will help you understand how to use them efficiently, as a designer, and help your client see it as a map of their business, instead of as just a sketch, before the "real" design comes up.

Come on feel the Illinoise
Photo by: Paul Mayne

#1 Design Practice - Usability Focused Prototyping

Sometimes designers are just flooded with inquiries and tight deadlines; other times – the client just wants to have a certain type of website and doesn’t make a difference between having a website and building it with a specific set of goals in mind.

Either way, the initial mock-up may end up looking like the same simple sketch you made for the last five websites you built, when it actually needs more work and more thought put into it, all the way through. The finished website that follows will probably not be as effective as it could have been if more effort was put into the initial wireframe design.

If you want to avoid this happening, keep in mind three simple rules of design that you should start with, from before you even design the first mock-up.

1. Design with the customer in mind

Who is your customer? What does he do on your site? What do you want him to enjoy doing?

"What" type of questions are a good way to start; as a matter of fact - these questions are exactly the type of questions that customers love to ask most often.

You have the ability to lead them through a range of alternatives with your design that eventually answer "what" questions in the most effective and gratifying way.

The customer is a complex human being with a whole spectrum of reactions, emotions and thoughts that he wants you to make him experience. The content that you provide is the appetizer. The main dish you want him to enjoy on your table is actually the experience that you create for him through your website. You want him to go “WOW!” immediately after he gets familiar with your product, whether it’s a beta product or a trial period. But most of all you want him to enjoy going through all the process: have a good overview of your website, understand what you are talking about, find what he needs and become interested. And to do so you have to guide him all the way through and you can do so with a carefully designed and structured interface.

2. Design for interaction

Design with the hope for a connection with customers. Make it so that you are still the best host of your own show where they can be in the center of attention.

Conversation is built through blogs, forums, discussion areas, e-mails and comments, but sometimes it takes more than that to make it clear to everybody who comes to your page that you do want to read what they have to say and that you can make it easier for them to share the content they like, if they want to. The level of engagement that you wish to achieve is profoundly embedded in the visual organization of content online.

So you can build a larger community, you can feature guest comments and allow people to interact freely with each other, use something like a Meebo widget and allow cross platform connection or you can provide the user with more typical and traditional tools of interaction, such as a contact form and contact information.

But most importantly – you need to design your website so that it is easier for the user to actually contribute. Just like people used to do over 2300 years ago in the Akademias – build an inspiring place of ideas and knowledge, where people can come to sit and listen, walk around and absorb or contribute and share.

Design for Interaction and a lot of people will eventually want to be part of something that is unique, that makes them feel passionate, interested and engaged.

Sketched Wireframe
Photo by: Todd Moy

3. Design for content

Not every bit of information IS actually good content. We have talked about content in a previous blog post – Why Content Will Always Be King – where we shared a few ideas with you about how great content can be created online.

Designing for content means that you want the user to be able to find, access, remember, save, share and add more content. You can think about integrating dynamic graphs that receive data from the web and update constantly; you may want to include infographics and make data visually enticing; you may wish to use wireframing tools to figure out how use the space wisely so that you say a lot in a few words but invite the user build on them and promise to listen and reply.

Please note that designing for content is different than designing for more content. You do not need to figure out how to stuff more content in a 1024x768px range. What you need to focus on is how you arrange and structure information (in any form presented) so that you trigger a positive reaction in people, so that you reach out to them, so they can absorb it, so that they know they can be part of it and that they are welcome to add up and help it grow.

#2 Business Practice - Strategic Alignment

Aligning your business strategy and reputation with how you present yourself online - is not an easy thing to do. You need to make sure that your clients and customers will find exactly what they expect to find and then surprise them and make sure they have an awesome experience interacting with your business, online.

Strategic alignment starts from the very first stage and you need to make sure that you, as a designer, understand the personality, style and goals that define your client's business. Most of the time, clients believe and say that they want to make a good impression, to stand out and be remembered - through their website. Therefore there is a certain preference of clients and designers where more weight is given to pixel-perfect design, over efficient, strategic and genuine communication with the user. Both are equally important; it isn't good design if it doesn't communicate the message efficiently.

Design, like development, is about building solutions. And those solutions need to be aligned with the functionality, purpose and design of your blog. You decide what needs to be aligned from the very beginning of the project.

You can sketch it yourself, but you need to figure out what goes where and why - arrange information visually and make it easier for everybody to "see what you mean".

#3 Social Practice - Staying Real

Warren Bennis said there are 4 skills that great leaders share: good management of attention, of meaning, of trust and self-management. Some of these are more obvious, others are not. Nevertheless, you must have experienced what it feels like to manage all of them at some point and perhaps even tried to use apps to augment your efforts.

Staying real is about being completely aware of the meaning and value you add through your works and through the relationships you build. How does this relate to wireframe design? It does: stay real and keep the essential on top of everything. Make facts a starting point, make your skills obvious, make your services useful and meaningful. Use the space wisely. It needs to be a beautiful and unique map of your ideas.

Stay real and people will relate to you. Keep the mock-up clean, clear and focused and customers will be able to better tell that your client's product/service is what they want.

If you want to get started with it, all you need is what you already know and wish to say to the world. Wireframe design should start with your message, your history, your content, your ideas – not with a simple template. We like to think about it as wireframe design for businesses (their strategy and goals), and think beyond just the website.

Endnote: Next time you are designing a website wireframe, remember to put some extra thought into it if you find that many of your wireframe designs end up looking similar. The prototyping stage in design is very important and can make the difference between a successful, unique website and an unsuccessful, generic one.

If you wish to hear more on this subject from us, leave your suggestions and comments below, subscribe to our newsletter on the right and share this post with your friends.

Advertisement:


Comments

Post a Comment




Captcha Image