{"id":202,"date":"2024-01-21T12:11:00","date_gmt":"2024-01-21T12:11:00","guid":{"rendered":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/?p=202"},"modified":"2024-03-13T13:53:53","modified_gmt":"2024-03-13T13:53:53","slug":"starting-to-prototype","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/bsc2a\/project-5-design-for-good-prototyping\/starting-to-prototype\/","title":{"rendered":"Starting to Prototype"},"content":{"rendered":"\n<p>Beginning with the name VapeRecycle, I began to sketch out possible features my app could have. From my research, I decided on 4 solid features the app must have.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1428\" height=\"985\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Intiials.jpg\" alt=\"\" class=\"wp-image-203\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Intiials.jpg 1428w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Intiials-300x207.jpg 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Intiials-1024x706.jpg 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Intiials-768x530.jpg 768w\" sizes=\"(max-width: 1428px) 100vw, 1428px\" \/><\/figure>\n\n\n\n<p>I began to imagine how I&#8217;d like my app to be laid out, starting with the most straightforward navigation features.<\/p>\n\n\n\n<p>I knew the user must be able to<\/p>\n\n\n\n<ul>\n<li>Be able to recycle the vape themself<\/li>\n\n\n\n<li>See their environmental statistics<\/li>\n\n\n\n<li>Mail their vape for recycling<\/li>\n\n\n\n<li>Access a loyalty system to keep them using the app<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"724\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/slay-724x1024.jpg\" alt=\"\" class=\"wp-image-204\" style=\"width:303px;height:auto\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/slay-724x1024.jpg 724w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/slay-212x300.jpg 212w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/slay-768x1086.jpg 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/slay.jpg 967w\" sizes=\"(max-width: 724px) 100vw, 724px\" \/><\/figure>\n\n\n\n<p>I took these rough sketches, and began to work them up to more full designs.<\/p>\n\n\n\n<p>I was considerate of the processes I was following within the app, having these based of research. Although they started as very rough hand-drawn sketches, I knew when I move these into wireframes in Figma I would get a result more similar to the images in my head. I know my own strengths and weaknesses and I know hand drawing is one of my weaknesses.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"924\" height=\"1241\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/ImageScan.jpg\" alt=\"\" class=\"wp-image-215\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/ImageScan.jpg 924w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/ImageScan-223x300.jpg 223w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/ImageScan-762x1024.jpg 762w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/ImageScan-768x1031.jpg 768w\" sizes=\"(max-width: 924px) 100vw, 924px\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"778\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/RemoveTheBase-778x1024.jpg\" alt=\"\" class=\"wp-image-216\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/RemoveTheBase-778x1024.jpg 778w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/RemoveTheBase-228x300.jpg 228w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/RemoveTheBase-768x1010.jpg 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/RemoveTheBase.jpg 1036w\" sizes=\"(max-width: 778px) 100vw, 778px\" \/><\/figure>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"541\" height=\"1024\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-12-541x1024.png\" alt=\"\" class=\"wp-image-207\" style=\"width:229px;height:auto\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-12-541x1024.png 541w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-12-159x300.png 159w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-12.png 552w\" sizes=\"(max-width: 541px) 100vw, 541px\" \/><\/figure>\n\n\n\n<p>I set boundaries to the function I would like my wireframes to serve, to ensure I was creating them with purpose and fluency. My wireframes would be greyscale, with purposeful definitions of shades to portray hierarchy and layering, which I determine now to use in my design. Use of each shade is grey is intentional and shows me how I would like the app&#8217;s layering to function.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"214\" height=\"400\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-13.png\" alt=\"\" class=\"wp-image-208\" style=\"width:86px;height:auto\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-13.png 214w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-13-161x300.png 161w\" sizes=\"(max-width: 214px) 100vw, 214px\" \/><\/figure>\n\n\n\n<p>I also intentionally chose iOS&#8217; system font San Francisco Pro in order to hold a neutral tone before I move to bring a visual identity going into a higher fidelity than current. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"508\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-14-1024x508.png\" alt=\"\" class=\"wp-image-209\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-14-1024x508.png 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-14-300x149.png 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-14-768x381.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-14-1536x763.png 1536w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-14.png 1716w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I was also specific about my use of components within this stage of prototyping. I used them where I knew they aided me in creating the wireframe and making design choices, yet I didn&#8217;t want to feel tired down or have a lack of full control.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"486\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-15-1024x486.png\" alt=\"\" class=\"wp-image-210\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-15-1024x486.png 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-15-300x143.png 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-15-768x365.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-15-1536x730.png 1536w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-15.png 1604w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I created flows, laying out areas where I want them to be. <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><em>This basic layout is useful to me, as although I can see much more potential within the greyscale layers, I understand over time I will take an iterative approach to moving up fidelity, incorporating lecturer feedback, as well as analysed results from user testing.<\/em><\/p>\n<\/blockquote>\n\n\n\n<p><strong>Starting to incorporate animation<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"750\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-22-at-4.24.05\u202fpm.png\" alt=\"\" class=\"wp-image-211\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-22-at-4.24.05\u202fpm.png 1200w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-22-at-4.24.05\u202fpm-300x188.png 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-22-at-4.24.05\u202fpm-1024x640.png 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-22-at-4.24.05\u202fpm-768x480.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>At this point in the project, I knew I wanted to incorporate visual animation to show the vapes. This would allow me to create a stronger visual identity and a really engaging mobile app. I have some experience in using Blender that with enough Googling I could create this vape design, of which I could use keyframe animation to manipulate the sections.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video autoplay loop muted src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Screen-Recording-2024-02-22-at-4.31.34\u202fpm.mov\"><\/video><\/figure>\n\n\n\n<p>I was then able to consider how I used these animations in my prototype. This was a rough test animation which I included in the wireframe to show how the prototype will function, eventually with more complex animations and a developed visual identity.<\/p>\n\n\n\n<p><strong>Starting to think about a visual identity<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"341\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-22-at-4.47.10\u202fpm-1024x341.png\" alt=\"\" class=\"wp-image-214\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-22-at-4.47.10\u202fpm-1024x341.png 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-22-at-4.47.10\u202fpm-300x100.png 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-22-at-4.47.10\u202fpm-768x255.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-22-at-4.47.10\u202fpm-1536x511.png 1536w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/Screenshot-2024-02-22-at-4.47.10\u202fpm.png 1732w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>I started (in a very early stage way) experiment with adding colour and visual branding to my app. I tend to draw inspiration from my interests, and for this project I had a typeface style in mind.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"768\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-16-1024x768.png\" alt=\"\" class=\"wp-image-217\" srcset=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-16-1024x768.png 1024w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-16-300x225.png 300w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-16-768x576.png 768w, https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image-16.png 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>A few years ago at WWDC, Apple introduced San Francisco Pro Extended, which is a sub-typeface of Apple&#8217;s main typeface San Francisco. Being a big SF fan, I was really intrigued by these new alterations and the different characteristics each alteration brings. While I did not use SF for my final typeface, I used another extended typeface, called Area Inktrap Extended.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"512\" height=\"341\" src=\"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-content\/uploads\/2024\/02\/image.gif\" alt=\"Identifont - Area Inktrap Extended Black\" class=\"wp-image-218\"\/><\/figure>\n\n\n\n<p>I feel this typeface portrays character, especially when used with a strong colour scheme.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Beginning with the name VapeRecycle, I began to sketch out possible features my app could have. From my research, I decided on 4 solid features the app must have. I began to imagine how I&#8217;d like my app to be laid out, starting with the most straightforward navigation features. I knew the user must be [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":214,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,21],"tags":[22],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/202"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/comments?post=202"}],"version-history":[{"count":3,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/202\/revisions"}],"predecessor-version":[{"id":221,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/202\/revisions\/221"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/media\/214"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/media?parent=202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/categories?post=202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/tags?post=202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}