Graphic Color and Tools 322432 Web Design Technology

By Yaowaluck Promdee, Dr. Sumonta Kasemvilas

WDS CS KKU

Web design technology | 2015 1

Index

•  The Design Concept •  Color •  Graphic •  Graphic Tools •  Assignment

WDS CS KKU

Web design technology | 2015 2

THE DESIGN CONCEPT

WDS CS KKU

Web design technology | 2015 3

The Design Concept

1. To inform 2. To identity 3. To persuade

WDS CS KKU

Web design technology | 2015 4

Plan Research, Observe

Wireframe, Concept

Design

Design Concept WDS

CS KKU

Web design technology | 2015 5

WDS CS KKU

Web design technology | 2015 6

Design isn’t visual

Be user centric

Design is in detail

Sketch often User white space

Keep inspirations

Design is all about

problem solve

Don’t copy ideas

Graphisc and colors

The Design Concept for web designer

http://www.creativebloq.com/web-design/10-design-concepts-web-developers-need-know-11135255

GRAPHICS AND COLORS

WDS CS KKU

Web design technology | 2015 7

Graphic •  Vector •  Bitmap

WDS CS KKU

Web design technology | 2015 8

Web design technology | 2015 9

http://www.creativebloq.com/colour/tools-colour-schemes-12121430

Web design technology | 2015 10

Color of

emotions

GRAPHIC TOOLS

WDS CS KKU

Web design technology | 2015 11

Graphic Tools

Picture editor, Design page Vector picture editor

WDS CS KKU

Web design technology | 2015 12

Screen of Illustrator

Artwork

Zoom in, Zoom out Page for Show your work

WDS CS KKU

Web design technology | 2015 13

Selection, Crop & Slice Tools

Retouch & Paint Tools

Drawing & Type Tools

Foreground Color & Background Color

Screen Modes

WDS CS KKU

Web design technology | 2015 14

Layout Design Sketch

Digital Mockup

WDS CS KKU

Web design technology | 2015 15

Example

http://i.ytimg.com/vi/1kW9LQ9hYK4/maxresdefault.jpg http://wwwimages.adobe.com/

WDS CS KKU

Web design technology | 2015 16

Example

http://webdesignfan.com//

http://webdesignsurvivalist.com/ WDS CS KKU Web design technology | 2015 17

http://vanimg.s3.amazonaws.com/

Example

http://bloomwebdesign.net/

Web design technology | 2015 18

Assignment#9 •  Design your blog 2 pages (Homepage and

About Me using Photoshop)

Web design technology | 2015 19