Categories


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) – http://www.gliffy.com –  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)   – http://framebox.org/ – Easy frame sharing in 3 easy steps.

Mockflow (Paid) – http://www.mockflow.com/ –   Creative tools & collaborative services for designers

JustinMind  (Paid) –  http://www.justinmind.com/prototyper  –  Define mobile and web apps with highly interactive prototypes

PowerMockUp  (Paid) –  http://www.powermockup.com –  Sketch user interface ideas in minutes without having to learn new software

Axure (Paid) –  http://www.axure.com/ – Create prototypes of websites & apps without coding – Free Trial

Balsamic Markup (Paid)  – http://balsamiq.com/ – Trial version to test mockups

[1]  http://en.wikipedia.org/wiki/Website_wireframe

Comments are closed.