Creating Meaningful Graphics, Icons & ImagesAustria, Sarah Jane

Emilio, AllanJavier, Jentzen Paolo

Villaruz, Jireh Kimberly

• Overview:

Graphics (Definition, Classification, Types, Creation)

Icons (Definition, Categorizing, Creation)

Images (Definition, Types, Quality, Creation )

References

• Graphics:

• Graphics appear on the Web or User Interfaces in many forms. They can be images, backgrounds buttons, icons, navigational items, maps, and logos. Graphics often illustrate complex ideas.

• The first step to any good graphic is the idea, not the image. However, acquiring the image or designing the image is crucial to the success of the product. Web designers can obtain images in a number of ways, including being created using paint and drawing software, scanning an image, or manipulating an existing image.

• Graphics contained in Web pages serve several distinct purposes, which can be classified as follows:

♦ Navigational - To identify links that may be followed.

♦ Representational - To illustrate items mentioned in the text.

♦ Organizational - To depict relationship among items mentioned in text.

♦ Explanative - To show how things process or work.

♦ Decorative - To provide visual appeal or emphasis.

• Types of Graphics:

♦ Bitmap - Bitmap images (also known as raster images) are made up of pixels in a grid. Pixels are picture elements; tiny dots of individual color that make up what you see on your screen. All these tiny dots of color come together to form the images you see.

- Bitmap images are resolution dependent.

- difficult to increase or decrease their size without sacrificing a degree of image quality.

♦ Vector - are made up of many individual, scalable objects. These objects are defined by mathematical equations rather than pixels, so they always render at the highest quality.

- You can freely change any number of object attributes without destroying the basic object.

- The process of converting vector to bitmaps is called rasterizing.

- The most common reason for wanting to convert a vector to a bitmap would be for use on the Web. At this time, the most common and

accepted format for vector images on the Web is Shockwave Flash (SWF).

- Another standard for vector images on the Web is (SVG), a graphics programming language based on XML. Due to the nature of vector images, they are best converted to GIF or PNG format for use on the

Web.

♦ Metafiles - are graphics that contain both raster and vector data.

- For example, a vector image that contains an object which has a bitmap pattern applied as a fill, would be a metafile. The object is still

a vector, but the fill attribute consists of bitmap data.

In creating graphics..■ Provide:

— Supplement textual graphics.

(Use graphics to supplement text, not as a substitute for it.)

— Convey information not possible using text.

(Use graphics to convey information that can’t be effectively conveyed using text.)

— Enhance navigation.

(Able to identify the content areas faster using meaningful graphical identifiers rather than text.)

— Limit long-loading graphics.

(Limit the use of graphics that take a long time to load.)

— Coordinate graphics.

(Coordinate graphics with the to better its clarity.)

• Icons

• Icons are most often used to represent objects and actions with which users can interact with or that they can manipulate. These types of icons may stand alone on a desktop or in a window, or be grouped together in a toolbar.

• A secondary use of an icon is to reinforce important information, a warning icon in a dialog message box, for example.

• Marcus (1984) suggests icons fall into these categories:

♦ Icon. Something that looks like what it means.

♦ Index. A sign that was caused by the thing to which it refers.

♦ Symbol. A sign that may be completely arbitrary in appearance.

• A true icon is something that looks like what it means. It is representational and easy to understand.

• Rogers (1989) provided an expanded definition for the kinds of icons:

♦ Resemblance - An image that looks like what it means.

♦ Symbolic - An abstract image representing something.

♦ Exemplar - An image illustrating an example or characteristic of something.

♦ Arbitrary - An image completely arbitrary in appearance whose meaning must be learned.

♦ Analogy— An image physically or semantically associated with something. (Relating to meaning in language or logic.)

In creating icons..■ Provide icons that are:

— Familiar.

— Clear and Legible.

— Simple. (and no larger than 16 pixels square)

— Consistent.

— Direct.

— Efficient. (also, it must look as good in black and white as in color.)

— Discriminable. (able to be distinguished)

■ Also consider the:

— Context in which the icon is used.

— Expectancies of users.

— Complexity of task.

In creating icons..

■ Successful icons are:

— Looks different from all other icons.

— Is obvious what it does or represents.

— Is recognizable when no larger than 16 pixels square.

— Looks as good in black and white as in color.

• Images:

• Image is an artifact that depicts or records visual perception, for example a two-dimensional picture, that has a similar appearance to some subject.

- Usually a physical object or a person, thus providing a depiction of it.

• Types of Images:

♦ Line Art - is the term used to describe drawings that contain flat colors without tonal variations. These images generally contain only black

and white pixels; however, they could also be drawings that incorporate different colors.

♦ Continuous-tone - graphics that have tonal variations, such as color photographs.

- A grayscale image is a continuous-tone image consisting of black, white, and gray data only. This is an image comprised of a range of grays, typically up to 256 levels of gray.

♦ 2-Dimensional (2.D) - Images can turn to 2-dimensional by adding depth to them.

- Composed of X & Y axis only.

♦ 3-Dimensional (3.D) - 3-dimensional images are much more lifelike than two-dimensional images. However, they are more difficult to

create and they require greater computer resources to work with and display.

- Composed of X, Y & Z axis.

♦ Hypergraphics - are clickable graphics. When a graphic is a link, the pointer will usually change to a pointing finger when you place it on a hotspot.

♦ Image Maps - are graphics that contain more than one link. A single image usually takes less time to download than do multiple images, which is why designers commonly use image maps on the opening menu screens of Web pages.

- Faster to load than several images.

- The user can quickly find their way through your pages without having to search for the buttons and just hotspots.

• Image Quality:

♦ Color Resolution - measures the number of bits of stored information

per pixel. Color resolution ranges from 1-bit color (2 colors) to 32-bit color (16.7+ million colors).

- Color resolution is. also called bit resolution, pixel resolution,

color depth, bit depth, or pixel depth

- An image with a greater color resolution will be more colorful and of higher photographic quality.

- While 32-bit color depth will produce a higher quality image, it will also make the file size much larger because more information must be stored for every pixel.

♦ Image Resolution - Refers to the amount of information stored for each image, and is measured in pixels per inch (PPI).

- Images must be at a certain minimum resolution to avoid a pixilated or out-of-focus appearance.

■ Designers can optimize most images if they do the following:

— Reduce the color resolution (number of colors) to the minimum necessary for the image.

— Reduce the image resolution to no more than 72 ppi (pixels per inch).

— Choose and apply the image size (in pixels) that you will need for your final Web page.

— Crop to the smallest area possible.

— Web graphics should not exceed 30K.

♦ Image Compression - Mathematical Algorithm used to create smaller file sizes.

- File compression reduces the file size of a graphic and therefore reduces the transfer time to the user’s computer. Files are

compressed before they are sent to the user’s computer and decompressed before they are displayed.

■ Two kinds of compression are most common:

— Lossless compression: None of data actually lost during compression.

— Lossy compression: Some data is lost during compression.

In creating images..

■ General:

— Use developed and tested images.

— Use images consistently.

— Produce clear images.

— Provide descriptive text or labels with all images.

— Distinguish navigational images/graphics from decorative images/graphics.

In creating images..— Minimize:

(The number and size of presented images.)

(Image animations.)

— Restrict single images to 5K.

— Restrict page images to 20K.

— Provide thumbnail size images.

— Avoid extraneous or gratuitous images.

■ Color:

— Minimize the number of colors in an image.

In creating images..■ Format:

— Produce images in the most appropriate format.

• GIF.

• JPEG.

■ Internationalization:

— Provide for image internationalization.

■ Screen design:

— Reuse images on multiple pages.

End.

• References:

Galitz, Wilbert (2002). The Essential Guide to User Interface Design, 2nd Edition. John Wiley & Sons, Inc. , Canada

Galitz, Wilbert (2007). The Essential Guide to User Interface Design, 3rd Edition. John Wiley & Sons, Inc. , Canada

http://www.google.com.ph/

http://www.wikipedia.com/