Prototyping helps create fast, graphical representation of ideas, functions and content and is often used in order to get feedback and improve appearance or functionality of a digital artefact.
Different disciplines use different strategies to prototype ideas – object makers tend to work at smaller scale with cheap, easy-to-modify materials to produce three-dimensional prototypes; animators, film and video makers often tend to sketch up storyboards to visualise their ideas before undertaking laborious and potentially expensive production; web and software designers often engage in the simplest form of prototyping to test layout, site mapping and interactivity – using just paper and a black marker can be the most effective way to visualise your idea.
In film, video and advertising, prototypes are often realised by creating story-boards (advertising storyboard for BMW i8)
An example of a student design, product prototype for a mouse (https-//anddrewportfolio.weebly.com/)
Prototypes often begin with black and white sketches – the fastest and most intuitive way of getting an idea out of your head and onto paper. These wire-frame sketches can later be transferred and developed into digital prototypes using PowerPoint, Photoshop or any other image editing or layout software.
Image: https//medium.com/bad-dinosaur/how-to-turn-your-appidea-into-a-prototype-do-it-yourself
Rapid prototyping is popular in web design and software development as it allows the designers and developers to test ideas fast and for certain designs to fail quickly and cheaply, enabling the design/ developer to modify and refine their work. Your prototype can be developed between a lowfidelity sketch to a higherfidelity digital mock-up.
Low-fidelity Function: With scribbles and coarse wire-frames you can easily and quickly get feedback on new interface ideas and experiment in agile creation processes.
1. Test your paper prototype: If you need some help with testing with paper prototypes, you can refer to the demo video I made for a previous article: Why paper prototyping is crucial in designing good digital products. You can also use a prototyping tool like Marvel or Invision for a clickable prototype. 2. Iterate: Make changes based on your user testing feedback.
High-Fidelity Function: Hi-Fi prototypes are detailed design drafts, done with a more sophisticated design and videos with graphic animations. They give a more accurate sense of the look and feel of the digital artefact.
How can we compare a rapid prototype – to a hugely successful digital platform such as Facebook? It can help to look back, where possible, at the very beginning of a project. What was the functionality and interface of Photoshop V.1? How did some of the world’s biggest companies express their online presence in the early days of the internet through extremely basic HTML sites? What did Facebook look like before Facebook existed?
While not verified, this seems to be evidence of Mark Zukerberg’s first homepage. In it he says, “Mark lives in a small town “near the massive city of New York.” He’s 15 years old and just finished freshman year in high school. Mark would love some comments about his website, and you can email him at “themarke51@aol.com.”
Facebook v.1: without knowing it at the time, this network of people, connected through association, was the beginnings of the world’s largest social media platform. About his early network he writes, “Hopefully, it will grow into a larger Web. If your name is already on The Web because someone else has chosen to be linked to you, then you may choose two additional people to be linked with,”
All great ideas begin as rough, wire-frame prototype, looking back at influential technology in it’s prototype stage helps demystify it.
Step-by-step development The following is a basic stepby-step guide to prototyping your idea towards a highfidelity mock-up for your digital artefact.
1. Discovery: Start the process by searching websites and applications that deal with technologies and content similar to your idea. Learn about their intended users, pay special attention to their strengths and weaknesses. How can you modify what they’ve already incorporated to make your prototype stronger? Where are the gaps in the existing technology?
Image: https//onix-systems.com/blog/what-makes-a-project-discovery-phase-vital-forsoftware-development.jpeg
2. Research: Define Your Users Who’s your intended user/s, and why should they care about your product? Don’t attempt to make “something for everyone.” Take a close look at the technology and sites you found during your discovery phase and allow this to help identify your potential users.
Image: https-//xd.adobe.com/ideas/process/user-research/.png
3. Information Architecture: Structure Your Prototype How will the prototype work, and what is the most important information to focus on? Start by breaking the site/application into pieces. What are all the relevant pages, and how are they structured visually?
Image: www.toptal.com
3. Design A) Sketching: quick and minimalistic drawing, that enable you to record ideas, get and give critique, and make decisions on how to move forward. B) Wire-framing: creating simplified representations of a page interface. The focus of wire-framing is on defining the layout and basic elements of a design. Wire-frames are usually created in greyscale and include placeholders for content like images and buttons. C) Defining the IA (information architecture) is the process of structuring and classifying the structure and content of your website, app, or product, to cut through information overload and narrow choice. D) Mapping the user flow: To visually see the different journeys and interactions a user can make. This will help you figure out where to direct the user at each stage, and how best to get them there.
4. Test and Analyse After every round of testing, you need to analyse the results to define how to move forward. If issues were identified, you’ll probably need to iterate on the design to find ways to resolve the problem.
Image: https://uxdesign.cc/usability-testing-for-enterprise-app.html