Category: UI/UX

Adobe XD link to web design –

https://xd.adobe.com/view/871099b8-6faa-4d19-8f95-37a0f094c7d4-d243/

The web design consists of 12 artboards, showing each screen and their purposes. The website is designed to purchase tickets, see updates, view the line-up, and access your profile. The banner at the top of each screen is the menu, having the menu bannered across the screen makes it easily accessible and navigable as it will be available on every screen. After researching into other festival websites, the menu categories were chosen. Websites such as Leeds Festival (Leeds Festival Menu, n.d.) and Download Festival (Download Festival Menu, n.d.) show similar categories to the Rainbow Rave one, the idea to add an updates page came from the ‘News’ categories of the Leeds Festival menu and the Download Festival menu.

On the left-hand side of each screen is the Rainbow Rave logo, a countdown to the event and social media links have been incorporated into the logo, this reduces negative space within each page. The countdown also increases the user’s excitement but can also cause a sense of urgency to purchase tickets for the event.

Smaller details have been added throughout the design to add to the level of professionalism that the design creates. One the first page you can see the cookies pop-up, these pop-ups can be seen on almost every website you use so including these adds a touch of realism to the design. Other smaller details that you may find are the terms and condition tick box on the personal details page of the ticket purchasing process, the option to find out why we ask for a security code and the option to request a new security code. These are all things you would find within websites that include the purchasing of an item.

Illustrations of people have been added throughout the website, this is to reduce the negative space. More information could have been added where there was negative space, but the idea was to keep the pages minimal, too much text could overwhelm or bore the user whereas the illustrations keep it looking minimal but also adds some youthfulness to the design.

The website design is accessible to all desktop and tablet screen sizes, blocks of text have been used so they can be easily moved when dealing with certain screen sizes but still look perfectly fine and still easily readable. Because of the use of negative space within the design, nothing will be affected when using smaller screen sizes because the negative small will decrease but the blocks of text will still be perfectly in tact.

Download Festival Menu. (n.d.) Download Festival. Available online: https://downloadfestival.co.uk/ [Accessed 22 May 2022].

Leeds Festival Menu. (n.d.) Leeds Festival. Available online: https://www.leedsfestival.com/ [Accessed 22 May 2022].

Adobe XD link for app design –

https://xd.adobe.com/view/ee92371e-358b-48e0-b20c-e9041c4352fc-bbc1/

The companion app for the chosen festival ‘Rainbow Rave has many similarities to the web design but is focused more on the on-site purposes. Like the website design, the user will be able to purchase tickets, view the line-up, check for updates and access information about the event. The call-to-action will be the same process, but the app offers the storage of the digital ticket and the option to add it to the smartphone’s wallet, making it environmentally friendly and the entry process will be a lot quicker. The app design is based around Apple’s IOS, so the option is there to ‘add to Apple Wallet’.

Another unique option that the companion app will offer is the chance to order food and drink while at the venue from the food stalls and bar tents, the user will then be notified to collect their order when it’s ready. This decreases queues and allows the festival goer to spend as much time enjoying the event and not worrying about a queuing system.

The user will also be offered to set reminders for when their favourite act is about to perform. There is also an option to alert on-site security or a medical professional of the user’s location within the venue for when the user seeks medical attention or is feeling uncomfortable because the main goal of the festival is to be a safe space for the LGBTQIA community.

Moving onto the design of the companion app, the flow of the design has been kept similar between each screen, all screens but the loading screen will include the same background image, the same primary colours, and the same primary fonts, this allows the design to remain simple and increases the memorabilia and navigation of the app.

Blenny Black has been used for screen titles and subheadings throughout the artboards, but underlying colours have also been included to add a playful 3D effect to the titles. This can also be seen for the line-up to make it look more exciting and inviting. An icon plug-in has been used for the menu to show what that category will be about; this is to include those who are more visual learners and again increases memorabilia.

The start-up screen has been evolved into an animation of the disco ball rising and an LGBTQIA flag rolling down, the idea behind this was to again, create some excitement but to also keep the user occupied while the app is loading, plain loading screens may create more risk of the user leaving and not purchasing any tickets where as this colourful, fun animated screen will make the user want to join the party even more.

The initial idea behind the Rainbow Rave design plan was to include the distinctive LGBTQIA flag colours which are the colours of the rainbow. After doing some research into other LGBTQIA themed websites, the designs are very minimal because of the rainbows featuring throughout. Most of these websites, shown on the mood board diagram above, have a plain white or dark coloured background with rainbows appearing through.

After doing some research it is said that neutral colours have the best effect when designing with the colours of the rainbow. ‘You can achieve some amazing visual effects by combining neutral colors with rainbow-influenced colors. The rainbow colors balance the neutral colors providing a magical touch to the design. Graphic designers tend to use the effect in dark designs to give it a special hypnotic charm.’ (Jansen, 2021). Below are some designs testing which backgrounds work best with rainbows.

The final decision was to use an original image as the background and use the colour palette from that photo for the app design, shown below there is the original photo and samples of those colours taken from the photo.

After looking into this colour combination, it was decided that the design’s colour palette would lean more towards the complimentary colours of the colour wheel, as seen below the yellow toned greens compliment the mauve tones and the greens compliment the pink toned mauves. This was the final colour palette chosen for the app and web design.

Another goal for the initial design was to include original illustrations. A lot of inspiration came from the Parklife web design with chaotic illustrations, the visual designs bring a lot of excitement to the customers and shows there will be a lot happening just from the first page. Sketched illustrations also add some personality to the design and can create a closer relationship with the stakeholders.

The illustration on the left is a rejected design for the Rainbow Rave logo, there is no relationship between the colours, the design is quite complicated and there seems to be too much happening for it to become a logo. The design in the centre was a completely different concept, it was decided to combine both music with LGBTQIA aspects, thus turning it into a conceptual design. The slogan ‘Girls, Gays and They’s’ has been added back to the design, this is a simple, memorable design. The logo on the left is another variation for the middle concept, it was decided to only include the top half of the woman in black clothing and brightly rainbow coloured hair. The text has been removed, simplifying the design, this creates less chaos with the chosen colour palette and background image.

Flamboyant Navigational Aids. (n.d.) DesignMantic. Available online: https://www.designmantic.com/blog/wp-content/uploads/2016/09/Flamboyant-Navigational-aids.jpg [Accessed 21 May 2022].

Jansen, M. (2021) 14 Ways to Use the 7 Colors of the Rainbow In Graphic Design. DesignBro. Available online: https://designbro.com/blog/inspiration/7-colors-of-rainbow-graphic-design/ [Accessed 20 May 2022].

Parklife. (2019). Parklife 2019. [online] Available at: https://parklife.uk.com/ [Accessed 2 Mar. 2022].

Pride at Progress. (n.d.) Progress. Available online: https://www.progress.com/blogs/pride-progress-promoting-inclusivity-june-beyond [Accessed 21 May 2022].

Pride in Hull. (n.d.) Pride in Hull. Available online: https://prideinhull.co.uk/ [Accessed 21 May 2022].

Above is a reminder of the first few steps of the design development towards the Rainbow Rave App and Website, these can be seen in the Development Research Blog. These are low-fidelity and mid-fidelity prototype of the call-to action process, from there the progress has developed and increased.

The two images above show further development progress for the app design, as you can see the prototypes now include the entire user interface for the final app design. The digital mind map has been coloured co-ordinated to show the categories and sub-categories. With the mind-map planning the artboards could be progressed further but smaller details like the logo, colour palette and the use of fonts needed to be explored further. As you can see above there is a logo for Rainbow Rave, this was the very first logo developed but it didn’t feel complete, so more logos were designed and evolved to create the ones you see in post 3.

Once the logo was developed, the design was starting to come together. The idea was to use an original image from a previous festival and decipher the colour palette from that image which resulted in the purple and green tones you see. It was then decided to use text bubbles as informative blocks of text, this was to attract the younger generation who are more likely to use technology and send text messages between friends. The idea of the design was to feel like a conversation with a friend, so slang has been used throughout the designs such as ‘yaaaas queen’ which is a phrase that can be heard within the LGBTQIA community. The goal was to make the user feel as comfortable as possible while exploring the app or website. Keeping the user calm while viewing the app or website increases the chances of ticket purchasing.

This is the style guide for rainbow rave, showing the colours, typography and photography used. Style guides are used to show designers what certain aspects are used within company’s web/app designs. The style guide also needs to be designed and look professional for the company’s benefit.

The first page of the style guide shows the logo variations and the colours used throughout the app and web design. As you can see the logo can be used in three forms, the first and second being a black and white version of the finalised logo and the third is a separate design with no text included. The idea behind using a logo with no text is to make it easier for the memorabilia of the company. ‘Your logo is important to your business because it communicates ownership, quality, and values. It’s imprinted on your products, your business card, website, social media, and most importantly, in the minds of your clients.’ (Why A Good Logo Is Important For Your Small Business › Design Powers, n.d.). On the bottom half of the first page, it shows the primary and secondary colours used within the app and web design. The primary colours are the main, most-used colours throughout the design, for example, the headings, sub-headings, borders etc. The secondary colours are the smaller fragments of that colour used, in this concept it’s the rainbow colours which can be seen on the loading screen, the ticket confirmation screen and the logo.

Page 2 of the style guide takes you through the typography and photography used in the designs. Like the colours, the app and web have primary and secondary fonts used. The most-used fonts (primary) are again, used for headings and sub-headings but also informative text. The secondary fonts can be used for pop-ups, drop-down options, and less informative text. The photography portion of the page shows the original images used in the designs; the left image can be seen as the background design.

The third and final page shows illustrative designs that have been used, the logo can again be seen within this page as well a rejected logo design, small decorative illustrations have also been added to show that they do make a difference in visual design. The bottom section of this page includes pre-made human illustrations called ‘Humaaans’ by Pablo Stanley, this is a plug-in feature for Adobe XD. The pre-made illustrations have been altered slightly to match the theme of the colour palette and to show certain personas. Using these original and pre-made illustrations add personality to the design, it can also increase attention to the younger generation because it is visually pleasing to view.

Why A Good Logo Is Important For Your Small Business › Design Powers. (n.d.) Design Powers. Available online: https://www.designpowers.com/blog/why-a-good-logo-is-important-for-your-small-business [Accessed 21 May 2022].