A few words for website typography

 My Blog  Comments Off on A few words for website typography
Jan 312012

Jesus Rodriguez Velasco - www.jrvelasco.com


Jesus Rodriguez Velasco’s website, designed from Miguel Ripoll


This website displays excellent typography which gives the viewer the impression of reading something old, almost medieval. The fonts’ size is large and easy to read. The design of the paragraph mimics this of the old books. In order to add more detail, other features were taken into account too, such as the background color. The first letter’s borderline has curves, something which makes a visual impression of an old typography with ink. Finally, the website’s images aid to this optical illusion giving the “old” feeling as they obviously make a connection with the past.



Andy Rutledge - http://www.andyrutledge.com/


The personal website of Andy Rutledge, designed by himself.


The basic typeface in this website is used in different ways. Some text is in bold, some other in italics, some other are capitalized, and some used in normal weight.

There is one another calligraphy typeface used in an elegant way, to add another feeling to the website. Someone may say it is a Hollywood style. This can be obvious with those calligraphic words which are (almost all of them) placed above a star symbol. Also the letters are screened in a way that they look like they are carved onto the screen.

 Posted by at 8:07 pm

week1- typography

 Applied Art for the Web  Comments Off on week1- typography
Jan 312012

A picture and a website to discus about typography in class:

We mentality fill in the gaps in order to complete a perceived shape. In this example there is just part of a “g” letter visible, but with our mind’s behaviour we complete the shape. So the first thing we notice in this picture is the letter “g”.

By connecting the lines of the font with the lines of star sign, the letter becomes apparent in the space. As we see, the designer deleted some borders of the letter which is  another solution for fading the letter into the space background.

Adding light effects on the back of the “g” letter brings it further and this puts more attention onto the shape of the letter instead of the water and moon found behind it.



Using a big red circular shaped background and placing the text of the page in it, draws the viewer’s attention.

In order to keep the use of colour balanced, the navigation bar found in the top right is coloured black. Also they use black for the small paragraph found in the left bottom corner of the page and also for the logo.

They use good hierarchy for font sizes and add emphasis on the elements on the page. Branding is the biggest sized element .The Header of the paragraph which is the name of the company is the second largest text on the page.

Breaking the grids is a technique used to emphasise elements. In this design they put the logo of the site on the edge of the circle which grabs the attention of the viewer.

 Posted by at 7:52 pm

Content Strategy

 Everything Else...  Comments Off on Content Strategy
Jan 302012


  • Useful, enabling user to reach their goal
  • Unique, meaning that users have to visit your site to access it
  • Authoritative, written by and attributed to a credible source
  • Influences SEO, good content is favoured by search engines and attracts incoming links and social media

Content Planning

  • Should be updated regularly
  • Plan a schedule for adding new content
  • Out of date content can cause loss of page rank
  • Blogs are an easy way of generating new content

User Generated Content

  • Content that is produced by the users of a website
  • Allows people to publish and share information related to a particular subject
  • Oysters – paid contributors creating positive reviews to promote brands

Style and Tonality

  • Use of aesthetic elements
  • Consistent writing style
  • Meaning is generated through the type of content
  • Bringing elements together to make a distinguishable whole
  • Media Equation – People tend to treat media, such as computers, as real people and places
  • Style Guide – A collection of all stylistic elements (e.g. tone of voice, images, branding and layouts) that go together to make the visual style of a website or brand

Writing for the Web

  • Users are known to scan read webpages, rarely reading word for word
  • Using headlines helps people to scan and attracts attention
  • Find your audience and write for them
  • Use newspaper type structure: lead » 2nd most important » 3rd most…

Typography: 5 websites

 Uncategorized  Comments Off on Typography: 5 websites
Jan 302012

Typography – 5 websites


Last week we looked at examples of print as static, animated and interactive.

Here are some websites to discuss next week –



An original approach to positioning of text and rollover effects.



Type that demands a user response



Good use of typography to communicate the brand.

Good spacing for legibility.

Four fonts used on the home page – too many?

No rollover effects on main menu – does there need to be?



An app with text which animates with music in response to the user.



Typography draws on historical design to create a brand theme.

Two examples of animation with text used for link rollovers.


Photoshop Aide Memoire

 Uncategorized  Comments Off on Photoshop Aide Memoire
Jan 292012

Just some notes, really just a Mind Map aide memoire for me for the extremely powerful but very daunting Photoshop

Also available as a PDF file

 Posted by at 7:49 pm

What I learned this week “Content Strategy”

 Content Management  Comments Off on What I learned this week “Content Strategy”
Jan 282012

Content Strategy

Is the part of the website’s user experience, and it refers to creation, publication and useful, useable content. Grate content in the website generate trust, authority and search engine optimization benefits.

Writing for the web (text)

According to Yannis’s presentation:

How people read online: 16% of users read word by word and 79% scan the page.
Readers read as F-shape pattern, so they pay more attention to the first paragraph and quick look to the second paragraph and just scan down to the rest of the page look for the useful information.

5 basic rules for writing in the web:

  1. Create content for readers
    • Develop a visitor-oriented focus
    • Determine what is important to your readers
  2. show them the benefits
    • Audience must be able to see how and why the service benefits them immediately
  3. write more concisely
    • Use appropriate language for your audience
    • Don’t use jargon in your writing
    • Even your site is formal keep it a bit friendly , because you want to make sure that they are understand it
    • As reading on screen is hard, we should try to write more information with less words
  4. format for scanning
    • As users are impatient and busy they want to find the information in first paragraphs
    • Make use of keywords and phrases that user might want to find
    • Outline the key ideas, concepts
    • Determine what the users want to find and make sure that they can find it
  5. become interactive
    • Make your content much more credible
    • Use images
    • Info graphics
    • Animation
    • Video
    • Flash content ( for navigation)


It is difficult to think of a website that will not benefit from “content images”.

High definition and high quality of the images can make a real different to the website. The quality of the image is one of the other things that we have to bear in mind when we are going to use them in our site.

Accessibility of the image: if any image convenes meaning that is not described elsewhere in the website then you need alt text. Images which are only decorative they don’t necessarily need the description.

For SEO it’s good to put the keywords in the file names. Also larger images, with descriptive file names and alt text are more likely to rank higher in Google Image Search.


It’s a good idea to host the video on YouTube then embed the video in your website. There are number of reason that why this method is a good idea; it uses YouTube’s disk space and bandwidth not your website. No format and compatibility issues, so when you upload your video to YouTube it will convert it to flash or HTML5 or QuickTime. Playable on non-Flash devices such as: iPod, iPad. SEO benefits to hosting video on YouTube.

If you are making a video avoid talking over it; use on screen captions instead, because if you are not professional presenter, it can sound really amatory, use on screen caption instead. Without professional sound equipment recording audio at the time with the camera can sound disappointing and it is better to record the video and use text overlays and the sound track on it.

Be sure to provide a transcript alternative for any meaningful instructions given in video.


This is kind of little bit of software or vigets or applications, there are part of your website that actually adds value to the user experience. By using PHP or JavaScript you can find load of free script in the web, that you can put on to your website to just add a little bit of value to the website.

Documents / Downloads

Preferably content should be an HTML webpage and you can use a print style sheet for it if you want to print it. So you have to make a CSS style sheet just for print.

User generated content

According to Georg’s presentation:

The OECD (Organisation for Economic Co-operation and Development) defines UGC as fitting the following requirements:

i) A content which is made publicly available, through internet,
ii) Boasting a certain level of creativity
iii) Contents created outside of professional practices.

According to the main use of UGC we can classify it to the seven groups according to their main use:

1. Media websites
2. Chat interfaces
3. Platforms to share personal information
4. Ecommerce platforms
5. Share common and specific interests
6. News blogs
7. Voices

Drivers of user-generated content

i) Social drivers

ii) Economical drivers

iii) Legal drivers

iv) Technological drivers


Risks with User-Generated Content

1. Intellectual property infringement.

2. Defamation

3. Obscenity and Child Pornography

 Inclusive content (accessibility)

Empathetic: Don’t upload any content without thinking of the impact on impaired users.

Meaningful: Write link text that makes sense when read out of context.

Descriptive: Describe sounds to a deaf person and images to a blind person as if they were next to you.

Explanatory: Explain what users need to do when input is required.

Economic: Optimise images: high quality can still have low file sizes.

Illustrative: Add relevant images, with descriptive alternative text, to illustrate a point.

Informative: Write in bite-sized chunks using “plain English” aimed at the reading level of the target audience.

Different: Present content with sufficient difference in contrast between foreground and background for text, sound and images.

Orderly: Make sure that navigation using a keyboard is orderly. Use tab to move through interactive elements like links and form input fields and check they cycle through in the correct order.

Code aware: Use correct web formatting for things such as headings, data tables, numbering and bullets.


Information architecture and governance

  • Categorisation / information architecture
  • Tagging
  • Navigation aids
  • version control

style / brand / tone of voice / personality

For example a business website needs to reflect the brand and the style of their business. So the definition of a brand or a logo is more than a name. it is the way that the company start to communicate and behave and the style the company uses to market itself.  Some companies use style or brand guidelines which is generally PDF document which define the color schemes, font style, size use of logo, tone of voice that the website should be build in.

The tone of voice is how you communicate and write for your website. It could be formal, in formal or trusted friend. Also it refer to what target of audience are you writing for.

 Posted by at 6:57 pm