“Good design must necessarily, in my opinion, have an impact on people’s lives, no matter how seemingly small. Good design changes things.”
Garr Reynolds
Garr Reynolds
Designing wireframes the right way the first time costs no more than doing it the wrong way. Creating a paper prototype adds no cost either; simply print out the wireframe diagrams for the pages a visitor will use to complete the tasks most closely related to achieving his goals and meeting the site's business objectives.
Web Prototyping saves costs of any marketing communication that may be necessary to undo brand damage resulting from a poorly functioning web site and a frustrating user experience. Expensive site redesigns are often undertaken to correct those kinds of problems. Adding a few days to create a wireframe and testing a prototype ensures that the redesigned site won't introduce any new causes for user frustration or further erosion of brand equity.
Of course, a designer doesn’t have to reinvent the wheel with each new wire frame diagram. Every page in a site will share some elements, even when the pages don’t follow the same template.
These common elements are the must-have items, which, if absent, can cause visitors to experience frustration and resentment that may linger long after they’ve moved on to other sites. Alienating visitors and creating a negative brand impression will not help the site-owning organisation achieve its business goals, nor will it save money. For example, every page needs clearly labelled navigation so the visitor can easily move from one page to the next and from one section of the site to another without having to go back to the home page.
The Wireframe
Understanding how to work with wireframes is the key to creating a success site prototype.
The wireframe diagram illustrates the layout of a web page. Using different shapes (such as boxes, ovals, and diamonds) to represent content, functional, and navigational elements, these shapes displays their placement on the page. HTML coders use the diagrams to “wire” each page, connecting links, attaching content, and so on.
Visual designers use the wireframe as the basis for renderings that show the hierarchical importance and location of the elements (with each general section of the page labelled); free of any potentially distracting design treatments.
The use of simple shapes lets you focus on the information design first, to make sure it meets users needs, before moving on to the pretty pictures. For an existing site, wireframes are abstracted from screen shots, with new content, functional, and navigational elements sketched in.
Wireframe vs. Visual Design
Usually, decision-makers in the site-owning organisation will want to see visual designs by this time. I encourage you to be brave and stall if necessary, but in any event, resist temptation to yield to this request.
Why?
One very important reason is to save money. Why spend time on graphics before the underlying information design is complete?
Equally important, colours, fonts and stylistic treatments of logos and other graphical elements can invoke emotional responses (“I hate this pink”; “I love that blue”; “That version of the logo makes me ill”) that distract from the task of determining the best information design for the page.
A wireframe diagram lets everybody focus on what’s important at this step: clearly understanding what goes on each page, where it goes, and why it goes there, so you can achieve the best overall balance and structure for each page. A wireframe is a sketch of a page-layout idea. The sketch may be rendered in the computer using an illustration application or hand-drawn on paper. Either method is fine, as long as it clearly communicates your ideas.
The information design will evolve as wireframe diagrams change, incorporating results from the usability test at the end of this step, to reflect placement of page elements in ways that better meet user needs. Keeping the information design flexible at this stage will help you create a more positive brand experience over the long term, so you don’t want anyone to develop partisan attachments to a particular look this early in the game.
Note for Visual Designers
At this point in the process, visual designers should conduct exploratory meetings to understand the client’s visual preferences and the visual elements of the client’s brand. Wait until wireframes are set before showing any visual-design treatments of the pages to the client.
Note for Clients
For clients who insist on seeing visuals earlier rather than later, ask visual designers to design page mock-ups representing possible colours, imagery, its look and feel, as well as possible styles of what is being considered at this stage. However, you should do this only if absolutely necessary – that is, if they won’t take no for an answer – and be sure to emphasize that these mock-ups, in no way, reflects the final designs (repeat this warning early and often).
Caution the people in the site-owning organisation against developing any attachments to these mock-ups, because such attachments will make it difficult to change the visual design later on. Chances are these people will not be happy when they see the final design with text, links and information added to it. Focusing only on wireframes at this stage helps you avoid building unrealistic expectations about the site’s final look and feel, because having maximum flexibility to evolve the site’s information design is necessary.
9 Application Tools To Create Wireframes Digitally
Traditionally, interactive web designers use pencil and paper or Photoshop to do a mock-up. However, in recent years, there has been a handful of websites that allow designers to create prototypes, wireframes or sitemaps digitally. Here are 9 tools that you can consider using.
1. Balsamiq
Using BALSAMIQ mockups gives you the feeling like you are drawing, but it's digital, so you can tweak and rearrange the controls easily, and the end result is much cleaner. Teams can come up with a design and iterate over it in real-time in the course of a meeting.
2. iPlotz
With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can manage the tasks for developers and designers to build the project.
3. Pencil Project
The PENCIL PROJECT's unique mission is to build a free and open source tool for making diagrams and GUI prototyping that everyone can use.
4. templatr
templatr is a Template Generator, with which you can create an individual design for your Blog online. You need no knowledge of HTML or any special Software. All you need is a Browser, maybe a little creativity and a small idea of how the finished design should look. You can download the finished Template with a simple click.
5. Flair Builder
FlairBuilder is a cross-platform tool for rapid authoring of interactive wireframes and user interface prototypes. It comes with a palette of common fully functional components. Your prototypes will have interaction built-in from the first moment.
6. GUI Design Studio
GUI Design Studio is a fully featured application user interface design and rapid prototyping tool that requires absolutely no coding. It is equally suitable for creating desktop, mobile and Website application designs.
7. Proto Share
PROTOSHARE makes it easy to create and then reuse templates, giving you full creative control and efficiency.
8. Serena
PROTOTYPE COMPOSER is a completely new way of gathering requirements. Prototype Composer makes it possible to see how an application will look and function before any code is even written. Instead of endless text documents, Prototype Composer makes it easy for business users and analysts to collaborate on requirements by building simple, high-fidelity prototypes that simulate a working application.
9. DUB
DENIM is a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, and unifies the levels through zooming.
Wireframing diagrams use simple shapes to represent the content functions and navigation on a page. Use them to design the best relationships among page elements for efficient information design that will meet user needs and achieve the site's business goals. I hope this post gives you a better understanding of the importance of wireframing, please stay tune for part 2!
The perfect cloud servers for all your apps, files, website and design and development hosting needs.
Comments
Post a Comment