{"id":541,"date":"2026-01-29T15:15:45","date_gmt":"2026-01-29T15:15:45","guid":{"rendered":"https:\/\/clark2025.hulldesign.co.uk\/?p=541"},"modified":"2026-05-01T14:56:14","modified_gmt":"2026-05-01T14:56:14","slug":"post-2-high-fidelity-mobile-app","status":"publish","type":"post","link":"https:\/\/clark2025.hulldesign.co.uk\/?p=541","title":{"rendered":"Post 2 High-Fidelity Mobile App"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull is-content-justification-center is-nowrap is-layout-flex wp-container-core-group-is-layout-23441af8 wp-block-group-is-layout-flex\">\n<iframe loading=\"lazy\" style=\"border: 1px solid rgba(0, 0, 0, 0.1);\" width=\"800\" height=\"450\" src=\"https:\/\/embed.figma.com\/proto\/Hk1dbTAzCwjamICuht4IVM\/Graphic-UI-UX-Pages?node-id=40-1186&#038;viewport=370%2C1745%2C0.4&#038;scaling=scale-down&#038;content-scaling=fixed&#038;starting-point-node-id=106%3A980&#038;page-id=40%3A940&#038;embed-host=share\" allowfullscreen><\/iframe>\n<\/div>\n\n\n\n<p>This is the prototype for my art gallery app. This prototype\u00a0 starts with a parallax scroll which switches from a simple photo to an enlarged photo with a gradient falling and the highlighted white logo from the brand guidelines. It then, after a couple of seconds, ends up at the home screen of the app.\u00a0<\/p>\n\n\n\n<p><strong>Paralax pages. <\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"1024\" src=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-1-1020x1024.png\" alt=\"\" class=\"wp-image-770\" srcset=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-1-1020x1024.png 1020w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-1-300x300.png 300w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-1-150x150.png 150w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-1-768x771.png 768w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-1-1024x1028.png 1024w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-1.png 1462w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/><\/figure>\n<\/div>\n\n\n<p>After the second delay, the app switches to the home page, which has a hover feature. When over each section of the page, they switch from a light pink to a light purple of different shades for each navigation point. When pressed, they take you to the described page.\u00a0<\/p>\n\n\n\n<p><strong>Home Page  + buttons <\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"654\" src=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-2-1024x654.png\" alt=\"\" class=\"wp-image-771\" srcset=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-2-1024x654.png 1024w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-2-300x192.png 300w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-2-768x491.png 768w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-2-1536x982.png 1536w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-2.png 1856w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<p><strong>Gallery<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"529\" height=\"1024\" src=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-3-529x1024.png\" alt=\"\" class=\"wp-image-772\" srcset=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-3-529x1024.png 529w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-3-155x300.png 155w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-3.png 766w\" sizes=\"auto, (max-width: 529px) 100vw, 529px\" \/><\/figure>\n<\/div>\n\n\n<p>The gallery features three film reels that all scroll up and down, allowing the user to see multiple photos that are not fully visible on opening the page. The three separate scrolls allow the page to look unique for each user based on how they scrolled through.\u00a0<\/p>\n\n\n\n<p><strong>Tickets<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"510\" height=\"1024\" src=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-4-510x1024.png\" alt=\"\" class=\"wp-image-773\" srcset=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-4-510x1024.png 510w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-4-149x300.png 149w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-4-768x1543.png 768w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-4-764x1536.png 764w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-4.png 832w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/figure>\n<\/div>\n\n\n<p>The ticket page features four events that are all described with the title. They all feature a picture of the same size on the left. The interactive part of this page is shown in the buttons. The QR code brings up an overlay that takes you to my previous photography work featuring some of the photos in the app. When pressed, the ticket button whites out and changes to a darker purple to simulate the person saving the event ticket for a later date.\u00a0<\/p>\n\n\n\n<p><strong>events<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"531\" height=\"1024\" src=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-5-531x1024.png\" alt=\"\" class=\"wp-image-775\" srcset=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-5-531x1024.png 531w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-5-156x300.png 156w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-5-768x1480.png 768w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-5-797x1536.png 797w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-5.png 876w\" sizes=\"auto, (max-width: 531px) 100vw, 531px\" \/><\/figure>\n<\/div>\n\n\n<p>This events page continues the film reel aesthetic that some of the pages have. This page features a scroll on the bottom of the page, allowing you to see the different events from the tickets page, serving as an informational page for the users to understand what is happening at the museum.<\/p>\n\n\n\n<p><strong>Map  <\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"546\" height=\"1024\" src=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-6-546x1024.png\" alt=\"\" class=\"wp-image-776\" srcset=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-6-546x1024.png 546w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-6-160x300.png 160w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-6-768x1441.png 768w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-6-819x1536.png 819w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/01\/image-6.png 890w\" sizes=\"auto, (max-width: 546px) 100vw, 546px\" \/><\/figure>\n<\/div>\n\n\n<p>Finally, the map page has an interactive map allowing the user to swipe through\u00a0 the map of Hull and lets them see where the museum is with a &#8221; where to find us &#8221; text and pin placed on the map. To add to the informational base of this map, it has a surrounding food list and bus routes that are around the museum.\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is the prototype for my art gallery app. This prototype\u00a0 starts with a parallax scroll which switches from a simple photo to an enlarged photo with a gradient falling and the highlighted white logo from the brand guidelines. It then, after a couple of seconds, ends up at the home screen of the app.\u00a0 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-541","post","type-post","status-publish","format-standard","hentry","category-design-portfolio"],"_links":{"self":[{"href":"https:\/\/clark2025.hulldesign.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/541","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clark2025.hulldesign.co.uk\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/clark2025.hulldesign.co.uk\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/clark2025.hulldesign.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clark2025.hulldesign.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=541"}],"version-history":[{"count":7,"href":"https:\/\/clark2025.hulldesign.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/541\/revisions"}],"predecessor-version":[{"id":778,"href":"https:\/\/clark2025.hulldesign.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/541\/revisions\/778"}],"wp:attachment":[{"href":"https:\/\/clark2025.hulldesign.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=541"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/clark2025.hulldesign.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=541"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/clark2025.hulldesign.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=541"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}