This post will be following on from Task 3, the next phase was to create a tablet and website version of the King Gizzard and the Lizard Wizard (KGLW) app.
My initial idea was to adapt the app User Interface (UI) to have a responsive layout when scaled up to tablet size. However, I struggled to understand various tutorials and instructions on completing this and decided the best way for me to move forward would be to create the tablet and website versions manually (please find the link to these here).
For the tablet UI, it was a case of adjusting the app into a bigger screen size and ensuring the components still lead to the correct pages and worked in the same way. However, the desktop website required a different layout. When carrying out my original research I mainly focused on desktop websites, meaning I had already gathered plenty of information of what features bands websites include, along with the layout of these sites.
The first step I took was to create a logo to include on the website UI. The logo was created using Shlop typeface and the red and black from the style guideline colour palette, this had a gore/horror vibe which matched the typeface used within the app. I then included yellow stars in the background to represent the yellow stars on a wizard’s cloak but expanded the stars points to make them look sharp and blade like to match the gothic feel of the typography and match the heavy metal rock genre of KGLW. This logo was placed in the top left side of the desktop screen and aligned with the layout grid’s margin.
The next step was to adapt the navigation bar and pages from the app and tablet and create call to actions that are more suited to a desktop website. To do this I took the classic looking call to actions from the ‘Tix’ page of the app and made them wider, I then duplicated each button and removed the drop shadow from the top one. Next, a component set was created for each one and the action to show drop shadow when hovering was added. The menu options without drop shadows were then included in a separate component and this was the navigation bar for the website. The drop shadows are included when hovering to give a visual cue to users and help improve usability of the UI.
Lastly, the contents of the app were brought across to the desktop version and scaled to suit the screen size.
References
KGLW Net (2024) South America tour. Available online: https://kglw.net/tour/53 [Accessed 10/5/2024].
King Gizzard and the Lizard Wizard (2024) Home page. Available online: https://kinggizzardandthelizardwizard.com/ [Accessed 10/5/2024].
Spin (2022) U.S. residency tour. Available online: https://www.spin.com/2022/11/king-gizzard-and-the-lizard-wizard-2023-us-tour/ [Accessed 10/5/2024].
Imagery
Lasky, B. (2019) Photo gallery: King gizzard & the lizard wizard, ORB, stonefield live in New Haven. Available online: https://vanyaland.com/2019/08/29/photo-gallery-king-gizzard-the-lizard-wizard-orb-stonefield-live-in-new-haven/8/ [Accessed 10/5/2024].
Parker, J. (2019) King gizzard & the lizard wizard in utrecht: Two nights of ultimate chaos with the tightest live band in the world. Available online: https://www.allthingsloud.com/king-gizzard-lizard-wizard-utrecht-two-nights-ultimate-chaos-tightest-live-band-world/ [Accessed 10/5/2024].
P(doom) Records (2024) King gizzard and the lizard wizard merchandise. Available online: https://eu.pdoomrecords.com/collections/all [Accessed 10/5/2024].
Pitchfork (2022) King Gizzard & the Lizard Wizard Announce 2023 Tour Dates and Concert Film Screenings. Available online: https://pitchfork.com/news/king-gizzard-and-the-lizard-wizard-announce-2023-tour-dates-and-concert-film-screenings/ [Accessed 10/5/2024].
Inspiration
Squid Band (2024) Tour dates. Available online: https://www.squidband.uk/tour [Accessed 10/5/2024].