Exploring Web Design - PowerPoint PPT Presentation

Exploring web design
1 / 21

  • Uploaded on
  • Presentation posted in: General

Exploring Web Design. Chapter 1. Objectives. Develop a new perspective of the WWW Learn what makes a website good or bad Discover how to apply objective rules to subjective matters Begin to deconstruct the elements of a web page. Perspective. WWW is full of poorly designed webs

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

Download Presentation

Exploring Web Design

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

Exploring web design

Exploring Web Design

Chapter 1



  • Develop a new perspective of the WWW

  • Learn what makes a website good or bad

  • Discover how to apply objective rules to subjective matters

  • Begin to deconstruct the elements of a web page



WWW is full of poorly designed webs

Our pages can be well designed

Critiquing websites 1

Critiquing Websites (1)

  • You are a web user

  • Watch for other people’s mistakes

  • Pay attention to what you like/dislike

Critiquing websites 2

Critiquing Websites (2)

  • Questions to ask:

    • Do I like the way this site looks?

    • Can I tell what the site is about?

    • Does the design seem appropriate to what the site is about?

    • Can I find what I’m looking for easily?

Critiquing websites 3

Critiquing Websites (3)

  • Don’t limit yourself to websites. Look at the layout and design of:

    • Newspapers

    • Magazines

    • Textbooks

Consider your audience

Consider Your Audience

What is your message

What is your message?

  • The WWW is a communication tool

  • Ask:

    • What message are you sending?

    • Will they understand the message?

    • How am I expressing the message?

About colors

About Colors

When viewing or creating websites ask:

  • How do the colors make me feel?

  • Can I read the text?

  • Are the colors loud or dull? (eye candy vs. bland corporate)

  • Do the colors look good together?

Your opinion

Your Opinion

You may have an opinion about a website.

That’s great, but try to substantiate your

likes/dislikes objectively using your training.

Be specific!

Getting technical

Getting Technical

Web color limitations

Web Color Limitations

  • 3 colors: Red, Green & Blue (RGB)

  • These three colors, in various combinations, are capable of creating millions of colors.

  • 216 colors in common between Windows and Macs

  • No longer an issue

Raster images 1

Raster Images (1)


  • Also called bitmapped images

  • Composed of pixels

  • Windows displays 96 dpi pixel resolution

  • Do NOT scale well

Raster images 2

Raster Images (2)

Vector images 1

Vector Images (1)


  • Composed of dots and vectors

  • They scale well (enlarge)

  • Have independent resolution



Common web file formats

Common Web File Formats

  • JPEG

  • GIF

  • PNG

  • SWF

  • PDF

Exploring web design


  • Joint Picture Experts Group

  • Lossy

  • Highly compressed

  • No transparency channel

  • 16.7 million colors

  • Used for photos and gradients

Exploring web design


  • Graphics Interchange Format

  • Lossless

  • Highly compressed

  • Have a transparency channel

  • 2 to 256 colors

  • Can cause banding in flesh tones/gradients

  • Used for logos and images with few colors

Exploring web design


  • Portable Network Graphics

  • Lossless

  • Highly compressed

  • Tranparency channel

  • Create raster and vector images

  • Still not used as widely and JPEG/GIF



  • JPEG’s do not animate

  • GIF and PNG may be animated

  • Animation increases file size

  • Take longer to load

  • Use ONLY where appropriate to grab attention

  • Login