Wireframes AndPrototypesHow Well

Do You Know This?

• Generally all the designers in any field use the terms

called wireframe or prototype.

• In case of web design these terms are used by

designers but few of them know the real meaning and

exact difference between these two.

• Many people use these two terms interchangeably

and are not aware where these terms fit perfectly.

www.heliossolutions.no

• If you wish to sustain as designer in the industry then

you must know details about wireframes as well as

prototypes and use them effectively in the design

process.

• Most of the time you may require to develop both –

wireframes and prototypes but few projects can be

completed with either of them.

www.heliossolutions.no

www.heliossolutions.no

Phases Of Web Development

Research and study – you discuss your client’s requirements and study processes that are needed to be digitized.

To Understand Where The Wireframes And Prototypes Fit In The Process,

Let Us Look At The Main

To Understand Where The Wireframes And Prototypes Fit In The Process,

Let Us Look At The Main

www.heliossolutions.no

Analysis and Concept – Write detailed requirements and create a concept for the website features and design.

Phases Of Web Development

www.heliossolutions.no

Layout – Draw basic design sketches to get idea of how the website will look. Wireframes and prototypes are part of layout process and are used to elaborate the design elements. Now its time to understand what they exactly mean and what is their necessity in design process.

To Understand Where The Wireframes And Prototypes Fit In The Process,

Let Us Look At The Main

Phases Of Web Development

• It is basically a visual illustration or elaboration of the

web page. It includes content, links or any other

elements intended on that page. There could be more

than one wireframe for single website as different

pages of the website might have different structure

and elements. The placement of the items is the most

important thing to understand here.

www.heliossolutions.no

Wireframes

• With the variations in the project, there could be

different types or forms of wireframes. If the project is

not so big or there is not much time allotted for design,

you can go with low fidelity models. Here just basic

sketch of page is used for all future references. On the

other hand for a complex project, a detailed wireframe

model can be used to avoid the chaos while working

on actual website coding.

www.heliossolutions.no

Wireframes

• Main advantage of using Wireframes is it allows you

to focus on the user interaction elements and

functionality associated with these elements. Clickable

wireframes can go one step further and demonstrate

the functionality to the client. While presenting

wireframes to your clients you must brief them in

advance about what to expect at this stage and how it

is going to be helpful to the project.

www.heliossolutions.no

Wireframes

For creating wireframes you can consider usingone of the following tools

Fireworks

Mockingbird

Photoshop

www.heliossolutions.no

• By definition prototype means a piece that is built for

testing the design of particular product. After

developing prototype, manufacturers can find mistakes

and remove them in the next version. In IT field

prototyping is generally used to develop code model to

showcase the functionality of any project.

www.heliossolutions.no

Prototype

• Importance of prototyping can be understood from

the fact that every big or small project has a prototype

developed before developing the entire application or

website. It becomes especially necessary to develop a

prototype when a website or web application is

complex in nature.

www.heliossolutions.no

Prototype

• Prototype has different forms, same as that of

wireframes – complex and simple. Simple prototypes

can be designed with the help of pen and paper. You

can choose to draw few screens or formats on paper by

hand and show it to client for approval.

www.heliossolutions.no

Prototype

• Complex or detailed prototypes are created with the

help of computer and some sort of user interaction is

accommodated in this form of prototyping. Compared

to simple ones, these prototypes can be more effective

and client will get impressed for sure.

www.heliossolutions.no

Prototype

To understand where the wireframes and prototypes fit in the process,

let us look at the main

www.heliossolutions.no

Advantages of developing prototypes

Testing – before final product is developed, you can use a prototype for testing with some of the users to gauge its effectiveness.

Testing

To understand where the wireframes and prototypes fit in the process,

let us look at the main

www.heliossolutions.no

Time and money saving – if you haveClient - approved prototype in your hand,The Process of development and codingBecomes much more linear and straight.Chances of Developing wrong interfaces or wrong coding are totally eliminated.Thus you save lot of precioustime and money.

Advantages of developing prototypes

To understand where the wireframes and prototypes fit in the process,

let us look at the main

www.heliossolutions.no

Easy for Team – With a prototype youcan assign tasks to your team members and all members can be on same pagewhen it comes to developing project.

Advantages of developing prototypes

Tools Available For CreatingPrototypes Are

Photoshop

Firework

Keynotopiz

Illustrator Many More.

www.heliossolutions.no

www.heliossolutions.no

Interested To Know More About?

PHP Utvikling Spesialist

Website Utvikling Spesialist

Outsourcing Website Utvikling India

802 Iskon Atria 2, Gotri Road,

Baroda, Gujarat, India.

http://heliossolutions.ch info@heliossolutions.in

+91 265 653 5602 +91 98250 96949

+49 89954 57230

+31 222788105

+1 585 310 3829

Germany

USA

Netherlands

India

802 Iskon Atria 2,Gotri Road,Baroda.

Gujarat,India.

http://heliossolutions.no

info@heliossolutions.in

+91 265 653 5602 +91 98250 96949

+49 89954 57230

+31 222788105

+1 585 310 3829

+ 41 79 791 59 56Route du Village 4, CH-1066 Epalinges,

Switzerland