The Final Site

The final site can be viewed on my USYD Web Space

Quick Access to Assessments

Major project concept


Web research Report
Smirnoff Research

PSP Mockup Of Site Layout
Original Mock Up
I originally said that the user wouldn't be able to go back to the main page once they had navigated away from it primarily because the main page was just a static image and didn't need to be viewed once the site had been loaded.

Now that I've changed the welcome page to the immersive image of myself, the user is now able to click the flash banner at the top of any page, and they will be re-directed back to the welcome page where they can play around with my face.


Short written piece
I had a lot of fun creating and designing this site primarily because the site was about me, and creating a site about yourself is always fun!
The reason I think it was so enjoyable was because I could do whatever I wanted to in terms of colours and fonts I wanted to use, and because it was about my Identity, everything used in the site reflects either my identity or is something I really like.

I only use two front types throughout the site to keep the layout of the site easy to read and linking. I either use the graffiti font for titles or important text because I just love the smoothness of the font and how the letters all seem to just group together and it also looks as if the font has attitude. (I Suppose this further relates to me identity) The other font I used was just a standard MS Font which I used for the body text.

I've also used 6 colours throughout the whole site to further synchronize the site as one continuing site and not a site with many different pages.

I've used Blue, Pink, Orange, Red, Green and Black which is used the most through the site.

These colours and fonts are ones that I use a lot when I design things. I believe that they appeal to today's younger generations and this is because they are colours and font they see all over the place. Everyone knows what Grafitti is, and a lot of people who might not be too computer savvy can sometimes think you've designed the graffiti yourself. The colours are bold and stand out, and hopefully this is another element of the site that will attract people to explore the different pages.

The part of the site I had the most fun creating was my moving face on the welcome screen. This I think is just awesome, and by far the best page of the site.
People can move their mouse over my face to itch my nose, open and close my eyes and even poke my tongue out in arrogance, and I suppose all the different facial expressions the user can make from my image, I do myself which is a big factor to my identity.

The end is near......

To be totally honest I can't really think of anything else to add to my final assignment.

The web site does relate to my identity though in basically every possible way.

I love the graffiti font and this is probably my most used fonts for Assignment Headings, and other design concepts I have to create.
I like how it's bold and "phat" and looks like it's giving out some attitude to the reader, and this is extremely powerful in the Welcome page where you hover over the face. The cursor changes to the hand point which everyone regards as the cursor used when links are being used... thinking everything is linked, and to be told it is linked, but to then have the tongue poke out at you with "Gotcha!" haha. I love that!

The colours used in all the link navigations on the left hand side are also the colours I use most when designing things. I believe all these colours are very bold, bright and stand out to the viewer drawing them into the creation.

Other things relating to my Identity include obviously the face which is a re-occurring image throughout the site.
I have a page where I display Images that have given me inspiration in designing the site, and I've also got two different pages where instead of writing out long and boring paragraphs about myself, I stamp statements on my face to describe myself...

As I said in the opening paragraph of this blog - I can't really think of anything else to include in the site.

I think we're learning how to embed audio into sites some time soon, so if we learn how to do this - I think I will try and have a song playing throughout the whole site if that is possible.....

Editted pictures

Ever since I created the roll-over face I have been pestered by constantly seeing an extremely thin white line shapped in a rectangle surrounding the face.

This line is less than a pixel thick, and depending on the angle you're looking at the screen, it can become more obvious.

I've tried a couple of things to try and fix it such as coding in border="0" for all the images, but this doesn't fix anything.

I showed this to Gianni on Wednesday and thankfully he found the problem!

In the original Photoshop file, somehow when I had made the background layer black, it had missed this tiny last square around the whole border... so after just painting the border black again, paying close attention to the border! and re-saving every image, everything was fixed!

I would show you what I mean, but in all the screen shots I have of the previous incorrect image, you cannot see this faint line.

Thanks Gianni!!!!!

Continuing research

Been trying to find sites and pictures that either catch your eye, or are well made...

So far the following sites have impressed me -

songbirdnest
This web site uses a very simple layout. With a background image, which then has a white box on top of the background. I think this looks cool, and with the use of the shadows under most of the images, this adds a cool effect to the site - so I might look at trying to do this in my site

homeostatic
Just an interesting, and extremely well made flash site.
Uses colours extremely effectively to highlight just exactly what they want to be highlighted. Uses interaction with the user as well which immerses the user.

Hopefully my face as the welcome screen will generate curiosity and immersion for the user when browsing my site.

"creaktif
Really interesting use of flash animation in this site.
Some designers have just created it to showcase their work and other stuff they do

agencynet
More cool flash, with the use of text in their "Fact Sheet" page

infinityart
Awesome use of flash. Love this site.
Uses flashes and static animation to pretend that you're looking at a fuzzy tv or something from a UFO/Alien movie.
Love.this.site!

New look site

As I mentioned in a blog below, I decide to change the background of the whole site so that the colour scheme carried on from the first page, and so that the whole web site would look more connected as a whole.

MY SITE

The background throughout the site is now Black


The faces also now sport a black background, as well as the flash links on the left hand side.
I've included the face to further add similarities to the main part of the site so it copies the welcome page. And on the About Me and Interests page I have made subtle changes to my face (the eyes are closed and my nose is pointing different ways)



As does the email me flash animation. AS you can see from the screen shots, the top title banner is also now an animation of changing colours (the same colours that are used throughout the site in the navigation panel on the left)

art web sites to give inspiration

in today's class we were instructed to look at a site that we liked, and one that we thought represented art.

i chose webagent007 and group94.

Group94 really caught my attention because the site was extremely simply laid out. I would call it minimalist, because hardly any colours were used, and in every page, all that was shown was a bit of text, and then a full screen picture.
What also really caught my attention was the effect that had been laid onto every photo.
Each photo looked as if it had embossed squares coming out from it, as if the picture was coming through a security camera, or some lens that didn't have the cleanest focus.

This effect was extremely effective as it added character to the site, and kept me looking to see the rotation of images.
This filter on the image is something which I've already implemented into my site. My opening page is of my face, and on that image I have applied a filter to alter the original image, and to make it stand out more so that it will capture the viewers attention and make them want to enter the site.

The 007 site uses some phenomenal flash. It is a web site that specializes in making web sites for clients, and basically I think there pretty amazing - so this site was merely for inspirations...

I've decided to re-vamp my current web site, and use a black background over every page to make it relate to the initial welcome page.
I've edited all the rollover links, so that they further stay with my black theme, and I think this also lifts the character of the site as it's primarily black, with moving animations and images that are coluorful and create interest.

Later in the week I'll edit all the flash files because I can't edit my CS3 files at uni, and once that has been done I'll load some screen shots and links up here for everyone to see!

any ideas?

i've been thinking all this week about what i can add to my web site to further express my personalty and i've come to a brick wall....

i can't do much more in flash as i think the site would start looking too animated - and i've basically hit a wall in terms of where my taught flash skills stop as well.

i have the home page, an about me page, my interests, a page where i show inspired works, and a page where i can be contacted and i just can't think of anything else...

so i'll show my current site to Gianni and see what he has to say....

Flash pro at work

So I got home last night after class - and worked solidly on flash for a couple of hours, as well as working on it today as well.

Probably spent 6 hrs on it all up since last night - and I'm slowly getting better at it.

I've added two new flash things to my page, a new banner for the heading for every page - also with action script embedded in it to link to the home page. The background colour will just scroll through different colours... but will only use the colours I have used else where on the site.

Also on the "Contact Me" page - I've made a new flash "Email me" button... with a flying out plane, and then some changing text...

Coding the action script was extremely hard and very tedious... always having to look up help sites on the net to get assistance - but now it's all done, I understand the code a bit better - and it all works thank goodness!

Here's a link to the new heading and Contact Me Page - Additions

Learning Flash

I've finally been able to figure out how to embed flash into these blog posts - so below are some of the very simple flash animations I've created.

Week One -




Week Two -


This is what I am thinking of using for my "Email Me' section..


As I wrote below - I'm hoping to try and create a footer - or new header for the site in flash

Thinking of using more flash for the site

Last week in the lesson we were given a task of creating a flash animation in just over an hour.

It wasn't too hard when we had a .gif of the actual animation we wanted to create to look at for how to design the different elements of the animation - but trying to do that from scratch I think for myself would initially be a bit hard.

I would really like to have more flash in my site - at the moment I only have 1 very simple flash element which is the exact same on every page - and I'm wanting something either on every page again - but down the bottom like a footer - or I'm thinking of creating some different animations as to how people can contact me.

For example - a paper aeroplane flying from the top to the bottom of the window for an email...

And maybe some sort of changing background at the bottom of the page, or a changing heading background colour...

I've been mucking around in Flash a bit this week.. and so far haven't got too far unfortunately - but hopefully within the next week I'll have come up with something showable.

*Note - also need to find out how to embed flash into this blog site...

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.

Today's Lecture

In today’s lecture/tutorial we learnt how to use Photoshop to layer images.
I knew most of the techniques shown, but it was still got revision and I did learn more about masks, and using the (create new layer option) in the layers tab down the bottom…



The above image is what I was able to design.
I added the first image, and didn’t edit it at all – the 2nd image I added a Linear Dodge to, which allowed for the background image to come through the next image a bit.

I then added in the 3rd image, and then added a gradient over every layer from red to green to create a pretty cool effect I feel.

I then added in the text, and employed the use of the shadow effect, and then moved the shadow distance further away to create a large backdrop for the shadow.

I would have liked to include a light in the top RHS.. but couldn’t get any good light happening in PS...

We also had to create a mock up of a web site, or what we wanted out actual final assignment web site to look like.

I quickly put together this brief image


Although I don't want my site to look like this at all - I just wanted to have a play with the shadow, hue/saturation and curve editor.
Obviously it doesn't look too pro, but I thought it was ok for something qhiped up in such a short time.

I'll have the actual mock preview of my site up here in a couple of days.

More research into sites

I've been trying to find sites that I actually visit, and like the look of to try and represent the sorts of sites I like going to. Rather than searching in google for specific sites, and then deciding if I like them or not.

Two site is visit regularly are Commbank and
ING Direct for all my banking needs.

Both sites employ the use of Flash, and HTML coding for the site, with both sites having a bold header towards the top of the site which advertises their latest interest rates or newest accounts on offer.
I definitely wouldn't say these sites are art inspirited sites, rather they rely heavily on a couple of similar characteristics.
- simple and prominent colours that are common the the bank (such as logo colours or branch colours)
- easy navigation to the various parts of the site for the various different banking needs everyone has
- both sites have moving graphics (Flash) to capture the users attention.

I believe these sites are well designed, and to be a major bank, you need to have an extremely well designed web site to attract customers, and to also keep current customers. The web site has to be easy to understand for those not too internet savey, but it also needs to be designed in a way whereby the curious customer can find out with as limited clicks as possible the facts they want to find.
These sites are design created - with the sole purpose I believe in making sure the customer has an easy time navigating around the site.

MotoCrew is on a completely different level of web design compared to the above sites.
This site has been created with 18-30 yr olds in mind, so carries the characteristics of those kind of outgoing, arty, sporty, tech savey people...
The site employs a lot of vector images, along with small sections of flash.
The site itself has been designed extremely well with nice flashy looking buttons with effects and shadows, but I'd say this site is just that bit more arty because of the amount of effort that has obviously put into the site to make it look cool and up-to-date with the 18-30 yr old generation.

I'd love to be able to create a web site like the above web site, where awesome graphics are used for the buttons and overall layout, and then vector images are created to further enhance the overall personality of the site.

My Identity

Trying to start to think of how I'm going to create my final assignment which is a web site that will explore or explain my identity without me saying to much about myself.

Things that I'm into include Tae Kwon Do and other sports, Trombone, Going out, Cars and Technology.

Some sites that I've been looking at for inspiration include -

Hiptechblog
This site uses vector imagery at the top of the site to make it look like there is data flowing around the site - I quite like this idea, and the overall feel of the web site with its limited colours and simple layout.

I'm also getting a lot of inspiration from design sites that promote great looking web sites.
CSSTUX is an amazing site that showcases some ridiculous beautiful sites.

Throughout the next couple of days I hope to add a strong list of other sites that help me express my identity without me saying too much about myself...

Smirnoff.com Write Up

Smirnoff Research

I’ve chosen to conduct my research on the Smirnoff Vodka web site at Smirnoff

I believe this web site falls into both the design and art category.
Before I start to explain my reasoning – I think I’d be wise if I first explain how I perceive art and design as 2 different forms…

I believe design relates to the overall layout of the site, how the individual pages are constructed, use of colours, and use of imagery throughout the site. A site can be well designed, or it can be poorly designed, where links might not work, colours don’t contrast, or images look fake and unprofessional.

Design I also believes relates to the software used to create a professional looking site, although the creator might not be one. The use of flash adds complexity to a site, and if good, can improve the overall feel of a site considerably.
When I refer to art, I think more about the actual images that have been created, and the graphics that have gone into making the site. I believe a site can be an arty site, a designer site, or both.

I personally believe that arty sites aren’t normally well designed, and when thinking of arty sites I tend to think of sites which are maybe a bit more abstract in the way they’ve been created, and this might be the reason I personally don’t like them.
I prefer looking at visually interesting sites, that have fancy vector images, interesting logos or flash animations, and are “smooth” rather than “sharp” in terms of overall look of the site.

Talking about the site now
Generally speaking – the whole web site has been designed extremely well. The way the pages have been laid out (in regards to navigation images at the bottom of the screen), the use of a few bold colours that relate back to the actual product being advertised (the vodka) such as red, black and white (red referring to the label or vodka bottle)



and the design aspect which has been implemented in the flash construction proves to me that a lot of thought and man hours have been put into designing this site.
When looking at the art aspect to the site, once again you can tell that great effort has been put in to design the art characteristics to the site. This includes the Welcome Screen, where you have to select your country and the age verification screen.



Font Choice, Vector Images, Load Screens, and Rollover buttons I think all refer to art, and these parts of the site I believe are the crucial elements that have to be designed correctly to make the site flow, and to immerse the user in the site.



Coming from a Design course, I think I appreciate “well designed” things more than “good art works”, because I can appreciate the thought process and time inputted to create a great looking design. Don’t get me wrong though and think I don’t think the same goes for creating a beautiful art work.

Other similar sites
This site is similar to other alcohol related sites on the internet at the moment.
Take for instance –
Midori - which relies heavily on art, but digital art which has been made through flash.

Malibu - which relies heavily on flash and vector images. I’d say this web site is more art than design, just because of the amount of art used in the site.

Baileys - I’d say this is another well designed site. It’s a very simple and basic site compared to the above two, but I’d say it’s more simplistically designed, than arty.

Three other web sites I've looked into

Somazone
I would call this an "art" driven site as it doesn't have the best of navigation buttons, it's laid out too well, and uses are work for the main background of the site.

From the very first link "What's new" I would defiantly say it's an arty site, as the actual background doesn't cover the whole of the screen when you scroll down the page
- also the links on the LHS have a greyish looking background behind them, and to think someone with design skills or design knowledge might have put this site together... I wouldn't believe, or would say - they actually don't have any design skills...

Manifesta
As soon as I looked at this first page I thought "Design".
There is a re-occurring colour theme of pink used throughout the first page, and every link/page after that as well.

I am surprised though that the when you click on 1 of the menu links, and are taken to a new page, the links on the LHS have a black background when scrolled over... this adds a bit of a tacky feel to the page I personally feel as I'd never do that for links..

Diacenter
Knowing nothing about this site - or about the person it's representing... I've looked in the menu bar and seen "Artist's Web Projects" so I'm assuming this site is about an artist.

I don't know what category to list this site under - it don't think it has used any bed design concepts, but it doesn't have the "arty, not well laid out" feel a true "arty" site would have. I wouldn't say it's a designers site, but it's not as bad as an artist's site...

Design and Arty Sites

So I've been having a look around at a number of web sites - and I've been trying to figure out which one's I'd classify as arty or design sites, and why.

One of the sites has been the Smirnoff web site. I personally believe that some of the best advertising we see these days on tv and on the internet comes from the alcohol industry. They have thousands of dollars to spend on their advertising campaigns, and of late this has resulted in a lot of the TV Advertisements and web sites receiving awards for some of the best designs and adverts out there.

I love going to these web sites because the majority have been made in Flash, and I love looking at sick Flash sites, and because of the huge amount of money able to be spent in creating these sites - you just know they'll look fantastic.

Back to the Smirnoff site - is it arty or more of a designers site?

I believe this is more of a design site than arty as it is extremely well designed, with fantastic layout, navigation and animation used. The Flash element to the site has been designed to integrate smoothly with each page and the logos, and the overall feel of the site I believe shows excellent design characteristics (especially with the use of colour).

The site does incorporates some artistic elemts to it which can be seen through the use of vector art around the borders for every page, and also in all the drop down menus and other graphical images seen throughout the site.

1st Class of WAD

Had the 1st Introductory lesson for Web Art and Design today.

Our 1st task was to create a blog.

I've never had a blog before, just because I never really saw the point in having one.  But what will be displayed on this site is all my thoughts and work carried out in this course.