Brainwave

As I was discussing this assignment over the dinner table with my family, one of them came up with a pretty damn ingenious idea of using my face as the welcome page. Since the site is all about personality and everything...

You'd take various photos of my face doing various expressions, and then (they didn't know how to do this) but when you move your mouse over the certain aress of my face, my eyes would open or close, poke my tongue out or move my ears for example.

So for the next 4 hours I slaved away in my room to create this "face"!

I learnt a lot masking and saving sliced images in photoshop, as well as using the Tags - Behaviours setting sin Dreamweaver. My cousins from QLD was down for the weekend, and he was also able to give me some insight into how to correct some mistakes I'd made, and how to use various html code to create the result I was hoping for.

I also realised that the site needed to blend a whole lot more with each individual page, and what I had previously created - each page was kind of separated from the others.
I also really wanted to incorporate some flash into the site.

I firstly change the title headings of each page to use the font that the banner was using - for this I just created an image in Photoshop, typed in my text and sliced it up, and then saved the individual slices. Imported the images into Dreamweaver - and that worked fine!

I then decided to try and practise the newly acquired Flash skills, and create a simple flash animation for the links on the LHS of my page.
I just wanted a simple animation that I'd be able to create, and I'm extremely happy with the result.

I've been able to upload the site to my Arch Web Space - so until the assignment is due you can view the site evolving every week HERE

here are some screen shots as well -

This week in class we learnt how to use Flash.

I've always wanted to learn Flash because I think it can just look so fantastic when used properly in web sites.

In yr 12 I self taught myself flash for an assignment, but only basically used motion tweens and different looking graphics I'd created...
This is basically what we learnt in this weeks lesson as well, but I was still able to take away a few new tricks about Flash.

I would upload my flash animations I created - but can't seem to find a way how to do it with this Blog site...

One animations was of an olive bouncing into a cocktail glass and then flipping over, and the other was just a square box bouncing around it's own space...

New look site

I've decided to re-arrange my navigation link buttons, and to change the layout of the site.

I've designed 4 roll-over images that control the 4 different pages to the site.
No roll-over tells you what page you're being directed to, but it's all in a normal web site layout.
I've cut the lower 1/4 of the banner off, to remove the initial links I had designed.
I realised that the banner's height was just too big - filling up half the browser's window for smaller screen resolutions


This shows the 4 squares, with their outline showing, and when you roll-over one, the whole square fills in.


When you're reading the actual page you're on, then that square navigation button will be filled in to notify you that you're on that corresponding page.

Looking for Inspiration

Today I thought I'd search around the internet on sites such as flickr for pictures which I could use to gain some inspiration from, and also to have a look at pictures which might be helpful in creating my sites.

I've always been very interested in graffiti. Not the type where there are tags all over the place and on top of each other - but where graf artists have come and created some awesome looking grunge/random artwork.

So I went onto flickr and did a tag search for “graffiti” and “street art”.

I love it how these artists are able to create 3D work, and a 2D surface such as the pavement or bricks, and normally the colours that are used are extremely bold, bright and dominant colours that instantly capture the viewers attention.

I'm hoping that through looking at some of these tagged images, I'll be able to take some colours and inspiration away from the site, and implement it into my site.

Here are some of the images I particular liked.
These first 5 use bright colours, and all try to portray different ideas which the artist is hoping to get across.

(Official Link)
Uses shades or red, blue, yellow and purple to illustrate the child's expression. You're instantly drawn to the child's face, as the eyes are so large and bright in happiness. Hopefully my site will be able to create an ore factor like this one!

(Official Link)
This is the kind of graffiti I really love. It's 3D, looks as if it's jumping out of the wall, and only uses 3 shades of colour - blue, orange and grey. The final image is very sharp, and professional looking, and although it's a static image, you can't help but think it's going somewhere.

I'm hoping to only use a couple of colours in my site, but I'm making sure that the colours I do use are bright and lively, and relate to my personality.

(Official Link)
Once again a very bold "in your face" artwork that uses 4 colours - red, blue, black and white.

(Official Link)
(Official Link)

I really love the font type used for graffiti work, and I've downloaded many free fonts which incorporate this effect.
At the moment in my site I haven't used any graffiti fonts anywhere, rather I've stayed with the thick Arial font for the headings. I'm not too sure if I will change and use a graff font, but depending on the information I display in the site, I might change the fonts at a later stage...

(Official Link)
(Official Link)

These 2 images are ones that create interest and curiosity about their intended meaning.
I'm wanting my web site to be pretty self explanatory, and easy to navigate and understand, but it would be intriguing to add an aspect to the site where the user would have to think for a couple of seconds about what hey need to do, or what that part of the site is trying to convey... I'll be thinking about this idea for a while.

(Official Link)
This final image is all about attitude and power.
Our site is all about our personality, and through the skills I acquire in this course I hope to be able to employ some techniques to show off a bit of attitude and power in certain parts of my site

Site Layout

Below is a hierarchy tree diagram showing you how users can move around my site.



Pretty self explanatory - but basically -

1 - there is the main welcome screen
2 - this screen links to the home page
3 - from the home page, you can move around freely to any of the other pages, and vice versa.
4 - once past the welcome screen, you can't go back to it
5 - definitely not organised in a linear format

Currently I am extremely happy with my Welcome page - it looks very professional and relates to my personality a bit in regards to the cool paint effect I have happening, and also the complete black background which could mean I'm a little mysterious or reserved.

All my other pages after this are basically the same, they are quite dull, and are really only 2 colours, black and white, which could mean I'm a very simplistic or boring person - which I'm not, so I'll have to figure out a way of fixing this dilemma.

_____________________________________________________________________________________
In today's lesson we learnt about font types, and also had the chance to show a fellow classmate our site - which proved very helpful and I received some good tips from one of the guys about what I could try and do.
Also realising that the fonts you use and how you use them does make a substantial difference also helped me in my endeavour to personalise my site more.

Current Site Prototype

Here are some pictures of the web site I've started to design for my final project.

I don't have any time now to tell you why I've done what I've done - but tomorrow I'll edit this post and explain everything I've designed so far.

More Sites that I like the look of

bykeproject
is a well laid out and designed site. I wouldn’t say the site itself is arty, rather the products the site is selling are arty.

The overall layout though of the site I think looks really good, with the use of the black, pink and white colours throughout the whole site.
This site is to help the youth in lower income suburbs, and has been initiated by the BMX community.

When you think of the BMX competitions, and in general the people who do ride BMX bikes, you think of tough, young adults who like adventure and exhilaration of
jumping over obstacles.
I think the web designer has played on these perceptions extremely well to show the generous and thoughtful side the BMX community has by using pink throughout the site, which no-one would normally consider a colour to
relate with BMX bikers.

The heading of the site looks extremely cool, as do the articles spread through the page. I’d never consider making a site like this – but looking at how simple and awesome this site looks – I’d love to pull this off for my final assignment. No flash is used, and it still looks fantastic!

williams-bistro
I’d say this site is very arty. From the first look at the site, and the top left hand side, there is an interesting piece of vector imagery, as well as some cool icons/logos on the left hand side.

Although the site is in what looks like German – I think the designer of the site has built the site to showcase their own art works.
A very simple site, that I think works extremely well.

klickstudio
A very interesting site which has been designed to advertise a company that is skilled in marketing and communications.

Uses basically all Flash to animate the site extremely well.

I’d say the site has been moderately well designed. The font to explain everything about the company on all pages I think is too small to read which would be a major concern as potential customers would be looking at the site to get their initial thoughts about the site.

The use of art in flash, and for the images has been well created, but I wouldn’t call this an arty site. I wouldn’t say it is a designer site either.

Not too sure what I’d call it…. But to be either art or design, it has to have some different characteristics, which I don’t think it has.