Using Wireframes + 7 Wireframe Links

wiwreframeHeard the term ‘wireframe’?  Not to worry – new word, old function.  It’s simply a sketched framework of a website used to best arrange the elements to accomplish a particular purpose.  It’s now gone ‘hi-tech’.  A wireframe is defined as a layout that should include the interface elements and the navigational system, i.e.,  links.

Wireframes can be produced as simply as something scribbled on a napkin, maybe a sketch on a whiteboard or something as involved and professional as one using a software program.  Who uses these? [1]

  • Business Analysts
  • User Experience Designers
  • Developers
  • Visual Designers
  • Anyone with knowledge of interactioin design, user research or information architecture.

Much like flow-charts, wireframes help you to connect the website.  So what do these experts focus on to optimize the website’s connections?

  • Information displayed
  • Range of functions
  • Priority of information and functions
  • Display of certain information

Want to try your hand at a wireframe software?  Note:  some of these programs are free, some paid.

Gliffy (FREE) – –  Description:  Diagrams made easy.  Create professional-quality flowcharts, Org charts, UML diagrams, Network diagrams, Wireframes, Technical drawings and more. Gliffy works directly in your browser!

Frame Box (Free)   – – Easy frame sharing in 3 easy steps.

Mockflow (Paid) – –   Creative tools & collaborative services for designers

JustinMind  (Paid) –  –  Define mobile and web apps with highly interactive prototypes

PowerMockUp  (Paid) – –  Sketch user interface ideas in minutes without having to learn new software

Axure (Paid) – – Create prototypes of websites & apps without coding – Free Trial

Balsamic Markup (Paid)  – – Trial version to test mockups


Comments are closed.