Prototyping for Noobs
At some point in the design process for a responsive website, there will come a time when you need to test out the flow of the site. After wire framing, surface comps, etc. are finished and you see what it will look like visually you want to make a prototype of the app to make sure the site is intuitive and makes sense to use. A prototype is the next step after surface comps, involving connecting the pages together and configuring transitions between them. This is the final step before publishing the site on a live server so it is important that you get the right feel for the site.
For my first experience into the world of prototyping tools, I used InVision which is a browser based app for making prototypes based off of .pdf or .png files. InVision was very easy to learn and get a basic prototype up within minutes of uploading .pdfs of the surface comps for a website. For this project I redesigned the IBJJF website and made a mobile prototype to demonstrate how the site would look and feel on a real phone.
For this prototype, I focused on connecting all of the pages seamlessly using the hamburger navigation menu I made for the site. Functions include opening and closing the menu on any page, and connecting all pages to each other so that the navigation functions as it would on a live site.
I was impressed with how easy it was to create a functional prototype that you could put into the hands of a potential client and get real feedback about what you’re working on. For this project I used InVision, but there are many other prototyping tools available that will serve the same purpose and are likely just as easy. After learning Figma, I discovered that there are prototyping tools already built in so no third party software is required! If you want to check out the prototype yourself, here is the link: https://invis.io/XD124SBFB69A
Conclusion:
After using InVision to create this mobile prototype, I immediately saw the benefit of making a quick prototype before putting it all up on a live server. Being able to quickly test a site is only going to make the whole process faster and more efficient for the developers as well as the client. This also enables designers to get a feel for a site using a prototype without knowing any code! So the designers can really make sure their job is complete before passing it onto developers.
Sterling Holt is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to (Final Project) in the (DGM 1230 Course) and representative of the skills learned.
