This post will be exploring the functionality of the User Interface (UI) of the King Gizzard and the Lizard Wizard (KGLW) app created using Figma.
To start the high fidelity prototype (linked here) I duplicated the wireframe pages created in the previous post. I then created style guideline on Figma (using the mood board previously created) to ensure that the correct typography, colour, icons and grid layout were used on each page.
For the main typeface I wanted to bring in a horror aesthetic to represent the heavy metal rock songs by KGLW, so used ‘Creepster’. The body typeface is a tidy sans serif font to give good readability for the user. The colour palette is from the mood board, the bright psychedelic colours and darker moody colours signifies again the heavy metal tracks by KGLW but also the psychedelic rock that they are more commonly known for.
Once the style guideline was in place it was time to adapt the wireframes to become high fidelity functional UI’s. I started by creating a functioning navigation bar by using components and duplicating them onto each page of the application, I then ‘Fixed’ them in place to ensure they stay in place when scrolling occurs.
I then incorporated the correct typography and colour schemes on to each page. The next step was to add cards, information and images into the pages, this was done using various methods. The bootlegger page is a simple vertical scroll, the previous tours page incorporates horizontal scrolls with components, the upcoming shows includes a vertical scroll with a tick box component and the releases page includes a bouncy accordion. Each page also includes a search bar component that opens out and includes a question to prompt the user and an option to open the account information page which includes accessibility options and a toggle switch for notifications.
When the wording included was not made up using the KGLW terminology found during the research phase, the wording was taken from their current website, which is referenced below.
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].