JI Design | Don’t Forget the Prototype
post-template-default,single,single-post,postid-22624,single-format-standard,ajax_fade,page_not_loaded,,select-child-theme-ver-1.0.0,select-theme-ver-3.7,side_area_uncovered,wpb-js-composer js-comp-ver-5.0.1,vc_responsive

Don’t Forget the Prototype

In the creation of an app or website, prototyping is the research period in between initial content collection and the final visual design, and then again between the final design and the development. These prototyping stages helps designers and developers test the experience of navigating through an app or website, rather than just focusing on the aesthetics and general, traditional functionalities.

The intuitiveness of a website or app is often directly related to its success. Issues with usability, accessibility, content organization, and database structure often don’t come up until development and final testing, or until people start to actually use a live website or app. By utilizing prototyping methods and test groups, studios can address these issues and come up with strong, unique solutions, before consumers even touch the final product.

Paper Prototyping

Paper prototypes are paper cutouts of the wireframes of the screens that are defined in the site map for an app or website. These are presented for people to physically move around and play with, so that the flow between screens can be laid out and tested.  

For example, a user would start with the homepage screen in their hand, then depending on what they would click on, another screen would be presented, and then they would choose to navigate somewhere else, and another screen is then presented. Simple issues such as, “How can I go back to the last screen?” become very obvious during the paper prototyping phase. Changes to the sitemap or wireframes and any gaps in content are also carefully considered here. By noting these user experience issues and revising the wireframes before moving on to design, the user experience gets the attention it needs and is not just an assumption or a result of the visual design phase.

Digital Prototyping

Digital prototyping often comes after the visual design phase, but can also come before in place of paper prototyping. Screens (wireframe or visual mockups) are placed in the tool of choice and the prototype is customized to allow users to literally click through the site or app. This is a great way to test out user experience with the flow and design of the site before jumping into any coding. Adobe XD and Invision are both excellent tools available to create digital prototypes.

Ready to start your project?

Reach out to us and we’ll help create a plan to build the best solution for your website or app!

Caroline Garriott