รูปแบบและโครงสร้างของหน้าเว็บไซต์

WebPage แบบแนวตั้ง ขนาด 1024x768 Pixels

การใส่สีตัวอักษร

สีหลักที่ใช้ในการออกแบบ

สี (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 สี ในโทนสีที่ตรงข้ามกัน

การใช้ตัวอักษร (TYPOGRAPHY)

การใช้ตัวอักษร (TYPOGRAPHY)
นึกว่าตัวอักษร คือ รูปร่าง
TYPEFACES GIVE VOICE TO WORDS
: ตัวอักษรที่จะให้สำเนียงกับคำต่าง ๆ ได้
FONT (TYPEFACES)
: ชุดรูปแบบของตัวอักษร
FONT FAMILIES
: ตระกูลของชุดรูปแบบตัวอักษร

ส่วนประกอบ หรือ ลักษณะ
องค์ประกอบภาษาอังกฤษมี 2 รูปแบบ
1. Serif เป็นตัวอักษรที่มีเชิงหรือฐาน
2. Sans serif เป็นตัวอักษรที่ไม่มีเชิงหรือฐาน

+ ขนาด หน่วย=POINTS (72 points = 1 นิ้ว) ต้องดูรูปแบบของขนาดเป็นหลัก
แบบอักษรที่แตกต่างกัน มีขนาด points เท่ากันไม่จำเป็นต้องมีความสูงเท่ากัน

+ ประเภท
+ Sans serif ไม่มีเชิง เหมาะกับงานแบบกลาง ๆ ไม่ได้ระบุอะไรมาก เช่น font tahoma
+ Serif มีเชิง เหมาะสำหรับพวกที่มีความรู้สึกอลังการ หรูหรา
+ Script Hand - lettered (ลายมือเขียน) เช่น font ที่มีลักษณะที่คลาสสิก โบราณ
+ Dingbat font ที่มีรูปแบบ (ICON)
+ Novelty font ที่เกี่ยวกับ Fiarshion design (ฟอนต์ตกแต่งประดับประดา) font ที่มีรูปลักษณะเฉพาะตัว เช่น พาดหัวเว็บไซต์, ปกหนังสือ, Headline หนังสือ

+ Font การจัดวางตำแหน่ง
+ การผสมอักษร
วิธีที่ 1 ใช้font แบบมีเชิงเป็นหลัก ไม่มีขาเป็นรอง มีเชิง/ไม่มีเชิง โดยเน้นตัวอักษรให้ชัด ๆ เน้นหนา ให้แตกต่างกัน font ต้องเป็นไปได้
วิธีที่ 2 ใช้ฟอนต์แบบไม่มีขาเป็นหลัก มีขาเป็นรอง เน้นชัด ๆ อย่าให้เท่ากัน ไม่มีการเน้น จะทำให้ดูเด่นขึ้น
วิธีที่ 3 ไม่ชัดเจน / ไม่แนะนำ ฟอนต์ของโลโก้ต้องชัดเจน
วิธีที่ 4 ใช้ฟอนต์หลักและรองให้แตกต่างกันชัดเจน เช่น คละคนละ font
วิธีที่ 5 ลองใช้ตัวอักษรหลักและรองไม่ต้องแตกต่างกันมากนัก ต้องดูอารมณ์ด้วย

เว็บไซต์ FONT ที่น่าสนใจ
www.colorblender.com จะมีชุดสีมาใช้ จะมีการเลือกสีให้เหมาะสมกัน
www.Ont.com โหลด font ภาษาไทย
www.T26.com โหลด font ภาษาอังกฤษ

หลักการออกแบบรูปร่างและรูปทรง

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

1.โครงสร้าง
1.1 รวมกัน
1.1.1 กำหนดรูปร่างขึ้นมาก่อน
1.1.2 เอามาจัดเรียงกันซ้อนกัน
1.1.3 กลายเป็นโลโก้
1.2 ลบออก
1.2.1 กำหนดรูปร่าง
1.2.2 วางทับกัน
1.2.3 ลบออก
1.3 คัดเลือก
1.3.1 เลือกรูปร่างมา
1.3.2 คัดเลือกบางจุดตัดบางจุด
1.3.3 ได้ฟอร์มบางจุด
1.4 การซ้ำ
1.4.1 ใช้รูปเดิม
1.4.2 เปลี่ยนขนาด หมุน เปลี่ยนรูปร่าง

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

3.องค์ประกอบ
เครื่องหมายสัญลักษณ์ ประกอบด้วยรูปร่างที่ซ้ำกัน จัดวางล้อมรอบศูนย์กลาง
3.1 จัดวางอยู่ในศูนย์กลางของโครงสร้างที่อยู่ในรัศมีวงกลม
3.2 การจัดวางองค์ประกอบสามารถจัดวางรูปร่างภายในรูปร่าง
3.3 เล่นกับพื้นที่แล้วจัดวางไอคอนเข้าไป ในตำแหน่งอสมมาตรบนสี่เหลี่ยม
3.4 รูปร่างไอคอนหลากหลายใช้โครงสร้างตารางเข้ามาช่วยรวบรวมกัน
3.5 การใช้รูปร่าง 2 รูปร่างขึ้นไปเพื่อเสริมความหมายกัน เช่น ลูกศรอยู่นอกเครื่องบิน
3.6 การจัดวางที่ไม่จำเป็นต้องใช้รูปร่างเว่อ ๆ แต่ใช้รูปร่างที่เป็นรูปเลขาคณิตก็พอ เช่น วงกลม, สามเหลี่ยม, สี่เหลี่ยม ฯลฯ

Font ที่ออกแบบ

Font ต่าง ๆ

1. Typefaces give voice to words
: ตัวอักษรที่จะให้สำเนียงกับคำต่าง ๆได้
2. Font (Type facaces)
: ชุดรูปแบบของตัวอักษร
3. Font Families
: ตระกูลของชุดรูปแบบตัวอักษร




องค์ประกอบของฟอนต์ภาษาอังกฤษมี 2 รูปแบบดังนี้
1. Serif เป็นตัวอักษรที่มีเชิง
2. Sans Serif เป็นตัวอักษรที่ไม่มีเชิง/ฐาน
3. แบบความคิดสร้างสรรค์

ตัวหนังสือสมัยพ่อขุนรามคำแหง

ตัวหนังสือสมัยพ่อขุนรามคำแหง

ที่ค้นพบบนแผ่นศิราจารึกหลักที่ 1 ถูกค้นพบในสมัยรัชกาลที่ 3 โดยเจ้าฟ้ามงกุฎฯ(ต่อมาคือ พระบาทสมเด็จพระจอมเกล้าเจ้าอยู่หัว)เมื่อพ.ศ.2376

Logo

ร้าน SUWIT SWATCH SHOP

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