Tag Archives: website design

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

www.whynotassociates.com – 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 Why Not Associates. This website is commercial.

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

This website tells me that the design team welcomes big companies like Nike or ‘small locally based commissions’. Students could use this website for research purposes, like myself.
http://www.whynotassociates.com/

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

This website doesn’t have any gimmicks at all that I can see. I don’t know if this very simple style would impress a large international company or not. One could argue that why not associates are so confident that they don’t need any fancy scrolling capabilities. They have worked with Nike so obviously a plain site is not a problem.

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

Plus – Please see ‘Interesting’.

Minus – I didn’t find the home page particularly appealing or amazing but others may disagree.

Interesting – The first thing that surprised me was that they had this image as their home page. It’s just hand writing in felt tip. I have to say I don’t get it but it made me want to click around to find out what their work is really like. This image made me think ‘Ahhh wise guys’ like as if they were trying to have a joke. It certainly makes you wonder what they’re about.


http://www.whynotassociates.com/

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

On the left hand side there is a menu giving links to the different type of graphic work they do e.g. print, book design, motion. If I click Print it brings up another menu and I can click on one of their projects to see the designs. I think it had been designed like this because this is a very easy and simple way of making the different types of work available for viewing.

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. The only thing I noticed was all the blank space left on the page, see below. There is no need/option to scroll right. This isn’t a problem, just something I noticed. I realise that this site has been designed so people with small monitors can still use it and so they can see the whole of a design without having to scroll left to right.


http://www.whynotassociates.com/

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

Plus – I liked the fact that I could just click on an image and the next one would load so there was no scrolling left to right. It gives good control. If you have a slow loading time it would probably be really frustrating though.

Interesting – It is interesting to see a site that doesn’t use left to right scrolling.

Minus – It took me a while to work out that the quickest way to see the next image is to click it. At first I thought there was only one picture for each project.

One thing I didn’t like was the way that the pictures of the final designs were taken. Instead of having them side by side so I can see them clearly, you can see below that they piled them one on top of the other. Others may disagree but I want to see the full final product. Images like this are very frustrating. It seems really lazy when you compare it to the way the other sites displayed their images.


http://www.whynotassociates.com/

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 friendly and confident. The type is very minimalist which some people may like.

Minus – This page shows the news about the design team. I was really surprised and disappointed that the whole page was just boring text. I can’t imagine who would sit there and actually just read this tiny text. The press page is similar to this but almost worse as it’s just lines of white type with nothing else. Who is going to bother to sit there and read that?


http://whynotassociates.com/news

Using white type on a light grey background isn’t particularly easy to read. It took me a while to find the email address which you can see looks tiny.


http://www.whynotassociates.com/about-us

Its slightly easier to see on this page:


http://whynotassociates.com/about-us

Interesting – It was difficult to find anything interesting about the type used on this site. I suppose the absence of any interesting type is interesting in itself but I’m scraping the bottom of the barrel here.

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

The background is always grey. I think this is fine as it is not distracting at all. The one this I did notice was I got really bored of just seeing grey all the time. Perhaps a little bit of colour somewhere would have helped.

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

There aren’t any gimmicks at all here that I could find. Perhaps this site could have benefited from a gimmick or animation.

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 is very simple and I didn’t have any problems. Once I had worked out that the next image loads when you click on the current image it was a lot quicker. Before I worked that out I was clicking on each link separately which was quite annoying.

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

This site uses a simple menu system with no gimmicks or fancy scrolling.

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

This site takes minimal to a whole new level. This site has no soul. The designs have a lot of soul but this is not reflected in the website design itself. This site relies on good designs, not a good website.

I was surprised to see a picture/design like this:


http://www.whynotassociates.com/environmental-3/blackpool-climbing-tower

I really like this design. It’s really eye-catching and full of energy.


http://www.whynotassociates.com/archive/nike/nike-shox

I really liked this too, from one of their free-lance designers:


http://www.christianeweismueller.com/graphic-design/nesta-futurelab/

www.pentagram.com – Task 1)


http://www.pentagram.com/work/#/all/all/newest/

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 Pentagram. This website is commercial and informative.

‘Pentagram is the world’s largest independent design consultancy. The firm is owned and run by 16 partners, a group of friends who are all leaders in their individual creative fields.

We work in London, New York, Berlin and Austin. We design everything: architecture, interiors, products, identities, publications, posters, books, exhibitions, websites, and digital installations.’

Above quote from: http://www.pentagram.com/work/#/all/all/newest/

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 want to promote/brand. The website shows that Pentagram can provide a number of different design services as explained above. I think this site might be directed at large, national and international companies. I recognise a lot of the brand names such as Tiffany’s and Guitar Hero. I zoomed out to 50% to get this screen shot.


http://www.pentagram.com/search/Guitar%20Hero#/316/

Students like myself may also look at this site.

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

As a student I find this site very impressive as I see this company has been trusted to design for the world’s leading brands. I assume a large company would also feel like this.

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 thought the layout was quite fresh with the white background. It is well-ordered. I am impressed that they have managed to put all this information into one website and split it into groups and make sense of it. There are a lot of links on the left hand side where you can click for further information about each design.

Minus – I felt immediately over-whelmed by all the different images on the websites homepage. My first thought was ‘Agh where on earth do I start/click!?’ I wasn’t sure exactly which email address I would use for inquires, especially if you want to inquire but don’t live in London, New York, Berlin or Austin.

Interesting – They have done so many briefs for so many companies. It is interesting that this site combines left to right scrolling with top to bottom scrolling.

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

I see this site uses left to right scrolling to show its ideas and designs and then if you click for more information the scrolling changes to top to bottom scrolling. I assume this is because people find it easier to look at images left to right horizontally and read text top to bottom vertically. Using type, images and menus is how this site communicates. There is also a search option.

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. It seemed to work fine. I did have problems scrolling which I will discuss later.

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

Plus – There are images for every project they have worked on. This site showcases the images clearly and effectively. The purpose it to show different stages in the development of a brand and how it looks today. The pictures are colourful and eye-catching.


Image from http://www.pentagram.com/work/#/all/magazines/newest/2613/

Interesting – I didn’t expect to see pictures of interiors.


http://www.pentagram.com/work/#/architecture-and-interiors/all/newest/1574/

Minus – I tried to click to zoom in but there is no option to do that. I can zoom in using my browser but the pictures and type blurred after a while.

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 typeface used for their logo is Modern No. 20 which is a really classy looking serif. See picture below. I don’t see why this wouldn’t be effective for screen use.


http://www.identifont.com/show?1NL

There is a choice to click ‘See more about this product’ and this loads a page (see picture below) which has detailed information. I don’t think there is too much type anywhere on this site that I have seen. I found the choice for extra information very useful and they have set it out in a very helpful and effective way. The type is not too small for me to read.


http://new.pentagram.com/2012/02/new-work-microsoft/


http://new.pentagram.com/2012/02/new-work-microsoft/

Minus – I can’t think of any major problems with the type here. Perhaps they could have used a more individual typeface than Arial in 13.5. Perhaps they had a reason to use Arial but I don’t know what that would be. Perhaps they are using Arial because they are business like in their tone so they want to put that across with a straightforward, no bells and whistles typeface. I think Arial is effective for screen use but I can’t say I find it very appealing. Perhaps because I’ve seen it so many times it looks common to me now. See picture below.


http://www.pentagram.com/work/#/all/all/newest/

Interesting – The tone of voice is very business like and there is little attempt at humour like there was in the Carter Wong site. These people are not interested in being your friend. They only want to produce the best designs for you. They don’t need to charm you, they are the best.

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

The background is all white so it isn’t distracting. I think it is effective because the photos really stand out as if they were in your hand. I zoomed out to 50% using my browser to get this screen shot.


http://www.pentagram.com/work/#/all/all/newest/2669/

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

The only gimmick I can think of is that it uses left to right scrolling. The other thing is the way the screen opens up and closes. See below. This is how it looks before you click on a design:


http://www.pentagram.com/work/#/all/all/newest/

Then lets say you click on the design called Whitney. The screen opens up and it looks like this:


http://tinyurl.com/p79bx48

When you click close it closes and goes back to the first screen. I do think this is effective because its something interesting and different and it keeps other designs on the page at the same time.

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 really like the navigation because its something different from the normal up and down scrolling. At first I thought it would be difficult to know where to click but you just have to jump in and start looking at different designs.

I spent a minute clicking here and wondering why I wasn’t able to scroll along to the right. In the end I worked out that you have to click and drag this bar and wait for more designs to load. Not just click on the little arrow. After I’d worked that out I didn’t have any other problems with the navigation.


http://www.pentagram.com/work/#/all/all/newest/

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

The menu with the links on the left of each of the designs is really useful. If you click ‘See more about this product’ another page loads (see above for pictures of Windows designs) and from there you can click for more links for further information and articles.

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

It was amazing to see all the big brand names. I forgot that these have all been designed by a person. Sometimes I forget that a person designed these brand identities as opposed to them just always being there. This company is pretty amazing.