NED11: Module 9

Working with images
Do's and don'ts with images:

• Anti-aliasing creates pixels in between the foreground and background colours that blend the two colours and smooth out the jagged edges. It works best with one coloured backgrounds
• Low resolution images cannot display fine details, so avoid them
• Good icons can be enlarged and reduced without losing legibility (like logos)
• Scan images as a high-resolution and save a high resolution version before reducing to 72 pixels per inch (ppi) on screen copy
• For onscreen use at same physical size, scan images at 150ppi if you plan to use at 72ppi on screen
• If enlarging, try scanning in at a proportionally higher resolution, e.g. images used at 300% of the original size should be scanned in at 450ppi. This way the images will be able to be re-used in other media, like print. It also means they are easier to resize
• It is critical that you reduce the size of your image before placing it in your interactive project, this means 72ppi for most of the viewing public. Larger images need longer download times
• Never take an image and increase its resolution - this makes it pixelate
• Current standard display resolution is 72ppi for Macs and 96 for Windows computers
• While it is true that great images will enhance a design, even the best images can not save a website that is riddled with other flaws
• Don't take a small image and stretch it to fill a whole background, doing so will cause the image to horribly degrade and show gigantic bitmapped edges
• Don't unify your images to the point that they all look the same. The goal is consistency, not to make everything look identical
• Remember - keep it simple.

NED11: Module 8

Images

• It's best to scan images as RGB colour at 72-150dpi PSD format, then crop it, resize it then re-save it as a different name. This results in richer colours
• To clean up your images, use a dust/filter tool and rubber stamp/cloning tool in your photo editing program then sharpen the image
• JPEG = Joint Photographic Experts Group
• GIF = Graphics Interchange Format
• PNG = Portable Network Graphics
• Baseline Standard is the most common form of JPEG
• Baseline Optimised uses a better compression technique but may not be supported on earlier browsers
• Progressive allows your JPEG image to appear as though it's coming into focus as it downloads on your webpage
• Adobe Image Ready allows you to visually compare various JPEG compressions

Images and web-safe colours

Although 256 colours are enough to fool the human eye into thinking it can see more, it does pose some problems in displaying colours outside of the 256 colour gamut. As a result it is quite possible your JPEG images may appear 'dithered' or 'speckled' on older computers. To make matters worse Macintosh operating systems and Windows operating systems use a different set of 256 colours. Most are identical, however 40 of them are different leaving you with only 216 colours to work with. In your swatch pallet in Photoshop, click on the black triangle to see the 'Wide Spectrum' palette. It is best to stick to the 216 colours in web design.

Another way of selecting web-safe colours is through the use of your Colour Picker. Double click on either colour swatch in your palette, tick the box that says 'Only Web-safe Colours'.

GIF's support a variety of special effects including interlacing, transparency and animation.

NED11: Module 4

Notes from Unit Outline
Visual hierarchy is the arrangement of elements according to importance and emphasis. When building a website you need to decide the order of importance for each piece of information. Things to remember when designing your hierarchy:

• Most people scan websites from top left to bottom right
• They tend to look for larger items first
• They are attracted to bright colours first
• They look at items which appear 'heavier' first
• They look at moving elements before static ones
• Finally, most people tend to look at moving images of another human (such as a video) before moving onto the other elements

Information courtesy of Graham, L. 1999, The Principles of Interactive Design,1st edn, Delmar Publishers, Albany, New York http://www.desktopcafe.com

Visual techniques you can use to emphasise the focal point in your visual hierarchy:

• Make it the biggest and brightest
• Enclose the item in a different shape to the other elements
• Add a border around it or change the colour
• Isolate it from the other elements or add a special effect

Information courtesy of Landa, R 1996 Graphic Design Solutions 1st edn, Delmar Publishers, Albany, New York. 

A very useful tool for web designers is to use a program called a wireframe. A wireframe is a diagram which illustrates the layout of a webpage using different shapes to represent content, function, and navigational elements to show their place on the page. When designing a wireframe, consider the following:

• global navigation - should appear consistently on every page and refers to the major sections of the website, not every single page
• local navigation - a submenu of links within each major section of the site. It should appear near the top AND at the bottom of every page
• page specific content - includes headers, sub headers, text and images. The most prominent content should appear in the centre of the page
• administrative navigation - also called utility information and includes site map, help, contact us and/or about us sections
• page title - best format is: site name: section name: page name. 40 characters is a good limit
• search capability - because some people can't be bothered browsing, it is useful to include search facilities on your site
• page footers - be consistent with style and position.