วันศุกร์ที่ 8 ตุลาคม พ.ศ. 2553

การออกแบบเว็บไซต์

1. เลือกเว็บไซต์ที่จะทำ
1.1 ชื่อเว็บไซต์
1.2 ข้อมูล ภาพรวมของเว็บไซต์
1.3 ปัญหาที่เกี่ยวกับการออกแบบเว็บไซต์
1.4 จุดมุ่งหมายของเว็บไซต์ (จากปัญหา)
1.5 กลุ่มเป้าหมาย
- ด้านกายภาพ
- ด้านจิตภาพ
- ด้านรสนิยม
1.6 แนวความคิด
1.7 อารมณ์และความรู้สึก เป็นลักษณะการเสนอบุคลิกภาพของเว็บไซต์


2. ลักษณะโครงสร้างของหน้าเว็บ
รูปแบบและการนำเสนอหน้าเว็บไซต์
ลักษณะและโครงสร้างของหน้าเว็บไซต์


เว็บไซต์พอดีหน้า





เว็ปแนวนอน

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



ขนาดของหน้าเว็ป :1600 *800 px
การจัดวางตำแหน่งของ LOGO เนื้อหา ภาพประกอบ
ส่วนหัว : LoveBento - This what we love
ส่วนกลาง : เมนูทางด้านซ้ายสุด ,ข้อความ ,รูปภาพ ทำการแบ่งเนื้อหาต่างๆเป็นบล็อคๆเรียงในแนวนอนจากด้านซ้ายไปขวา
ตำแหน่งของเมนู : อยู่ทางด้านซ้ายของเว็ป
ลักษณะของเมนู : เป็นรูปแบบตัวอักษร แนวเฉียงลง45องศา

วันศุกร์ที่ 1 ตุลาคม พ.ศ. 2553

โครงสร้างเว็ป แบบแนวตั้ง

โครงสร้างเว็ป แบบแนวตั้ง






- ขนาดของเวป 1024*768

- การจัดวางตำแหน่งของ LOGO

- เนื้อหาภาพประกอบส่วนหัว ชื่อเว็ป,หน้าหลัก,เกม,ท่องเที่ยว,ข่าวดารา,โหลดรูป,ลดราคา,

ฟรีเว็ป,มือถือ,ฟุตบอล,ติดต่อเรา

- ส่วนกลาง มีรูปภาพ,ข้อมูลต่าง ๆ

- ส่วนล่าง เว็ปมาใหม่,เว็ปเด่น,เพิ่มรายชื่อ,แจ้งลบ,แก้ไขเว็ปตำแหน่งข้อมูล

- Navigation Bar อยู่ด้านบนสุดลักษณะของเมนู

- แบบตัวอักษรการแบ่งหมวดหมู่ ชื่อเว็ป,หน้าหลัก,เกม,ท่องเที่ยว,ข่าวดารา,โหลดรูป,ลดราคา,ฟรีเว็ป,มือถือ,ฟุตบอล,ติดต่อเรา



3.หลักการใช้สีสำหรับการออกแบบเว็บไซต์

3.1 จำนวนของสีหลัก

3.2 การใช้สีพื้นหลัง

3.3 โทนสีโดยรวม

3.4 สีกับหมวดหมู่



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

4.1
สีของตัวอักษร ในเว็บควรจะใช้สีไร ตัวอักษร เช่น เข้ม กลาง อ่อน พื้นหลัง อ่อน/กาง , เข้ม/อ่อน,เข้ม/กลาง

4.2 ลักษณะตัวอักษร html(CSS) ,Font MS sanser,Font Arial,Font Geneva,ขนาด14-20 pt,หนา/เอียง,กะพริบ

4.3 จำนวนภาพกราฟิก คือ ภาพที่อยู่บทเว็บไซต์ 1ภาพ,1เสียง

4.4 ตำแหน่งในการวางภาพ

4.5 ขนาดของภาพ ไฟล์รูปภาพ JPEG,GIFเป็นภาพลายเส้น



5. การใช้สื่อประสมสำหรับการออกแบบเว็บไซต์

5.1 การใช้ภาพเคลื่อนไหว มีส่วนของ LOGO Animatd มันต้องมี Intractive เช่น ปุ่ม แทบนำทาง ใช้ในส่วนของหน้าเว็บ แบบ Intro ใช้ Flash ทำภาพเคลื่อนไปในเนื้อหาไหวขึ้นมาก่อนที่จะเข้า

5.2 การใช้วิดีโอคลิป

5.3 การใช้เสียง


วันเสาร์ที่ 18 กันยายน พ.ศ. 2553

ภัยเงียบจากโลกไซเบอร์

วงจรสี

องค์ประกอบ การออกแบบสี
วงจรสี The coler Wheel
the color wheel is a simple andeffctive way to present concepts and terms
related to the study and use of color.

แม่สี
สีขั้นที่ 2

สีขั้นที่ 3

+ Hue = ฮิว = เนื้อสี หรือ ตัวสี


+ Saturation = แซดทูเรชั่น = ความเข้มของสี ความจัดของสี
+ Value = น้ำหนักของสี (สว่างหรือมืด)

Color of infinite variety can be created by altering the effects of three variables :
hub , saturation and value.

ระบบของสี + CMYK ใช้กับสิ่งพิมพ์ต่าง ๆ แม่สีด้วยกันทั้งหมด 4 สี คือ
Cyan น้ำเงิน , Magenta แดง , Yellow เหลือง , Black ดำ



Tints ความเข้มของสี แบ่งเป็น %
Combinning CMYK เวลาพิมพ์จะใช้พิมพ์สีทับกันทำให้เกิดสีใหม่ (100m, 100y)

+ RGB แม่สีทั้งหมด 3 สี คือ Red แดง , Green เขียว , Blue ฟ้า
Combinning แบบใช้แสงของหลอดภาพมารวมกัน เช่น 141r , 145g , 32b



หลักการเลือกสี Color Combination

+ Monochromatic
การใช้สีเดียว สร้างความแตกต่างด้วยระดับ ความมืด-สว่างของสี


+ Triads
การใช้สี 3 สีจากคู่สีที่อยู่ตรงข้ามกัน ควรทดลองใช้หลายรูปแบบ เพื่อสร้างความแตกต่าง




+ Analogous
การใช้สีใกล้เคียงกัน โดยเลือกจากสีที่ถัดไปอีก 2-3 สี สามารถสร้างความกลมกลืนได้ดี


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

+ Split-complementary
การใช้สีแบบผสม เป็นการผสมผสานระหว่างสีโทนร้อนและเย็น โดยเริ่มจากการเลือกสีใดสีหนึ่ง และจับคู่กับอีก 2 สี ในโทนสีตรงข้ามกัน
จากตัวอย่าง สีส้ม เพิ่มความสว่างขึ้น เพื่อลดการแข่งกันระหว่างสีแดง




วันจันทร์ที่ 6 กันยายน พ.ศ. 2553

อักษร TYPOGRAPHY

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

ในการใช้ตัวอักษรเป็นอีกสิ่งหนึ่งที่สื่อสำเนียงกับคำต่าง ๆได้

ซึ่งจะต้องให้เหมาะสมกับงาน อารมณ์ แนวคิด และจุดมุ่งหมาย


TYPOGRAPHY + ความหมาย

"TYPOGRAPHY" คือ การใช้ตัวอักษร การจัดรูปแบบตัวอักษร

"FONT CTYPEFACES" คือ ชุดรูปแบบตัวอักษร

"FONT FAMILIES" คือ ตระกูลของตัวอักษร เช่น ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ เป็นต้น


TYPOGRAPHY + องค์ประกอบ

ภาษาอังกฤษ 1. serif




2. song serif



ภาษาไทย 1. แบบมีหัว




2. แบบไม่มีหัว






ภาษาญี่ปุ่น 英雄伝説VI:空の軌跡SC



Font ลูกครี่ง






TYPOGRAPHY + ขนาด






หน่วย = points , 72 points = 1 นิ้ว



รูปแบบตัวอักษรลักษณะมีเชิง



แบบตัวอักษรลักษณะไม่มีเชิง




รูปแบบตัวอักษรลักษณะอิสระ



รูปแบบตัวอักษรลักษณะโบราณ





ตัวอักษรแบบแปลงจากภาพ

โลโก้ คาราบาว

โลโก้ คือ สิ่งที่แสดงถึงความเป็นยี่ห้อ เป็นแบรนด์ ที่สื่อถึงเอกลักษณ์ และความเป็นตัวตน
หลักการสร้างโลโก้ มีโครงสร้างดังนี้
  • แบบรวมกันของรูป

  • แบบลบรูปออก

  • คัดเลือกรูป

  • การทำซ้ำของรูป














วันเสาร์ที่ 31 กรกฎาคม พ.ศ. 2553

คนรักหัวควาย


กลุ่มเป้าหมาย


วัยรุ่น / วัยผู้ใหญ่ : 15 - 35 ปี ฟังเพลงแนวมันส์ , สามซ่า , ร็อค ,รุนแรง



วัยผู้ใหญ่ : ช่วง 35 ปีขึ้นไปที่ยังมีใจรักควาย ฟังเพลงแนวสบาย , ผ่อนคลาย



เพศ : ชาย , หญิง


บุคลิก : เช่น กลุ่มฮาร์ดคอร์ , การ์ด นปช. , ขาล็อค , ขาเดปเฮปวี่ร์

อุปนิสัย : หัวรุนแรง , ชอบท้าทาย , กล้าหาชาญชัยชอบการสู้กับชีวิต


มีอารมณ์กู้ชาติ , บ้าบิ่นและจริงใจ ,นักจิตนาการ








นี่คือสถานที่ที่ทำให้จิตใจของพวกเขาเหล่านี้รู้


สึกมีคุณค่า โดยมีหัวควายเป็นศูนย์รวมจิตใจ







กลุ่มฮาร์ดคอร์ ซึ่งมี่อารมณ์ที่รุนแรง


ชอบการท้าทาย ซึ่งพวกเขาเหล่านี้คิดว่าตนกำลังกู้ชาติ





ลักษณะ กริยา ท่าทาง แสดงออกแบบซ่าๆ เถื่อนๆ ไม่เกรงกลัวใคร


การแต่งตัว เป็นลักษณะการแต่งตัวที่แตกต่างจากธรรมดาทั่วไป





CONCEPT : รวมพลคนรักหัวควาย



รูปภาพ คาราบาว