Electro/Retro Music Festival/Benefit Website

  • This project was developed over several exploratory and refinement phases. The primary brief required a website for a fictional music festival or show for a fictional organization whose primary mission is to stop elephant poaching and end illegal ivory trade. The style of music, band details, and overall style and communicative tone was completely open to my own choice and interpretation.
    The first step was to create three different mood board options highlighting three different styles. I chose to explore styles based on the festival music types that I settled upon: '80s Retrowave/Electronica, '70s Old School British Punk, and Traditional Americana Bluegrass & Country.
  • Three moodboards exploring '80s style electronic music, '70s British Punk, and Americana Bluegrass/Country styles.
  • After designing and refining each mood board over the course of several revisions (based on peer feedback), I ended up choosing the '80s style Electronic concept to develop further. The bright RGB-based color palette, space textures, fun photography treatments and very typical (but appropriate) typeface styles (Benguiat and Avant Garde), I thought it would be the most challenging and visually interesting concept to work with.
    First, wireframes for the site would need to be worked up. I wanted the site to remain as consistent as possible when moving from page to page and only the absolutely necessary elements to change.
  • Website Wireframes outline the layout for Home, About, Artists, Information, and Ticket Purchase pages.
  • Once the wireframes were complete and finalized (again, after a few revisions), it was time to use the mood board and the prior design decisions made to comp up the website. 
    As previously stated, I wanted to keep the site looking as consistent as possible across all pages and only allow the necessary elements of the page to shift in and out from view. I decided to try an unusual concept in which the primary UI elements such as the navigation header and footer, remain on the page at all times. The user could progress to each page EITHER by clicking the appropriate menu title OR by simply scrolling with their mouse. This idea offers the consistency and containment of a single, "non-scrollable" page, but also allows a scrolling type of function OR traditional page to page navigation options. Below is a quick motion-mockup that essentially depicts a user scrolling "down" the page, and then in the end, clicking on the top center logo to return straight back to the home page (without scrolling). It is a concept that would be interesting to develop and code, especially when facing the challenges of responsiveness in the scale and layout.
  • Animated mockup showing page progression through scrolling or navigation clicking.
  • HOME page comp.
  • ABOUT page comp.
  • ARTISTS page comp.
  • INFO page comp.
  • TICKETS page comp.
  • REFERENCES (photo credits)
    Allen, K. (2016). Making music, Ulster American Folk Park [Online Image]. Retrieved from http://www.geograph.ie/photo/4902826

    Andreas (2013). Elephant African Bush Elephant [Online Image]. Retrieved from https://pixabay.com/en/elephant-african-bush-elephant-114543/

    Blender, B. (2016). Crowd fans live concert show [Online Image]. Retrieved from https://pixabay.com/en/crowd-fans-live-concert-show-1531426/

    Dalledonne, D. (2016). Jean Michel Jarre live @ Sonar Electronica Tour [Online Image]. Retrieved from https://www.flickr.com/photos/ddalledo/27666072682

    Dickson, I. (1977). Ramones by Ian Dickson 1977 [Online Image]. Retrieved from https://en.wikipedia.org/wiki/Punk_fashion#/media/File:Ramones_by_ian_dickson_1977.jpg

    FaceMePLS (2008). Anarchy at Camden Market [Online Image]. Retrieved from https://www.flickr.com/photos/faceme/3056098551/sizes/o/

    Gutterth/Violitionist. (2012). Spooky folk - “Resurrect” [Online Image]. Retrieved from https://i.ytimg.com/vi/S3xa8zmdzvU/maxresdefault.jpg

    Johnson, S. (2009). Elephants beach walk [Online Image]. Retrieved from https://www.flickr.com/photos/rabanito/3416817267

    Sharp, C. (2009). Elephant mating ritual [Online Image]. Retrieved from https://en.wikipedia.org/wiki/African_elephant#/media/File:Elephant_mating_ritual_4.jpg

    Skitterphoto. (2015). Synthesizer instrument music sound [Online Image]. Retrieved from https://pixabay.com/en/synthesizer-instrument-music-sound-908298/

    Sponchia, C. (2015). Elephant ivory animals Africa [Online Image]. Retrieved from https://pixabay.com/en/elephant-ivory-animals-africa-970456/

    Total Chaos Punx [Online image]. (2001). Retrieved from https://en.wikipedia.org/wiki/Punk_fashion#/media/File:Total_Chaos_Punx.jpg

    Unsplash. (2015). DJ music headphones concert show [Online Image]. Retrieved from https://pixabay.com/en/dj-music-headphones-concert-show-690986/

    Unsplash. (2016). Elephant wildlife mud bath enjoy [Online Image]. Retrieved from https://pixabay.com/en/elephant-wildlife-mud-bath-enjoy-1209037/

    Vase, F. (2009). Elephant, Etosha National Park, Namibia [Online Image]. Retrieved from https://www.flickr.com/photos/42244964@N03/3923741329
     
  • 5.2.1 Mastery Learning Project: Design a Website, Parts 1 & 2
    Full Sail University MFA, Media Design Coursework