Tag Archives: typography

A particularly inspiring design by studio-cuculic.hr

I really like the bright colours and the really interesting designs for the year. It is very eye-catching.

http://www.studio-cuculic.hr/radovi.php?c=3

http://www.korlat-vina.hr/images/cms_gallery_photo/63.jpg

http://www.korlat-vina.hr/images/cms_gallery_photo/64.jpg

http://www.korlat-vina.hr/images/cms_gallery_photo/68.jpg

http://www.korlat-vina.hr/images/cms_gallery_photo/65.jpg

http://www.korlat-vina.hr/images/cms_gallery_photo/66.jpg

http://www.korlat-vina.hr/images/cms_wine_year/1_image.jpg

http://www.korlat-vina.hr/images/cms_gallery_photo/78.jpg

http://www.korlat-vina.hr/images/cms_wine_year/2_image.jpg

http://www.korlat-vina.hr/images/cms_gallery_photo/77.jpg

http://www.korlat-vina.hr/images/cms_wine_year/7_image.jpg

http://www.korlat-vina.hr/images/cms_gallery_photo/79.jpg

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

Learning Outcomes – Not my work – This is from Moodle

1. Demonstrated an understanding of the structure and function of Internet designs, browser function and web page publishing.

  • Make sure you evidence in s/bk that you understand how websites function.

2. Considered the aesthetic and practical issues concerning web page design, including navigation, image preparation and issues regarding the end-user and accessibility.

  • How do websites look, work? How are they used? What is their function?

3. Designed, planned, built, tested and evaluated a set of functioning web pages.

  • Check each instruction on Moodle!

4. Evidenced knowledge of how to manage and organise the pages and relevant components of a website.

  • S/bk evidence needed to show you have prepared and planned the building of the website.

5. Further developed and widened their generic practical and creative graphic design skills, specifically (screen-based) page layout and typography.

  • Show how your own skills have developed and improved – reflection on your learning with practical evidence.

6. Developed good practice in the form of file management and organisation.

  • Well organised files (easy to find way around) and evidence of other management skills

7. Designed, planned and built graphics in relation to specific briefs.

  • Show how appropriate your designs are – how do they meet the brief?

Alternative Poster Designs – By Tom

Below are two posters I created that could act as alternative designs if our chosen design does not satisfy our groups demands. I chose to create two very different themed designs; one old and one modern, in order to obtain an impression as to how the desired information can be displayed.

Concept One
The Design:
This first design was inspired by 19th Century typography posters. I chose this theme of design as our poster requires a lot of text-based elements that need to be displayed. Such posters designed in this fashion are dominated by text, which is why I thought the concept could be a possible solution. The individual elements of text are sectioned in order for certain information to be separate from others to reduce confusion.
Thoughts:
I chose to use the worn paper as a background to directly relate to the style of poster used in the 19th Century. The way I have set out the page elements break up the desired categories in a way that I believe works. The typefaces I have used also directly relate to those used at that period f time. The issue with this design is the fact that I had to use actual photographs for examples, which does not best suit the overall theme of the poster. Another issue I have is the amount of space that is left. By looking at 19th Century typography posters, you can see that there is minimal space. The issue that lies here is the legibility of the piece may be effected, which would not be beneficial.
Concept Two

The Design:

For this design, I chose to give it a modern, organised impression. I chose to design it in this fashion as I believe it presents all desired elements (both image and text) in a way that can be understood by the consumer. The individual elements have been organised into categories and have been presented effectively (linked in some cases). The use of colours directly relate to those used on the ‘Independent’ logo.
Thoughts:

I feel the way I have sectioned elements into different categories and linked them in some cases works well and can be understood. By using a ‘table-like’ theme, I believe it displays all the desired information clearly. I personally feel that the elements of information that are linked to another is easy to understand (use of arrows and page separation). I also feel that the design of this poster allows actual photographs to be used without looking out-of-place. The only issue I can see that would be a problem is how the information links together. Although I understand it, others may not. In such a case, I feel alterations in the layout can be easily re-adjusted.

Find Tom here http://www.behance.net/tomknapp92

Looking at magazine layouts in Vogue

I really like the way the images have been arranged here because it gives me an idea for a design I could do for my project. There is quite a lot of type in italics here. Even though there is quite a lot going on here I don’t feel overwhelmed.

This spread looks beautiful and delicate. It is interesting that there is a white margin on the right side of the spread. The typeface used looks delicate and classy.

The big drop cap is really eye-catching. I love the typeface used. The right hand page is very text heavy but it is an interview so the amount of type is appropriate. You can see the use of a grid here. The pull quote is in italics.

Again there is a white column down the side and the pull quote fits in at the top. I can see that the same grid is being used here.

I thought this was an interesting spread because of how low down the title, the sell and the body text is. The reason why I think this works is because the use of white space on the right hand page reflects the image on the left. The whole spread is quite striking.

The next five spreads have a scrap-book look about them. I think I would like to discuss with my tutor and my fellow students about this way of displaying images. I suppose it is a case of taking a particular project and asking oneself a question. Is this a suitable way of displaying the images I have?

Clear use of a grid with three columns. White space left at the top to stop the spread from becoming overwhelming.

I think it is appropriate here how the images go from one side of the spread to the other and are in date order. I can see the use of a grid here that has three columns.

This spread is really clear and I can see how a grid has been used. I like the use of type with part of the title in bold.

All of the above are from the July 2011 issue of Vogue magazine. See below: