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 SpesialistWebsite Utvikling Spesialist

Outsourcing Website Utvikling 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