Agenda Web Design? Position and Process of Web Design Concepts Hierarchy Color Using Fonts Using Images

Web Design?

Old School Web Design?

Visual

Old School Web Design?

Process of planning and creating a website by shaping text, images, digital media and interactive elements.

Modern Web Design?

Information

Modern Web Design?

Understand that a visitor’s reasons for clicking a button are more important to that button’s appearance.

Modern Web Design?

Designing and organizing information to be included on a website that will answer visitors' questions.

Modern Web Design?Setting goals for the sites we design and knowing how to gain an increased customer mind-share for the client.

Web Design vs Graphic Design

Web Design Graphic Design

Product Web, Mobile Visual products

Technology Art TechnologyIDEs, Online Tools

Art Technology

Visual Aspects Font, color, typography

Concept Usability, Semantic, Cross-browser

Visual, Culture, Communications, Brand

Position and Process of Web Design?

Graphic Design

Visual Design

Web Design

Front End DevelopmentBack End DevelopmentClient Side ScriptingCoding Template

Web Devel

opment

Server Side ScriptingDatabase DesignPublishing

Position of Web Design

Process of Web Design (Define Visual Elements)

Process of Web Design (Sketch + Navigation)

Process of Web Design (Mock-Up Development)

Process of Web Design (Slicing / Theme Development)

Concept

Web Design

Hierarchy Visual Design

Hierarchy Visual Design

Visual Element Ranking Designed to emphasize elements Designed to fulfill main goal

Hierarchy Visual Design (How to)

Hierarchy Visual Design (Sample)

Hierarchy Visual Design (Sample)

Color Visual Design

Color Visual Design (CMYK & RGB)

Color Visual Design (RGB)

Color Visual Design (RGB)

RED = #FF0000 GREEN = #00FF00 BLUE = #0000FF YELLOW = #FFFF00 PURPLE = #FF00FF CYAN = #00FFFF

Fonts Visual Design

SerifSans Serif

Fonts Visual Design

Tahoma Verdana Georgia Palatino Century Gothic Opifico Wild Ride

Web Safe Fonts

Image Visual Design

Vector vs Bitmap

GIF (Graphic Interchange Format) Animated 256 Color Transparent with Matte Suitable for logo and vectors

JPG (Joint Photographic Group)

Millions of colors Adjustable Compression Suitable for photo

PNG (Portable Network Graphic)

Transparent Alternative for GIF Lack of support by IE Below 7th version

Additional Topics