The document presents an overview of graphic design concepts and tools in web design, emphasizing the importance of user-centric design and problem-solving. It covers various design aspects such as color psychology, graphic types (vector and bitmap), and includes references to online resources and assignment guidelines. Additionally, it offers insight into essential graphic tools for creating digital layouts and mockups.

1. Graphic Color and Tools
322432 Web Design Technology
By Yaowaluck Promdee, Dr. Sumonta Kasemvilas
WDS
CS KKU
Web design technology | 2015 1

2. Index
• The Design Concept
• Color
• Graphic
• Graphic Tools
• Assignment
WDS
CS KKU
Web design technology | 2015 2

3. THE DESIGN CONCEPT
WDS
CS KKU
Web design technology | 2015 3

4. The Design Concept
1. To inform
2. To identity
3. To persuade
WDS
CS KKU
Web design technology | 2015 4

5. Plan
Research,
Observe
Wireframe,
Concept
Design
Design Concept
WDS
CS KKU
Web design technology | 2015 5

6. 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

7. GRAPHICS AND COLORS
WDS
CS KKU
Web design technology | 2015 7

8. Graphic
• Vector
• Bitmap
WDS
CS KKU
Web design technology | 2015 8

9. Web design technology | 2015 9
http://www.creativebloq.com/colour/tools-colour-
schemes-12121430

10. Web design technology | 2015 10
Color
of
emotions

11. GRAPHIC TOOLS
WDS
CS KKU
Web design technology | 2015 11

12. Graphic Tools
Picture editor, Design page Vector picture editor
WDS
CS KKU
Web design technology | 2015 12

13. Screen of Illustrator
Artwork
Zoom in,
Zoom out Page for Show your work
WDS
CS KKU
Web design technology | 2015 13

14. Selection, Crop
& Slice Tools
Retouch & Paint Tools
Drawing & Type Tools
Foreground Color &
Background Color
Screen Modes
WDS
CS KKU
Web design technology | 2015 14

15. Layout Design
Sketch
Digital Mockup
WDS
CS KKU
Web design technology | 2015 15

16. Example
http://i.ytimg.com/vi/1kW9LQ9hYK4/maxresdefault.jpg
http://wwwimages.adobe.com/
WDS
CS KKU
Web design technology | 2015 16

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

18. http://vanimg.s3.amazonaws.com/
Example
http://bloomwebdesign.net/
Web design technology | 2015 18

19. Assignment#9
• Design your blog 2 pages (Homepage and
About Me using Photoshop)
Web design technology | 2015 19