{"id":599,"date":"2026-02-12T16:00:29","date_gmt":"2026-02-12T16:00:29","guid":{"rendered":"https:\/\/clark2025.hulldesign.co.uk\/?p=599"},"modified":"2026-05-04T14:56:38","modified_gmt":"2026-05-04T14:56:38","slug":"post-four-adaptation-for-web","status":"publish","type":"post","link":"https:\/\/clark2025.hulldesign.co.uk\/?p=599","title":{"rendered":"Post Four : Adaptation for Web"},"content":{"rendered":"\n<p>A desktop version of my app served as a way for me to view the project in a different light I wanted in my initial design to look very very similar to the app just in a bigger format and I think I was able to achieve that.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"764\" height=\"543\" data-id=\"743\" src=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.16.png\" alt=\"\" class=\"wp-image-743\" srcset=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.16.png 764w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.16-300x213.png 300w\" sizes=\"auto, (max-width: 764px) 100vw, 764px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"764\" height=\"544\" data-id=\"746\" src=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.31.png\" alt=\"\" class=\"wp-image-746\" srcset=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.31.png 764w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.31-300x214.png 300w\" sizes=\"auto, (max-width: 764px) 100vw, 764px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"762\" height=\"544\" data-id=\"745\" src=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.40.png\" alt=\"\" class=\"wp-image-745\" srcset=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.40.png 762w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.40-300x214.png 300w\" sizes=\"auto, (max-width: 762px) 100vw, 762px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"767\" height=\"544\" data-id=\"747\" src=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.51.png\" alt=\"\" class=\"wp-image-747\" srcset=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.51.png 767w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.51-300x213.png 300w\" sizes=\"auto, (max-width: 767px) 100vw, 767px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"766\" height=\"545\" data-id=\"744\" src=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.59.png\" alt=\"\" class=\"wp-image-744\" srcset=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.59.png 766w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.59-300x213.png 300w\" sizes=\"auto, (max-width: 766px) 100vw, 766px\" \/><\/figure>\n<\/figure>\n\n\n\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\/design\/0ZMfm17rvoYyOxrdPZBNZV\/Prototyping-uI-7-pages?node-id=1-5&#038;embed-host=share\" allowfullscreen><\/iframe>\n<\/div>\n\n\n\n<p><strong><span style=\"text-decoration: underline;\"><em>Home<\/em><\/span><\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"762\" height=\"544\" src=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.40-1.png\" alt=\"\" class=\"wp-image-749\" srcset=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.40-1.png 762w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.40-1-300x214.png 300w\" sizes=\"auto, (max-width: 762px) 100vw, 762px\" \/><\/figure>\n<\/div>\n\n\n<p>For the Home Screen I wanted the same bento box menu but on a larger scale to do this properly in a way that fit the screen without having an uneven layout I had to remove some of the featured content  but I managed to balance it out well I think and lost no important things. <\/p>\n\n\n\n<p><strong><span style=\"text-decoration: underline;\"><em>Tickets<\/em><\/span><\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1015\" height=\"721\" src=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/image-22.png\" alt=\"\" class=\"wp-image-753\" srcset=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/image-22.png 1015w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/image-22-300x213.png 300w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/image-22-768x546.png 768w\" sizes=\"auto, (max-width: 1015px) 100vw, 1015px\" \/><\/figure>\n<\/div>\n\n\n<p>When making this ticket page wanted the tickets to be more then they are in the app so I added extra artist information swell as the time and stage they are playing on finally I added a pill style information tab with genre in I kept the icons the same with the option to send to a friend and liking them to save the ticket to buy later<\/p>\n\n\n\n<p><strong><span style=\"text-decoration: underline;\"><em>Calander<\/em><\/span><\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"767\" height=\"544\" src=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.51-1.png\" alt=\"\" class=\"wp-image-754\" srcset=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.51-1.png 767w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.51-1-300x213.png 300w\" sizes=\"auto, (max-width: 767px) 100vw, 767px\" \/><\/figure>\n<\/div>\n\n\n<p>When making the calander I did not want to have the same idea of the grid but I decided on having the parallax scrolling approach making the tickets be in a for of rail that the user would be able to scroll through with the chosen ticket gaining opacity and size and Arrows to skip through the tickets for that day. <\/p>\n\n\n\n<p><strong><span style=\"text-decoration: underline;\"><em>Map<\/em><\/span><\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"766\" height=\"545\" src=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.59-1.png\" alt=\"\" class=\"wp-image-755\" srcset=\"https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.59-1.png 766w, https:\/\/clark2025.hulldesign.co.uk\/wp-content\/uploads\/2026\/02\/Screenshot-2026-04-30-at-20.18.59-1-300x213.png 300w\" sizes=\"auto, (max-width: 766px) 100vw, 766px\" \/><\/figure>\n<\/div>\n\n\n<p>The map when switching to desktop felt a little empty so I resized it and stretched it out to feel more like a real festival layout once finished with that I decided that I wanted to have some extra information having each icon with explanations on what they represent and then a separate bigger icon with a prompt to click the icon to filter to the map they want to see <\/p>\n","protected":false},"excerpt":{"rendered":"<p>A desktop version of my app served as a way for me to view the project in a different light I wanted in my initial design to look very very similar to the app just in a bigger format and I think I was able to achieve that. Home For the Home Screen I wanted [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-599","post","type-post","status-publish","format-standard","hentry","category-posts-for-prototyping-user-interfaces"],"_links":{"self":[{"href":"https:\/\/clark2025.hulldesign.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/599","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=599"}],"version-history":[{"count":7,"href":"https:\/\/clark2025.hulldesign.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/599\/revisions"}],"predecessor-version":[{"id":812,"href":"https:\/\/clark2025.hulldesign.co.uk\/index.php?rest_route=\/wp\/v2\/posts\/599\/revisions\/812"}],"wp:attachment":[{"href":"https:\/\/clark2025.hulldesign.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=599"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/clark2025.hulldesign.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=599"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/clark2025.hulldesign.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}