Typography for the Web II part.

Comments Off

Posted on 5th November 2011 by Iana in Typography

1. In this composition is used a non-standart font, “Reader Bold”. If this one in not available on a computer, than “Helvetica Neue” will be displayed. In case this font is also not available, than it falls back to simple serif Arial or Helvetica. By not using a solid black in the paragraphs designers created a very elegant look and feel.  http://clearleft.com/

Large Headlane
	font: bold 3.4286em/1 "Reader Bold", "Helvetica Neue", Arial, Helvetica, sans-serif; /* 48px/48px */
	font-size-adjust: 0.53;
	letter-spacing: -1px;
	color: #7EA107;
	text-shadow: 0 1px #fff;
	text-rendering: optimizelegibility;
	padding: 0.0833em 0 0.4167em; /* 4px 0 20px */

Small Headline
	font: bold 1.5em/1.1429 "Reader Bold", "Helvetica Neue", Arial, Helvetica, sans-serif; /* 21px/24px */
	font-size-adjust: 0.53;
	letter-spacing: -0.0238em;
	color: #6D9207;
	text-shadow: 0 1px #fff;
	margin: 1.5238em 0  0.3810em; /* 24px 0 8px */
Paragraphs

font: 14px/1.7413 “Helvetica Neue”, Arial, Helvetica, sans-serif; /* Baseline: 24px */ -webkit-font-smoothing: antialiased;

2. This site has really big headline with a bold weight of the text. Dark gray font colour instead of black, negative spacing and vibrant green subheadings make a very interest typographic composition.

www.zurb.com/

 

Headline

font-family: Arial, Helvetica, Helvetica Neue, Verdana, sans-serif;
color: #333;
font-weight: bold;
font-size: 45px;
line-height: 1;
margin: 0 0 9px;
letter-spacing: -1px;
text-decoration: none;

Subheadline

font-family: Arial, Helvetica, Helvetica Neue, Verdana, sans-serif;
color: #333;
font-weight: bold;
font-size: 30px;
line-height: 1;
margin: 0 0 9px;
letter-spacing: -1px;
text-decoration: none;

Blockquotes

font-size: 14px;
line-height: 20px;
color: #777;
margin: 0 0 18px;
padding: 9px 20px 0 19px;
border-left: 1px solid #ddd;
font-style: italic;

3. For this site were used very clean screen sans-serif fonts like Arial or Trebuchet MS. Black colour for the texts was avoided and used dark blue and gray instead. In the composition below all CSS rules create a visually interesting look.

http://copious.co.uk/

Headline
font-family: Arial, "Trebuchet MS",  sans-serif;
color: #094182;
margin: 0 0 .2em;
font-size: 2.2em;
font-weight: normal;
text-shadow: #a1c1d3 0px 1px 1px;
Subheadlines (About, Services, Portfolio)
font-family: Arial, "Trebuchet MS",  sans-serif;
color#094182; font-size2em; font-weightnormal; margin0; padding0; Large paragraph 
    border-bottom1px dashed #8FB9D6;
    color#0C4C96;
    font-size1.3em;
    line-height1.3em;
    margin-bottom20px;
    padding-bottom10px;Small paragraphcolor#4B4D4D;
font-size1.1em;

line-height1.3em;
margin-bottom1em;

Basic things to remember from week tree.

Comments Off

Posted on 18th October 2011 by Iana in Uncategorized

  • Always better to buy a hosting and a domain name at the same service (otherwise you risk to have a big headache to deal with this)

  • A basic elements, attributes and values in HTML like:

- <p>

- <h1>, <h2> …<h6>

- <a>

- there are parent and child elements, and sibling elements as well.

 -…

  • Like many tags, the image tag has a range of valid attributes (e.g. width and height). Each attribute must have a quoted value.
  • Most XHTML elements comes paired, but some of them (e.g. image)are single instances

  • The img tag has a range of valid attributes (width, height) and have a quoted value. Browser knows how much space to take for an image (without this attributes text will jump until download everything to the page)

  • AKISMET is a very useful tool for spam protection. Akismet filters out comment and trackback a spam. It is free for personal use. http://akismet.com/

  • In file naming all files and folder names should be in lower case.
  • If space is needed the hyphen of underscore should be used. “I’ve seen a lot of SEO Experts and many SEO tools recommend that you should be using hyphens in URLs rather than underscores, one example was Ann Smarty over at SearchEngineJournal. For the disadvantages of the underscore in URLs she says: Traditionally it isn’t seen by search engines as a word separator”. (http://x-pose.org/2010/03/seo-to-hyphen-or-underscore-urls-revisited/)
  • There are plenty of useful plugins for better functionality. We were suggested to install Firebug and Web Developer. Firebug seems to be very useful for web designers beginners, whereas Web Developer doesn’t look so clear to me :( I should certainly go deeper in understanding of it.

  • And at last designer should always validate a XHTML by using the W3C Markup Validation Service and to correct any of its errors.

My course work web site

Comments Off

Posted on 18th October 2011 by Iana in Uncategorized

ianakhomenko.co.uk  That will be my web space during the course.

Class 1 Three examples of good design

Comments Off

Posted on 11th October 2011 by Iana in Uncategorized

1. Conceptual Tanning Printer

Here is a conceptual model of the printer called Tanning Printer, proposed by designers Hosung Jung, Junsang Kim, Seungin Lee and Yonggu Do. Eco-friendly printer uses sunlight instead of cartridges – on paper, information is literally burnt tan. The design concept deserves attention, as well as the idea itself.

2.  Advertising Prints for “Red Cross”

Nice to see the spectacular advertising prints, which one cannot help but pay attention to. International Humanitarian Organization “Red Cross” asked for help of the advertising agency Paraguayan ONIRIA/TBWA to create the ads. Where these donations go to? How about extending a hand to those in need? These promotional prints demonstrated excellent mix of illustrations with photos.

 3.  Roundel -London Underground Logo

TfL’s Tube map and “roundel” logo are instantly recognisable by any Londoner, almost any Briton and many people around the world. It has become a major pop culture symbol. We had talked in the last class about the London tube map being a good example of a classic design. Now I would like to point on the roundel as well. The logo have seen many changes over the years. In 1913 was the first appearance of the famous circle and horizontal bar symbol, known as “the roundel”, designed by Edward Johnston. The origins of the roundel, in earlier years known as the ‘bulls-eye’ or ‘target’, are obscure. While the first use of a roundel in a London transport context was the 19th-century symbol of the London General Omnibus Company – a wheel with a bar across the centre bearing the word GENERAL – its use on the Underground stems from the decision in 1908 to find a more obvious way of highlighting station names on platforms. The red circle with blue name bar was quickly adopted, with the word “UNDERGROUND” across the bar, as an early corporate identity. The logo was modified by Edward Johnston in 1919.

The roundel had been used for buses and the tube for many years and, since TfL took control, it has been applied to other transport types (taxi, tram, DLR etc.) in different colour pairs. The roundel has, to some extent, become a symbol for London itself.

 

4. Pret A Manger add.

I was pleasantly surprised when I first saw the poster of the cabbage butterfly from Pret A Manger. Pret creates handmade natural food avoiding the obscure chemicals, additives and preservatives common to many of the ‘prepared’ and ‘fast’ food on the market today. I think that such a comparison and interpretation best convey Pret’s policy.

 

 

Such work seemed to me to be conceptually interesting and I tried to find similar projects. Here is my search result. I think Magimix posters look pretty good and fresh.

Magimix is a creator of copies of the classical and well-known paintings, using in their works a mixture of fresh fruits and vegetables.

Along with the slogan “Only exclusive is forever”, the artists of the Magimix studio make us believe not only in durability of products, forming an integral part of their work, but also something more: creative advertising makes us stop, think and smile.