ออกแบบเว็บ

ตัวอย่าง

LOGO

โครงสร้างหลัก

สี

ใส่สีฟร๊อนท์

แนะนำตัวเอง

ชื่อ จีระ อาชวพรวิทูร
ชื่อเล่น เน็ท อายุ 22ปี
ศึกษาอยู่ที่ มหาวิทยาลัยสยาม
ปัจจุบันทำงานอยู่ที่บริษัทไปรษณีย์ไทย

คลิปวีดีโอ

การสื่ออารมณ์

การใชสื่อประสม

การใช้สื่อประสม สำหรับออกแบบเว็บไซต์
- การใช้ภาพเคลื่อนไหว
ใช้เพื่อสร้างสีสันในส่วนของโลโก้ (LOGO Animated)
Interactive คลิกแร้วใหญ่ขึ้น อยู่ที่ปุ่มต่างๆ แถบเมนูนำทาง
วิเคราะห์ว่าเว็บมีภาพเคลื่อนไหวมั้ย มีลักษณะอย่างไร
- การใช้วีดีโอคลิป
- การใช้เสียง
เว็บที่เกี่ยวกับข่าว หรือไม่เกี่ยวกับบันเทิงก็ไม่ควรมี
แบ่งตามลักษณะหมวดหมู่ด้วย

การใช้ตัวอักษรและกราฟฟิก

การใช้ตัวอักษร และภาพกราฟฟิก
- สีของตัวอักษร
เข้ม พื้น อ่อน/กลาง
กลาง พื้น เข้ม/อ่อน
อ่อน พื้น เข้ม/กลาง
- ลักษณะตัวอักษร
html (css) การกำหนดสีด้วยภาษาคอมพิวเตอร์ โดยการเขียนโปรแกรม
ฟอนต์มาตรฐานที่ใช้กับหน้าเว็บ Ms san serif , Arial , Geneva , Helvetija 14-20 pt
ซึ่งอ่านง่าย
ถ้าเป็นหัวข้ออาจกำหนดความเด่นชัด เช่น หนา เอียง ขีดเส้นใต้ ตัวกระพิบ
- จำนวนของภาพกราฟฟิก
ภาพที่ใช้ประกอบในเว็บไซต์
ขึ้นอยู่กับความเหมาะสมของเนื้อหา
อาจเป็นการใช้กับภาพหนึ่งภาพ เช่น หนึ่งภาพหนึ่งเรื่อง
- ตำแหน่งในการวางภาพ
ควรจะอยู่ด้านซ้าย ขวา หรือกลาง ขึ้นอยู่กับเนื้อหาของเรา
มองจากซ้ายไปขวา
- ขนาดของภาพ
JPEG , GIF

หลักการใช้สี

หลักการใช้สี

หลักการใช้สีสำหรับการออกแบบเว็บไซต์
1. จำนวนจองสีหลัก
สีหลัก ให้เลือกตาม Concept + Mood Tone หรือ Theme เพื่อแสดงให้ถึงภาพลักษณ์
2. การใช้สีพื้นหลัง
ภาพ ลวดลาย สี
3. โทนสีโดยรวม
โทนร้อน โทนเย็น
4. สีกับหมวดหมู่
หมวดข่าว บันเทิง
อยู่ลักษณะเนื้อหาของหมวดหมู่

FONT

Happy-Red X





ฟอนต์ใหม่ตรา Happy-Red X ฝีมือของน้องเคน (ไม่อยกาจะเรียกมันว่าน้องเคนเลย แสลงปาก) นักประดิษฐ์ฟอนต์รุ่นเยาว์ที่มากี่ทีๆ ก็ลึกลับและแนวได้ตลอด
ถ้าใครนึกภาพหน้าเคนไม่ออก ให้นึกถึงหม่ำ จ๊กมก ตอนอยู่มัธยม นั่นแหละครับบักเคนของเรา!
อ้อ บักเคนยังให้คำอธิบายเสียยืดยาวเกี่ยวกับฟอนต์ตัวนี้ว่า “เป็นฟอนต์ที่คิดมากที่สุดเท่าที่เคยทำมาเลย” .. มันบอกแค่นี้จริงๆ!

FONT

การเลือกใช้ Font ในการออกแบบ

ในการออกแบบให้สวยงามนั้น สิ่งที่สำคัญอย่างหนึ่งที่เราไม่ควรจะมองข้ามเลย ก็คือ ตัวอักษร หรือ Font ครับ เอาล่ะวันนี้จะพามาดูเรื่องของการเลือกใช้ font ให้เหมาะกับงานของเราครับ อาร์ตก็สรุปคร่าวๆ อาจจะไม่ถูกหลักตามที่เค้าสอนกันทั่วไปก็ได้ แต่ใช้ได้จริงๆคับ



หลักการเลือก font

•สำหรับงานทั่วไป พยายามเลือก font ที่เข้าใจได้ง่าย อ่านง่าย ดูแล้วอ่านออกทันที จะทำให้เราสามารถสื่อใจความสำคัญของงานออกมาสู่ผู้ชมได้เร็วครับ
•การออกแบบแนวศิลป์ อาจใช้ font ที่ดูมีความหมาย อ่านแล้วต้องคิดตามนิดนึงถึงจะเข้าใจความหมายได้ แบบนี้อาจจะทำให้งานของเราน่าติดตามไปอีกแบบคับ เหมาะกับงานที่ออกแบบอิสระเท่านั้นนะ (ไม่เหมาะกับงานทั่วไปคับ)
•เลือกฟอนต์แบบไหนก็ตาม ควรจะดูด้วยว่า เข้ากับงานที่เราทำหรือเปล่า เช่น ออกแบบได้ไม่เข้ากับรูปพื้นหลังเลย แบบนี้ก็ถือว่าใช้ไม่ได้คับ
•ควรเลือกฟอนต์หลายๆแบบเปรียบเทียบกันดูว่าอันไหนเหมาะสมที่สุด เราก็เลือกใช้อันนั้นคับ บางที font แบบนึงอาจจะสวยเมื่อทำกับงานนึง แต่อีกงานอาจจะดูไม่สวยก็ได้... ฉะนั้นไม่ว่าทำแบบไหนก็ขอให้ดูดีก็โอเคแล้วคับ




ตัวอย่าง font แบบต่างๆ ที่สวยงาม






เราจะหา font สวยๆได้จากที่ไหน?


ความจริงแล้ว font สวยๆ มีให้ใช้มากมายครับ ถ้าเป็น font ภาษาอังกฤษ ก็เข้า google แล้วหาคำว่า download font ก็เจอแล้วล่ะ แต่ถ้าเป็นเว็บไทย ก็ขอแนะนำเว็บ www.f0nt.com นี่แหละครับ เป็นเจ้าของ font สวยๆข้างบนที่เราเอามาโชว์ครับ เป็นเว็บศูนย์รวม font สวยๆ แนวอาร์ต ที่นักออกแบบตัวอักษรช่วยๆกันออกแบบ แล้วแจกจ่ายฟรี สามารถ Download ได้ครับ

ส่วน font ไทยสวยๆ ที่เป็นมาตรฐานจริงๆที่อาร์ตอยากแนะนำคือ ฟอนต์ตระกูล PSL ครับเนื่องจากมีสไตล์สวยๆ ที่กราฟิกดีไซน์นิยมใช้กันเยอะ แต่ว่าฟอนต์ตระกูลนี้จะมีลิขสิทธิ์ด้วย หากต้องการใช้จำเป็นต้องเสียค่าใช้จ่าย ดังนั้นหากเอาไปใช้ก็โปรดใช้ด้วยความระมัดระวังครับ

LOGO

หลักการออกแบบโลโก้ 2
มาแล้วกับ หลักการออกแบบโลโก้ที่ดี ตอนที่ 2 โดยในตอนนี้ เราจะมาพูดกันถึง กฎหลัก 5 ข้อ ที่ใช้ในการออกแบบโลโก้ให้มีประสิทธิภาพ ตรงความต้องการของลูกค้า เท่านั้นยังไม่พอ เรายังจะพูดถึงการคิดราคาการออกแบบโลโก้ รวมถึง ปัจจัย และวิธีการเลือกดีไซนเนอร์ ในออกแบบโลโก้ให้กับองค์กรหรือแบรนด์ของคุณอีกด้วย ตามเข้ามาอ่านเลยครับ ใครที่อยากเก่งทางด้านออกแบบโลโก้ บทความนี้ คุณไม่ควรพลาด อ้อ อย่าลืมอ่าน หลักการออกแบบโลโก้ที่ดี ตอนที่ 1 กันก่อนล่ะ :)

กฎหลัก 5 ข้อในการออกแบบโลโก้

จากที่บอกไปในตอนที่แล้วว่า โลโก้ที่ดีนั้นต้อง มีเอกลักษณ์เฉพาะ, เหมาะสม, กราฟิกสวย, เรียบง่าย และคอนเซปที่ดี เมื่อคุณรู้ในสิ่งบอกไปแล้ว ต่อไปเราต้องมีรู้ถึงกฎหลัก 5 ข้อในการออกแบบโลโก้ที่ดีกัน
1. Simple


ความเรียบง่ายนั้น ง่ายต่อการเข้าใจ รับรู้ และจดจำ ไม่ใช่แลดูเยอะแยะ จนคนที่เห็นนั้นจำได้ยาก
* คุณสามารถศึกษาประวัติโลโก้ไนกี้ได้ที่นี่ (ภาษาอังกฤษ)
2. Memorable

กฎข้อนี้ มันเป็นจากความเรียบง่ายข้อแรก เมื่อโลโก้ของเรามีความเรียบๆ ดูดี ก็สามารถทำให้ผู้ที่เห็นสามารถจดจำโลโก้ของเราได้ และรู้ว่าแบรนด์เราคือแบรนด์อะไร ดังนั้นจำไว้เลยว่า เวลาออกแบบโลโก้เราควรออกแบบให้คงความเรียบง่ายไว้เสมอนะครับ
3. Timeless

โลโก้ที่เราออกแบบควรออกแบบให้มันคงอยู่ถาวร เพราะว่าโลโก้เรานั้นจะต้องติดอยู่กับแบรนด์ตลอดเวลา ฉะนั้นเวลาออกแบบ คุณไม่ควรตามเทรนด์ เพราะมันอาจะหมดความนิยมได้ในเวลาต่อมา ขอให้คุณคงความคลาสสิคไว้ และคุณควรต้องถามตัวเองด้วยว่า โลโก้ของเรานั้นจะอยู่รอดและสวยงามไปตลอดจนถึง 10 ปี 20 ปี หรือ 50 ปีเลยหรือไม่ ?
4. Versatile

อีกข้อที่สำคัญ (มาก) คือ โลโก้ของคุณต้องสามารถใช้งานได้หลากหลายในสื่อมีเดีย หรือใช้งานอื่นๆได้ตามโอกาส โดยคุณควรออกแบบโลโก้ให้อยู่ในรูปแบบ Vector เพื่อสามารถนำไปใช้ได้หลายขนาด หลายไซส์ แล้วแต่ความต้องการแต่ละชนิดงาน

คุณควรถามตัวเองว่า โลโก้ของคุณนั้นสามารถ ..

•ปริ้นท์สีเดียวได้หรือไม่ ?
•ปริ้นท์ในสีตรงข้ามกันได้หรือไม่ ? (เช่น โลโก้สีสว่าง พื้นหลังสีเข้ม)
•ปริ้นท์ไซส์ขนาดเท่าสแตมป์ได้หรือไม่ ?
•หรือปริ้ท์ไซส์ขนาดเท่าบิลบอร์ดโฆษณาได้หรือเปล่า ?
ผมแนะนำว่า ในตอนแรกคุณควรออกแบบโลโก้เป็น สีขาว-ดำ ก่อน มันสามารถช่วยคุณในการมุ่งประเด็นไปที่คอนเซป และรูปร่างโลโก้ได้ มากกว่าการใช้สี และอีกข้อที่ควรจำคือ ยิ่งคุณใช้สีมากเท่าไหร่ ค่าใช้จ่ายก็ยิ่งมากขึ้นเท่านั้น (ในแง่ของการใช้ระยะยาวในเชิงธุรกิจ

5. Appropriate



วิธีการเลือกนักออกแบบโลโก้ให้กับองค์กรของคุณ
•ประสบการณ์ และผลงานที่ผ่านมา
นักออกแบบมีประสบการณ์ในการออกแบบโลโก้หรือไม่ หรือมีผลงานที่ประสบความสำเร็จมาแล้วบ้างหรือเปล่า ?

•คำนิยม คำชมเชย
นักออกแบบมีคำชม หรือมีคำนิยมจากลูกค้าที่ผ่านมาหรือไม่ ? แต่คุณต้องแน่ใจนะ ว่าคำนิยมนั้น มาจากลูกค้าของเค้าจริงๆ ไม่ใช่แต่งขึ้นมาเองสะงั้น !!

•ขั้นตอนการออกแบบ
ดีไซน์เนอร์ได้ทำตามกระบวนการขั้นตอนการออกแบบหรือไม่ ?

•รางวัล หรือ ผลงานที่เคยเผยแพร่
ดีไซน์เนอร์มีผลงานที่เคยชนะรางวัลการประกวดหรือไม่ ? หรือผลงานของดีไซน์เนอร์เคยตีพิมพ์ลงหนังสือ หรือแมกกาซีนหรือเปล่า ? ดีไซน์เนอร์คนนี้ ได้อยู่แวดวงการออกแบบหรือเปล่า ?

•ระยะเวลาการออกแบบ
ดีไซน์เนอร์ต้องใช้เวลาเท่าไหร่ ในการออกแบบโลโก้ของคุณ โดยปกติทั่วไปแล้ว ควรใช้เวลาประมาณ 4-15 วัน แต่บางคนอาจถึง 1 เดือน คุณควรคิดว่าคุณต้องการโลโก้ให้เสร็จภายในเวลาเท่าไหร่ ถ้าแบบเร่งด่วนเวลาในการ Research ของดีไซน์เนอร์ ก็จะน้อยลงตามไปด้วย อันนี้แล้วแต่ความเหมาะสมของคุณนั่นเอง

•ราคา
ผมคิดว่าเรื่องนี้ อาจเป็นปัจจัยสำคัญของหลายๆคน คุณต้องเลือกว่า โลโก้ที่คุณได้รับนั้น จะเหมาะสมกับเงินที่คุณได้จ่ายไปหรือไม่ ?

•การสื่อสาร
ดีไซน์เนอร์ตอบอีเมล์คุณไวหรือเปล่า ? เขามีวิธีการนำเสนอผลงานอย่างไร ? มีการทำสัญญาการออกแบบหรือไม่ ? (เพื่อป้องกันทั้งตัวคุณเองหรือดีไซน์เนอร์) สิ่งเหล่านี้เป็นอีกข้อที่คุณควรจะพิจารณา

•ข้อซักถาม
ดีไซน์เนอร์ได้ถามเรื่องราวเกี่ยวกับองค์กรหรือธุรกิจคุณมาก น้อยแค่ไหน เพราะเรื่องเหล่านี้มันเกี่ยวข้องกับผลงานโลโก้ ที่จะตามมาในภายหลังด้วย

LOGO

หลักการออกแบบโลโก้ 1

โลโก้คืออะไร ?
อย่างแรกที่เราต้องทำความเข้าใจคือ จุดประสงค์หลักของโลโก้นั้นคืออะไร ? นั่นคือเราทำโลโก้มาเพื่อ ..

•ทำให้คนอื่นจดจำได้ง่าย สามารถรู้ได้ทันทีว่าโลโก้นี้คือแบรนด์อะไร
•เพิ่มความเชื่อมั่นในตัวแบรนด์
•เพิ่มความ Loyalty ของแบรนด์
•บ่งบอกถึงความเป็นมืออาชีพ
ซึ่งส่วนประกอบของโลโก้ทั้งหมดนั้น ไม่ว่าจะเป็น Shape, สีที่ใช้, รูปแบบตัวอักษร หรือรูปต่างๆ สามารถแสดงถึงความเป็นเอกลักษณ์เฉพาะตัวของแต่ละแบรนด์ หรือบริษัทได้ ซึ่งเราควรออกแบบมาให้แตกต่างกับแบรนด์ หรือบริษัทอื่นๆในตลาดเดียวกันให้ได้ สรุปคือ โลโก้ก็คือหน้าคุณในบัตรประชาชนน่ะแหละ ว่าคุณคือใคร!










โลโก้ที่ดีนั้นต้อง มีเอกลักษณ์เฉพาะ, เหมาะสม, กราฟิกสวย, เรียบง่าย และที่สำคัญ มันต้องบอกถึงความมุ่งมั่น หรือเจตนาของแบรนด์นั้นได้ นั่นคือ คอนเซ็ป หรือ “ความหมาย” มักอยู่เบื้องหลังของโลโก้ และต้องสามารถสื่อสารไปยังผู้รับรู้ได้ทันที

อีกหนึ่งข้อที่สำคัญสำหรับโลโก้คือ เราต้องทำโลโก้ที่สามารถพิมพ์ได้ทุกขนาด ไม่ว่าจะใหญ่เท่าตึกใบหยกหรือจะเล็กเท่าหอยมด และถ้าให้ดีขึ้นไปอีก อย่ามีสีเลยซะดีกว่า นั่นก็คือใช้สีดำอย่างเดียว

สรุปคือ โลโก้ที่ดีนั้นหลักง่ายๆ คือ คอนเซ็ปที่ดี และสามารถนำไปใช้งานได้ทุกโอกาส

ขั้นตอนการออกแบบโลโก้ (Logo Design Process)
“หลายคนคงสงสัย มันยากตรงไหนที่จะออกแบบโลโก้ซักอันนึง ? ดูเล็ก ๆ ดูง่าย คงไม่ยากหรอกใช่มั้ย ?
ก็แน่ล่ะ ถ้าคุณแค่ดูตอนที่มันเสร็จแล้วจากความมุมานะ พยายามของดีไซน์เนอร์แล้ว คุณคงจะคิดว่า ง่ายจัง !
แต่จริงๆ มันไม่ใช่นะเฟ้ยยย .. มันต้องใช้สมองและความคิดสร้างสรรค์อย่างมากเลยนะ กว่าจะออกมาเป็นโลโก้ที่ดีอันนึงเนี่ย !! ”
- โดย Harrison McLeod ( แปลมั่วซั่วโดยก๊อตเอง 55 )

เอาล่ะ เข้าเรื่องกันต่อ เมื่อคุณต้องการออกแบบโลโก้ซักอันนึง ผมว่าคุณทำตามขั้นตอนที่ผมบอกต่อไปนี่ดีกว่านะ คุณจะได้แน่ใจว่า โลโก้ของคุณนั้น จะเป็นที่พอใจ กับลูกค้าของคุณหรือเปล่า ซึ่งผมได้ลิสไว้ข้างล่างแล้ว ดีไซน์เนอร์ทั้งหลายเค้าก็ทำตามนี้หมดแหละ เชื่อผม ฮ่า ๆ








Design Brief
อย่างแรกเลย คุณต้องตั้งคำถามหรือสัมภาษณ์กับลูกค้าของคุณ ว่าเค้าค้องการแบบไหน อะไรยังไง เพื่อเราจะได้รู้ขอบเขตของดีไซน์

Research
วิจัย และศึกษาเกี่ยวกับธุรกิจ บริษัทของลูกค้าคุณว่า ทำเกี่ยวกับอะไร และดูว่าคู่แข่งของบริษัทลูกค้าคุณเป็นอย่างไร จำไว้ว่า “Problem-solve first, design later”

Reference
ให้ลองศึกษาโลโก้ที่ประสบความสำเร็จมาแล้ว ว่าเค้ามีแนวคิดอย่างไร, ศึกษเทรนด์และสไตล์ของโลโก้ช่วงนี้เป็นอย่างไร และนำมันมาประยุกต์เข้ากับโลโก้ของเราที่จะทำ เราตามเทรนด์ได้แต่อยากไปลอกของเค้ามาล่ะ อีกเรื่องที่ควรรู้ไว้อีกอย่างคือ ความยืนยาวคือสิ่งสำคัญของโลโก้ เพราะมันต้องอยู่กับบริษัทหรือแบรนด์ไปอีกนานหรือตลอดไป

Sketching and Conceptualizing
ลองร่างภาพโลโก้จากที่ได้ Brief จากลูกค้า และจาก Research ที่เราได้ศึกษามา ขั้นตอนนี้เป็นส่วนที่สำคัญมากนะครับ เพราะว่าโลโก้จะออกมาเป็นรูปแบบอย่างไรนั้น ขึ้นอยู่กับส่วนนี้เลย

โดยเราต้องใช้ความพยายาม, ความคิดสร้างสรรค์ และแรงบันดาลใจ มาช่วยในการออกแบบ ตามที่ Dainis Graveris เขียนไว้ว่า

“การร่างแบบนั้นไม่ได้ใช้เวลาฟุ่มเฟือยเลย และมันเป็นวิธีที่ดีมากในการดึงเอาไอเดียจากในหัวลงไปสู่กระดาษ หลังจากนั้น เวลาเราเอาความคิดนั้นมันทำในคอมพิวเตอร์ มันจะง่ายกว่ามาก ถ้าคุณไม่ได้ร่างแบบอะไรเลย ซึ่งการร่างแบบเป็นประจำๆนั้น จะช่วยพัฒนาความคิดสร้างสรรค์ของคุณอย่างไม่มีที่สิ้นสุด จำไว้เลยว่า การเริ่มต้นที่ดี คือการเริ่มต้นจากกระดาษสีขาวนั่นแหละ”

Reflection
หยุดพักการดีไซน์ไปซักพัก แล้วลองกลับมาดูสิ่งที่เราออกแบบใหม่ คุณจะเห็นในสิ่งที่คุณต้องปรับเปลี่ยน ซึ่งวิธีนี้จะช่วยทำให้ไอเดียคุณมีความสมบูรณ์มากขึ้น และมีความคิดสดๆ ใหม่ๆมาปรับปรุงโลโก้ของคุณ

Revisions and Positioning
ไม่ว่าคุณตั้งตัวเองเป็นผู้รับเหมา (คือ รับคำสั่งความต้องการมาจากลูกค้า) หรือ ผู้ชี้แนะ (คือแนะนำลูกค้าเพื่อสิ่งที่ดีที่สุด) ให้นำสิ่งที่เรา Reflection ไป และ Required จากลูกค้า นำมาแก้ไขและปรับปรุงซะ

Presentation
เวลาพรีเซ้น ให้พรีเซ้นเฉพาะโลโก้ที่ดีที่สุดและควรใช้ไฟล์ PDF จะดีที่สุด คุณอาจจะลองโชว์โลโก้ของคุณให้อยู่ในสิ่งต่างๆ เช่น นามบัตร หรือ ซองจดหมาย เพื่อให้ลูกค้าของคุณได้เห็นถึงความ Brand Identity ชัดเจนมากยิ่งขึ้น สำหรับไฟล์ในการพรีเซ้น ควรเป็นไฟล์คุณภาพสูง ซึ่งมันเป็นสิ่งสำคัญในการทำให้ลูกค้าเห็นด้วย และชอบดีไซน์ของคุณ

Delivery and Support
เมื่อขั้นตอน Presentation เสร็จ และลูกค้าของเราชอบในดีไซน์ของเรา ต่อไปคือเราต้องส่งไฟล์ Logo ให้แก่เค้า (จำไว้ว่าควรจะเป็นไฟล์ Vector นะจ๊ะ) และคอย Support เค้าตลอดเวลาเมื่อเค้าต้องการคววามช่วยเหลือ

หลังจากเสร็งานแล้ว ก็อย่าลืมไปกินเหล้าเมาแปร๋กับเพื่อนฝูง หรือหาอะไรกินซะ อย่างช็อคโกแลต เพื่อทำให้ตัวเองผ่อนคลาย แล้วค่อยเริ่มงานโปรเจคต่อไป อิอิ

ขนาดเต็ม

ตัวอย่างเว็ปแนวนอน 1024*768

วิเคราะห์ขนาดเว็บ

ลักษณะโครงสร้าง ขนาดเว็ป 1024*768

ขนาดหน้าจอเป็น1024*768
การวางตำแหน่งมี 3ส่วนบนเป็น แบนเนอร์

ส่วนกลาง เป็นแนะนำสินค้า

ส่วนท้ายเป็น ข้อมูลติดต่อ

เมนู ใช้เมนูแบบที่เป็นตัวหนังสือบอกแล้วก็กดคลิกพร้อมกับลิงค์ไปหน้านั้นเลยโดยจะอยู่แถบบนหัวเว็บ
การแบ่งหมวดหมู่ แบ่งเป็น รายการสินค้า แนะนำสินค้า ฯลฯ

ไอคอน

ไอคอน

สี (color)



สี= ที่เกี่ยวข้องกับมัลติมิเดีย คือสีที่อยู่บนหน้าจอคอมพิวเตอร์, บนมือถือ
The colo Wheel = วงจรสี
ขั้นที่ 1 แม่สีคือ PRIMARY เช่นสีแดง, สีเหลือง, สีน้ำเงิน
ขั้นที่ 2 สีรอง คือ SECONDARY เช่น สีส้ม , สีม่วง , สีเขียว
ขั้นที่ 3 TETIARY เช่น สีส้มแดง , สีส้มเหลือง , สีม่วงแดง, สีคราม ,สีเขียวอ่อน ,สีน้ำเงิน+สีเขียว ได้สีเขียวน้ำเงิน

ศัพท์ที่เกี่ยวกับสี
1. Hue แปลว่า ตัวสีหรือเนื้อสี
2. Saturation แปลว่า ความจัดจ้านของสีหรือความเจิดจ้าของสี
3. Value แปลว่า ค่าน้ำหนักของสี (ผสมขาวกับดำ ทึบก็ใส่ดำ ขาวให้สว่าง)

สี (color)
1. CMYK ใช้สำหรับกับสิ่งพิมพ์ มี 4 สี เช่น หนังสือพิมพ์ 4 สี
CYAN สีน้ำเงิน , MAGENTA สีชมพูบานเย็น, YELLOW สีเหลือง , BLACK สีดำ
สีนอกเหนือจากที่พิมพ์ออกมาในการพิมพ์ 4 สี คือการทับกันของสีสองสี
2. RGB (แดง, เขียว, ฟ้า) ลงเว็บไซต์หรือบนหน้าจอ
กำหนดเช่น 141R, 145G, 32B ได้สีเขียวขี้ม้า

แบบต่าง ๆ ของสีชนิด RGB
แบบที่ 1 MONOCHROMATIC
สีเดียว สร้างความแตกต่างด้วยระดับความมืด- สว่างของสี
แบบที่ 2 TRIADS
การเลือก 3 สี ที่อยู่ตรงกันข้ามวงจรสี เช่น เว็บไซต์เกี่ยวกับเด็ก อารมณ์มีสีสัน
แบบที่ 3 ANALOGOUS
การใช้สีใกล้เคียงกัน โดยเลือกจากสิ่งที่อยู่ถัดไป อีก 2-3 สี อาจสร้างความกลมกลืนได้ดี
แบบที่ 4 COMPLEMENTARY
การใช้สีตรงข้ามกัน สามารถช่วยเน้นความโดดเด่นได้ดี ควรใช้สีดำหรือเทา เพื่อลดความรุนแรวของสี นอกจากนั้นการใช้สี ที่แตกต่างกันมาก จะทำให้มีความสำคัญเท่ากัน ดังนั้นจึงควรลดความเข้มของสีหนึ่งลง (ต้องลดหลั่นความเข้มของสี)
แบบที่ 5 SPLIT-COMPLEMENTS
การใช้สีแบบผสม เป็นการผสมผสานระหว่างสีโทนร้อนและเย็นโดยเริ่มจากการเลือกสีใดสีหนึ่งและจับคู่กับอีก 2 สี ในโทนสีที่ตรงข้ามกัน

front