Balancing Fidelity in Prototyping

Deceived by their ideas of what clients will accept, many web development teams build prototypes that are too costly and doesn't serve the purpose prototypes are supposed to. To exploit the full potential of prototyping, it's critical to choose the appropriate level of fidelity.

Olsen, Henrik. GUUUI (2005). Articles>User Interface>Prototyping

Behind the Kimono

We don't show our work. Developers do it. Graphic designers do it. But have you ever seen a wireframe from a prominent web designer?

Unger, Russ. SlideShare (2010). Presentations>Web Design>Prototyping>Project Management

A Designer's Guide to Prototyping Ajax

Jeffery Zeldman wrote earlier this year in his essay about Web 3.0 that 'Wireframing AJAX is a bitch.' And while I can't deny the statement, I do think there are steps we can take to alleviate the pain. The problem is static XHTML/CSS wireframes are woefully inefficient at the task of communicating and documenting the features available to the new crop of Ajax web sites. Because we've been working on a rather intense Ajax project for the last few months, we've been developing and refining a number of techniques and guidelines to help our team design for Ajax by moving beyond the traditional forms of functional specs and wireframes to something a bit more appropriate for the dynamic medium'rapid prototyping.

Hale, Kevin. Particletree (2006). Design>Web Design>Prototyping>Ajax

Dive into Responsive Prototyping with Foundation

Today, we’ll take a look at how you can dive into responsive design using Foundation, a light front-end framework that helps you rapidly build prototypes and production sites. If you’ve avoided responsive design because it seemed difficult, or the tools weren’t there, or you weren’t sure of the need...then this is the perfect time to get started.

Smiley, Jonathan. List Apart, A (2012). Articles>Web Design>Prototyping>Standards

Review: Effective Prototyping for Software Makers

Effective Prototyping for Software Makers is an ambitious undertaking that in some ways redefined the meaning of prototyping for me. No reader is likely to absorb this tome from cover to cover--certainly not in one sitting and maybe never. The authors have tried to include as much information as possible on the topic, resulting in an extensive reference that paradoxically leaves me unsatisfied.

Frishberg, Leo. UXmatters (2007). Articles>Reviews>Prototyping

Five Paper Prototyping Tips

Prototyping is a quick way to incorporate direct feedback from real users into a design. Paper-based prototyping bypasses the time and effort required to create a working, coded user interface. Instead, it relies on very simple tools like paper, scissors, and stickies. Even in applications where new technologies are deployed, paper provides maximum speed and flexibility.

Klee, Matthew. User Interface Engineering (2000). Design>Usability>Prototyping

Guidelines, Tools and Resources For Web Wireframing

Today “Web” is very different from what it was few years ago. It is better, but far more challenging – you can no longer ignore things like usability, information architecture and design. That’s why wireframing has received so much attention lately. Wireframing allows you to visually illustrate layout of fundamental elements in the user interface. It also acts as a way to communicate with clients and other stakeholders (content creators, designers, developers, etc). Furthermore, wireframing enables you to consider changes, user paths, and new requirements.

Khan, Saud. W3Avenue (2010). Articles>Web Design>Prototyping>Software

Integrating Prototyping Into Your Design Process

Prototyping is a big deal right now. We get wrapped up in mailing list threads, new tools are released at an astonishing pace, books are being published, and articles show up on Boxes & Arrows. Clients are even asking for prototypes. But here’s the thing… prototyping is not a silver bullet. There is no one right way to do it. However, prototyping is a high silver content bullet. When aimed well, a prototype can answer design questions and communicate design ideas. In this article, I talk about the dimensions of prototype fidelity and how you can use them to choose the most effective prototyping method for the questions you need answered.

Beecher, Frederick. Boxes and Arrows (2009). Articles>Project Management>Prototyping

Integrating Prototyping Into Your Design Process

Prototyping is a big deal right now. We get wrapped up in mailing list threads, new tools are released at an astonishing pace, books are being published, and articles show up on Boxes & Arrows. Clients are even asking for prototypes. But here’s the thing… prototyping is not a silver bullet. There is no one right way to do it. However, prototyping is a high silver content bullet. When aimed well, a prototype can answer design questions and communicate design ideas. In this article, I talk about the dimensions of prototype fidelity and how you can use them to choose the most effective prototyping method for the questions you need answered.

Beecher, Frederick. Boxes and Arrows (2009). Articles>User Experience>Prototyping>Methods

Interactive Prototypes with PowerPoint

Have you ever wished your early design mockups could come to life, so you could try out the navigation, test an interaction, or see if a button label just feels right when you click on it? Sure, you could invest in a dedicated prototyping tool, but you can create surprisingly quick and effective prototypes with a software program that's probably sitting on your hard drive right now. It's PowerPoint.

Kelly, Maureen. Boxes and Arrows (2007). Design>Web Design>Prototyping>Microsoft PowerPoint

JavaScript Basics for Prototyping

I know there are a good number of designers out there afraid of anything that smells of programming (basically, if it's not plug and play, it's not being used). I completely understand. Dealing with CSS rending across browsers is bad enough already. Because prototypes are all about making an interface 'look' like it works, the dabbling we're going to go over here is actually a process that's amenable to designers (especially those with programming skills that started off as just rudimentary hacking skills). CSS is the domain that most of the new crop of web designers are most comfortable with and so the functions we're going to go over are ones that manipulate, for the most part, the styles of our elements.

Hale, Kevin. Particletree (2006). Design>Web Design>Prototyping>JavaScript

Review: Justinmind Prototyper

Since our clients require an ideation phase before looking at a product’s visual design, I’ve been looking at a lot of wireframing and other prototyping tools lately. To find out more about prototyping tools, I’ve combed several mailing lists—such as SIGIA and IxDA—looking for discussions about the latest tools that are available to us. As a result of what I’ve found out, I’ve been exploring Justinmind Prototyper, a prototyping tool that serves the ideation process well and, more important, generates HTML code for the prototypes we create.

Kirmani, Afshan. UXmatters (2010). Articles>Reviews>Prototyping>Web Design

Low-Budget Prototyping Techniques

We believe user research is too important to give up. So we have to run tests quickly and cheaply for our clients to accept the cost - and we have to clearly show how it brings value. Because of this, we’ve developed a toolbox of quick, cheap UX research techniques. In this article, we’ll talk about one technique known as fast prototyping, and how we effectively used it in a recent project for Vodafone Ireland.

Barros, Belén, Colin Bentley and Elizabeth McGuane. Johnny Holland (2009). Articles>Usability>Prototyping>Testing

My Favorite Prototyping Tools

I’ve recently discovered a few products that make creating a prototype almost as easy as having a thought, and I want to share these finds in case other user experience professionals or developers looking to prototype new features might benefit from them.

Colvin, Kris. Design for Users (2008). Articles>Web Design>Prototyping>Software

Paper Prototypes: Still Our Favorite

We’ve been creating paper prototypes and teaching others to use them for the past eight years. In that time, we’ve learned a lot about what paper prototyping is all about and we’re still pleased by what an effective and easy-to-use tool it is.

User Interface Engineering (1998). Design>Usability>Prototyping

Paper Prototyping with Morae

Morae makes it easy to log usability tests, create video highlights and allow observers to view a test in progress. But Morae is designed to support usability tests of software, not paper prototypes. This how-to article shows you how to exploit the full functionality of Morae when carrying out a paper prototype test.

Travis, David. UserFocus (2007). Articles>Web Design>Prototyping>Usability

Paper Prototyping: Getting User Data Before You Code

With a paper prototype, you can user test early design ideas at an extremely low cost. Doing so lets you fix usability problems before you waste money implementing something that doesn't work.

Nielsen, Jakob. Alertbox (2003). Articles>Usability>Prototyping

PDF Prototypes: Mistakenly Disregarded and Underutilized

Creating a clickable PDF to prototype a new design is not a new concept, but it is a valuable tool that is often overlooked and underutilized. While working over the years with other designers, information architects and usability professionals, I've noticed that many of my colleagues believe the same fallacies about the limitations of PDFs. Contrary to popular belief, you can do more than just create links and interactive forms with PDFs; you can also add dynamic elements such as rollovers and drop-down menus, embed audio and video files, validate form data, perform calculations and respond to user actions. PDF prototypes have the ability to replicate most interactive design elements without investing a lot of time and effort.

Pero Soucy, Kyle. Boxes and Arrows (2007). Articles>Information Design>Prototyping>Adobe Acrobat

The Pencil Project

The Pencil Project's unique mission is to build a free and open-source tool for making diagrams and GUI prototyping that everyone can use.

Pencil Project, The. Resources>Web Design>Prototyping>Software

Power Mockup: Designing for eLearning and mLearning

Storyboarding and sketching out ideas are indeed extremely useful techniques during iterative development processes. My favorite tool for designing eLearning storyboards and more recently, mLearning mockups is PowerPoint. So, I was thrilled to bits when RJ Jacquez pointed to me that there was a very interesting tool that I would definitely enjoy trying. Power Mockup is an application that leverages the design capabilities and the easy use of PowerPoint and allows designers to create software and websites wireframes.

Villar, Mayra Aixa. Creative Design of Learning Experiences (2012). Articles>Education>Prototyping>Information Design

The Promised Land of Prototyping

While some may claim that prototyping isn't one of the wonders of the world, it's definitely a wonder of web and software development. It can help us design better products and overcome many of the hurdles that tend to surface during a development process.

Olsen, Henrik. GUUUI (2005). Articles>User Centered Design>Prototyping

Prototyping

Prototyping is a method used by designers to acquire feedback from users about future designs. Prototypes are similar to mock-ups (see this), but are usually not as low-fidelity as mock-ups and appear slightly later in the design process.

Soegaard, Mads. Interaction-Design.org. Articles>Usability>Prototyping

Prototyping: Picking the Right Tool

The available prototyping options continue to grow. By the time I finish this book, my tools of choice could very well change or evolve again. I’ve been playing with the jQuery JavaScript library. Adobe just released a new version of Fireworks and Flash. Who knows what will be available? So why choose HTML, Flash, Fireworks, Axure, or something else?

Zaki Warfel, Todd. User Interface Engineering (2010). Articles>Web Design>Prototyping>Software

Responsive Comping: Obtaining Signoff without Mockups

If you’re making websites, chances are you’ve given some thought to what constitutes a responsive-friendly design process—and you’ve probably found that adding a mockup for every breakpoint isn’t a sustainable approach. Designing in code sounds like the answer, but you may be mystified at where to begin—or feel unmoored and disoriented at the prospect of giving up the approach you’ve long relied on. Enter responsive comping. This new, mockup-less web design process makes it easy to get that Photoshop monkey off your back, and have a fresh new beginning with your old friend the web browser.

Griffin, Matt. List Apart, A (2012). Articles>Web Design>Prototyping>Project Management