Skip to main content

Prototyping to learn

I came across a Circuit Breaker Podcast episode called Understanding Prototyping to Learn. This episode is a MUST LISTEN! Bob Moesta and Greg Engle come from a hardware/manufacturing product development background but it all applies to prototyping on the web. Bob and Greg give some much needed language to the discipline of prototyping. The roles of prototypes Did you know your prototypes can serve different purposes? Bob and Greg have big buckets for them. Learning prototype Communication prototype Milestone prototype These are wonderful categorizations of the roles prototypes can play. I often prototype to learn. My CodePen is full of these. I often prototype to communicate: “Here’s some progress, here’s why something can or can’t work”. It lets everyone see and experience the same tangible artifact. I prefer prototypes over talking abstractly in meetings. As the old IDEO saying goes: “A prototype is worth a thousand meetings.” The “milestone prototype” concept, where you put a new prototype next to the old prototype to show progress, was a new distinction to me. I’ve used prototypes to communicate progress, but not to show progress. I love it! Show, don’t tell. Simple, yet so effective. Having the v0 next to the v1 tells a story. This could be difficult in code prototypes where you often stomp over previous work, but this might be a situation where a regular habit of branch deploys or CodePen forking goes a long way. The types of prototypes Bob and Greg also explore the different types of prototypes and how they can be decision facilitators: Divergent – Exploring different directions Convergent – Exploring tradeoffs As they said in the podcast, divergent prototypes “are about helping people eliminate what they don’t want and helping us build the criteria of what they want.” Divergent prototypes create contrast. “This is where you can compare an apple to an orange.” Convergent is about optimizing or managing the tradeoffs. The example they use is “Light” vs. “Strong”; you can make an object light but light materials typically aren’t strong, unless you want to add cost. You’re figuring out what levers you can change to meet a customer’s need and converging between specific options. A way to sum this up might be if the customer problem is “Getting from point A to point B”, a divergent prototype would be to show them an airplane, a submarine, or a car. A convergent prototype would be showing a customer a Prius, an SUV, or a pickup truck where you compare size and utility against range (miles per gallon). It reminds me of Ken Kocienda’s story of the iPhone keyboard. There were a lot of divergent prototypes (created in Shockwave, ironically) that passed by Steve Jobs’ desk. Once Steve blessed a path, Ken’s team flipped into making convergent prototypes. But because investements were shallow, they weren’t afraid of rework and backtracking if necessary. In Ken’s words: Demos were the catalyst for creative decisions, and we found that the sooner we started making creative decisions—whether we should have big keys with easy-to-tap targets or small keys coupled with software assistance—the more time there was to refine and improve those decisions, to backtrack if needed, to forge ahead if possible. The dimensions of prototypes Prototypes aren’t uniform in scope and sometimes look at problems from different scopes or dimensions: Comprehensive prototype – Explore how many aspects fit together Focused prototype – Focus and optimize a single aspect A customer might need a more comprehensive prototype to see how all the pieces (or multiple prototypes) fit together;  » Read More

Like to keep reading?

This article first appeared on If you'd like to continue this story, follow the white rabbit.

View Full Article
Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

How to Channel a Daily Vision into a 20-Year Photography Career

How to Channel a Daily Vision into a 20-Year Photography Career

#Silicon Valley
WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

#Web Design
Fresh For Designers

Is the Dynamic Island plain stupid or the next revolutionary UX pattern?


Let's talk about Web Design

The term "web design" describes the layout of websites that are seen online. Instead of software development, it typically refers to the user experience components of website development. The primary focus of web design used to be creating websites for desktop browsers, but from the middle of the 2010s, designing for mobile and tablet browsers has gained significance.

What is a webdesigner?

A web designer is responsible for a website's look, feel, and occasionally even content. For instance, appearance refers to the colors, text, and images utilized. Information's organization and categorization are referred to as its layout. An effective web design is user-friendly, aesthetically pleasing, and appropriate for the target audience and brand of the website. Many websites focus on keeping things simple so that viewers won't be distracted or confused by additional information and functionality. Removing as many potential sources of user annoyance as possible is a crucial factor to take into account because the foundation of a web designer's output is a site that gains and nurtures the trust of the target audience.

Responsive and adaptive design are two of the most popular techniques for creating websites that function well on both desktop and mobile devices. In adaptive design, the website content is fixed in layout sizes that correspond to typical screen sizes, while in responsive design, information moves dynamically based on screen size. A layout that is as consistent as possible across devices is essential to preserving user engagement and trust. Designers must be cautious when giving up control of how their work will appear because responsive design can be challenging in this area. While they might need to diversify their skill set if they are also in charge of the content, they will benefit from having complete control over the final output.

What does a web design worker do?

A web designer is a member of the IT industry who is in charge of planning a website's structure, aesthetic appeal, and usability.

A skilled site designer must possess both technical know-how and creative graphic design abilities. They must be able to envision how a website will seem (its graphical design) and how it will operate (conversion of a design into a working website).

The terms web developer and designer are frequently used interchangeably but erroneously. In order to construct more complex interactions on a website, such as the integration with a database system, a web developer is frequently more likely to be a software developer who works with programming languages.