Website Development

I decided for the website design I would create a mock up using my chosen software of illustrator, I chose illustrator as I will be using vectored objects as the background and the logo was also still a vector so I thought it was best to do it in illustrator.
I started off with a document 1200 pixils wide as that is the right measurements for web design. I decided I would just create it and then make it larger with the “edit artboards” option and then I can change it according to how much space I need.

I started of designing the header..

I used the same accent pattern in the background and used essentially the same top design from the posters as I knew this included everyting I needed. I decided to make the website navigable I would include the buttons underneath and I made them match the logo with the same bounding box to make them clearly divided and show which one is which.

I beleieved the 3 buttons would be clear enough and included everything that the festival goers would need to know.

Screen Shot 2017-05-31 at 12.58.38.png
I was going to do it in the typeface that I used in the main text of the logo but actaully thought it did not look clean or easy on the eye at all, I thought it looked quite complex so I decided that it would be better to use the more simple typeface I had used and use the “Dry Brush” typeface as an accent font only.

Screen Shot 2017-05-31 at 12.49.54.png

I then knew I wanted the date and venue to be listed as one of the first respresentations as a conclusion result of my research into website designs.

At first I thought I would just have the same background but actually felt this did not work as well as I would have liked – It did just make it look like a stationary poster rathert than a website design.

Screen Shot 2017-05-31 at 13.07.50.png
I then devided the geometric pattern off and had a divide like I did with the tickets for the event.
Screen Shot 2017-05-31 at 13.04.32.png

I then decided I would do this in the same simple typeface and really liked the effect it gave, I think having the devision gave it more of a dynamic feel, I think it works nicely although I thought I might give it a shattered effect by having some of the fragments to give it almost a paralax moving feel rather than looking so static, I really did not like it at all. I thought it just didnt look as clean so I gave up on this idea.

Screen Shot 2017-05-31 at 13.41.22.png

I then decided I would continue the line up with the same effect, All the important large parts of info will be on the geometric background and then just have the normal basic parts of information on the white, I think this then breaks up the pages on the menu as seperate parts.

Screen Shot 2017-05-31 at 13.50.57.png

I laid out the line up in a paragraph as I decided that the stages and information would be on posters on the day and also would ussually be in a flyer or leaflet or on the app on the day which is not something I would be creating as this would be for the event itself.

Screen Shot 2017-05-31 at 14.11.32.png

I stated this in this in the download bar for the on the day app, I thought this would be a good idea and this is how I would develop the project, I would create an app that would navigate you around the website although I would not have time to do that this project I feel it is always interesting to have an idea of how the project could be developed the buttons would take you to your chosen app store.

Screen Shot 2017-05-31 at 14.18.08.png
I decided to make the site more interesting than just lots of type by rather than just listing the ticket sellers I opted for the logos which link to the websites they are part of so that people can link out to the box offices and it shows the ones that are trusted.
To insure that the logos where high quality and worked well I found good quality images of the box office logos and image traced them to the white so that they could be used on the background.

Screen Shot 2017-05-31 at 14.31.28.png

The last tab was travel information and also creating the footer of the page – I wanted the travel info to be very clear so I did this by creating titles of each way to travel and then used the triangles used in other designs to ensure that they were bullet-pointed and clear.

I then decided when people got to the bottom of the page they would be able to go back up to things they needed to look at.

I then exported the flat design  (final shown below) as a JPEG and placed it into INVISION APP.

Website Flat Design.jpg

I placed it into invision and then went into build mode. I added hotspots around the buttons at the top and placed anchor points in the sections of the page.
Screen Shot 2017-05-31 at 14.39.38.png

Screen Shot 2017-05-31 at 14.39.47.png

I did the same with the footer and placed hotspots on the buttons to go to different parts of the part – I also linked the Live Nation and the NMDESIGN credits to link to external URL’s to my website and also to Live Nations website.
Screen Shot 2017-05-31 at 14.49.55Screen Shot 2017-05-31 at 14.39.47Screen Shot 2017-05-31 at 14.49.59
I linked hotspots to all of the webpages for the boxoffices to external URL’s aswell.

To view the webpage and text the links please go to

and login with details below –

Password – TimBones

I am really happy with the mockup of the website and think it is effective and works well with the rest of the ephemera. I beleive I have managed to keep it clean and simple whilst included all the needed information.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s