Prototyping Tools

Types of Ux Prototype

Skill in using Ux prototyping tools is also good to practice in preparation for the course.

A.  Pen, Paper + People (‘Wizard of Oz’) – quickly realise novel interaction concepts using pen and paper sketches ‘animated’ by human actors.  Good for simulating technology that does not yet exist.

B.  Animated Presentation – mock-up visual appearance and simple transitions using image editors (Gimp, Photoshop) and SlideShows (powerpoint).  Input/output actions (the behaviour of user interface components) is not the same

C.  Wireframe Schematic – simulate the task flow, information organisation and page layout using Wireframer ( Axure (3wk trial only), Balsamiq, Fireworks).  The behaviour of individual interface components is functionally accurate e.g. scroll bars, sliders, but visual appearance is not considered.

D.  Web Framework – good for full look-and-feel, interactive, but functionally narrow, prototypes, with ‘hard-wired’ data.  Options include:

i. Responsive Front-end Frameworks such as Bootstrap, Foundation, Froont.com – good for multi-channel mobile sites; and

ii. Web Development Content Management Systems e.g. Joomla – good for content-rich, ‘publication-like’ sites.

E. Video – good for demonstrating a range of modalities of interaction in various contexts of use, though it is difficult to respond to user choices

There is no best approach to prototyping.  Advanced students can select, adapt and combine prototypes to best achieve the defined purposes of the exercise i.e. What features of the interface do we want user feedback about?  What experience specifically are we attempting to create?

I also encourage you to take the opportunity of this course to learn about web frameworks, even if you are ‘not interested in coding’.  Many Ux-ers are not, so if you can prototype this way, more opportunities are likely to come your way, and your own portfolio/business site may be better also.

Learning Pathways

These pathways inevitably include some omission and overlap, so please just work around and compensate.  The alternative is being directed by me down a single path not appropriate for you !!  The videos areavailable through Lynda.com, which KU students have access to.

A. Pen, Paper & People

B. Animated Images

Supplier help files and tutorials should be sufficient to combine screenshots, Visio and Paint files with Powerpoint.  Photoshop can get more technical.

1. InDesign CC: Interactive Document Fundamentals with Mike Rankin

2. Photoshop for Web Design with Justin Seeley

3. Designing Web Sites from Photoshop to Dreamweaver with Sue Jenkins

C. Wireframe Schematic

EITHER Omnigraffle 5: Creating Web Sitemaps and Wireframes with Jason Osder

Many find wireframing tools to be very similar to drawing tools and powerpoint, so you may not need this tutorial.

OR Good suppliers will often have a range tutorials from novices to advanced

http://www.axure.com/tutorials

D.  Web Framework

Watch the following videos on Lynda.com

  1. HTML Essential Training with Bill Weinman.  Use a plain text editor such as TextWrangler, Notepadd++
  2. CSS for Developers with Bill Weinman
  3. Layouts with CSS in Dreamweaver with Joseph Lowry

Even if you do not really master 1, 2 and 3, you will be surprised how far you can go in prototyping “without writing any code” i.e. by finding a suitable example or template, and then make minor edits to the look and feel.

So be encouraged to continue to:

  1. Responsive Front-end Framework e.g. Bootstrap , Foundation – good for multi-channel mobile sites.
    1. Creating a Responsive web design with Chris Converse.  Covers the whole process of webpage creation, including Photoshopping the images, and the HTML5.
    2. Up and Running with Foundation with Jen Kramer. Or  Up and Running with Foundation with Jen Kramer.
  2. Web Development Framework and Content Management System e.g. Joomla – good for content-rich, ‘publication-like’ sites

Joomla! 3 Essential Training with Jen Kramer.

For more front-end technology, continue to:

  1. Javascript Essential Training with Simon Allardice.  Includes an introduction  to programming for beginners and a library of user interface controls jquery
  2. Create a Sortable Photo Gallery with jQuery with Chris Converse
  3. Web Development Environment e.g. Aptana

The latest features include:

9. HTML5 Drag and Drop in depth with Bill Weinman

10. CSS3 First Look with Chris Converse

E. Video

The key applications – CamStudio, Photoshop Elements and Windows MovieMaker – all come with Help files and tutorials from the suppliers.  Camtasia Studio is the professional (paid) edition of CamStudio.

By the end of this course, aim to be able to learn and apply all prototyping technologies by ‘picking up and playing with it’.  You will have your preferred approaches, but there will often be a need to learn something new for a new purpose or a new client.

Advertisements

3 Responses to Prototyping Tools

  1. Hi Martin,
    I’m taking your MSc course next year and really looking forward to it!
    If you don’t know already (I received an email about 2 days about this) Axure are giving away free licences to students and teachers. I haven’t tried the link myself as I already have Axure but it might come in handy for your current students?
    http://www.axure.com/edu?utm_source=Axure+Newsletter&utm_campaign=56fabb2321-Academic_Perks_Email&utm_medium=email&utm_term=0_a7535690e8-56fabb2321-6912277

    Thanks,
    Angela

  2. Axure is now on the KU network. Free to students

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s