Vox

Leitura de 9 min

3: Prototypes

Summary

This episode of Developer Tea focuses on the importance and practice of prototyping in modern web and application development. Host Jonathan Cottrell introduces prototyping as a crucial step that sits between static mock-ups (like Photoshop files) and the final production application. He explains that its rising prominence is driven by the shift to a multi-device world, where interactions need to be communicated beyond what static images can convey.

The core value of a prototype is its ability to demonstrate a specific interaction—the designed behavior and conversation between the user and the digital artifact. Unlike a full application, a prototype typically focuses on key interactions without manipulating real data or connecting to backend services. It can be built with web technologies like HTML and JavaScript or within specialized tools for platforms like iOS.

Cottrell outlines three essential components every good prototype must have. First, it needs a high resolution for the specific interaction it’s demonstrating, meaning the visual and animated feedback should be polished, even if the underlying code is not optimized. Second, it requires contextual notes that explain where the interaction fits within the larger application, detailing its inputs, outputs, functional purpose, and place in the information hierarchy.

The third and final requirement is that the prototype must be tested and targeted for the specific device the final application will run on, whether it’s an iPhone, iPad, or a particular screen size for the web. Building a prototype for the wrong context can lead to a poor translation and necessitate starting over. The episode concludes by reiterating these three pillars as the foundation for effective prototyping.

Recommendations

Tools

  • Paper — Mentioned as a tool released by Facebook for prototyping, potentially for applications like iPhone apps.

Topic Timeline

  • 00:00:00 — Introduction to Prototyping — Host Jonathan Cottrell introduces the topic of prototyping. He explains that while not a new concept, prototyping is becoming more central to web development due to the multi-device, touch-enabled modern browser environment. It provides a necessary resolution of design that static mock-ups cannot achieve.
  • 00:01:09 — Defining a Prototype — Cottrell defines a prototype as something that sits between a static mock-up and the production application. It may involve front-end code or be built in a third-party tool. Its primary function is to show how something responds to specific interactions, focusing on key behaviors without handling real data or backend services.
  • 00:02:30 — The Value of Prototyping — The discussion centers on the value of prototyping: communicating specific interactions or ‘designed conversations’. As the web and development community shift more towards applications, there’s a growing need to convey interactions that tools like Sketch or Photoshop cannot adequately demonstrate.
  • 00:03:42 — Three Essentials of a Good Prototype — Cottrell begins listing the three things every good prototype must have. The first is a high resolution for the specific interaction itself, meaning the visual and animated feedback should be polished, even if the surrounding code is not optimized or connected to services.
  • 00:04:24 — Contextual Notes and Device Targeting — The host continues with the second and third essentials. Prototypes need contextual notes explaining the interaction’s place, purpose, and hierarchy within the full application. Finally, prototypes must be tested and built for the target device (e.g., iPhone, specific screen size) to ensure the feel and function translate correctly from the design environment.

Episode Info

  • Podcast: Developer Tea
  • Author: Jonathan Cutrell
  • Category: Technology Business Careers Society & Culture
  • Published: 2015-01-06T17:00:00Z
  • Duration: 00:07:38

References

Podcast Info

Transcript

[00:00:00] Hello and welcome to Developer T episode 3.

[00:00:04] My name is Jonathan Cottrell, I’m your host, and today we’re talking about prototypes.

[00:00:17] Prototyping is a big deal.

[00:00:19] In fact, if you’re a web designer and you kind of follow the news of the web design community,

[00:00:25] then you’ve probably seen some tools popping up in the past year around the idea of prototyping.

[00:00:30] Prototyping is not a new idea, but it’s coming more and more into the light of web development

[00:00:37] because the browser has changed in the past 10 years massively.

[00:00:44] We’re now dealing with a multi-device world where you can touch and move things around

[00:00:50] and where you can look at the same website on screens that are literally 10 times different from each other

[00:00:57] as far as pixel dimensions go.

[00:00:59] So prototyping is incredibly important because it provides a resolution of design

[00:01:06] that static mock-ups don’t provide.

[00:01:09] If you don’t know what prototyping is, the basic way to describe it is

[00:01:14] it sits kind of in between a static mock-up, like you might would see a Photoshop PSD file

[00:01:20] if you’re a web developer, and the actual production application.

[00:01:25] So there may be some front-end development in the prototype,

[00:01:29] or it may be something that you build in a third-party tool that has literally nothing to do with web technology

[00:01:35] just to communicate that step in between.

[00:01:38] So what it functions as is a way of showing how something actually responds to a particular interaction.

[00:01:46] It usually focuses on a few key interactions, but doesn’t actually usually manipulate real data.

[00:01:54] It doesn’t have back-end services. It’s not on a production server.

[00:01:58] It’s probably not created with a back-end language like you might would find like a PHP or Ruby.

[00:02:06] It’s probably strictly HTML and JavaScript or something like that, if it’s in the web world.

[00:02:12] You can also prototype for applications.

[00:02:15] You can prototype, you know, like if you’re building an iPhone app, for instance,

[00:02:19] you can do some prototyping inside of Xcode, or you can do it in a tool like Paper,

[00:02:25] which Facebook actually released this past year.

[00:02:30] The value of prototyping is that it provides a way of communicating a particular interaction.

[00:02:38] So an interaction is like designed behavior and a designed conversation, if you might want to call it that.

[00:02:48] The application or the digital artifact that your user is interacting with,

[00:02:53] when the user does something, how does that thing respond?

[00:02:58] Because, really, we have this long history of these static applications

[00:03:04] that kind of work in the same way that a print piece might would,

[00:03:07] where you’re just reading information or you’re looking at pictures or something like that.

[00:03:13] Now, because the web has continued to move more and more into applications,

[00:03:21] and because there’s so much movement towards a larger development community towards applications,

[00:03:28] prototyping is picking up speed because we have a lot of people who are needing to communicate these interactions,

[00:03:34] and they can’t do it simply by using something like Sketch or Photoshop or Illustrator.

[00:03:42] So every good prototype has a few things in common.

[00:03:45] The first thing is a high resolution for the interaction itself.

[00:03:50] What this means is if the interaction responds with an animation,

[00:03:56] the thing that should be really well polished in a prototype is the animation itself.

[00:04:03] The code surrounding the animation doesn’t really matter.

[00:04:07] It doesn’t need to be optimized.

[00:04:09] It doesn’t need to actually go out and fetch data from a server or something like that.

[00:04:15] It should be the actual animation, the visual feeling of that particular interaction.

[00:04:21] That’s what the prototype is for.

[00:04:24] The next important thing for every good prototype to include is a list of contextual notes

[00:04:32] that explain the interaction and where it sits in the application.

[00:04:37] Now, a lot of prototypes act as subparts of applications

[00:04:41] rather than trying to build the entire application as a prototype.

[00:04:45] You’ll see a particular interaction that’s prototyped that will sit in an application at a particular point.

[00:04:53] It’s important for a developer to know where that interaction that is being shown in the prototype,

[00:05:01] know where that will actually finally be in the real application.

[00:05:06] They need to know the context of that particular interaction,

[00:05:10] what the inputs are and what the outputs are,

[00:05:14] and what its functional purpose is,

[00:05:17] as well as literally where it is in the application as far as the information hierarchy.

[00:05:24] If it’s on the introduction page or if it’s on an interior page or something like that,

[00:05:31] or an interior view if you’re working on an iPhone app,

[00:05:35] put that in some interaction notes that are accompanying whatever that prototype is.

[00:05:43] The next thing that every good prototype needs to have is it needs to be tested

[00:05:49] and targeted towards whatever the application will be run on.

[00:05:54] In other words, if you’re developing like an iPhone app or an iPad app,

[00:05:58] you should be creating your prototype to run on the iPhone or the iPad,

[00:06:03] not on your laptop or on a desktop computer.

[00:06:06] A lot of people forget this, especially for the web.

[00:06:09] A lot of people will build their prototype at a larger size

[00:06:14] because they have a cinema display sitting on their desk

[00:06:19] and they forget that most people are accessing the web on a 15-inch MacBook or something like that.

[00:06:24] They’ll build these large, large prototypes,

[00:06:28] and then when it comes time to actually create something for the target device,

[00:06:33] the prototype is so big that you have to basically start from scratch.

[00:06:37] The same thing can happen with an iPhone.

[00:06:39] You create a prototype for an iPhone on your computer,

[00:06:42] and as it turns out, the thing just doesn’t translate properly.

[00:06:46] It feels wrong on the iPhone.

[00:06:49] Again, the most important three things for a prototype to have,

[00:06:55] those are the high resolution of the specific interaction,

[00:07:00] the very good contextual notes that accompany that particular prototype,

[00:07:06] and you absolutely should be pointing your prototypes at the specific devices

[00:07:11] that your application will run on once it’s in production.

[00:07:15] This has been episode three of Developer T.

[00:07:18] If you have any questions, thoughts, or suggestions for me,

[00:07:22] you can reach me on Twitter at developerT or email at developerT at gmail.com.

[00:07:29] Until next time, enjoy your tea.

Visão de gráfico