Website Draft

Website Draft

This is the first draft of my website. In the parts where I will be putting photos or videos I have just put text boxes in order to know how big they'll be, I've also done that with the logo in to top right, as I haven't fully developed it yet, so I just left it as a circle for now in order to know where to put it. I have experimented with colours such as blue and green, blue and grey, however I went with blue and pink to symbolise the boy and girl in the video. I also took inspiration from the website analysis of Shawn Mendes' website and used the slanted feature.

I played around with fonts for the home page of the website and I decided to go with a white, san serif font (Lulo Clean) for the first name to draw attention, I also made the letter spacing bigger so that it covered a larger area. Then I chose a black serif font (Lobster) for the surname as I wanted it to look more fancy. I made both fonts bold in order for them to stand out more as its the first thing the audience will see when entering the home page. I also like the contrast between the black and white font. Although I like the fonts I'm not sure if I'll keep them, I might edit them in photoshop or create my own ones for the final website.

For the ticket boxes I experimented with different font colours, I couldn't choose between pink, blue or black, so I played around with it and ended up choosing pink for the original text, as I thought it would contrast the blue background and it would match the pink border around the box. I then made the text go black once it had been hovered over/clicked, I think this is helpful as it helps the audience see what they're clicking on/selecting. I chose the same Lulo Clean font to create consistency throughout the website.  

For the tour date section I experimented with different font effects. I tried to copy the 'tickets' box as my first try, so I copied the text box and enlarged it to fit the tour date in, however I wasn't too keen on this as it blended too much with the 'tickets' box. I then tried making the text black with a white shadow effect, then I tried it with black text with a pink shadow effect. The pink shadow made the text look very trippy and blurry looking, which made it hard to look at. I wasn't too sure on the white shadow so I played around with it and changed the text to white and put a black stroke around it. I ended up choosing the white text with the black stroke for my draft, however I'm still not 100% certain on it as it does make the page look very empty, I may change it for the final website. Once again I kept the font the same for consistency. 

For the newsletter section I chose an already existing design and modified it to fit my website. I changed the 'Get Updates' title to the same Lulo Clean font for consistency, however I did make the 'full name' and 'email' font slightly different so that the audience knew it was meant to be replaced with their details. I gave each text box a pink  shadow to match the previous pages of my website. I then changed the angle of it to 45 degrees in order for the text box's original black border to overlap the shadow and text box making it look 3D. I really like how this turned out and I think it's quite eye-catching.