Website Update

I've finally completed my portfolio site... however i use complete loosely as i know i will change aspects and add to it between now and the final deadline.

As can be seen with the above design i developed the concept from the one day project to form the main heading image and background. The heading sets a theme and colour style for the site with the white clouds on the two shades of blue which expand out. 

Initially a problem i had with this was that the white of the cloud and the edge of the rays cut out with little fade, as shown in the concept image below: 

As seen it blocks off on the edges. This was amended with a gradient fill and the blue background colour being overlayed all sides on all layers, and rubbed out below the cloud so not to be doubled up on the left side of the background. 

Once the background was finished i created the individual white background boxes in photoshop and placed them within the CSS for each individual division. Initially these were just plain white. However as i developed the site further i found that it was better to make them with the header text such as "Blog" for the blog section, which allowed use of the same gill sans text that i used in the header. 

I added link boxes on the lower right side of the home page and portfolio pages. 

I created all of them in twitter using renders of the blogger and twitter logo, and the mail app for iPhone logo.  These boxes provide a direct link to my twitter and blogger page, aswell as a direct mail link which activates any mail app on a computer. 

The idea for these boxes deveoped after seeing the partner boxes on YouTube where paid members of the site are able to use a box image to link to an external site. Example given below from the user channel Charlieissocoollike

When i saw these i thought of them as a simple way to link external sites rather than just putting a plain list link and flooding the home page with text.

Idea and Mock up

Over the past week i've found myself working on and off with various ideas for layouts. The ideas have evolved from what i came up with on the one day project to the the following:

I wanted to keep the same header style and background theme so worked more on the box layout, in this case i made it more curved, around edges with a straight cornered cut down the right side splitting two columns with a small gap. 

The main section is intended to hold the blog. The section next to it will hold an about me and all of the link contact boxes i intend to make within photoshop. 

Following the sketch up, and finally deciding that i was content with an idea i moved onto making a mock up in photoshop, which can be seen below:

I intend to now push on with this design and develop it into dreamweaver. The title for the header will be developed as a separate overlay, however i may play around with attaching it to the background. 

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

Concept

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.

Before i dive in with the posting...

..I suppose it would be wise to write up a quick introduction.

I've always found introductions a little hard to write, and not because i don't know what to put in them.. but more because i find them to be so generic and mirroring of the last one i wrote, fortunately this blog wont be all introductions, and i intend to creatively show various ideas that i have and show clearly how they have been influenced through other forms of media such as a website design or even a DVD case.

Anyway the introduction. My name is Tom Burns, and i have lived on the South Coast of England most of my life. I studied Law, English Lit, Geography and ICT at A level, and additionally studied critical thinking in my first year of college as an AS.

I've always held an interest within aspects of media. As i was younger my uncle would always show me pieces of his graphics work, and i would help out with various bits where possible, and whilst this didn't happen very much it gave me a good insight and built on an interest i already had with IT to send it in the direction of Web Design, which i find to be my current intended route as i study Interactive Media Production at Bournemouth University.

Over the past two years i have found interests in broader areas than just graphical design and photoshop as well, with these interests branching out to areas like online video, which i've always found to be interesting, and something much like photoshop where you can constantly learn new and amazing editing techniques that add more life to your work. However the most advanced effect i've probably produced on a video is a light-saber overlay... in terms of photoshop i'd like to think that i;ve gone further and played about more making various banners for random sites and backgrounds.

Over the next three years i hope to learn how to create and build websites aswell as grasping knowledge of other fields of media such a flash design, which i feel is something that you can tie in with many other areas, such as flash on sites, flash in videos, and flash as an individual. With this knowledge i hope to be able to become a web designer so when it comes down to focusing more on specific areas i can see myself following that route... but right now i have 3 years ahead of me and things change, so for all i know i might come out a budding flash designer who hates websites, though i hope not.