{"id":916,"date":"2021-11-19T07:03:00","date_gmt":"2021-11-19T07:03:00","guid":{"rendered":"https:\/\/f1studioz.com\/blog\/?p=916"},"modified":"2026-03-03T10:37:17","modified_gmt":"2026-03-03T10:37:17","slug":"sketches-to-screens-prototypes","status":"publish","type":"post","link":"https:\/\/f1studioz.com\/blog\/sketches-to-screens-prototypes\/","title":{"rendered":"Sketches to Screens: Prototypes"},"content":{"rendered":"\n

A deep dive into the whys, what’s, and hows of prototypes.<\/h2>\n\n\n\n
\"\"\/<\/figure><\/div>\n\n\n\n

Every line has a weight<\/h2>\n\n\n\n

An idea becomes a reality when one puts thought to paper. Otherwise, it remains a thought. A prototype is a productive way of churning an idea into a format that communicates the idea to people with the intention to improve that idea over time. I like to think it is also a beautiful way to fail, to ponder, and try again.<\/p>\n\n\n\n

Prototyping is the conversation you have with your ideas. \u2014 Tom Wujec<\/strong><\/p><\/blockquote>\n\n\n\n

A line is a dot that went for a walk<\/h2>\n\n\n\n

A professor in college would repeatedly joke, \u201cDon\u2019t build it, fake it first.\u201d <\/em>I did not give it much thought until I designed my first website. Anyone I showed the \u201cfinal\u201d design had something to say or questioned why a component was there. Needless to say, that was not the final design. I realized then that I cannot predict accurately what people would say. A component placed in one region on the screen seems logical to me but may not be for another designer.<\/p>\n\n\n\n

\"\"\/
At least Dilbert got honest feedback.<\/figcaption><\/figure><\/div>\n\n\n\n

Hold on, why should we make prototypes?<\/h2>\n\n\n\n

Eye know now: <\/strong>A prototype is a tangible way for the designer to understand the user or the problem that needs to be solved and if the solution pursued is the correct one for the user<\/p>\n\n\n\n

Broadcast text:<\/strong> It communicates the design ideas to stakeholders, teammates, or clients and receives feedback. Also, a prototype helps to specify the details and interactions to developers, engineers, or manufacturers.<\/p>\n\n\n\n

Testing 1,2,3:<\/strong> Receiving feedback on prototypes reveals what we don\u2019t know about the design.<\/p>\n\n\n\n

A Booster dose:<\/strong> Prototypes can advocate for the required design directions to the stakeholders.<\/p>\n\n\n\n

And that\u2019s why prototypes are a path to understanding how people think. Prototypes are not meant to be perfect; they get better with every feedback.<\/p>\n\n\n\n

Walking into the design like \u2014<\/h2>\n\n\n\n

The fidelity of a prototype refers to how closely the prototype acts like the finished product.<\/p>\n\n\n\n

The first steps<\/h3>\n\n\n\n

Low fidelity (lo-fi) prototypes<\/em><\/strong><\/a> can be used while testing core concepts, getting over initial fears, thinking through many ideas, and identifying potential issues that are too big to fix. It is the easiest prototype to make and does not require as much time or skill. The goal is to test basic ideas. Examples of low fidelity prototypes include paper prototypes, storyboards, sketches, etc.<\/em><\/p>\n\n\n\n

\"A
Powering through paper prototypes (Image credit: Sharon Rajkumar<\/a>)<\/figcaption><\/figure><\/div>\n\n\n\n

Marching forward<\/h3>\n\n\n\n

Medium fidelity (mid-fi) prototypes<\/em><\/strong><\/a> have a more refined assumption to test. This prototype provides more context, which can result in feedback on specific parts. They can be considered as an extension of lo-fi prototypes where interactions, functionality, and the possible mediums (phone, tablet, wearables, etc.) began to take shape.<\/p>\n\n\n\n

\"\"\/
The first Apple 1 computer in 1975, the prototype before the revolution.<\/figcaption><\/figure><\/div>\n\n\n\n

Adding some swagger<\/h3>\n\n\n\n

High fidelity (hi-fi) prototypes<\/em><\/strong><\/a>\u00a0are the final lap, they include visual design (color, typography, etc.) and are closest to the final product. It\u2019s best used to test overall reactions to the design, animations, legibility of the text, etc.\u00a0These prototypes also involve the maximum cups of coffee consumed as it takes a longer period of time\u00a0<\/em>\ud83d\ude42<\/p>\n\n\n\n

\n