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 benefits 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 modifications to it before a great
deal of money is spent in developing its finer points.

4. What is Wire frame in Web Design?
Wire framing a Website involves building a text-only version of the
site, with working links, but without graphic detail.

5. Benefits of wire framing
your sites before fully
develop
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 flows.
It enables you as web designer to pinpoint potential problems
that might arise later

6. Prepare Your Sitemap
Before we begin to work with wire frame model, it’s good idea to
sketch out a quick signal flow 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

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

8. Create your Wire frame Model
Step 1. Create the Wire Frame
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.

9. Step 2. Add Your Content
Once you have all the pages set up and your client has approved the
page titles, purposes and link titles, you can begin to fill in the content
for each page.

10. Step 3. Start Laying Out the Pages
At this point, we need to create a rough layout of the site using placeholder
images, or by creating separate layers.

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 first, to
make sure it meets users needs, before moving on to the pretty pictures.

15. Wire Frame vs. Visual Design
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.

16. Note for Visual Designer
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.
Note for 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.
Hand-drawn Wire-Frame Sketches

17. 9 Application Tools To Create
Wire Frame Digitally
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.

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

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

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

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

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

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

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

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

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/