Blog Design

The initial design of the blog used a simple white background with a standard Times New Roman font. Without any design, shapes colour or intricate style, the layout of the site seemed amateur.

Colour Scheme

Wanting to get a better idea of colour scheme, and to gain a professional outlook on design, we contacted blog designer Marianne Dey through twitter. I was interested in her style of design, and after visiting her website, I was able to contact her with the appropriate questions. My main concern was colour, and I wanted to understand how colour can contribute to the impact of a blog page. She was able to send me her E-Book, which explained the process of colour selection. 

I leant that most colour schemes have two parts. The complimentary colour and the accent colour. A complimentary colour sits beside your main colour on the colour wheel. For example blue and purple. Both colours share similar hues but work harmoniously to create a mood. Blues, Greens, Purples and greys will have a serious and colder tone, whilst oranges, pinks reds and whites would have a positive impact. An accent colour sits opposite the main colour on a colour wheel. Because it shares no pigments with the main colour, it creates a contrast and makes the design stand out. 

Colour Planning

*NOTE* The image has been saved with brown tones, however these are actually shades of grey in photoshop

Using photoshop, I was able to create a colour palette so I could see the different hues and how they work together.

Row 1 uses the shade of black, and slowly fades out to white. I wanted to experiment with tones because the shadows could give a 3D effect to the page. Even though I like this idea, I think that the 

colours  aren't interesting enough to hold the attention of a younger demographic.

Row 2 This is one of my favourite rows. It uses dark colours which emphasises the dark theme to our title sequence and production company. The light blue/green colour allows me to highlight important aspects of the page, and the off white can be used for text and body. 

Row 3 I wanted to follow this idea of using opposite colours. I used purple and greens which emphasises the design. A problem with this colour palette is that it uses bright and vibrant hues, which would be a negative contrast against the dark theme of the production logo and imagery. 

Header Draft

This is the first attempt at designing the header. I used the 2nd row of the colour theme to create this header. Using blacks for the font, shadowing around the template and to outline the font. This works well because it allows the header to stand out. However the shadow effect isn't smooth, which makes it look messy. Wanting to incorporate the production company into the title, a redraft would be necessary. After talking to my group, we decided that a second draft of the header would be best.

Second Draft

This is our second draft, which used the logo style of our production company as a banner. By doing this, we were able to connect both aspects of our work together which creates an element of unity between our practical work and our blogging work. We set this is our header and changed the surrounding colours of the blog to match this. this was our outcome:

One problem with the dark colour theme was that the text became difficult to read. We set a poll on the website SurveyMonkey asking the public whether they prefer light tones or dark tones on a website. Our results showed that 87% of the public prefer light backgrounds with darker text appose to dark backgrounds beneath light writing. Therefore in our final blog design, I have decided to revert the colours so that they were easier to view.

Final Blog Design

This is our final blog design. It uses light colours giving a clean and minimal look. We used black to accentuate text and font style, and harmonious shades of blue as our accent. Overall, I think that this design makes the blog accessable to a visitor, and with the scribbled graphics and vivid colours, our branding stands out enough to draw in the attention of the reader. One problem I had when inserting the header was that it was placed in to the left rather than centred. To change this, I used a simple piece of CSS coding which I then implanted into the coding of the website so that the computer would automatically reset the header into the middle of the page.

I also used some CSS that I then applied to the general template so that the borders and shadows that are formatted around the picture are presented seamlessly onto the page.