Gallery Layouts and div tag layout

Went for a really simple layout because it would be easier for me to recreate it on dreamweaver and easy to maintain later down the track. moght change colour and size of my name.

Possibly my FINAL homepage

not to keen on the bigger image with the hands. maybe its too big? out of proportion..i might just have the same size columns for the four images.

White Background

The white background works better, its easy on the eye and more inviting. Will definatly stick with the coloumn format and the white.

Developing homepage1 BLACK, too harsh??

Like the white borders around the images, not to sure if i would have the title of the projects in the menu or place them on the images itself. Something is not working???? Maybe the background. Black is hard to work with, maybe ill have a white background.

Gallery

Homepage

Homepage play!

Dont like the font for the 1st homepage layout, to bulky in comparison to the big images. Scale the images down will be a good idea i think?!

I feel that the images are too BIG!! Im going to scale it down to see what it looks like and also going to play with the COMPOSITION of the images taking reference from the sketches i had done earlier..going to change the name for each project, not to keen on having 'studio1', 'studio2' etc...Not to sure about whether the images could have white borders? might try it out..opinions?? AND i might re-consider the image i put on the homepage from each project.

Font exploration 1

Playing around with different fonts. Maybe a simple, big, bold font for the brand could be enough? and just as effective.

Possible Gallery Layouts

Just a few variations of gallery layouts. I want the work to be displayed in a way that it speaks for itself. Finding a layout that doesn't look cluttered or busy because I'm going for a simple look. Ill choose 2 different layouts and create mock-ups using photoshop

Possible Homepage Layouts

I've done a few sketches of what my home page layout could possibly look like. There are a few variations that could work. From there i'll choose 1 and create a mock up layout using photoshop. Emphasis on the homepage will be my name and the 4 works displayed.

Gallery layout - Jillian Lewis

Layout is nice and easy to navigate. I like the idea of using thumbnails and the big arrows on the side for easy navigation.

Homepage influence - HANSENGROSS

This layout used is the same idea as what i was trying to portray in my drawings for step#3. Instead of having text and image within the white box i think i would rather just have 4 pieces of my works in a rectangular format with a title under each work (caption would be outside the box). When a box is clicked it goes straight to the relevant gallery.

Completed page building exercise!

The page building exercise was a good exercise to do. It took me a while but it helped me understand how to do layouts and what a tag within a div tag is about.

On CLICK

Found the ON CLICK setting where you can click on the thumbnail to view it close-up!

Applying the swap image behaviour

This is a nice way to look at images by moving the cursor over the thumbnails and it will appear on the mainpage. I think want to have the thumbnail clicked rather than moving the cursor over the thumbnail. I think its more controlled! The PAGE BUILDING exercise is NOT finished yet that's why the layout looks crazy!

STEP#3 Sitemap

I tried to create something simple that I am able to create myself and is easy to navigate.

HOME PAGE: has four images of my best work from each project (1 image - studio1, 1 image - length etc). Instead of listing the project galleries on home page I decided that it will be nice to have those 4 images act as links to the project gallery that the images belong to!! could it be rollover images?. Also there will be an 'about' & 'contact' link.

ABOUT: will have a little background information about myself

GALLERY: each gallery are grouped by projects and it will consist of 5-6 images from sketchbook pages to the final product. Each gallery page will have a set menu on it so that the view can look at other projects without going back to the home page. Im not to sure if i should have my 'contact' link on each page?

CONTACT: links straight to email

Im still working and developing on my page layouts etc and i need to look at other portfolio layouts to generate ideas but the site map is pretty much how i want my portfolio to flow.

TAGS & DIV TAGS

An exercise on playing with columns. I found this very helpful in terms of layout.

I know now that you should really only change fonts,colour,background on TAGS only whereas DIV TAGS are where you play around with clear/float, padding, margin etc because div tags create boxes around whatever you have linked it to and is a way to place it wherever on the page, right?

Formative Assesment

After presenting my CONCEPT DEVELOPMENT i found that I was gravitating towards 'moodboard2'. This was largely influenced by the LUAM and YOKIETRASH site. I had a few problems when creating the concept html in terms of the layout (placing columns side by side; float and clear) and the use of tags&div tags!!!!!!!!!!

MOODBOARD 2: the works that i will be showing from previous assignments will largely be colourful and busy so i decided that a black or dark background with a simple layout will work well against my work. There will be less focus on the web page itself (font,layout,etc) and more focus on my actual work which is the essetntially what is being showcased. I want the viewer to be drawn to my work in the first 5seconds. Im still working towards my layout..still in progress!

MOODBOARD 3

This moodboard is completely different to my other 2 because it is another aesthetic I would like to try. It focusses more on my workbook pages and showcases my drawing skills rather than my end product! Has a scrapbook book.

MOODBOARD2

I went for a simple look. I wanted my work to standout rather than the page itself!

MOODBOARD1

This moodboard incorporates texture and gives a tactile feel. A fun and colouful mood is portrayed throught the use of colour and texture.

Trying to make my name pop by using a bright colour in contrast with a dark background! Maybe the bright colour needs to be brighter? Cant remember how to select a certain word or sentence from a paragraph and make it a different colour. Do you use class??

handwriting vs font on comp!

I was thinking of whether i should have my brand done in handwriting, to give it some character or whether i should stick with the font i got now that I found on the comp???..will post the differences up tommorow

Font Size

Background colour

Playing around with background colour. I want to use either grey or black. Font is definantly not working, too dark? needs to be lighter. I like how the brand is in a different colour, its a constant reminder of whos work it is.

YOKIETRASH

Yokietrash is a website that i found that uses a simple but effective layout. The layout of the images on the homepage work really well and i like where the position of the brand name is.

LeGarconBleu

I like the use of grey and bold text, it gives an urban feel. When a subheading is clicked everything under that drops down and the works are shown and when clicked again it comes back up and is a menu again!

Change of STLYE!

Patrick Fry

After looking at other website layouts i found that i was getting more drawn to the minimal aesthetic rather than the bright coloured ones i previously researched!!

On the home page(image1) I like the way that when the cursor is on one of the squares it changes colour! Image 4&5 show his background story and contact details, a format i would like to play with.