{"id":222,"date":"2024-01-28T16:50:00","date_gmt":"2024-01-28T16:50:00","guid":{"rendered":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/?p=222"},"modified":"2024-03-13T13:53:57","modified_gmt":"2024-03-13T13:53:57","slug":"moving-up-the-fidelity-ladder","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/bsc2a\/project-5-design-for-good-prototyping\/moving-up-the-fidelity-ladder\/","title":{"rendered":"Moving Up the Fidelity Ladder"},"content":{"rendered":"\n

This week, I made considerable progress moving my app to a state where it is more produced and well-rounded.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I bought my use of Area Inktrap Extended to the app, incorporating it in certain elements while also retaining the use of SF Pro for areas of body or information where necessary.<\/p>\n\n\n\n

At this stage, upon reflection and analysis of the way the app was heading, as well as being reflective of my own research, I chose to move away from the green colour scheme. I considered the element of who I was targeting my application to, and decided as the function of the app is not to act as an “environmental hero” but more as a way of rewarding vapers for doing their part, a purple colour would be more appropriate.<\/p>\n\n\n\n

Watching the iterations go by<\/strong><\/p>\n\n\n\n

I took an iterative design approach, reflecting on feedback as I continue the development of my work.<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

I considered visual rules I will use to create the app. Lighter elements lift off the darker background to create a sense of hierarchy. Press-able buttons have a drop-shadow, whereas informative non-tappable elements do not and sit flush with the background only separated by colour.<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n\n\n\n

Pressable buttons<\/p>\n<\/div>\n\n\n\n

\n
\"\"<\/figure>\n\n\n\n

Informative elements<\/p>\n<\/div>\n<\/div>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I created mock vape icons simply within Figma’s built in vector editing tools. In the future I would like to add more variety of vapes which will serve a functional purpose.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I’m using components purposefully with the genuine intent of being useful and having quick access to update features across the whole app. I created a set of customisable buttons to display text and\/or with a symbol.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I drew from Apple’s rich set of elements to create a realistic app that shows purpose as if it was running on a real iOS device.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

By using components and the features of components effectively, I have created an organised environment within Figma. For example, by using component variables I can easily change aspects from screen to screen, for example having one single component for all instances of ProgressBar, where all I need to do is change one single property and have the whole component update appropriately to match it’s surroundings.<\/p>\n\n\n\n

Animations<\/strong><\/p>\n\n\n\n

My animations really came to life this week.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\n

Creating these animations required bringing together skills I have previously gathered from a range of disciplines, such as object modelling, keyframe animation, lighting, texturing and project management<\/strong> (organising all elements, ensuring they are well named and grouped appropriately for animation). I was pleased with the outcome.<\/em><\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"

This week, I made considerable progress moving my app to a state where it is more produced and well-rounded. I bought my use of Area Inktrap Extended to the app, incorporating it in certain elements while also retaining the use of SF Pro for areas of body or information where necessary. At this stage, upon […]<\/p>\n","protected":false},"author":1,"featured_media":232,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,21],"tags":[23],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/222"}],"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=222"}],"version-history":[{"count":3,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/222\/revisions"}],"predecessor-version":[{"id":236,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/posts\/222\/revisions\/236"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/media\/232"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/media?parent=222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/categories?post=222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/kai-payne\/blog\/wp-json\/wp\/v2\/tags?post=222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}