Building a Live Prototype

HZVhu7QFTnq6hV3XpI12_iPhone_animatedTo truly allow my app redesign to come to life, I needed to build a high fidelity prototype. Prior to building the prototype, I watched some tutorials to uncover the best way to build my app. After watching around a dozen tutorials, including “Intro to Invision Studio | Advanced Guide to Invision Studio” by Jesse Showalter, I came to the conclusion that interactive motion transitions are the step to take your app to the next level. To further demonstrate, an interaction is the action a user takes to reach a different screen. The most common interaction for mobile design is a tap. A singular tap can allow a user to open a screen that can give them more information, allow for a video to play, etc. However, as stated previously, by creating motion after a user taps something, allows the prototype to feel more advanced and alive. For example, if a user sees an image they like, if the were to tap on it rather than it just appear larger, the image grows into place in front of the user. I believe these transitions are the magic within prototyping and mobile design. Therefore, when building Cookbook, I tried to corporate these motion transitions wherever possible. In my prototype, this feature is most recognizable in the profile page. If a user chooses the different categories for saved recipes, there is a smooth transition between the pages. Also, if a user taps on the settings icon under the profile page, in order to go back to the profile page, there is a swipe down motion with a natural transition. Overall, I believe my prototype is successful because of it navigation, design, and interactions.

To view my final prototype click here. Live Prototype

Final Processbook ColoneseDiBello-FinalCookbookProcessbook

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s