Tag Archives: typeface

Looking at miltonglaser.com

  • What is the immediate ‘feel’ of it?

 Its clean, simplistic and looks professional.

  • How are images used?

 If you click on ‘The Work’ it loads this page. Each picture is a link which you can click on to see the corresponding design.

I was really glad to see that this website had a large space for the design and a smaller space for the text.

  • Choice of typefaces?

Arial 12

Arial 9

Arial 15

This section is an interview and you can see there is a lot of type. I don’t understand why the designer didn’t at least put a space in-between each question and answer set. Instead its all lumped together which makes it look really unappealing and over-whelming.

  • Navigation – is it easy and straightforward or difficult and frustrating?

This part of the website was really annoying. I was trying to read the type on the designs and the next design kept loading and appearing before I’d barely looked at it. I found this really frustrating.

All images from http://www.miltonglaser.com/

www.ligalux.de – Task 1)

1) What kind/type of website is it (commercial, fan site, informative, helpdesk, forum for art and culture or music etc).

This website showcases the work of a design company called Ligalux. This website is commercial and informative.

This links to who is the website for, who is it directed at? Who might be using it.

This website is directed at any person in business or any companies who have a product or service that they need some design for.

Students could use this website for research purposes, like myself.

You then need to evaluate it in terms of its function and user group – what will they think of it?

What are the visual aesthetics of the content of the website? What is the immediate ‘feel’ of it? A PMI might help

Plus – See ‘Interesting’ for my answer.

Minus – I didn’t know where to click first but I think that’s the whole point.

Interesting – When I first saw the website it looked like this:


http://www.ligalux.de/

The first thing that surprised me was the funny scratched swede background and the funny dot/button in the middle of the page. It was interesting how there is three little boxes on the left which link to stories about the company.

ask WHY it has been designed like this and HOW does it communicate.

This site is split up into parts in a not dissimilar way to the British sites I looked at. This site has a different link for Projects, Customers, About Ligalux, Awards, News, Tags and Contact. It is logical for it to be split up like this so people can find what they are looking for.

Page size/length. Are these beneficial to the site or do they make it difficult?

I didn’t find any problem with the page size and length.

How are images used? PMI but be specific about effectiveness and purpose

Plus – There are images all over the site which makes it look interesting. Some of the images turn to colour when you hover over them and then you can click on them which gives a feeling of dynamism.

Interesting – See Plus for my answer.

Minus – I can’t really think of any minus points.

How is typography used? PMI being specific about:

  • Tone of voice of the type
  • Choice of typefaces – are they effective for screen use?
  • Bulk or lack of type – is it too much, too blocky, too small etc. Say HOW/WHY it works or does not work

Plus – The tone of voice is quite friendly and confident. They point out that they will re-work their designs if it is necessary. The typefaces used seem to work fine for screen use. Generally I didn’t see too much or too little text.

Minus – I was quite surprised to see Courier being used as it reminds me of a typewriter but others may like it more than I do. The list of customers seems to be just a block of text which isn’t particularly clear to see. I struggled with it.


http://www.ligalux.de/kunden/index.php

Interesting – They use two typefaces which are Georgia in size 14.5 and Courier in 8.5.

Back ground colours and textures? Effective or distracting? How and Why.

I quite like the funny scratched swede background and the funny white dot which changes in size depending on which page you’re on. At first I thought it might be distracting but it isn’t.

Does it have gimmicks, animations etc? How and why are they effective or not?

I really like the gimmick they use for their home page. Every time you go back to the home page it loads a different version every time. I really liked this and it kept the home page fresh and interesting. Here are the different versions they have of their home page:


The above 5 images all have this address http://www.ligalux.de/

The other gimmick they used is that when you hover over an image it goes from black and white into colour. See below. This makes the site seem dynamic.


http://www.ligalux.de/referenzen/index.php?spalten=9

Is the unity of the website spoiled (or aided) by commercial banners and so on?

There are no commercial banners or adverts which is nice as I’m not distracted.

Navigation – is it easy and straightforward or difficult and frustrating? Describe HOW and WHY this is so. Be specific as this is very important.

I didn’t have any problems with the navigation apart from at the beginning I didn’t realise I could click for more images. For example I saw this and…


http://www.ligalux.de/referenzen/index.php?oid=379

…I was confused why they put a text box covering the design. Then I realised I had to click on the arrow and that would take me to more pictures showing the design in detail. See below. After I worked that out I didn’t have any problems.


http://www.ligalux.de/referenzen/index.php?oid=379

Add any other points or comments not addressed directly by these questions.

This is the first site I’ve seen so far that has a page that shows the tags used so you can click on them. I thought this was quite clever and it helps people to find what they want.


http://www.ligalux.de/tags/index.php

This site makes its news page as interesting as it can by using type and pictures:


http://www.ligalux.de/news/index.php

www.spin.co.uk – Task 1)

1) What kind/type of website is it (commercial, fan site, informative, helpdesk, forum for art and culture or music etc).

This website showcases the work of a design company called Spin. This website is commercial and informative.

This links to who is the website for, who is it directed at? Who might be using it.

‘Our clients come from many different sectors. They range from the global to the local.’
http://spin.co.uk/about/approach/

Students could use this website for research purposes, like myself.

You then need to evaluate it in terms of its function and user group – what will they think of it?

What are the visual aesthetics of the content of the website? What is the immediate ‘feel’ of it? A PMI might help

Plus – I immediately liked the bright colours on the home page. See below. It made me think ‘This is exciting, something is happening here’.


http://spin.co.uk/

Minus – The immediate problem I see is that I can only see half of the second picture which is annoying.

Interesting – I was impressed with the link called Spin Culture which shows their photography that they’ve taken while they were travelling. This shows that they are making an effort to give the audience more than just the bare bones.

ask WHY it has been designed like this and HOW does it communicate.

The site is split up in to different sections so you can look at the work by discipline, by client or look at the recent work. This is a logical way to split the work up so the audience knows where to click to find what they want to see.

Page size/length. Are these beneficial to the site or do they make it difficult?

I didn’t find any problem with the page size or length. I don’t find it to be a problem to scroll down to see all the images.

How are images used? PMI but be specific about effectiveness and purpose

Plus – This site is full of beautiful designs. The clients want to see these and I think they will be impressed by how beautiful the designs are.

I liked how images were used as links. See below. You could click on the menu on the left or on an image.


http://spin.co.uk/work-by-discipline/identity/

Interesting – See Plus for my answer.

Minus – I was disappointed that the images were so big that I couldn’t see the whole image at once. I had to scroll up and down and it was very annoying. See an example of this below.


http://spin.co.uk/latest-work/proa-mexico-exhibition/

How is typography used? PMI being specific about:

  • Tone of voice of the type
  • Choice of typefaces – are they effective for screen use?
  • Bulk or lack of type – is it too much, too blocky, too small etc. Say HOW/WHY it works or does not work

Plus – The tone of voice is business like, straight to the point but they make it clear that all are welcome.

Minus – They used only one typeface, Helvetica in size 10.  There isn’t anything wrong with this but some people may prefer to see two different typefaces.

Interesting – I can’t think of anything that is interesting about their use of type. The type is used in three different colours which are black, dark grey and light grey.

Back ground colours and textures? Effective or distracting? How and Why.

The background is white all the way through the site which is good because it isn’t distracting.

Does it have gimmicks, animations etc? How and why are they effective or not?

To see the information about the project you have to click on the cross and then the information appears. See below. I think this is clever and effective and makes the page seem dynamic.


http://spin.co.uk/latest-work/matthew-hiltondesigns-of-the-year-nomination/

The other gimmick is that when you hover over an image it tuns black to indicate that you can click on it. See below. I think this is clever and effective.


http://spin.co.uk/

Is the unity of the website spoiled (or aided) by commercial banners and so on?

There are no commercial banners or adverts which is nice as I’m not distracted.

Navigation – is it easy and straightforward or difficult and frustrating? Describe HOW and WHY this is so. Be specific as this is very important.

The navigation for this site was very easy to use and it didn’t take me any time to work out how to use it as it has on some of the other sites I looked at. The menus and the scrolling are simple and effective. However, it is easier sometimes to scroll left to right when looking at images which is not possible on this site.

How do design elements such as link buttons help the navigation?

It was good to see links to outside sites like the site they built ‘for furniture designer Matthew Hilton’ matthewhilton.com

Evaluation and Reflection

1) Visual Communication:

In what ways does the visual communication/message of the piece meet the needs of the brief?

Cover – I made am image of a boot using all my own props and my own camera. I used a small amount of wording to lead into the article. I  chose to use Minion Pro Bold Condensed for this wording because I think it fits in with the style of Creative Review.

Double spread – I used two found images. I put the address of the website on my final piece. They were very high quality images.

In what ways does the visual communication/message of the piece fail to meet the needs of the brief?

I don’t think that the visual communication that I used fails to meet the brief in any major way.

What are the strengths of the visual communication? Why?

Cover – Everyone can identify a boot. I hope that the bright pink leggings and fish nets will grab people’s attention.

Double spread – I used bright striking colours to catch attention. It is not very often that anyone gets to see a cyber Goth so I decided to use a picture of one which featured her amazing hair.

What are the weaknesses of the visual communication? Why?

Cover – I don’t think the plain back ground used is eye-catching but I had to follow the style of Creative Review and they rarely use a bright back ground. A bright back ground may have been overwhelming.

Double spread – I don’t know if everyone will recognise a glow stick, especially as I’ve enlarged the picture.

In what ways could the piece be mis-read or mis-understood by the audience? Be specific about who the audience is.

Broadly speaking the audience is graphic designers, people involved with advertising, teachers possibly, people interested in art and design and students such as myself.

Cover – A lot of people won’t know what a cyber Goth is so although they’ll understand seeing a boot I’m not sure that anything further would be understood.

Double spread – People may think that all cyber Goths wear purple, are female and use glow sticks which isn’t true. They may mistake the glow sticks for light sabers and think that cyber Goths use them as an accessory when they don’t.

In what practical ways could the piece be developed or improved?

I’ve thought about this quite a lot. I think that the leg and boot idea could be reworked by posing the boots in a dance move as cyber Goths have their own way of dancing. Or another picture could be taken of hands posing in a dance move. I would have had to pay for some props to do this though or perhaps I could have made a vector of dancing hands.

2) Reflection of own working practices:

Be very honest with yourself in this section. Please feel free to approach a member of staff for help finding ways to develop skills.

How was my time keeping?

My time keeping was much better than in the last project so I’m happy about that.

How was my analysis of the brief?

I think my analysis of the brief was quite good. The brief was quite specific so this helped to keep me on track. I hope that I have covered everything.

How was my research?

The research was difficult as there were no books in the college library about cyber Goths. I bought a book from Amazon. To research cyber Goths the only option you have really is to look where they came from, so look to see what happened just before they arrived and actually look and listen for yourself to their images and their music. This is what I did.

How did I draw conclusions from my research?

Cyber Goth – I looked to see what cyber Goths have in common. What they think is good and what they think is bad.

Layouts – I looked to see what Creative Review’s layouts had in common. I looked to see what style of layout other magazines use. I looked to see what type of design Creative Review use for their covers.

How did I use research to generate and develop ideas?

The images I found on the internet were the most useful thing to give me inspiration. For example I found Tish’s and Rehula’s websites while looking at images using Google image search and this gave me ideas for a few possible cover designs. Looking at Creative Review was very useful too as I needed to follow that layout style.

How did I use evaluations to help with my ideas generation and development?

Whenever I came up with an idea I asked the tutor for feedback and this shaped the final outcome. An example of this would be when the tutor said that the rock was too bright and was distracting from the boot. I then went away and developed my idea to fix the problem.

How did I use experimentation during the project? How can I make this more effective?

I made an idea for the front cover using photographs I took in London. It could be made more effective if the pictures were more obviously related to cyber Goths. The idea was very abstract and I don’t think people would be able to understand any meaning.

In what ways did I show that I had achieved the Learning Outcomes? How can I improve this next time?

I talked about the ideology of cyber Goths and included images as we were advised to do.

What parts of the project did I enjoy most? Why was this the case?

I enjoyed being able to use my own props for the front cover and being able to use bright colours in the double page spread.

What parts of the project did I enjoy least? Why was this the case?

Doing the research was really difficult because the college doesn’t have any books that mention cyber Goths so this made me feel very stressed.

At what times did I work best? Why might this be the case? How can I ensure that I work well at al times?

I worked best when there were no distractions. I could turn my mobile on to silent.

What areas inspired me? Why was this the case? How could I follow these up?

The artistic nature and the bright colours of the cyber Goth culture inspire me. I really liked the typeface used in Vogue magazine.

What areas were challenging or difficult?  Why was this the case?

Not being able to use found images for the cover made it more difficult. If I didn’t already own a pair of New Rock boots I’m not sure what I would have been able to do.

How can I go about developing and improving  the parts I found difficult?

I think I need to learn how to illustrate so I can make my own images. I don’t know how to do this so I will need to ask the tutor. For the next project I will pick a subject that does have books in the library.

Do I need to develop certain skills? Do I need these now? Or later?

I think I need to learn how to illustrate.

Any other points?

I want to find the name of the font that I like from Vogue magazine.

New Magazine Design – Looking at layouts

This double page spread is really effective. The pictures go along the centre of the page and have been put together like a collage. The body text runs at an angle. The over all effect is appealing. I don’t see anything I think is bad here.

The pictures go along the bottom of the page and have been put together like a collage. It is very interesting how the column of the body text run at an angle. The text appears to follow the shape of the buildings somehow. This design is well-balanced.

This time the images run along the top of the page and the text runs along the bottom. The sell is in the centre of the page. The body text appears ro be imitating the shape of the buildings. What a clever idea. The images seem a bit squashed together but this isn’t necessarily a problem.

Issue 4 – The title has an interesting effect. It looks like some of it has been erased. This picture is quite small so I can’t see the detail properly to be able to comment on it.

Issue 5 – The title has a different design to issue 4. This cover is striking and the type used is of different sizes. Faces have been used to make a letter. There is quite a lot going on here but I think all the different elements work well together.

Issue 9 – The title is different again. The type runs down the left hand side and I notice that it overlaps. I think this effect works well even though the type isn’t particularly clear.

Issue 10 – The title is different again. I think this design is eye-catching. The image in the centre has a bright border and there are arrows pointing to it. The black bold type really stands out.

These four covers of Ray Gun are quite ‘messy’ but the designer has made all the elements work together to make an interesting piece. I have never tried to make a piece of grungy design like this but I would like to learn.

Top – This is really eye-catching. The images and the type remind me of a cartoon. The sell is under the title and the body text is directly to the right of the sell. The images overlap the title. I think the audience of this magazine would find this design appealing. I don’t see anything I think is bad.

Bottom – What I like about this spread is the use of two subtle curved borders. One runs under the sell and the other runs under the main title. I think that’s really clever. I think I would like to use this idea in a design if there is a oppotunity.

This design looks really different to the two above. The top third of the page has been left almost blank. It’s interesting that the body text runs all along the page on the left as opposed to being put into columns. I like the way the title on the right has spaces in the words. It is very interesting how the pull quote runs vertically. I think this design works well and it isn’t overwhelming.

All of the above are from this book:

Time Line

I found this amazing time line in a book. It is certainly information overload but I wanted to include it so I can look up names of type faces and type designers on it. I want to use it as something to refer back to if I need it. This time line shows many things including ‘Technical developments, important events and publications’, ‘important people’, the birth date of typefaces, images of examples of type, ‘special paintings’ and ‘developments in painting’.

This time line puts everything into context. I won’t be trying to memorise it but it should be helpful as a reference.

I have included each part individually as the writing is bigger on the individual pictures and easier to read.

Part 1

Part 2

Part 3

Part 4

Part 5

Part 6

Part 7

I used the following book to make this post:

Publisher: Taschen
You can buy the book here:
http://www.amazon.co.uk/Letter-Fountain-Anatomy-Joep-Pohlen/dp/3836525097