Tutorial

1) Homepage- image sizes (for smooth JQuery) when slices less than 250K

2) About Me- steer away from photographs, can maybe use drawing of self or a photo of me in my working environment

3) Overview of each topic replacing welcome intro- short description of why passionate about graphics/illustration/print intro rather than same text from homepage

4) Use live text rather than an image of text otherwise might not be legible and will take ages to load- use default fonts!

5) Think about point size for smaller monitor screens

6) Portfolio- if using slideshow, include play/pause button so viewer has choice of taking their time looking at work

7) Use title and description of work as captions

8) Tabs- grey box surrounding doesn’t fit with the style of the rest of the website

9) Cross browser- research how website might look on other browsers, test on Adobe Browser Labs

10) FTP- to upload all pages and image and css/Jquery

11) HTML contact form rather than including email address- efficient, professional and secure- design a ‘mail to’ button

12) Links- file names must have no spaces for these to work

Overall, website works well and represents me well. Good consistent styling of website and suitable choice of colours.

Get in Touch Button and Download CV Button:

Further Development

Other things to think about:

1) First image of your work needs to be strong

2) Facebook like button?

3) Use of Galleria

4) Email address on page- is this really necessary? Maybe just use a form instead of providing contact details

5) Insert email address as image if using it on website so people can’t spam

6) Use metatags for google searches

7) Include CV!

8) Contact page needs to be engaging too because someone could land on this page first accidently

9) Use of drop down menu so easy navigation

10) Include “Copyright Victoria Kwan”

11) Portfolio is the most important, put first in navigation bar

12) Text needs to use websafe colour

13) Photos of self not important, don’t want people to judge you on your looks

Interim Critique

This went well though there were a few minor adjustments I needed to make. My branding worked well and represented me and my work well. The navigation was said to be simple and clear and the logo sat well in the top right hand corner.

Things I need to think about:

1) Text too greenà use grey for copy text instead?

2) Move contact up so more visible and easy to navigate.

3) In white space under logo have static bio

More Scamping

So, with my advice about my layouts I went back to drawing out scamps of how I could better my ideas. I included the new logo and icons and tried making the navigation more attractive and easy to use. Another layout alteration I looked at was to minus the amount of negative space and maximise the area where I was going to showcase my work.

Logo and Icons

After receiving advice about my logo from the last tutorial I figured it was time to take a look at this part of my branding because it would be a vital image that would represent me and my work. I decided to go for the name ‘yeewah’ in the end. It is my Chinese name, but it has a design-like sense to it because of the weird combinations of letters used and the way it sounds when said out loud. I wanted to keep the summery green (pantone 276C) because I felt this represented my personality of being happy and friendly quite well, but not too feminine. I tried to incorporate some sort of pattern into the logo which could be used throughout the website so to link thelogo to the layout of the page (ie. The dotted green line).

In addition to my logo I also designed my own icons to go with my quirky style. These include the facebook icon, blogger icon and contact information icons. I also have the idea of making the information icons interactive, like the door of the house opening or the phone ringing, but I’ll get round to that if I have time.

Tutorial

So, the first tutorial since starting this project, I was pretty confident this time around because I felt like I actually considered my layouts well after numerous scamping sessions. Things that came up about my ideas were:

1) Need to think about columns, grids and how JQuery would fit into my layout (is. The simpler the better)

2) Don’t use the word ‘livebriefs’ because it suggest amateur or being a student which is not what we want. Want to come across as professional and motivated to find jobs.

3) Use ‘yeewahkwan’ instead of ‘Vix’ for logo because otherwise it sounds too casual like a secondary school nicknameà not professional.

4) Layout is ok, but play around with it a bit more.

5) Look at my colour palette and logo.

6) Too much white space, utilize space better and use it to showcase your work in the best possible way.

Initial Ideas

I began drawing out scamps of initial ideas which just came to mind after researching the importance of navigation. A lot of ideas came out of just random scamping and I felt this was a good starting point from which to pick and develop the ideas with the most potential. Hurrah for manic scamping!

I translated the best designs onto the computer using Photoshop to see which layout realistically worked the best. I started out with looking the homepage first because I felt this was probably the more important page of my website because it would be the first page a viewer would comeacross when visiting my site, thus it would give them the first impression.

For this project I wanted to create my own typeface to represent myself. This would be a massive challenge but also a very rewarding and meaningful one because it would brand me as a person and designer.

Good Use Of Navigation

Researching Website Design- Navigation

Navigation and its importance:

1) Helps us find whatever it is we’re looking for.

2) Tell us where we are.

3) It gives us something to hold on to.

4) It tells us what’s here.

5) Tells user how to use the site.

6) It gives the user confidence in the people who built the site.

It needs to be clear, easy to use, easy to find and consistent on every page.

Different types of navigation:

1) Site structure navigation

2) Function navigation

3) Direct navigation

4) Reference navigation

5) Dynamic navigation

6) Breadcrumb navigation

7) Step navigation

Ways to do navigation:

1) Horizontal text

2) Vertical text

3) Drop-down menus

4) Sub-menus

5) Text with description

6) Icons or graphics

7) Experimental

Inspiration Websites to get started

Some sites to provide inspiration:

www.ianbilbey.com

www.sarafanelli.com

www.adrianjohnson.org.uk

www.johnburgerman.com

www.jambonbon.com

www.anthonyburill.com

www.thisisthenewyear.com

www.whynotassociates.com

www.wolffolins.com

www.motherlondon.com

www.ddb.com

Final Critique

I was very pleased with how well this went, there were hardly any changes to be made after this crit. I had answered the brief well and sorted out the problem of not knowing who my target audience was. I did have to change my imagery for the Cement Garden, but this was no problem after I knew what my graphic system was. The idea was simple yet visually effective and they worked well together as a set. There were only small adjustments to b made like making sure the elements on the page were on the grid and the text on the baseline grid. Other than that, there wasn’t really anything major I needed to look at before the hand in.

Although if I had more time I would force myself to look more at the typography because this would probably be my weakest skill in my area of practice, although I do feel I am improving gradually. In addition, if I had the opportunity I would visit a printers and get a feel for the different types of stock I could use to print my book designs out. Obviously because I was limited with the materials and facilities at university I couldn’t really experiment with this part of the project but I will note it down for next time.

Back To The Drawing Board

After some further research I then began scamping a number of design layouts which might work, I felt this really helped me realise the real potential in the designs and I was able from then to clearly pick out and experiment with the best of the layouts on Indesign. During this experimentation period I came across the font Abalone which is a serif, when used as caps, it provides a sense of overpowering figures yet a little vulnerability which was the exact style I was going for.

After choosing the layout that I thought would work best, I then tried using different methods to illustrate it, vectors, gradients, cut outs of photographs but they either gave a too bright and happy feel to the imagery or it was just plain boring. I needed something to break the imagery up and make it more interesting and engaging. That’s when I thought of using photography again and to have that entwine with the typography. One, it would raise the question of which is meant to be more powerful (like struggling or fighting to be better than the other) and two it would be like the imagery is encased in the typography, not being able to get away (reflecting some of the characters in the story).

At first I was really set on using vectors for my imagery because all the other McEwan’s book illustrations would just be photography which seemed like a boring solution. But in the end because the stories seemed so realistic and serious, it seemed wrong to not represent it using the real thing, photos. I also researched what colours complimented each other and picked a colour palette that would best suit the modern feel I wanted as well as engage my target audience.

Tutorial

During this tutorial I received a lot of advice that would help push my idea in the right direction. I was bogged down with how the layout would look as a whole with all the design elements in it, but what I didn’t do before using Indesign was look at the elements individually and get a better understanding of what it was I wanted from each of them.

It was also evident that I need to think about who my target audience is, at the moment, because my use of vectors and dull colours, the design didn’t look interesting or modern at all and most likely aimed at the older generation, which was not what I wanted. The format of the book needs to be carefully thought out too, whether a thin book would suggest vulnerability or if a thick one would show overpowering characters within the book. I need to experiment more with a variety of typefaces in order to arrive at my final choice and not just plonk in what I think looks good.

In order to get a better idea of what type and colour worked well together, I started to look at books with a graphic system, ie. A set of books in the same collection. I found that large imagery worked well, there also needs to be some sort of pattern going on in the background which would feature in the book design to tie all the books together.

Initial Ideas and Type

Not knowing where to start with my book design I decided to just jump in at the deep end and start creating layouts in Indesign which was not the best of ideas, but I didn’t even realise at the time. I tried using vectors in the layout but I didn’t kno what it was but it didn’t really work, it turned out a little bland and old. It was obvious that I had to take a close look at colour at some point during this project too because I wanted to go for something classic but also something that would bring out a modern-feel to the piece.

I looked a little into the typography I was going to use in my layout. Overall, because McEwan’s writing has a certain eeriness yet classic feel to it I felt that serifs worked best to give it a more traditional and authentic style.

Book Design

Today I widened my area of research and looked at some traditional book covers as well as more modern ones. From this I found that a lot of covers used vector images and mixed media as a part of their imagery. These were still effective in summarising the story in a serious way.

McEwan's Existing Book Designs

I didn’t want to copy his previous book cover designs but felt this was a vital part of my research to see how other people represented his work. So I figured I should get this part of my research over and done with to begin with so that once I’ve picked out the main important parts, I can concentrate on other things and not be encouraged to copy work that already exists. I found that a lot of the past book covers used photography which brings out the realism in the stories and makes it that more terrifying because it’s more believable.

3rd Project Brief

Ok, so by this point I have 3 projects going on at the same time which completely blew my mind. But I was quite excited to start this project because I love looking at layouts for things like magazines and books. I also knew some of Ian McEwan’s stories so I was always motivated to build on my knowledge of his work. His oldest books were somewhat disturbing and almost always had sexual connotations. There was a sense of cynicism in his writing which made me question his lifestyle and background. Thus I began my research into his history, his bringing up, parents, religion, marriage etc. It wasn’t surprising that some of the material I found was a little disturbing, and he didn’t have the normal family-life you would expect.

Final Critique

Stock was a very important part of this project because it added a lot to how the designs would turn out. The first impressions brought on by the texture of the business card is a vital part of my design choice. In addition I also decided to definitely use a hand-rendered font for the name on my business card because it showed the honesty of his personality. I looked at different finishing techniques I could use for my card, this included foiling and embossing which both I thought would work well to create an elegant design solution

.

During this stage of my project I came across a very subtly textured maroon coloured stock which I thought fitted well with the emotional and deep side of Steinbeck. This colour also emitted a sense of professionalism as well because it was bold but in a stylish and underrated way.

After I had the business card sussed out, I needed to update my letterhead and compliment to suit its style. This wasn’t that difficult though I found that some of the transparent feature of the business card was difficult to translate onto a big piece of paper without it looking out of place.