Monday, 19 October 2009

One Day Project

The task i have been given involves designing a concept and home page design for my portfolio page within 24 hours. In the process of designing this i am required to show at least one website and one form of media that has influenced my design.

Web Influence
The layout on vimeo is a simple one and through it's simplicity i think it is more effective. The general concept of the homepage is a simple blue background with white clouds which is seen matching throughout with the white back banner linking in well with the sky concept as shown in the image below:

This has influenced my idea for a concept design that will take the form of the graphic that i would place within the upper area of the web page. In being placed here i feel it allows for me to structure and build down with a general matching theme and design, i also feel happier with this idea as i was already thinking of going with a cloud theme after playing around with a new brush set i downloaded on Friday which has a variety of cartoon designed clouds.

Another aspect of the design that i like on this site that has had an influence on my ideas are the rays that come out of the sun.

I can see myself using a fan brush within photoshop to create a fan that extends from the top corner behind the graphic to cover the whole web page with a two tone shade of blue. I think this would look good as it would cover the whole page to the point required and could be faded into a single colour such as white at the outside edges where the site may not fit within some screens fully. This would also add to the graphic as it would provide something coming from under the cloud i intend to use as the concept in the corner... this would be like the sun is obscured, yet give a better effect as the rays / fan sections are tones of blue.

I think the solid white above the background is good as it draws attention away from the background and to the actual content of the website, which in this case takes on a smooth layout using many curves rather than a dead box shape which makes it more appealing to the eye. This is another thing i will consider when designing the web layout itself from the concept.

Furthermore the site makes good use of buttons providing smooth buttons next to one another with a short piece of text describing them or what they are showing, making people want to click "Learn more".

This has given me the idea to make rounded buttons to go nearer the bottom of the home page for external links such as twitter, the blog itself, and perhaps an email button.

Media Influence


The concept takes the form of a graphic i intend to place in the upper left corner of my web page. This will expand to cover part of the header area allowing it to mix in with the site.. The rays of colour that come out would ideally be extended to later fade out within the areas of the web page that may not necessarilly fit on a standard screen allowing for a more neutral colour.

I decided to go with a cloud following the influence of various cloud brushes i have been playing with in photoshop, and this further works as i feel it provides the initial colour contrast of blue to white which i hope to further show through my web page with blue backgrounds and white foregrounds for the content boxes.

On the actual site this concept would be taken to cover the whole background as shown in the above sketch. 
The boxes with a T, envelope and B in would link to external sites and means of contact such as twitter, email and blog. These would follow a box button sort of style with smoother rounded edges that matches the theme of the concept with the clouds being smooth and curved like the boxes. 

Building on this i looked at various font types that could suit the header section with the web page title and initial links that are seen on each page. 

White on blue tends to work well and keeps the text standing out. Curved texts are more appealing and something i think would match more with the curve of the cloud, however i don't want to go too cartoony so may go for a mix of the fonts on the left with those on the right to form a neater font that stands out, looks original and has curves that suit the general concept design.

1 comment: