11

I am working on quite a large web project and I am thinking that I will first design a series of wireframes in Sketch... but then once those are approved, I plan to build the wireframes using Bootstrap and have a few static pages so that the client can navigate around.

The next step will then be to design the look & feel (so back to Sketch at that point).

So I'm wondering, how do I differentiate (in terms of naming) between wireframing in an app such as Sketch / Illustrator... and wireframing in a browser e.g. Bootstrap?

Improve this question

4 Answers 4

Reset to default
24

Wireframing in an app is called Wireframe

Developing the wireframes to interactive demos (e.g.Bootstrap) is called Prototyping

Edit:

Helpful prototype types from the slides @Jose mentioned in his post:

Paper Prototypes
Tools often used: Paper, Pen, Markers

enter image description here

Low Fidelity Prototypes
Tools often used: Balsamiq, Axure

enter image description here

High Fidelity Prototypes
Tools often used: Invision, Marvel, Sketch, Photoshop, Justinmind

enter image description here

Functional Prototypes
App Inventor, Origami, Framer, Twitter Bootstrap, HTML/CSS/JS

enter image description here

Improve this answer
2
  • 1
    thanks! so just to clarify, the prototype would be just a skeleton of the design, without any of the branding / look & feel added to it?
    – user97020
    May 3, 2017 at 9:04
  • 1
    @pealo86 Yes! It would be. The purpose is to let the client interact with the project and observe task flow.
    – Dipak
    May 3, 2017 at 9:05
9

You can use a wireframe as a prototype, but not all wireframes are prototypes.

Wireframe = a diagram that uses black and white lines only and no color.

Prototype = anything that helps you test a hypothesis. Such as,

  1. will this javascript function do the job?
  2. Is this layout clear enough
  3. Is this UU flow optimal
  4. Do users like this color palette? Typical protoypes are made with: a paper prototype with marvel app, justinmind, html code...

There is a principle that says that the higher the fidelity the prototype, the more accurate the feedback one gets. If you are looking for a naming convention maybe you can use the degree of fidelity to distinguish between your wireframes / prototypes.

hope that helps. Here some more examples of types (slide 13 to 22) of prototypes:

Improve this answer
2
  • 2
    This is the most correct-est answer 👌 The distinction you're looking for as far as fidelity is concerned is lo-fi vs hi-fi prototypes. There's a great deal of fuzzy middle ground, but what the OP describes sounds clearly like a lo-fi prototype.
    – plainclothes
    May 3, 2017 at 22:45
  • My slides have been scrapped lol
    – Jose Berengueres
    May 20, 2017 at 7:34
3

That's called prototyping.

You can also use paper prototyping or creating clickable demos using apps like Marvel App.

Improve this answer
0

This is how I understand these terms in simple way

I divide this complete word into 2 words i.e. Wire and Frame. Suppose if you are sculptor and have to make a statue of say human. It would be good enough to first make skeleton of wires and wood/steel. When you do this you are actually making the wireframe of human.

When you are done with wireframe which in other words means you are done with shape, position and low level look and feel of the sculptor.

Similarly we draft a design for our homes as well on paper first to get an idea about our future home.

Then when you put either mud or cement over this human wireframe you try to give it exact shape, feel, expression, position etc which is other words is nothing but a prototype.

Experts suggest the prototyping phase should be fast so that you get enough time to discover, learn, try & measure many things. Therefore I would suggest Axure RP, UXPIN, Balsamiq etc as best tool to get at speed.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.