Wire framing Notes


  • Wireframe
    • What is a wireframe?
      • Wireframe shows main groups of content, a structure of information and is a description/visualization of the user interface
      • Backbone of the design
      • Quick process
      • A well created wireframe communicates the design clearly and sets a path for the design
      • Documentation for the project
  • Prototype
    • What is a prototype?
      • representation of the final product
      • User can experience content and interactions and test interactions in a way similar to the final product
      • Will resemble your final product
    • When to use a prototype
      • Used in user testing
      • Check usability before development actually begins
  • Mockup
    • What is a mockup?
      • Static design representation
      • A well created one will represent the structure of information, visualize content and shows basic functionalities and encourages people to review the visual side of the project
    • When to use a mockup
      • If you want an early buy-in from a stakeholder


  • Where to start?
    • Before choosing a means of communication; specify the problem you’re trying to solve, get to know the target group, look at competitors and set overall requirements
    • What will work best? Do you have time and money for solid user research, or are you just going to visit a local cafe and hand a couple of sketches to your prospects? What skills do you posses? Can you code?




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s