Wireframes and Mock-ups

Paper Wireframes

In order to design the layout of a website effectively we have looked into digital wireframes and grids that can give us a foundation for what the end result of what the website may look like. I learnt how to use symbols and certain iconography to represent more high-fidelity, late stage, designs.

I created three responsive wireframes for the freedom festival on both a mobile phone and a desktop to get full comprehension on what layout I’d like to choose for my final version. This also helped me see what design choices worked and which didn’t. The first wireframes I created were drawn free hand to allow for quick ideas to flow freely as they came to me as it was more efficient to ideate this way initially than to compose them digitally.

As this is development for a re-brand I wanted to make the website layout fairly different from how to the original Freedom Festival website was organised so I tried to include different elements into to make it more unique and fitting for the new visual identity. For my first design I placed the logo over the main header image as I believe that it looks the most cohesive design wise with logo centred down the middle in a large size which catches the viewers eye before they see the image in the background and take that in. I also decided to place the navigation bar below the logo which I don’t see happen as often in web design and thought would make the brand stand out a bit more and appear more unique, however in execution I don’t think this works as well due to when you hover over the navigation buttons it will open up more links to site pages which in turn may cover up content beneath it and become an accessibility issue.

In the second mock-up I switched around the layout completely with the logo being a lot smaller and instead of being centred on the page its arranged on the left. I think this looks interesting and could potentially catch the viewers eye, especially with the freedom text moving along the top of the page. In the end I decided against this design as it looked to much like a newspaper website and was much too busy looking for the visual identity of the brand that I wanted to set. I do like the idea of adding a map onto the website though and I think it could leave a lot of room to being graphically artistic and furthering Freedom Festivals image.

In the third wireframe I looked into interactive elements I could include on the page and one of the ideas was to do an animated tap-through gallery of all the different days at the festival and what exactly would be taking place at what time. This would not only increase engagement but also guide the audience into what days might be most interesting for them to attend. I also thought about making a quiz that’d be tailored to all the performances and workshops that happen at freedom festival and work out through viewer input what places/timings would be most suitable for their lifestyle as there is so much going on it could be overwhelming trying to find everything out just by reading through lots of information.

I also designed a quick mock-up for the responsive design on a mobile screen to see how it’d look on a smaller format with the images and text taking up more space.

Digital Version 1

Its important to create digitised mock-ups of the initial hand-drawn designs as you can more accurately see where exactly each asset will belong within strict guidelines and a less messy interface. Initially I wanted to create a more unique interface by placing the navigation bar on top of the main header image and below the logo but it appeared more busy than I had wanted it to so I later decided to keep it at the top of the page so the hierarchy of information will still be kept in order.

Final Web Version

For my final version I’ve tried to take inspiration from all of my previous prototypes combined so I can use all the elements that I think work the most cohesively and effectively. I wanted to elevate the final version from the first digital approach by limiting the amount of text that you initially see on the screen. I think for the website to have a positive user experience and maintain engagement its important that some of the text be kept lower down on the screen so the user isn’t instantly overwhelmed with a lot of small text to read. Instead of text I’ll try to design a dynamic layout including animations, moving images and big bold colours to give it a nice visual appeal before giving specific details. One of these elements being some large text that states how many tickets have been bought for the festival at the specific time with a live counter that updates every single time one is purchased. This can drive up excitement and interest and make people want to act faster before they may run out.

By keeping the navigation bar at the top it now leaves more room to include call-to-action buttons within the header which need to be made big and easy to find otherwise they wouldn’t be able to attend the festival at all.

Basic Prototype

After creating many basic wireframes that only outline the layout of the page I then went onto creating prototypes using the current freedom festival visual identity to see how it would look with colour and real images. My first design on the left was a quick draft to see how the elements would look on the page before I refined it slightly for the second design. In the next one I used cut-outs of various performers from their act to use as little stickers surrounding the body text.

I designed a quick mock-up of what the homepage for the freedom festival could potentially look like and used Adobe XD’s grid layout to to make sure each asset was assigned to its relevant column and that the alignment between them was even. I also took inspiration from websites that seemed to be more expressive with their placement as I think it makes for a more interesting viewing experience as the user. For future development I’ll increase the size of the main images to put emphasis on what happens as it’s usually easier to learn about an event visually rather than huge bodies of text.

I also looked at responsive design and formatted my website homepage to fit the layout that of a tablet and mobile size. This is important as many users will only see the website through their phone due to how widely used they are in comparison to a desktop in this generation. I tried to keep the same colours and iconography in the smaller versions so the brand look is cohesive but just shrunk the size down and included mobile-based buttons such as a burger menu and search button.

Final Prototype

Once I had thought about my own re-branding of the freedom festival I created a final prototype using the house style i have outlined within my visual identity.