Footers nowadays tend to have allot more in them than just © and the company’s name. Some have the main navigation repeated, links to social networking site, recent blog posts, contact forms, rss feeds and any number of other features. And then there are some that just keep it plain and simple and finish the site with a nice ending image or illustration.

——————————————————————————————————

Vimeo Footer

Vimeo Footer

——————————————————————————————————

Here Vimeo just continue the sites background illustration and place the basic © information at the bottom of the site.

——————————————————————————————————

B Candullo Footer

B Candullo Footer

——————————————————————————————————

This footer conveys great functional with the contact information, contact form and CV download, whilst still being unique and blending in with the whole sites slightly grungy style.

——————————————————————————————————

I Primi Dieci (the first ten) Footer

I Primi Dieci (the first ten) Footer

——————————————————————————————————

This last footer is very textual and the top very busy but it provides allot of very useful information split into the three different columns, news, latest comments and most read. By using stylized pictures you can easily know which column is which even if you can’t read Italian.

——————————————————————————————————

Reference One


Another solution to the abnormal proportions of the logo is to do what I did in the branding package and only show a portion of it for the site header. In this layout I have also changed it to be a central fixed width, single column layout so that there are no ‘awkward’ white spaces.

The footer has also been made more contained into the main central strip rather than beneath it.

I also tried to what it would look like if the site name were to be split up into two separate lines. This helps to make the ‘Flash Factory’ part stand out more over the less vital ‘the’. This could be even more emphasized by making the ‘the’ smaller and in a less significant colour to the rest of the title.


The header of a website is a very important aspect as it is often the first thing a visitor will see and will give them an instant first impression of the site, more likely than not deciding weather they want to stay or leave the site. It can relate to a magazine or book cover in a shop, if it looks good the customer/viewer will stay longer and read some of the content, if it looks bad they wont even pick it up no matter how good the inside is.

The three main features of your average header are; the sites/company’s name and/or logo and possible a tag line, an appropriate background image, and in most instances have the sites main navigation attached or integrated to it.

——————————————————————————————————

Beyond The Horizon

Beyond The Horizon Header

——————————————————————————————————

I like how this one blends into the main site design by fading out beneath the next element on the page. The curve of the globe also helps to bring the users eyes down to the content of the page.

——————————————————————————————————

Matt Hamm Header

Matt Hamm Header

——————————————————————————————————

This header keeps it very simple and I like how they just state what they do and that even for very cold colours the textual content makes it feel more welcoming. However they have failed to included their name so visitors will have to delve deeper into the site to find out who its about possibly making them leave because they can’t be bothered to look any further.

——————————————————————————————————

XHTML CSS Expert Header

XHTML CSS Expert Header

——————————————————————————————————

This header manages to frame the main content very well and although it is quite a busy header, as it has been place further back in the visual stack you dont get too distracted by it.

——————————————————————————————————

Reference One

Reference Two


Was in Lincoln the other day and had to get close to some swans for a photo scavenger hunt and have since decided that I quite like the images.

——————————————————————————————————

Swan One

Swan One

swan thirds one

Swan Thirds One

——————————————————————————————————

One of the reasons for this is that they all abide to the rule of thirds, rather than just simply centering the subject.

——————————————————————————————————

Swan Two

Swan Two

swan thirds two

Swan Thirds Two

——————————————————————————————————

Proponents of the technique claim that aligning a subject with these points creates more tension, energy and interest in the composition than simply centering the subject would

——————————————————————————————————

Swan Three

Swan Three

swan thirds three

Swan Thirds Three

——————————————————————————————————

This last one works particularly well as the neck is crisscrossing over this line multiple times.

——————————————————————————————————

Reference One


The Flash Factory Portfolio Site

What I do

I have a small freelance web development business, mainly focusing on Flash development providing product for clients of small businesses and stock sites.

What the site needs to do

This will be a portfolio site where I will be able to showcase my work to prospective clients, allow them to find out a bit more about who they might be about to hire and for clients to be able to contact me about work.

What site visitors want

Prospective clients want to be able to view and try out previous projects to be able to decide weather I am suitable  for their needs. They need to know where I am based if they want to meet me face to face and how to contact me for prices and quotes.

Preferred style and personality of website

I hope to create an easy to use professional but friendly looking website that shows good visual design, functionality and technical skills.

Website site map

The  pages that I would like on the site to help fulfill  the prospective clients are:-

a home page – this will welcome the user, have a brief ‘mission statement’ and direct them to their desired destination.

a portfolio page – this will allow the users to view previous projects.

an about page – a little bit more information about me and the work I have done, my qualifications and my location.

a contact page – clients can contact me for prices, quotes and for advice regarding prospective jobs.

a blog – just a bit of a side note to try and make some visitors repeatedly visit the site for updates and interesting articles.


Although this layout  idea uses alot of common practices for web designs, top navigation, fixed layout, logo top left, footer at the bottom and content in between, the positioning of the logo causes unessicary ‘white space’ beneith it where, due to its proportions, it doesnt line up with the main content box. This would mean that if I tried to put another menu down the left side I feel that it wouldnt quite look right. One way of trying to make this layout work with an extra side menu would be to put the logo and left menu bar ontop of a ‘ribbon’ which would go right from the top of the page to the bottom. This would work as it would seperate the sets of horizontal lines by placing them on different depth in the viewers eyes.


Logo’s

12Apr10

Logo’s are very important for company’s as they often provide the first impression of that company. If your logo looks unprofessional customers may decide to look for someone else.

Logo’s often try using images integrated with the company name or initials or or a representation of the of the name or initials, trying  to give the viewer as much information on how the company works, what they do, there ‘style’,  and how serious they are in as simple a way as possible.

——————————————————————————————————

shoked

shocked

castleprint

castleprint

bananasfilms

bananasfilms

——————————————————————————————————

A good logo is one where the viewer can look at it and can see what the company does, such as are they a photography or an accountant, can tell weather they are a creative company or an academic one, weather they provide a service or a product. Sometimes logo’s also need to be able to work as one colour prints, so logo’s that work well both in full colour and just black and white or grey scale are usually good.

——————————————————————————————————

soda and soda grey scale

soda and soda grey scale

studio eight and studio eight gray scale

studio eight and studio eight gray scale

——————————————————————————————————

Some logo’s only use images to portray the company whereas others use just stylized text and some a mixture of both.

——————————————————————————————————

upside down

upside down

aqua

aqua

jupiter

jupiter

——————————————————————————————————

reference one

reference two


I originally based my logo on the old Flash 8 logo. I liked it as it directly related to the type of work that I wanted to show on the site. By using the same ‘f’ as in the logo, but duplicated as to represent both the ‘Flash’   and the ‘Factory’ from the company name. The new version has a more simplified colour scheme and also works well in just grey scale. I also added on the ‘paint splat’ background as this helps to make it stand out on whatever background it is placed on.

I have managed to incorporate this version of the logo into a branding package I use on a flash stock site and now wish to spread that branding to my portfolio site.


animation ideas

30Mar10

For a few years now I have been experimenting with stop-motion animation and really like the feeling of satisfaction on completion of a random piece.

Some animations I have come across recently and want to explore some of the techniques used are the title sequence for Russel Howards Good News  a really interesting method of using digitally made images onto a stop-frame animation.

and

With both of these animations I like the use of cut out images for each of the frames and how they interact with their real world surroundings.


hello

12Mar10

A blog to help me explore ideas.

There are many ideas that flitter in and out of my head on a daily bases and hopefully by writing about and exploring them i will be able to develop them more successfully. I am a first year Web Design and Technology student but am also very interested in animation and other media technology areas.

A couple of projects that I wish to see develop over the course of this blog are a new portfolio website for my work (my current one has been ‘in development’ for nearly a year now but i never seem satisfied with my own work and have started again so many times I have lost count), and the other a short stop-motion animation.

So now on to some idea making.