Tag Archives: Design

Website Evaluation

Standard

 Good website:

Hugh Fox: http://hughfox.co.uk

The reason I find this site to be an example of good design is because of the following:

The site is well laid-out and it is easy to navigate around.

The images are clear and of a good quality. Clicking on an image brings up an enlargement. This is excellent especially on a photographer’s website.

The navigation bar is clear and concise. It is easy to find everything on the site, despite the placement being in the footer (an unusual choice, but not one which causes any difficulty.

All the links work and there is nothing distracting on the site.

Hugh1

Hugh2

 

Bad Website:

Studio 27: http://www.studio27.co.uk/home/

The reason I find this site a bad example of design is because of the following:

Music plays on every page opened, even after turning off. Comes on again whenever a new page is reached. Music is really annoying, especially this music.

The page is tiny, all the images are tiny and it is all written in Flash, which is now fairly obsolete as it doesn’t run properly on many platforms.

None of the images is really big enough to see and they don’t grow on clicking/ This could have been achieved easily in flash and can be done without as well.

The navigation bar animation in my opinion is rather distracting.

The site looks dated and unprofessional, which is a shame as the company have a good reputation. As a site it doesn’t instill confidence. It is very basic and doesn’t appear to have been updated in a while.

The Myspace link works, (as do all the links) but the last entry on the MySpace page was 3 years ago, so that clearly hasn’t been updated in a while either.

Time for a redesign, so I’m choosing this as my redesign site.

Studio1Studio2

Photoshop CS6 – Adding Texture or Image to Text

Standard

Texturizing Text

It’s easy in CS6 to add a texture or image to text. It used to be a rather complicated process is former versions but those nice people at Adobe have simplified the process for those of us who like our interesting text.

Here’s what to do in easy steps.

1) Open a Photoshop document and use the text tool to write your text. Choose a chunky font so that the image/texture will show up well.

2) Choose your texture and place this on top of your text.

3) Go to the Layers panel and hover the mouse between the image and text layers. Hold down the Alt/Opt key.

4) An angled arrow will appear (not like the one in the picture – I’m just showing where it will be.) This is when you click… and presto! The image and text meld together!

You can move the image around to get it just right.

The layers pallette looks like this:

And there you have it – no complicated masking etc. Remember to hold the Alt/opt key down though, or it will not work!

Typography – Graphics and Web

Standard

Typography

There are 2 main classifications of typeface:

Serif and Sans Serif.

Traditionally, letters had a degree of ‘ornament’ at the edges of the letters. This is called a serif; hence serif fonts.

By contrast, fonts without serifs are called Sans Serif.

Here is an example:


A serif font tends to have a more traditional look, whilst sans-serif is usually considered more modern-looking, but it varies from font to font.

Readability is an important issue in web design and serif fonts have traditionally been considered easier to read. This is why serifs were created in the first place – to lead the eye from one letter to the next.

However, resent research has indicated that people with reading difficulties such as dyslexia often find sans-serif fonts easier to read.

X-Height

The x-height is, literally the height of the x in a given font. It determines the overall height of the bulk of all the letters and has a pivotal role in the readability of a font. X-heights vary considerably from font to font  and so it is important to ensure that a sufficient sized font is used when writing a website. (Usually point 16 is used, but sometimes this might need to be altered.)

Headings

A Heading will need a larger and bolder typeface in order to stand out on the page or screen.

This does not have to be the same font as the main body text, but instead can be a more interesting or creative font, as only a small amount is required.

 

Type Style

Web designers use Type Styles to create a synergy on the site. A family of fonts can be used to make the overall site look cohesive.

Another function of a type style is in writing the CSS sheet (the overall style of the pages) a ‘font family’ can be chosen. This way, if a computer does not have the desired font installed, the next on the list (a similar, related font) may be selected, so that the site still looks much as it has been designed. This is called a Web Stack.

There are some websites which enable developers to use fonts and they can be downloaded as the page opens.

Font Face      Google Web Fonts

 

Distortion

Typefaces can be easily distorted and this can be detrimental to their readability.

However, some distortion can be a good thing. In titles and headings, altering the Character Spacing (Tracking and Kerning) between individual letters can create a sophisticated look and tidy-up and uneven spacings generated by the plain text.

It is not advisable to do this with te body text as it will affect readability.

 

Designing for the Web

It is generally considered that a sans-serif font is easier to read on websites. Any font which is plain, has no ornament, but which has a large x-height, is probably a good choice for body text on websites.

 

Image References:

Serif/Sans Serif Font

X-Height