Font

ประกวดคลิปสั้นแต่ส่งไม่ทัน เอิ้ก ๆๆ "ภัยเงียบ"

คลิปภัยเงียบโลกไซเบอร์

Web web

ทำเองงับ

ลอกมาจ้า

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

วิธีการออกแบบเว็บไซต์ หลักๆ


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

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

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

-ลวดลาย

-สี

3.3 โทนสีโดยรวม -โทนร้อน

-โทนเย็น

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



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

4.1 สีของตัวอักษร - เข้ม

- กลาง

- อ่อน

4.2 ลักษณะตัวอักษร

4.3 จำนวนของภาพกราฟฟิก

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

4.5 ขนาดของภาพ



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

5.1 การใช้ภาพเคลื่อนไหว

5.2 การใช้วีดีโอ

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





Update เพิ่มเติม


การใช้สื่อประสมในการออกแบบ เว็บไซด์


1. แฟ้มเสียง (Audio file)

ระบบของแฟ้มเสียงที่ใช้กันโดยทั่วไปมี 3 ชนิด คือ Digitize Audio, Music Files และ Text to Speech

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

- Music Files เป็นรูปแบบตัวโน้ตดนตรีที่เรียงสลับกัน เพื่อให้เล่นออกมาเป็นเสียงเพลง

- Text to Speech เป็นเทคนิคในการแปลงข้อความ (Text file)



2. แฟ้มวีดิทัศน์ (Video files)

ปัจจุบัน Digital Video เป็นสิ่งที่ทำให้เว็บเพจมีความทันสมัยและแปลกตายิ่งขึ้น โดยทั้งผู้ผลิตฮาร์ดแวร์และซอฟต์แวร์ และผู้ใช้งาน ต่างให้ความสนใจและพัฒนาเทคโนโลยีสาขานี้เป็นอย่างมาก เพื่อเพิ่มความน่าสนใจให้กับเว็บเพจ อย่างไรก็ตามแฟ้มภาพวีดิทัศน์จะมีขนาดใหญ่มาก ดังนั้นจำเป็นต้องมีการบีบอัดแฟ้มให้มีขนาดเล็กลง โดยผ่านกระบวนการที่เรียกว่า “Codec” (Compression / Decompression) ซึ่งจะกระทำโดยผ่านซอฟต์แวร์ต่าง ๆ ดังนี้ CinePak (Compac Video) เป็นวิธีที่นิยมกันมากที่สุด ใช้ในซอฟต์แวร์ที่ชื่อ Quicktime และ Video for Windows (vfw) Indeo คุณภาพรองจาก CinePak แต่เร็วกว่าใช้ได้ใน Quicktime Version 2.0 และ vfm JPEG นิยมนำมาใช้ทำ Video Capture แล้วใช้ CinePak มาทำ Codec MPEG Codec ได้คุณภาพ ของวีดิทัศน์สมบูรณ์มาก อย่างไรก็ตาม ยังขาดฮาร์ดแวร์ที่สนับสนุนอยู่มาก



3. แฟ้มภาพเคลื่อนไหว (Animation files)

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



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



5.5.6 ปัจจัยที่มีอิทธิพลต่อการแสดงผลของเว็บไซต์

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



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



1. ระบบปฏิบัติการ

ระบบ ปฏิบัติการ (Operating System) ระบบปฏิบัติการคอมพิวเตอร์เป็นปัจจัยสำคัญที่มีผลต่อการทำงานของบราวเซอร์ มาก ระบบปฏิบัติการหลักที่นิยมใช้กันมาก ได้แก่ Windows, Macintosh, Unix และ Linux โดยในแต่ละระบบจะแตกต่างกันในเรื่องของชนิดและรุ่นของบราวเซอร์ที่ใช้ได้ ระดับความละเอียดของหน้าจอ ชุดขอระบบสี และชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น

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



2. ความละเอียดหน้าจอ

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

3. ความเร็วในการรับส่งข้อมูล

ความเร็วในการรับ ส่งข้อมูล (Connection Speed) ยังคงเป็นปัญหาหลักที่จำกัดความก้าวหน้าของเทคโนโลยีใหม่ ๆ สำหรับเครือข่ายเว็บ เนื่องจากความเร็วในปัจจุบันยังช้า และไม่ทันใจ ทำให้ผู้พัฒนาต้องมีความพยายามอย่างยิ่งที่จะออกแบบเว็บให้มีขนาดเล็ก เพื่อการส่งผ่านข้อมูลที่

เขียนโดย Pichet Kulawong ที่ 5:21 0 ความคิดเห็น ส่งอีเมลข้อมูลนี้ BlogThis! แบ่งปันไปที่ Twitter แบ่งปันไปที่ Facebook แบ่งปันไปที่ Google Buzz

การใช้อักษรและภาพกราฟิก

การใช้ตัวอักษรบนหน้าเว็บ



ในแต่ละตัวอักษรประกอบด้วยส่วนต่างๆ ที่น่าจะรู้จักไว้ เพื่อที่จะใช้ประโยชน์เมื่อต้องการเปรียบเทียบลักษณะของตัวอักษรแต่ละชนิดได้มีส่วนประกอบหลักๆ ดังนี้ Ascender ส่วนบนของตัวอักษรพิมพ์เล็ก Descender ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น Baseline เส้นสมมุติที่ตัวอักษรส่วนใหญ่ตั้งอยู่ Cap height ความสูงจากเส้นความสูงของตัวอักษร x-height ความสูงของตัวอักษร



วิธีการใช้ตัวอักษรและบนหน้าเว็บ



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

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

จัดชิดขวา การจัดตัวอักษรให้ชิดขวา จะดูน่าสนใจแต่จุดเริ่มต้นในของแต่ละบรรทัดที่ไม่สมำเสมอ ทำให้อ่านยากเนื่องจากผู้อ่านต้องหยุดชะงัก เพื่อหาจุดเริ่มต้นของแต่ละบรรทัด

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

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

ความยาวของบรรทัด เมื่องบรรทัดของตัวอักษรยาวขึ้น อาจสร้างความไม่สะดวกให้กับผู้อ่านที่ต้องเลื่อนสายาตาจากปลายบรรทัดไปยังส่วนต้นของบรรทัดใหม่ ความยาวที่เหมาะสมของบรรทัดขึ้นอยู่กับหลายปัจจัยอย่างเช่น ชนิดตัวบอักษร ขนาด ระยะห่างระหว่างบรรทัดและความยาวของเนื้อหา จะทำให้ไม่ต้องขยับศีรษะ ดังนั้น เพื่อความสะดวกในการอ่าน แต่ละบรรทัดควรมีตัวอักษรประมาณ 50-70 ตัวอักษร ดึงดูดความสนใจด้วยอักษรขนาดใหญ่ ตัวอักษรขนาดใหญ่ให้สะดุดตาเพื่อดึงดูดความสนใจด้วยการสร้างความแตกต่างของขนาดตัวอักษรโดยทั่วไปแล้วตัวอักษรแรกจะมีขนาดใหญ่กว่าตัวอื่นประมาณ 2-5 พอยท์ และยังนิยมที่จะใช้ตัวอักษรชนิดอื่นเพื่อให้เกิดความแตกต่างการเน้นข้อความให้เด่น ในการเตน้นข้อความทำได้โดยอาศัยความแตกต่างท่ปราฏของตัวอักษร รวามถึงความแตกต่างระหว่างพื้นที่ตัวหนังสือกับพื้นที่ว่างโดยรอบ ด้วยการสร้างความแตกต่างของรูปแบบและลักษณะของตัวอักษรให้เห้นได้ชัดเจนจะเป็นที่สะดุดตาและดึงดูดความสนใจจากผู้อ่านได้อย่างมาก การใช้ขนาดและน้ำหนักของตัวอักษร ตัวอักษรโดยทำให้มีขนาดใหญ่กว่า หรือมีลักษณะเส้นที่หนาและเข้มกว่า ซึ่งจะทำให้ดูมีความสำคัญมากกว่าสิ่งที่อยู่รอบข้าง สิ่งที่ต้องการเน้นจะมีลักษณะเด่นชัดและสะดุดตาผู้อ่าน ข้อความที่ไม่ต้องการเน้นจะมีขนาดเล็กและบางกว่า ซึ่งในภาษา HTML จะมีน้ำหนัดของตัวหนังสือให้เลือก 2 ระดับ คือ ตัวปรติ และตัวหนา



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

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



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



การใช้งานภาพกราฟฟิก



ประเภทของไฟล์รูปภาพ

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



1. ไฟล์ประเภท GIF (Graphics Interchange Format)

เป็นไฟล์ภาพที่มีขนาดเล็ก คุณภาพต่ำ เนื่องจากถูกบีบอัดข้อมูลให้มีขนาดเล็ก แสดงสีได้ 256 สี แต่เป็นที่นิยมสำหรับผู้เขียนเว็บเพจเป็นอย่างมากเนื่องจากสามารถทำเป็นภาพเคลื่อนไหว (Animation) และกำหนดให้แสดงภาพแบบโปร่งแสง มองทะลุไปด้านหลังได้ ไฟล์ประเภทนี้ส่วนใหญ่จะเป็น รูปวาด ภาพการ์ตูน รูป icon, emotion, ป้ายโฆษณาแบนเนอร์ และภาพที่ไม่ต้องการความละเอียดมากนัก



รูป emotion ต่างๆ



สามารถทำภาพแบบโปร่งแสงได้ เมื่อนำไปวางบนพื้นหลังสีอะไร ด้านหลังรูปจะเป็นสีตามพื้นหลัง



2. ไฟล์ประเภท JPEG หรือ JPG (Joint Photographics Expert Group)

เป็นไฟล์รูปภาพที่มีการบีบอัดข้อมูลน้อยกว่าไฟล์ประเภท GIF สามารถแสดงสีได้ 16.7 ล้านสี ภาพที่ได้จะมีความคมชัดมาก ไฟล์ประเภทนี้เหมาะกับภาพที่ต้องการความละเอียดสูง เช่น ภาพถ่ายจากกล้องดิจิตอลหรือ ภาพที่ได้จากการสแกน ภาพที่แสดงการไล่เฉดสี เป็นต้น



3. ไฟล์ประเภท PNG (Portable Network Graphic)

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



PNG-8 เป็นรูป แบบที่ใช้สีได้เพียง 256 สี และมีคุณสมบัตคล้ายกับไฟล์ GIF จึงเหมาะสำหรับใช้ทำภาพที่มีสีเรียบๆ เช่น ภาพโลโก้, การ์ตูน สามารถกำหนดพื้นหลังให้โปร่งแสงได้



PNG-24 เป็นรูป แบบที่ใช้สีได้ 16.7 ล้านสี เช่นเดียวกับไฟล์ JPG เหมาะสำหรับภาพถ่าย

WeB

ตั้ง 1024*768

-ส่วนหัว      ตำแหน่งและชื่อ Web Logo ซ้ายบน เมนูด้านซ้ายของWeb  Banner อยํทางด้านขวา ของ Web Site

ส่วนกลาง : สไลด์ภาพอัพเดทข่าวสาร ,ภาพเคลื่อนไหว ,โฆษณา ,review อุปกรณ์ไอที, ข่าวสารแบ่งหมวดหมูเป็น ข่าวIT Update ,ข่าว PC Zone ,ข่าว Notebook ,ข่าว Mobile ,ข่าว Gadget ,ข่าว Game และได้ทำการแบ่งเนื้อหาต่างๆเป็นบล็อคๆเรียงในแนวตั้งจากด้านบนลงล่าง


ส่วนท้าย : รวม Keyword สำคัญเกี่ยวกับเว็ป , ลิขสิทธิ์ , ชื่อที่อยู่เบอร์โทรสำหรับติดต่อทางเว็ป

ตำแหน่งของเมนู : อยู่ทางด้านบนของเว็ป

ลักษณะของเมนู : เป็นรูปแบบตัวอักษร

เว็ปแนวนอน

ขนาดของหน้าเว็ป :1600 *800 px

การจัดวางตำแหน่งของ LOGO เนื้อหา ภาพประกอบ

ส่วนหัว : LoveBento - This what we love

ส่วนกลาง : เมนูทางด้านซ้ายสุด ,ข้อความ ,รูปภาพ ทำการแบ่งเนื้อหาต่างๆเป็นบล็อคๆเรียงในแนวนอนจากด้านซ้ายไปขวา

ตำแหน่งของเมนู : อยู่ทางด้านซ้ายของเว็ป

ลักษณะของเมนู : เป็นรูปแบบตัวอักษร แนวเฉียงลง45องศา

Colour

องค์ประกอบการออกแบบ


องค์ประกอบการออกแบบ (Element of Design)



สี



The Color Wheel (วงล้อสี)

สีขั้นที่1

1. RED-Primary

2. YELLOW-Primary

3. BLUE-Primary

Hue (ตัวสี)

Saturation (ความจัดของสี)

Value (ค่าน้ำหนักสี)

สี Color --> C M Y K

สี Color --> RGB

Red--> (R)

Green --> (G)

Blue --> (B)

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

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

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

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

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

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

Font+Logo

      
      - Layiji 48 Regular
     
      - Exmouth 43 Regular

หลักการ ดีไซน์ LOGO 2

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





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

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



1. Simple

ความเรียบง่ายนั้น ง่ายต่อการเข้าใจ รับรู้ และจดจำ ไม่ใช่แลดูเยอะแยะ จนคนที่เห็นนั้นจำได้ยาก





2. Memorable

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



3. Timeless

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



4. Versatile

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



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



•ปริ้นท์สีเดียวได้หรือไม่ ?

•ปริ้นท์ในสีตรงข้ามกันได้หรือไม่ ? (เช่น โลโก้สีสว่าง พื้นหลังสีเข้ม)

•ปริ้นท์ไซส์ขนาดเท่าสแตมป์ได้หรือไม่ ?

•หรือปริ้ท์ไซส์ขนาดเท่าบิลบอร์ดโฆษณาได้หรือเปล่า ?

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



5. Appropriate

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





--------------------------------------------------------------------------------



ออกแบบโลโก้นั้น คิดราคาเท่าไหร่ดี ?





อีกคำถามยอดฮิต คือ คุณควรจะคิดราคาค่าออกแบบโลโก้ยังไงดี ? ซึ่งจริงๆแล้ว เรื่องนี้อาจจะตอบยากไปซักนิดนึง คำตอบที่เหมาะสมที่สุดาสำหรับคำถามนี้คือ คิดราคาตามความยากง่ายของการออกแบบ! นั่นเอง โดยความยากง่ายของการออกแบบโลโก้นั้นคุณอาจคิดโดยปัจจัยเหล่านี้



•จำนวนคอนเซปโลโก้ที่ออกแบบมาเพื่อนำเสนอ

•จำนวนครั้งในการแก้ไข หรือปรับปรุง

•ความยาก ง่าย ของการรีเสิร์ชโลโก้ให้กับลูกค้า

•ขนาดขององกรค์ หรือธุรกิจที่คุณออกแบบใหม่

•อื่นๆ ตามความเหมาะสมของคุณ



--------------------------------------------------------------------------------



วิธีการเลือกนักออกแบบโลโก้ให้กับองค์กรของคุณ

•ประสบการณ์ และผลงานที่ผ่านมา

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



•คำนิยม คำชมเชย

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



•ขั้นตอนการออกแบบ

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



•รางวัล หรือ ผลงานที่เคยเผยแพร่

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



•ระยะเวลาการออกแบบ

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



•ราคา

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



•การสื่อสาร

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



•ข้อซักถาม

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

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

หลักการ ดีไซน์ LOGO

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

โลโก้คืออะไร ?

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



•ทำให้คนอื่นจดจำได้ง่าย สามารถรู้ได้ทันทีว่าโลโก้นี้คือแบรนด์อะไร

•เพิ่มความเชื่อมั่นในตัวแบรนด์

•เพิ่มความ Loyalty ของแบรนด์

•บ่งบอกถึงความเป็นมืออาชีพ

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



โลโก้ที่ดีต้องเป็นยังไง ?





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

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



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



ขั้นตอนการออกแบบโลโก้ (Logo Design Process)

“หลายคนคงสงสัย มันยากตรงไหนที่จะออกแบบโลโก้ซักอันนึง ? ดูเล็ก ๆ ดูง่าย คงไม่ยากหรอกใช่มั้ย ?

ก็แน่ล่ะ ถ้าคุณแค่ดูตอนที่มันเสร็จแล้วจากความมุมานะ พยายามของดีไซน์เนอร์แล้ว คุณคงจะคิดว่า ง่ายจัง !

แต่จริงๆ มันไม่ใช่นะเฟ้ยยย .. มันต้องใช้สมองและความคิดสร้างสรรค์อย่างมากเลยนะ กว่าจะออกมาเป็นโลโก้ที่ดีอันนึงเนี่ย !! ”

- โดย Harrison McLeod



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







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 เค้าตลอดเวลาเมื่อเค้าต้องการคววามช่วยเหลือ



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



ตัวอย่างขั้นตอนการออกแบบโลโก้

จบตอนแรก

Layiji ซารังเฮโย

สำหรับฟอนต์ “Layiji ซารังเฮโย” นี้ชื่อเดิมคือ “Layiji เลยองจี” กระแสเกาหลีกำลังมาแรงสุดๆ เราละ ตามกระแส กวน มึน โฮ

http://www.f0nt.com/ ไปเลยเอา

การChooSe Font

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






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



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

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

การออกแบบแนวศิลป์ อาจใช้ font ที่ดูมีความหมาย อ่านแล้วต้องคิดตามนิดนึงถึงจะเข้าใจความหมายได้ แบบนี้อาจจะทำให้งานของเราน่าติดตามไปอีกแบบคับ เหมาะกับงานที่ออกแบบอิสระเท่านั้นนะ (ไม่เหมาะกับงานทั่วไปคับ)

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

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

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






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



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



----------------------------------------------------------------------------------------




 

ตาราง Map-Ping-Poject.Korea

Brief : งานออกแบบสื่อผสม

Brief : งานออกแบบสื่อผสม

ชื่องาน :  난 그녀를 사랑해

1. กลุ่มเป้าหมาย : อายุ 18-26 (ช\ญ) 
2. นิสัย : อ่อนโยน , เชื่อมั่นในความรัก
3. รสนิยม : ชอบนักแสดง,มีฐานะ,ชอบดูหนังเกาหลี

ConCept : 난 그녀를 사랑해,ความรัก

Emotion : Korea,Love,ซึ้งๆ

Coffee Prince

ทาตะวันในความฝัน

A moment to remember