Choice of font is really important

Clarity and Personality

Clarity:Clarity refers to readability; how easy is it to read the text on your page

Personality: Look and feel; tone of your voice

Fonts can be subtlety different but convey a different message

Purpose of serif:

Traditional Print

Serif used to guide the reader, easy for the eye to follow, easier to read at small size

Sans serif used traditionally for headlines in a newspaper

However on the web things are DIFFERENT.  There is a reversal of the print traditional method.

Serif used for headings and sans serif is used for body text.  Sans serif renders better at lower resolution.

 

Some Web safe fonts to use:

Verdana: It is neutral

Arial: Classic, scientific but warm

Comic sans: Informal, childish or amateur

Times New Roman: Classic, Compact; OK to use for headings

Georgia: Elaborate, Warm; designed for screen

Courier: Basic, Traditional (could be used to display code)

 

How many fonts should I use?

2 other you would have to make a pretty good case for using more.  LESS IS MORE!!!!

 

CSS Typographic Properties:

Font-fmaily: Georgia, “Times New Roman”, Times, Serif;

font-size: 1.0em;

font-style: italic;

font-variant: small caps;

font-weight:bold;

letter-spacing: 0.1em;

line-height:1.5em;

text-align:justify;

text-decoration: line-through;

text-ident:1.2em;

text-transform: lowercase;

word-spacing: 0.5em;

—————————————————————-

Line height makes a massive difference in readability.  The default size is 1.5em.

 

What units should I use?

pixels, points, ems, percentage, small, medium, large

 

Pixels is fixed and tied, absolute

Percentage & em is scalable and relative

 

Percentages & ems only scale in IE

IE will not scale text if set in pixels

 

 

 

 

 

 

 

 

Bad Colour Schemes

It was really easy to find many wesbites that had a bad colour scheme. When they tended to have bad colour scheme it normally meant they were also bad websites.  It’s amazing what I found.  Some are really horrible!

 

This one below get the prize for the worst designed website I’ve ever seen.

Check it out:

http://www.americanbeautybordercollies

 

I belive I’ve found some really good websites with great colour schemes. As with many things in designs, colour is a very subjective things influenced by a whole array of factors such as culture, etc.

Anyhows, here it goes:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Things I’ve learned this week

1. The HTML tag <hr/> is a presentational issue and not structural. CSS borders should be used instead.
2. Never use mark-up to style pages.  Presentational mark-up is a bad approach.
3. Inline elements have to be nested within block-level elements.
4. Characters must be encoded properly, such as an apostrophe.
5. Insert images in a list, semantically use a list to mark-up images.
6. What is a font stack, e.h. arial, helvetica, sans-serif (always follow up  with windows font with the equivalent in Mac)
7. Two elements in XHTML that don’t do anything.  These are the <SPAN> and <DIV> tags.  Span and Div tags are used for identifying elements in the mark-up which is not covered in standard HTML.
8. No inherent mark-up with these two tags.  The div tag is used to define content sections (a block-level element)
9. Eyes can differentiate between 16 million colours.  This is why it is referred to as true colour.
10. When font names have spaces then place it in quotation marks
11. To reset the browser defaults then use the * (asterisks)
12. Good practice to comment your CSS /*…Comment…*/
13. Class names should describe the content and not what it does.  Make it descriptive of the content and not the rule.

 

 

 

The Dead Sea Squirrels, an upcoming indie rock band from Sheffield.

(Please note this post is incomplete)

The Specials

http://www.thespecials.com/index.php

This website manages to capture the look and feel which the band represents.  It gives it a 70′s look, the decade the band was formed.  Its use of suitable font typograhpy and colours is very well suited for the band.

 

 

 

 

 

 

 

Gary Nock

http://www.garynock.com/

This website manages to capture a

 

RemedyDrive

 

 

Candlebox

http://candleboxrocks.com/

 

 

 

 

 

 

Primary Health, a private health care company based in London.

1. It is imperative that a website dealing in health care relay a professional and trustworthy image.
2. The site should be modern with high quality images to reflect the professionality of the company.
3. Colours will play an important part in the look and feel of the website, careful consideration should be placed when choosing a colour palette.
4. The website will convey a lot of important content, which will need to be presented in an attractive reader friendly format.
5. It is important to have search facilities for visitors to find important information quickly.
6. It should be easy to read and follow with well structured hierarchical information,suitable headings and well placed images that compliment the content and links for further information. This will allow visitors to scan for relevant information quickly. This will be facilitated with well chosen fonts,high contrast between the text and background is imperative with text re ize and print options made available.
7. Consideration should be made to make the content in different formats including PDF and word documents, allowing readers to read at their own pleasure.
8.  A forum I think could add “value” to such a website.  Reading how other people have coped with similar situations would be of great benefit to potenatil patients.

It was diffciult finding health care websites that I truly liked.  So my examples below are by no means my ideal websites:

Mount Nittany

http://www.mountnittany.org/

 

Yahoo Health

http://health.yahoo.net/

I think I like the Yahoo Health the best.  It used a lovely tranquil blue and gradients as the information structure was well organised.  It contains lots of information and presented in a manner that is not overwhelming.

 

 

 

 

 

 

This print screen of a form was taken from a website called pateintlikeme.  I liked the way this form was presented and could be used in a health care website.  It can be used to locate forum posts that relate their experiences from similar patients.  A forum I think could add “value” to such a website.  Reading how other people have coped with similar situations would be of great benefit to potential patients.

 

 

 

 

 

 

 

 

 

Doctors of USC

http://www.doctorsofusc.com/

 

 

 

 

 

 

 

 

 

 

 

The forms, video and quick access to patient links is a friendly user way of accessing information that the visitor is likely to wan.

 

 

 

 

 

 

 

 

Beech Farm, a homely bed and breakfast in Cornwall

If a website is to be created for Beech Farm, a homely bed and breakfast in Cornwall then a number of considerations should be taken on board.

1. Images I think will play a crucial role in users deciding to consider staying in this bed and breakfast.  Many bed and breakfast websites are let down by their poor images, in terms of quality and suitability.  They simply do not project the image that the businesses wishes to present.  The images I have seen from many Bed and Breakfast websites are unprofessional and unappealing.
2. Colour will also play a very important role in affecting the emotions of the visitors.
3. The layout should remain simple exceeding no more than 2 coloumns for such a website.  It should be unncluterred and clean.  The text Navigation should be clear and simple with no ambiguity.
4. The wesbite should have the option of different languages, catering for foriegn visitors
5. I think it is imperative to have a testimonials sections, with positive quotes from past customers in suitable areas of the page on most pages, if not all.
6. If the Bed and Breakfast has something unique (USP) then should be made clear giving them a compettive edge of rivals.
7. Content/Text is extremly important with imporatnt information such as phone number and address in the header area and repeated in the footer. Typography will play a part in conveying a message the client like to communicate.  If it is homely, then a suitable font should be chosen, for example this shouold be used in the logo title and any banners/animation.  The main content font should be easy to read and a suitable sans serif font chosen.  Information in regards It should also be made very clear if the Bed and Breakfast caters to dietary restrictions, such as Vegetarian, Halal, Kosher, etc.  It is also imporatnt to state if the Bed and Breakfast is suitable to poeple with disabilities, If it is family friendly and does it allow pets.
8. It is imperative that a user friendly contact form is made available encouraging visitors to sumit enquires, etc.

 

Brampton Inn

http://www.BramptonInn.com

I was attracted  to this website with the gradients and images it uses.  It’s professional, giving the site a quality feel.  I’m not a big fan of the shapes they used behind some of the images.

 

 

 

 

 

 

 

 

 

 

 

WoodStock Inn

http://www.woodstockinn.com

WoodStock Inn manages to project a homely feeling using a drawing and suitable font for its logo.  Images are professional and the wesbite is welcoming.  The layout and navigation is simple and the images used are appropriate for the image trying to be conveyed

.

The Captain Lord

http://www.captainlord.com/

I liked the Look and Feel of this wesbite, excpet maybe the dark Green, it’s a bit of the dark side for such a website.  I like the layout and the images are inviting and professional.  I think the banner was exceptionally big, perhaps pushing imporatnt information under the fold.

 

The purpose of mark-up is to add meaning to content. Semantic markup.

Block level elements are separated by line breaks and inline elements are not. Images are online elements.

Google interprets a hyphen as a space and an under score as an actual under score.

When designing websites a “relative to document root” should be used, especially with dynamic websites such as php.

Folder structure
Current trends to use SEO names for folders and then use “index” for files.

Important to give images width and height dimensions. It pre warns browsers of incoming size. If not set then users who disable images will not see alt text. This creates a place holder and text does not “jiggle”.

Headings
Only one h1 tag should be used in a document. Makes sense to have one title in a document. You should know which headings to use because of the context. Headings give hierarchy and meaning to pages.

If you want mouseover text then a title tag should be used. Browsers stopped displaying mouseover text using alt tags a couple of versions ago.

My 3 chosen good designs

---

The London Underground map

Reasons

In terms of design the London Underground map stands as a lesson in what good design is.  It has become a timeless classic.  It manages to relay a tremondous amount of informaation in a clear and simple format, through the use of shapes (lines) and colour.  A design that can be amended withough losing its essense and character and has stood the test of time (since 1933).

The iPad

Reasons

In tribute to Steve Jobs and my 2 boys,I have decided to choose the iPad as one of my good designs.  The iPad is probably the most user freindly “computer device” so far invented.  A well designed device that is trully  beautiful and more importantly functional.  It doesn’t require training to use and is intuitive.  My 2 and 3 year old can testify to this.  It is the most widely used electronic device in our household and shamefully my youngest boy learnt the words “ipad” before learning the word daddy.  Yes I know!!!

This device just begs to be picked up and used.  It is comfortable in any size hand, portable, fast and  battery life lasts longer than any computer I know.  The litmus test for every tablet brought onto the market is the iPad.  Its material is robust, beautiflly crafted to meet the functional needs.

The Shard

Reasons

I’ve chosen this unfinished skyscrapper as one of my good designs.  This building’s design may divide opinion and maybe controvertisal but I think it is bold and iconic.  It is not afraid of breaking the norm of accepted designs and may even set new heights (london has building height restrictions) in its approach and design.  It is contemporary, fresh, stylish, innovative.  It is looking towards the future.  It is a very functional builing with office space, shopping centres, galleries, etc and will rejuvenate the surrounding area.  It will be interesting to see the views from the top floor of this building looking at London at these dizzying heights.

This is what the building will look like in the London skyline.  Yes, it stands out, but it sure ain’t ugly.

My First blog on the course.

Hello World!

5 things I learnt this week!  (Actually I am going to write more)

1. A designer’s job is to entice, seduce and manipulate.  I think I’d better change course before my wife kills me
2. Sacrificing functionality for look and feel is bad design
3. We are, as individuals disproportionately influenced by what looks good.  Just because something looks great doesn’t mean it is great.
4. The time it takes to make a decision increases as the number of alternatives increases. (Naturally)
5. Golden Ratio, since Greek times have know the ratio of good design.
6. Expectation effect; because you’ve done it before you expect to do it again.  Take this into consideration in your design.  Draw on your experiences as a user and put that in your designs.
7. Good design is usually invisible because it works (this is why I am having trouble taking photographs of 3 good designs)
8. Harry Beck created the underground map and Jonathan Ive created iconic Apple products.
9. Ockham’s razor states that the simplest design should be selected.  A philosophy Apple has taken very seriously.