IndexBrief 03Personal Identity 04Research 05Web Design Usability 07Web Inspiration 08Things to Consider 18Initial Ideas 24Favicon 27Loading Page 28Main Pages 29User Trial 34Book Making 35Conclusion 36

To create a personal web site which will form part of the individual identity package.

Brief

This Assignment focuses on online media. We have been asked to create a web site focusing on our web

presence. This will be done using Adobe Flash.

A Flash Web Site

This assignment is incorporated within the personal iden-tity package. I will be using the logo and designs from

the previous assignment.

Personal Identity

Kitty Cake

04

It’s about time we start using more multimedia to convey information, ... Good multimedia design is similar to film design. The goal is not to be flashy.

“”Jakob Nielson

Research

WEBDESIGN

USABILITY

The Spider diagram above are my thoughts on what kind of website I want to create and how the overall look is going to look like to blend into the personal identity package.06

WEBDESIGN

USABILITYTo create the website portfolio I will have to look into design usability. The portfolio is an interactive piece, I will have to take

into account the users that will visit my portfolio and make it easy to navigate

through and to find the relevant works.

I found Jakob Nielsons web design usability book1 a good foundation to base

my portfolio on, as Nielson explores the different aspects of usability.

Web Ins piration

hh2

To get inspiration I also looked online and at books. The image

above is Neville Lee Loks portfolio website. The web page

immediately stands out, as the main purpose of the website is to

show off his work, so his used the images of the work as buttons.

Web Ins piration

http://www.rvlt.com/3

I found this inspirational, as the layout is minimalist, but the photographs are the main focus. I also liked the idea of playing with typography in my website, as Revolution have done it quite successfully, also using large font is another way of engaging the viewers eye to what is necessary.

http://sushiandrobots.com/4

Sushi and Robots is a portfolio site. The factor that appealed to me, was the use of hand drawn elements within the design, I also liked the use of limited colour, which was the illustration on the middle. The large font also appeals to me, as there is something fun about it, which is something I want to portray in my website.

NewPollution Magazine gives off a urban street vibe and the use of the pink is very similar to the pink I use

in my logo. The navigation is also has an animation on the buttons and

it is very intuitive. Also the use of a photograph as the background also

make it engaging.

http://newpollutionmagazine.co.uk/5

11

t6

This is another site, which I think shows an interesting and unique navigation, as usually

navigations are in a horizontal or vertical line, but this navigation takes the form

of a spider diagram, which I think makes it appealing. Not only is the navigation

attractive, but the use of illustrations adds a more creative flair to it.

http://www.louisecampbell.com/#7

The Louise Campbell website has a sleek layout and there is only one colour palette used, which makes it consistent. Also the gallery is displayed in a simple yet effective way as viewers can see what they are clicking on to, rather then a text button.

The Web Design Index8 book was a good book to browse through for inspiration, as it had many examples of the best web design layout.

14

The layout book9 by Ambrose/Harris. This book has been helpful to me, as it gives an idea of how to layout my

portfolio. Even though a majority of the book is about print rather then websites,

it was good to get a wider perspective on the layout and how to bring print

layout to the web.

The Format and Print & Finish books10/11 by Ambrose/Harris were helpful in show-ing examples for layout, even though that books do heavily portray 2D work, the use of colour and design is essential to know even in a web design layout.

Taschen’s 1000 favourite websites12 is a book I have had for a while, but have not really looked through until this project. The amount of good examples and inspirational pieces is on every page, so it can get overwhelming, however having a look at this book, also helped in seeing what professional websites look like.

17

Things to ConsiderThe kind of content

The target audience/ The people I am catering towards

Colour Scheme

Fonts

Webpage size

Layout

Navigation/usability

After researching and looking at various wesbites, I have gotten a greater understanding on how the content and the design have to be consistent with one another, and how the website design generally caters for a target audience. As I already have my personal identity, I will be using it and carrying it on to the internet, however I will also be catering towards Graphic Designers and future employers, so it has to be professional . I have found that there are some things that I will have to take into account before creating the website, their may be many more factors that I will have to consider, but these are the most important for me.

18

ContentAs this website will be a portfolio, I will be showcasing my work. I will be putting my work into sections, which will be:

Graphics-This page will have all my graphic design work that I have created for companies and also personal graphic design work.

Illustration-This will showcase my drawings

Web-Web design and web sites that I have created front and back end.

3D- my 3D assignment will be showcased on this page.

Target AudienceMy main target audience will be future employees who will be looking at my work. I will also wanted to have a place to display my freelance work. In my website I will also want to show a bit of my personality in it, so I will want to use bright colours, as I used in the personal identity package, however I will have to constrain the colours, as too much could give of an unprofessional vibe.

Colour SchemeThe colour palette will be the same as previously, as I want to create a consistent look between the online webpage and my identity package.

Web Safe Fonts

As I will be using Adobe Flash to create my website, I will have to take into account the fonts that I will be using, as when using dynamic text, I will have to embed the font, so the viewer will be able to see it in the font that I choose. As most of the text is static text, I will not have to worry about web safe fonts, as in Flash static fonts already have the font that I have used embedded into the file.

From the previous personal identity package, I will continue to use the two fonts below, as more then two fonts will make the webpage look hectic and confuse the viewer.13Helvetica Regular, BoldHelvetica is a widely used sans-serif typeface developed in 1957 by Swiss typeface designer Max Miedinger and Eduard HoffmannThe design is neutral and it has great clarity. Helvetica has no intrinsic meaning in its form, and could be used on a wide variety of signage.

14

ChunkFiveChunk is an ultra-bold slab serif typeface that is reminiscent of old American Western woodcuts, broadsides, and newspaper headlines. Used mainly for display, the fat block lettering is unreserved yet refined for contemporary use.

20

800 px * 600px

1024 px * 768 px

Webpage sizeAs my webpage will be viewed on a computer screen, I will have to make it a similar size to

the screen, as I don’t want viewers scrolling sideways.The image below is the aspect ratios of two of the main sizes that people have as computer

screens. The most widely used aspect ratio is 1024px by 768px, so I will be using this guideline to create my webpage.

21

Navigation

The navigation is the most important part of the webpage because if it’s confusing, then most viewers will not remain on the site. I want to create a grid where the layers will remain in that gird, so the viewer has something consistent to see.

The image below is some sketches that I drew for the layout of the webpage, I was also looking at the different ways that I could show my navigation, as it’s the main interaction on my site.

Layout

I want to stick to a grid layout because it makes the content look more easier to read and navigate for the viewer. I also want to add white space around my webpage, that is why I have opted to create a 900px webpage in flash and then center is within the html page. The white space will enhance the visual images, as the bright colours will engage the viewer.

The program that I created my web page in was in Adobe Flash cs3. I used actionscript 2 for this, as I already have experience in using the script language.

Actionscript 2.0 vs Actionsript 3.0

I wanted to try and use the new script language for flash, which is actionscipt 3.0, however I knew that I was familiar with actionscript 2.0 and I felt more comfortable using it, so I used that.

23

Inital ideas

Most of the other ideas have a vertical or horizonal navigation, but I wanted to experiment with different layout for a navigation.The image at the top is an idea of what I wanted the main page to look like. The logo is the main focus here. The image on the left is what the buttons would look like when the cursor is hovering over them. ‘26

FaviconThe Favicon is the icon that can be seen on the browsers location bar, it can also be seen when a website is added to the favourites.

I created the favicon in Adobe Ilustrator.The file size was 32 pixels by 32 pixels, as the favicon is very small, however by creating this it adds to the proffesionalism of the site.

code snippet: <link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />

‘

100%%

Load-ing

A loading page is an essential when using flash, as a flash site with lots of images can take a lot of time to load because the file size can be quite large. I experimented with the loading page and I wanted to use the speech bubble that’s part of my logo, as it would tie in with the personal identity package. The images on the left is an animation of a speech bubble that grows, as the percentage does, however I didn’t use this as I thought it didn’t look as nice, as the final loading page which is the bottom image.

The bottom image is the final loading page. I used a static image of the speech bubble instead, as I wanted to add text into it.

28

Main PageThe image at the top is the main page that greet visitors after the loading

page. I wanted to add a quote from a designer or artist, but I thought I would have a welcoming quote instead, as the home page is usually the place that people tell about themselves, but I have done this in the ‘me’

page.

Portfolio pageThe Portfolio page is split into four pages, as the work that I created were mainly in those categories. I wanted to create a different sub menu for the portfolio buttons, as I didn’t want to confuse the viewers if the buttons were similar to the main menu.

Graphics Page/Gallery

Within the portfolio pages I added a gallery to showcase the work that I created. I wanted to make small icons that showed a close-up

of part of the work, so viewers would be intrigued to click on the icons to see the full piece.

Contact PageFor the contact page, I wanted to use a comment form in it for viewers to leave a message, the image on the right is the message that viewers see after they have sent a comment.

I also wanted to create icons for the telephone and email details, as it adds a little more graphic detail to the page.

Me PageThe Me page contains my career, education and technical skills information in it. I created this page instead of a CV because I have seen many people put a link to

download a CV, but I think this way is much more better, as it’s structured nicely then a word document. Also sometimes people may not want to download things from a

website, so this makes it easier for them.

33

The artwork of the web site is consistent to her original business package identity. The artwork has a fresh and modern approach. The web site has a modern minimalist look which is very user friendly and a delight for the eyes.

User Trial

Sadif Bhatti Graphic Designer for the London Motor Museum

”

“

Hugh WyethFreelance 3D artist for Mediatonic.

“ I noticed there’s several different fonts used which doesn’t seem that consistentbecause in the book you used the chunky font for main thingswhereas you got the chunky font only for the logo and page links, but then it goes with the whole sketchbook style I think it all fits together despite the different fonts and colours for main things. ”

34

Bookmaking

”

”

After the first project workbook, I wanted to create something a little

different, so readers could differentiate from the other books. This time I have painted the fabric blue instead of pink ,as these are the colours in my logo.

The image on the right is the first workbook.

Conc lusionThe online project was a chance to further the personal identity package and get recognised by future employees online.The web site also let me expand my advertising areas and it was a good way to try and create something consistent with the first project.

The design of the web site was to be minimalistic, as the colours were very bold and I didn’t want it to get too bright. The most important thing for me was to bring across my personality, which I think I did, as when the main navigation is hovered over, blue speech bubbles appear.

Coming back from my placement, I hadn’t used Flash in a year, so getting back to being comfortable working in the actionscript environment took a while to get used to.

If I were to make it again, I would be more adventurous and try it in actionscript 3.0.

References1 Jacob Nielsen. Designing Web Usability. New Riders Publishing, 2000

2 http://www.leelok.com/_version2/

3 http://www.rvlt.com/

4 http://sushiandrobots.com/

5 http://newpollutionmagazine.co.uk/6 http://studioracket.org/

7 http://www.louisecampbell.com/#

8 Pepin Press. Web Design Index 8. Agile Rabbit Editions

9 Gavin Ambrose, Paul Harris. The Layout Book. Ava Publishing 2007

10 Gavin Ambrose, Paul Harris. Format. Ava Publishing 2005

11 Gavin Ambrose, Paul Harris. Print & Finish. Ava Publishing 2006

12 Julius Wiedemann .Taschen’s 1000 Favorite Websites. Taschen13 http://en.wikipedia.org/wiki/Helvetica14 http://www.theleagueofmoveabletype.com/fonts/4-chunk

37