working stuff

layoutttttt

After alot of re thinking this is where im at so here we go with a few trials ...

Hover images

in this html. practice page below i have used the hover technique over the thumbnails in order to see them in the larger main image view

html. practice page

Here is some screen shots of my practice working html page, to show experimentation with the layout I plan to work with

page layout

Katie Lockhart

In looking at Katie Lockhart's website, her website has several elements I want to portray within my own website, hers is simple, centered, clean, fresh, easy to navigate and she also uses the arrow scrolling technique that i am thinking about employing . . .

Background

I have included experimentation with both grey background and just a full white background as I am trying to decide which one I like best. I really like the idea of a plain white background as it is straigt forward, clean, clear and in your face, which in this instance I think 'in your face' is a good thing as I am trying to push my work and get it seen.

So at this stage I am swaying for the plain white but we will see in the near future no doubt . . . . .

Gallery page to show div tags

This may need some refining depending on layout in Dream Weaver but I think I have included all relevant div tags at this stage

About page layout (this page would also need to include relevant contact info instead of having a completely separate contacts page. If I am to have a completely separate contact page it would work as a direct link to my email)

Gallery page layout

Home page layout

Layout 2

Layout development

Layout 1

DIV TAGS

Labeled div tags.. putting divs within divs:

Here is my gallery layout with the addition of div boxes

Some rough layout sketches

Here are some hand drawn rough layout sketches to add to the initial working drawings in photoshop

Tim Walker

Here is a shot of Tim Walkers work you can find it at http://www.thomastreuhaft.com/Tim_Walker/tw.html> here there is a scroll bar but it is done with class as it is a horizontal one and it really works well, and the web page still remains quite central.

layout...

I think that this is my favorite layout so far.. it is clean, fresh and simple, the thumbnails can be adjusted to the required amount of images per project. With the possibility of having a set amount of 'squares/image spaces' per project, but then being able to save spaces for certain projects (as i talked to Gen about today - like on the textile graduates page from last year).I may re-position the text on the right in order for it to work more cleanly and centrally, perhaps having the caption beneath the thumbnails etc.

-links horizontally down the bottom

-thumbnails neatly aligned below the central image

-logo positioned at the top of the page with email contact link visible and in contrasting colour

-colour cohesion throughout

-option of arrow/scroll through (eg. next/previous OR forward/back

-central/main image with thumbnails below, main image as hover (use swap image technique we learnt today for main + thumbnail images).

-text provided with blurb of project will remain consistent for each gallery changing in relation to project eg. Print = 1 blurb, Digital = another blurb etc etc

Layout ideas so far...

Some of my ideas so far...

I want my web page to be central in order to draw the viewer to my main image and content. My gallery pages will all consist of a large central images with thumbnails beside or bellow (for me i think bellow works best). With the option of the thumbnails allowing the viewer to hover over them and see the larger image (as done in class today). Or the option of individually clicking on each thumbnail to view the image. I will also include the option of arrows as links on both sides of the main image to enable a scroll effect through the thumbnails eg.: foreward/back next/previous. The thumbnails will be a glimpse/teaser of the main image so that not all is given away strait away. With the smaple layout mockups I have done below it appears that the smaller squares placed on the side as aposed to thumbnails bellow the main image, seem to draw you away from the the main image, so I think that having the thumbnails bellow the main image will work much more cleanly and will work much better aesthetically. I like the idea of having the links/menu positioned centrally and horizontally along the bottom of the page, as a posed to the traditional vertical left aligned menus, as seen in many exsisting websites. I will stick to having a clean, fresh, white background which will enable my work to stand out. My email contact will be included on all pages throughout to make it easy for viewers to contact at all stages of their journey through my website, but a contact page will also be included which will work as a direct link to my email. My logo and name will appear centrally at the top of each page in simple black and white to keep a cohesian throughout the site and so as people always know where they are without any hesitation.

(this ended up being quite a long blurb, oops!)

LAYOUT PLAY

Web page layout play...
here are some of my layout trials so far. I want my site to be simple and clear with a central layout so as the eye is drawn to the middle of the page.