Good/Poor typography

Good typography

Pleasant House Bakery is simple site with good readability. Line-height in this example is more than 1.5 (probably 1.7) but it seems acceptable. On site it is used just serif font-family (in heading, menu and body) font with different font-styles (normal/bold/italic). Hierarchy of headings made correctly: from large size of main heading (“About”) to small secondary (“hours”, “location” etc).

Targetscope – site of marketing agency with memorable design and typography. They use retro style of fonts and with associated design in complex it looks  wholeness. I’m not sure about the height of the letters (they are too low), but probably it is original retro style.

Women on business – classic news site. Clear, light site with good readability (large margin between each paragraph). Site uses sans-serif font-family in all parts (heading, main content, menu). Probably, sans-serif looks more soft, because it is a site for women. This site has problem with very small spacing between main heading and first paragraph (not on screenshot, but on another pages).

Poor typography

Four Worlds Bakery – site with good readability, but also with careless using of typography (link’s colors mainly). This site uses different font-styles of links for important and VERY important ones (normal and bold style respectively). Also site doesn’t use different size for sub-heading and it is difficult to understand where a new subsection starts (i.e. try to find “Latest Press”).
Slade 40 years – typical example of the unprofessional fan-site of music group. There is nothing about “good typography”. Clear pure white color of the letter hurts the eyes on the black background. Other mistake: in body text uses text-align: center. Sub-heading (in the end of screenshot) has too small margin before a main text block.

Killers fan-site – another music fan-site. But in addition to the above there is diversity of colors. Even and too high margins between date and text in block “Latest news” make misunderstanding “which date to which event”. And on the contrary too low line-height in the main menu makes it difficult to read the text (if we don’t count too bright colors).

Good/poor color schemes

Good color schemes

1. ModCloth (http://www.modcloth.com/)

This website uses pastel soft colors like blue, peach, coral and also mixed shadows of them for related elements. Blue and coral are complimentary colors and using them together makes wholeness result. Important notice: used colors at this site are not fully saturated.

2.Site of London Jazz Festival (http://www.londonjazzfestival.org.uk/)

Principally, site is created in black-gray-white color scheme with some bright spots (purple and red). Site about festival includes most relevant information about all events (approx. 250) that is why design should provide support and shouldn’t pull over attention for itself. In my opinion, these serious and calm colors are good for theme of  jazz festival site.

3.Bouchnon bakery (http://bouchonbakery.com/)

This site with 2 complimentary colors: warm intense brown and fresh light mint. It’s interesting that first site in this article has the similar color scheme (red and blue-green), but the look is totally different. I like developers decision about green color: first hue used like background (light mint with high opacity) and second one used like border (intense green). Overall, this natural color scheme is a good choice for bakery site because these colors associate with cosiness and warmth.

Poor color scheme

1.Joy of backing (http://www.joyofbaking.com/)

Site color scheme mainly consists of white and blue/light brown complimentary colors without any hues; and also we can easily find orange, red, green, gray colors (if we don’t count colors of all photos). Overall, with plenty of colors it is very poor “bald” site without strongly marked and memorable design. And it is hard to understand where to look first.

2. Versailles home textile (http://versailleshometextile.com/)

Dark gloomy poor color scheme with only one adding color – yellow/gold. I think that the main idea of this site  is to create conception about luxury and magnificence. But it doesn’t work. And it looks like cheap quick and premature color scheme. 3. Alushta International Workshop (http://www.kipt.kharkov.ua/…Alushta2012/index.htm)

Site with explosion of colors! Green, red. purple, blue, yellow colors don’t work together and user doesn’t know where to look first. Also another disadvantage of this color scheme is using of fully saturated colors without any hues.

 

Useful notes about XHTML (classwork 03)

-          Always close tags (pairs and single). Tag <br/>.

-          Always use only lowercase.

-          All image elements must have scr(source), alt (text alternative), and some attributes with quoted value (e.g. width, hight). Example of the correct form: <img src=“photo.jpg” width=“40” height=“40” alt=“Name of Photo” />.

-          By default all numeral values are in pixels if another meaning (cm, em etc) isn’t mention.

-          There are 3 types of links: Continue reading

3 design objects. Part 2 “Camera Lens Cup”.

- it looks like a real camera lens. All details are carefully worked out.

- rubberized outside of the cup: comfortable to drink.

- coaster could be used like a place for cookies.

- I have this one)

 

3 design objects. Part 1 “Bus stop”.

bus_stop_signBus stop sign, in my opinion, is a great example of good laconic design. Short view – and you instantly get all necessary information.

-          Pure red color.  It always attracts your attention.

-          Simple lines of unforgettable shape: only circle and row.

-          Clear, strong information without ads or something common. You always know towards what main point this bus goes. Continue reading