Rachael's Blog

Portfolio Site Design – The Flash Factory – Final Layout and Colour Design

rachael bran — Wed, 14 Apr 2010 21:05:39 +0000

I like the final design for my portfolio site as it has all the features that I wanted included in the design and it has kept with the same style as the branding package.

I think the icons I have created for the footer make it easy for viewers to identify what each section of the footer is for.

I think the colour scheme I have used works well with the black keeping the site looking modern, clean and professional, but by making the main content section white, keeps the readability high. I have only used one extra colour, red, to help highlight elements on the page keeping the colour scheme limited and simple.

The main navigation is clear and simple making it easy for visitors to navigate.

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

Final Layout

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

For the main content section I plan to make a Flash image rotator to display screen shots of my different projects and will repeat the layout below for each different project, separating them with a feint gray line.

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

Portfolio Item Layout

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

Overall I think this is a successful website design that I can now start to code and deploy.

Perspective

rachael bran — Wed, 14 Apr 2010 14:06:58 +0000

Perspective, usually used when drawing or recreating a scene, helps to make the image have more depth as everything is in perspective to each other. Things in the distance and in the same proportion to each other as they are in the foreground.

When drawing in perspective you can either use single point or multi-point perspective.

With single point you put just one point on the horizon line for all the lines to connect to.

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

Perspective Exapmle One - Single Point

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

Whereas in multi-point perspective you put two points and either connect the lines as if you are beneath the object looking up, looking down upon the object or looking straight at it.

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

Perspective Example Two - Multi-point

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

You can also used perspective in a curve to a vanishing point that can’t be seen by the viewer.

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

Perspective Example Three - Curved Vanishing Point

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

Perspective can be used in photography to help emphasize size and distance in relation to the camera/viewer.

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

Photographs by Simon Fielder

Reference One

Reference Two

Reference Three

Portfolio Site Design – The Flash Factory – Header Image

rachael bran — Wed, 14 Apr 2010 12:38:03 +0000

Site Header

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

Here is my final header image for my portfolio site. I have kept the company name fairly bold, only highlighting the first letter of every word. I have positioned the logo so that it is still recognizable but doesn’t dominate the header. I like how I have used a very gentle radial gradient emitting from behind the logo to bring a bit of the focus back to it after viewers have read the name. I have tried to keep it simple but have created a slight shine or glassy effect to keep some of its clean, modern and professionalness. I plan to repeat the radial gradient and glass shine in the footer to help connect them better.

The Flash Factory Blog Design

rachael bran — Wed, 14 Apr 2010 01:50:28 +0000

To keep my portfolio and the blog separate (professional and personal) I have decided to give the blog a slightly different styling.

Whilst it keeps a very similar layout with both the header and the footer being the same size, content and layout they differ in style by being a lighter colour scheme, with the main page background being white, the header and footer backgrounds being light gray, and the main content background being a very light gray. The logo will also be a dark gray and there won’t be any gradients, just block colours (or grays). The post titles and link will still be shown in the same red as used in the main site design.

I think these simple design changes will be enough to separate out the two types of site whilst still leaving a sustainable connection between them.

Cowboy Animation Storyboard

rachael bran — Wed, 14 Apr 2010 01:46:03 +0000

This is a rough story board for a short 20-30 second long animation in the same style as previously tested. It involves a few extra and altered techniques such as getting the cowboy and horse to stand up on its own rather than propped up against a window frame, balancing it on its hind legs without it over balancing and panning the camera smoothly in stop frame.

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

Storyboard Page One

Storyboard Page Two

Storyboard Page Three

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

Cowboy Animation

rachael bran — Wed, 14 Apr 2010 00:04:08 +0000

After looking at the previous animations earlier in this blog I have decided to do an animation of a cowboy on a horse so have started to develop some tests to see what can be done with the techniques and equipment that I have. I’ve started with a simple six frame animation that I have previously done of a horses run cycle. I have then gone through each individual frame and, with a drawing tablet, drawn on a cowboy that moves along with the horse.

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

Horse and Cowboy Printout

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

Then because I wanted a hand drawn look to them I printed this sheet out and traced the images with a black ball point ink pen giving a nice crisp line. I then photocopied this, stuck it to some card and carefully cut out the images with a stanley knife leaving a base to be able to prop them up when animating.

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

Cutout Horses

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

I then animated them for a test run cycle.

I like the style I have done this animation in a plan to create a storyboard for a full animation with extras such as scenery and other characters. I like how it creates a very unique and personal animation as everything is hand drawn by me and has nice little slight imperfections that make it even more unique and original.

Golden Ratio – Fibonacci Spiral

rachael bran — Tue, 13 Apr 2010 20:42:06 +0000

These two images taken by Ryan Schude both fit into the fibonacci spiral, one of the golden ratios for images.

This ratio usually allows for a more dynamic images as the eye tends to follow the spiral present in the image.

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

Golden Ratio Example One - Ryan Schude

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

As both these shots have movement in them as they have been taken at moments when things are suspended in mid air, this ratio definately adds to the movement.

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

Golden Ratio Example Two - Ryan Schude

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

Reference One

Reference Two

Reference Three

Using a Dark Colour Scheme

rachael bran — Tue, 13 Apr 2010 20:24:01 +0000

When using dark colour schemes you can loose some of the readability, which is highest with dark text on a light background.
One way of keeping some of the readability is to use a more pleasant and less eye-straining contrast between the background colour and the text colour.

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

Contrast Text Options

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

By using a sans-serif font instead of a serif font you can also increase the readability.

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

Sans-serif or Serif

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

When using dark backgrounds it also looks best when you keep to a minimal colours scheme. Allot of dark sites often use white text and one or two other colours for titles and links to make them stand out more.

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

Dark Background With White and Coloured Text

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

Reference One

Golden Ratio Two – The Golden Triangle

rachael bran — Tue, 13 Apr 2010 18:28:59 +0000

Another version of the golden ratio is the golden triangle. This works by creating right angle triangles off a central line that spreads from one corner to the opposite diagonal corner. This then creates a focus point and a ‘cradle’ just inside the point of the smallest triangle.

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

Triangle Ratio Example One - John Rankin Waddell

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

The first image has created four right angled triangles whereas the next two have only three.

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

Triangle Ratio Two - Richard Evans

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

The third seems to have created three triangles yet hasn’t positioned the focus point at the point where they intersect. If you were to put in an extra line to create a forth triangle, as in the first, it would still be missing the desired focal point.

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

Triangle Ratio Example Three - Alexis Raimbault

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

Reference One
Reference Two
Reference Three
Reference Four

Portfolio Site Design -The Flash Factory – Layout Idea 3

rachael bran — Tue, 13 Apr 2010 17:42:29 +0000

For this design I have used a similar image (with different proportions) to that used in the branding package, which includes the logo on the right instead of the left and each first letter of the name done in red and the rest in white. I have then positioned a very simple but functional and easy to understand navigation directly underneath the header.

The footer now includes more features, a recent posts, and latest tweets, both signified by a sticker like icon to easily identify them. The Three different sections of the footer will be divided by a light gray line as for it not to stand out too much. The site will be on a fixed width as to avoid distortion on different machines.