Wire frameMultimedia Design

Instructional Goals

• Understand about basic concept of wire frame in website design

• Understand the bene!ts using wire frame before develop your full website content

• Apply wire framing process in designing web

In the world of 3D animation, a wire frame is a working model of a character without color, skin, clothing or hair. This way, the animators can easily test the model and make modi!cations to it before a great deal of money is spent in developing its !ner points.

Wire framing a Website involves building a text-only version of the site, with working links, but without graphic detail.

What is Wire frame in Web Design?

Within this working model of your Website, the links can be followed through, which provides a real feel for how the information on your site connects and how the site "ows.

It enables you as web designer to pinpoint potential problems that might arise later

Bene!ts of wire framing your sites before fully develop

Before we begin to work with wire frame model, it’s good idea to sketch out a quick signal "ow diagram of the pages contained in the site.

Draw simple boxes that represent each page and write the page's title inside. Use lines to indicate how the sections of the site will link together.

Site map can be hand-drawn, or using a program such as Microsoft Visio, Adobe Illustrator, or Freehand

The goal is to provide a single-page overview of your site as a guide for constructing wire frame

Prepare Your Sitemap

Home

Overview Package 1 Package 2 Package 3 Content

Order Form

Database

Success Page

Fail Page

Or

Client Email Merchant Email

3rd Part Credit Verify

Backend

Sample of Sitemap

Create your Wire frame Model

Try to eliminate any layout ideas that you have and concentrate instead on the skeleton of the site.

Begin by creating a simple HTML page for each of the blocks that you sketched out in your site map diagram. Include the title of the page and the purpose that the page will serve.

Step 1. Create the Wire Frame

Once you have all the pages set up and your client has approved the page titles, purposes and link titles, you can begin to !ll in the content for each page.

Step 2. Add Your Content

At this point, we need to create a rough layout of the site using placeholder images, or by creating separate layers.

Step 3. Start Laying Out the Pages

The Wire Frame

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.

The use of simple shapes lets you focus on the information design !rst, to make sure it meets users needs, before moving on to the pretty pictures.

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.

Wire Frame vs. Visual Design

Hand-drawn Wire-Frame Sketches

Note for Visual Designer

Note for Client

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 brand.

Wait until wireframes are set before showing any visual-design treatments of the pages to the client.

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.

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.

9 Application Tools To Create Wire Frame Digitally

1. Balsamiq

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.

2. iPlotz

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.

3. Pencil Project

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 !nished design should look. You can download the !nished Template with a simple click.

4. templatr

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 !rst moment.

5. Flair Builder

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.

6. GUI Design Studio

PROTOSHARE makes it easy to create and then reuse templates, giving you full creative control and efficiency.

7. Photoshare

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-!delity prototypes that simulate a working application.

8. Serena

DENIM is a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different re!nement levels, and uni!es the levels through zooming.

9. DUB

Reference:

http://articles.sitepoint.com/article/wire-frame-your-sitehttp://www.onextrapixel.com/2009/07/15/the-importance-ofwireframes-in-web-design-and-9-tools-to-create-wireframes/