Wireframe

Basic concept of wireframing in web design development

1. Wire frame
Multimedia Design

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

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

4. 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?

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

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

7. Home
Overview Package 1 Package 2 Package 3 Content
Order Form
Database
Success Page
Fail Page
Or
Client EmailMerchant Email
3rd Part Credit
Verify
Backend
Sample of
Sitemap

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

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

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

11. The Wire Frame

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

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

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

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

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

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

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

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

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

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

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

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

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

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