สรุปสั้น ๆ (TL;DR)
- ระบบ responsive logo มักมีสี่ระดับ ได้แก่ Full (สัญลักษณ์ ชื่อแบรนด์ สโลแกน) Primary (สัญลักษณ์และชื่อแบรนด์) Compact (แบบซ้อนหรือแบบย่อ) และ Icon (สัญลักษณ์อย่างเดียว)
- ระดับที่เล็กกว่าต้องวาดใหม่ให้เส้นหนาขึ้น ช่องไฟกว้างขึ้น และรายละเอียดน้อยลง การครอปสัญลักษณ์ออกจากไฟล์หลักจะได้ Icon ที่เบลอเมื่ออยู่ในขนาด favicon
- ไม่มีขนาดขั้นต่ำของโลโก้ที่เป็นมาตรฐานสากล ให้กำหนดขั้นต่ำของแต่ละระดับด้วยการทดสอบบนหน้าจอจริงและงานพิมพ์ แล้วบันทึกไว้ในคู่มือแบรนด์
- ชุดส่งมอบที่ครบประกอบด้วย SVG สำหรับเว็บ PNG พื้นหลังโปร่งใส ไฟล์เวกเตอร์ PDF/EPS/AI สำหรับงานพิมพ์ ค่าสี รวมถึง favicon, Apple touch icon 180 px และไอคอน manifest 192/512 px
- สระและวรรณยุกต์ไทยที่อยู่เหนือและใต้บรรทัดเป็นรายละเอียดแรกที่หายไปเมื่อย่อขนาด จึงควรกำหนดว่าระดับใดใช้ชื่อภาษาไทย และบันทึกไว้ในคู่มือแบรนด์
Responsive logo หรือโลโก้แบบ responsive คือชุดของโลโก้หลายเวอร์ชันที่มาจากโลโก้ตัวเดียวกัน แต่ละเวอร์ชันออกแบบมาสำหรับพื้นที่ขนาดต่างกัน เพื่อให้คนจำแบรนด์ได้ตั้งแต่บนป้ายบิลบอร์ดไปจนถึงแท็บเบราว์เซอร์ขนาด 16 พิกเซล แทนที่จะย่อไฟล์เดียวลงไปเรื่อย ๆ จนอ่านไม่ออก คุณออกแบบโลโก้เป็นครอบครัวสามถึงสี่แบบ (มักเรียกว่า Full, Primary, Compact และ Icon) แล้วสลับใช้ตามพื้นที่ที่เล็กลง
บทความนี้อธิบายว่า responsive logo คืออะไร ทำไมโลโก้แบบเดียวตายตัวจึงใช้ไม่ได้กับแบรนด์ส่วนใหญ่อีกต่อไป ระบบสี่ระดับมีโครงสร้างอย่างไร จะออกแบบและทดสอบแต่ละระดับอย่างไร นักออกแบบควรส่งมอบไฟล์อะไรบ้างเมื่อจบงาน และแบรนด์ที่คนรู้จักกันดีใช้แนวคิดนี้อย่างไร บทความนี้ไม่ได้ทวนพื้นฐานเรื่องประเภทของโลโก้และหลักการออกแบบ แต่เริ่มจากจุดที่คุณมีโลโก้อยู่แล้ว และต้องการให้มันใช้งานได้บนทุกหน้าจอและทุกพื้นผิวที่แบรนด์ไปปรากฏ
Responsive logo คืออะไร
คำนี้ยืมมาจาก responsive web design ซึ่งหน้าเว็บจะจัดเลย์เอาต์ใหม่ตามความกว้างของหน้าจอ responsive logo ใช้แนวคิดเดียวกันกับโลโก้ของแบรนด์ เมื่อพื้นที่ที่โลโก้มีให้ใช้แคบลง รายละเอียดจะถูกตัดออกตามลำดับที่วางแผนไว้ เริ่มจากสโลแกน ตามด้วยการจัดวางแนวนอนแบบยาว แล้วจึงเป็นชื่อแบรนด์ (wordmark) จนเหลือเพียงองค์ประกอบที่โดดเด่นที่สุด
มีสามจุดที่ทำให้ responsive logo ต่างจากโลโก้ที่ถูกย่อขนาดธรรมดา
- แต่ละเวอร์ชันวาดขึ้นใหม่ ไม่ใช่แค่ย่อ เวอร์ชัน Compact และ Icon ต้องวาดใหม่ให้เส้นหนาขึ้น ช่องไฟกว้างขึ้น และรายละเอียดน้อยลง เพราะเส้นบางที่ดูสวยที่ขนาด 300 พิกเซลจะกลืนกันจนพร่ามัวที่ 32 พิกเซล
- ทุกเวอร์ชันดูเป็นครอบครัวเดียวกันอย่างชัดเจน ใช้สีเดียวกัน สัญลักษณ์เดียวกัน และรูปตัวอักษรเดียวกันในส่วนที่ยังมีตัวอักษรอยู่ คนที่เห็น favicon แล้วไปเห็นโลโก้บนหัวเว็บไซต์ควรรู้ทันทีว่าเป็นแบรนด์เดียวกันโดยไม่ต้องคิด
- มีกฎการสลับเวอร์ชันที่เขียนไว้ชัดเจน ระบบระบุว่าเวอร์ชันไหนใช้ที่ขนาดเท่าไรและในบริบทใด นักพัฒนาเว็บ โรงพิมพ์ หรือผู้ดูแลโซเชียลมีเดียจะได้ไม่ต้องเดาเอง
ดังนั้น responsive logo จึงไม่ใช่งานออกแบบชิ้นเดียว แต่เป็นระบบเล็ก ๆ ที่มีเอกสารกำกับ นี่คือเหตุผลที่มันมักอยู่ในโปรเจกต์อัตลักษณ์แบรนด์ที่ใหญ่กว่า แทนที่จะถูกมองเป็นแค่ไฟล์อีกไฟล์ในโฟลเดอร์โลโก้
ทำไม responsive logo จึงจำเป็น: โลโก้เดียวต้องปรับขนาดได้บนทุกหน้าจอ
ตลอดช่วงศตวรรษที่ยี่สิบ โลโก้บริษัทมีที่อยู่ไม่กี่แห่ง ได้แก่ ป้าย หัวจดหมาย นามบัตร บรรจุภัณฑ์ และอาจรวมถึงรถของบริษัท พื้นผิวเหล่านั้นมีขนาดใหญ่และคาดเดาได้ โลโก้เวอร์ชันเดียวพร้อมแบบแนวนอนอีกหนึ่งแบบก็ครอบคลุมเกือบทุกอย่าง
ทุกวันนี้แบรนด์เดียวกันอาจไปปรากฏในทุกที่ต่อไปนี้ภายในสัปดาห์เดียว
- หัวเว็บไซต์บนเดสก์ท็อปที่กว้างประมาณ 200 ถึง 300 พิกเซล
- หัวเว็บไซต์บนมือถือ ซึ่งโลโก้ต้องแย่งพื้นที่ไม่กี่สิบพิกเซลกับไอคอนเมนูและไอคอนตะกร้าสินค้า
- favicon บนแท็บเบราว์เซอร์ ที่แสดงในขนาดเล็กมาก
- ไอคอนแอปบนหน้าจอหลัก ซึ่งระบบปฏิบัติการจะครอปให้เป็นรูปทรงของตัวเอง
- รูปโปรไฟล์ทรงกลมบนแพลตฟอร์มโซเชียลและแอปแชต
- การแจ้งเตือนบนสมาร์ทวอทช์หรือ badge ของ push notification
- ลายเซ็นอีเมล เทมเพลตสไลด์ และเฟรมปิดท้ายวิดีโอ
- ป้ายหน้าร้าน กล่องพัสดุ และเสื้อที่ปักโลโก้
ความต่างระหว่างพื้นที่ที่ใหญ่ที่สุดกับเล็กที่สุดในรายการนี้มหาศาล โลโก้ที่มีรายละเอียดและสโลแกน ซึ่งอ่านได้ชัดบนหน้าร้าน จะอ่านไม่ออกเลยบนแท็บเบราว์เซอร์ สโลแกนกลายเป็นรอยเปื้อนสีเทา เส้นบางหายไป และตัวอักษรสองตัวที่วางชิดกันจะหลอมรวมเป็นรูปทรงเดียว
เมื่อไม่มีระบบที่วางแผนไว้ คนก็จะแก้ปัญหากันเอง ผู้ดูแลโซเชียลมีเดียครอปโลโก้ให้เป็นวงกลมจนชื่อแบรนด์ขาดไปครึ่งหนึ่ง นักพัฒนาบีบโลโก้แนวนอนเต็มรูปแบบลงในหัวเว็บบนมือถือที่ความสูงซึ่งไม่มีใครอ่านออก โรงพิมพ์ขยายไฟล์ภาพขนาดเล็กจนภาพแตกเบลอ การแก้ปัญหาเฉพาะหน้าแต่ละครั้งดูเป็นเรื่องเล็ก แต่เมื่อรวมกันแล้วทำให้แบรนด์ดูไม่สม่ำเสมอ และความไม่สม่ำเสมอคือสิ่งที่โลโก้มีไว้เพื่อป้องกันโดยตรง
Responsive logo ย้ายการตัดสินใจเหล่านั้นจากช่วงเวลาที่ใช้งาน ไปไว้ที่ช่วงเวลาออกแบบ นักออกแบบตัดสินใจอย่างรอบคอบเพียงครั้งเดียวว่าแบรนด์ควรมีหน้าตาอย่างไรในแต่ละขนาด แล้วคนอื่นแค่เลือกไฟล์ให้ถูก
ระบบ responsive logo: Full, Primary, Compact และ Icon
แต่ละสตูดิโอใช้ชื่อเรียกต่างกัน บางระบบมีเพียงสามระดับ บางระบบมีถึงห้าระดับ โครงสร้างสี่ระดับด้านล่างเป็นวิธีจัดระบบที่พบบ่อยและใช้งานได้จริง สิ่งสำคัญคือแต่ละระดับต้องมีหน้าที่ชัดเจน
ระดับ 1: Full
เวอร์ชัน Full คือการแสดงแบรนด์ที่ครบถ้วนที่สุด ประกอบด้วยสัญลักษณ์ ชื่อแบรนด์ และสโลแกน คำอธิบาย หรือชื่อนิติบุคคล (เช่น "จำกัด" หรือบรรทัดที่บอกว่าบริษัททำอะไร) ใช้ในที่ที่มีพื้นที่มากและคนมีเวลาอ่าน เช่น ป้าย บูธนิทรรศการ ปกโปรไฟล์บริษัท ส่วนท้ายของเว็บไซต์ สไลด์แรกของงานนำเสนอ และเอกสารทางการ
เพราะเวอร์ชัน Full บรรจุข้อมูลมากที่สุด มันจึงเปราะบางที่สุดเมื่ออยู่ในขนาดเล็ก ควรกำหนดความกว้างขั้นต่ำไว้ และห้ามใช้เวอร์ชันนี้เมื่อพื้นที่แคบกว่านั้น
ระดับ 2: Primary
เวอร์ชัน Primary คือค่าเริ่มต้น มักเป็นสัญลักษณ์คู่กับชื่อแบรนด์ในแนวนอน โดยไม่มีสโลแกน เวอร์ชันนี้คือภาพที่คนส่วนใหญ่นึกถึงเมื่อพูดถึงแบรนด์ และเป็นเวอร์ชันที่ปรากฏบนหัวเว็บไซต์เดสก์ท็อป นามบัตร ลายเซ็นอีเมล และสื่อการตลาดส่วนใหญ่
ถ้าทีมไม่แน่ใจว่าจะใช้เวอร์ชันไหน คำตอบควรเป็น Primary ระดับอื่นทั้งหมดคือการขยับขึ้นหรือลงจากเวอร์ชันนี้อย่างตั้งใจ
ระดับ 3: Compact
เวอร์ชัน Compact แก้ปัญหาพื้นที่แคบหรือคับ รูปแบบขึ้นอยู่กับแบรนด์ เช่น
- การจัดวางแบบซ้อน โดยวางสัญลักษณ์ไว้เหนือชื่อแบรนด์ที่สั้นลง สำหรับพื้นที่ทรงสี่เหลี่ยมจัตุรัสหรือแนวตั้ง
- ชื่อแบรนด์แบบย่อหรือโมโนแกรม สำหรับแบรนด์ที่มีชื่อยาว
- สัญลักษณ์ที่ลดรายละเอียดลง วางคู่กับชื่อแบรนด์ โดยตัดรายละเอียดเล็ก ๆ ออก
การใช้งานทั่วไป ได้แก่ หัวเว็บไซต์บนมือถือ งานพิมพ์ขนาดเล็กอย่างใบเสร็จและฉลาก ของพรีเมียมอย่างปากกาหรือสายคล้องคอ และเลย์เอาต์ใดก็ตามที่ถ้าใช้เวอร์ชัน Primary แนวนอนจะต้องย่อจนอ่านตัวอักษรไม่ออก
ระดับ 4: Icon
Icon คือหน่วยที่เล็กที่สุดของแบรนด์ อาจเป็นสัญลักษณ์อย่างเดียว หรือตัวอักษรตัวเดียวถ้าแบรนด์ไม่มีสัญลักษณ์แยก ใช้เป็น favicon ไอคอนแอป รูปโปรไฟล์โซเชียลมีเดีย หน้าจอโหลด ลายน้ำ และช่องทรงสี่เหลี่ยมจัตุรัสหรือวงกลมทุกแบบ
Icon ต้องทำงานได้โดยไม่มีชื่อแบรนด์อยู่ข้าง ๆ ซึ่งจะเป็นไปได้ก็ต่อเมื่อสัญลักษณ์มีความโดดเด่นพอ และกลุ่มเป้าหมายเคยเห็นมันคู่กับชื่อแบรนด์มาหลายครั้งแล้ว สำหรับแบรนด์ใหม่ Icon มักต้องพึ่งเวอร์ชันที่ใหญ่กว่าเพื่อสอนให้คนรู้ว่ามันหมายถึงอะไร
การออกแบบ responsive logo: วิธีสร้างแต่ละระดับ
การออกแบบ responsive logo เริ่มจากเวอร์ชัน Primary แล้วขยายออกไปทั้งสองทาง การออกแบบ Icon ก่อนก็ใช้ได้กับแบรนด์ที่เน้นแอปเป็นหลัก แต่บริษัทส่วนใหญ่มีโลโก้หลักอยู่แล้วและต้องการต่อยอด ขั้นตอนด้านล่างตั้งต้นจากจุดนั้น
ขั้นที่ 1: สำรวจทุกที่ที่โลโก้ไปปรากฏ
ทำรายการพื้นผิวทุกแบบที่แบรนด์ใช้อยู่หรือวางแผนจะใช้ แล้วจดขนาดพื้นที่โดยประมาณของแต่ละแบบ เช่น ความกว้างของหัวเว็บไซต์บนเดสก์ท็อปและบนมือถือทั่วไป รูปทรงของรูปโปรไฟล์ในแต่ละแพลตฟอร์มโซเชียล ขนาดฉลากสินค้า ป้าย และเครื่องแบบพนักงาน รายการนี้คือบรีฟของระบบ แบรนด์ที่ไม่เคยพิมพ์อะไรเลยและอยู่ในแอปทั้งหมด ต้องการระบบที่ต่างจากผู้ผลิตที่มีรถขนส่งและบรรจุภัณฑ์
ขั้นที่ 2: ตัดสินใจว่าอะไรตัดออกได้ และตัดตามลำดับไหน
ดูโลโก้ Primary แล้วเรียงองค์ประกอบจากสำคัญที่สุดไปจนถึงสำคัญน้อยที่สุด โดยทั่วไปสโลแกนจะถูกตัดออกก่อน ตามด้วยการจัดวางแนวนอน แล้วจึงเป็นชื่อแบรนด์ เหลือไว้เพียงสัญลักษณ์ บางแบรนด์ไม่มีสัญลักษณ์และมีแค่ชื่อแบรนด์ ในกรณีนั้น Icon มักเป็นอักษรตัวแรกหรือโมโนแกรม ที่วาดขึ้นเป็นเครื่องหมายขนาดเล็กของมันเอง แทนที่จะครอปออกมาจากชื่อแบรนด์
ขั้นที่ 3: วาดใหม่สำหรับแต่ละขนาด อย่าแค่ย่อ
นี่คือจุดที่ "โลโก้ responsive" แบบทำเองมักล้มเหลว ที่ขนาดเล็ก เส้นต้องหนาขึ้นเมื่อเทียบกับรูปทรงโดยรวม ช่องว่างภายในตัวอักษร (เช่นช่องใน a, e และ o) ต้องเปิดกว้างขึ้น และระยะห่างระหว่างองค์ประกอบต้องมากขึ้น ควรตัดหรือลดทอนการไล่เฉดสี เส้นขอบบาง เงา และรายละเอียดตกแต่งเล็ก ๆ ส่วน Icon อาจต้องปรับแก้ทางสายตาของตัวเอง เพื่อให้ดูอยู่กึ่งกลางและสมดุลภายในสี่เหลี่ยมจัตุรัสหรือวงกลม
ขั้นที่ 4: กำหนดขนาดขั้นต่ำและพื้นที่ว่างรอบโลโก้
แต่ละระดับต้องมีขนาดขั้นต่ำที่ห้ามใช้เล็กกว่านั้น และกฎพื้นที่ว่าง (clear space) ที่ระบุว่าต้องมีพื้นที่ว่างรอบโลโก้มากแค่ไหน ตัวเลขเหล่านี้ไม่มีมาตรฐานสากล เพราะขึ้นอยู่กับงานออกแบบแต่ละชิ้น วิธีกำหนดที่ใช้ได้จริงคือการทดสอบ พิมพ์และแสดงผลแต่ละเวอร์ชันในขนาดที่เล็กลงเรื่อย ๆ แล้วจดจุดที่ชื่อแบรนด์เริ่มอ่านไม่ออกหรือสัญลักษณ์เริ่มจำไม่ได้ จากนั้นตั้งขนาดขั้นต่ำให้สูงกว่าจุดนั้นเล็กน้อย ตัวอย่าง (เพื่อประกอบคำอธิบายเท่านั้น) ทีมหนึ่งอาจพบว่าเวอร์ชัน Full เริ่มอ่านไม่ออกเมื่อกว้างต่ำกว่า 120 พิกเซลบนหน้าจอ จึงตั้งขั้นต่ำไว้ที่ 150 พิกเซล แล้วเปลี่ยนไปใช้ Primary เมื่อพื้นที่เล็กกว่านั้น
ขั้นที่ 5: สร้างเวอร์ชันสีและพื้นหลัง
ทุกระดับต้องมีอย่างน้อยเวอร์ชันสีเต็ม เวอร์ชันสีเดียว และเวอร์ชันกลับสีสำหรับพื้นหลังเข้ม โหมดมืด (dark mode) ในระบบปฏิบัติการและแอปต่าง ๆ ทำให้โลโก้ไปอยู่บนพื้นผิวสีเข้มบ่อยกว่าที่หลายแบรนด์วางแผนไว้ ตรวจสอบให้แน่ใจว่า Icon โดยเฉพาะยังมีคอนทราสต์เพียงพอทั้งบนพื้นหลังสว่างและพื้นหลังมืด
ขั้นที่ 6: ทดสอบในบริบทจริง
วางแต่ละเวอร์ชันลงในม็อกอัปของพื้นผิวจริงจากการสำรวจในขั้นที่ 1 เช่น แท็บเบราว์เซอร์จริง หน้าจอหลักของโทรศัพท์จริง และการครอปรูปโปรไฟล์ทรงกลมจริง ดูที่ขนาดจริงบนอุปกรณ์จริง ไม่ใช่ซูมดูบนจอใหญ่ ปัญหาที่มองไม่เห็นในไฟล์ออกแบบ มักเห็นได้ชัดเมื่อถือโทรศัพท์ห่างจากตัวในระยะแขน
ขั้นที่ 7: เขียนกฎการสลับเวอร์ชัน
บันทึกว่าเวอร์ชันไหนใช้ที่ไหน ขนาดขั้นต่ำ พื้นที่ว่างรอบโลโก้ และเวอร์ชันสีต่าง ๆ สำหรับเว็บไซต์ ให้ระบุ breakpoint ที่โลโก้บนหัวเว็บเปลี่ยนจาก Primary เป็น Compact หน้านี้ในคู่มือแบรนด์คือสิ่งที่เปลี่ยนไฟล์สี่ไฟล์ให้กลายเป็นระบบ
รูปแบบไฟล์และการส่งมอบ: ระบบ responsive logo ที่สมบูรณ์มีอะไรบ้าง
Responsive logo มีประโยชน์เท่ากับไฟล์ที่คนหาเจอและใช้ได้จริง เมื่อจบโปรเจกต์ ชุดไฟล์ส่งมอบควรครอบคลุมทุกระดับในทุกเวอร์ชันสี ในรูปแบบไฟล์ที่เหมาะกับสื่อแต่ละประเภท
- SVG สำหรับเว็บไซต์และแอป เป็นไฟล์เวกเตอร์ จึงคมชัดในทุกขนาดและไฟล์มักมีขนาดเล็ก นักพัฒนายังเปลี่ยนสีผ่านโค้ดได้ ซึ่งช่วยเรื่องโหมดมืด
- PNG พื้นหลังโปร่งใส สำหรับที่ที่ไม่รองรับ SVG เช่น บางแพลตฟอร์มโซเชียล โปรแกรมนำเสนอ และแอปแชต ควร export หลายขนาด รวมถึงขนาดใหญ่ด้วย
- PDF, EPS หรือไฟล์ AI ต้นฉบับ สำหรับงานพิมพ์ ป้าย และทุกอย่างที่โรงพิมพ์หรือร้านทำป้ายจะขยายขนาด ไฟล์เหล่านี้เก็บอาร์ตเวิร์กเป็นเวกเตอร์
- ค่าสี ในแต่ละระบบ ได้แก่ HEX และ RGB สำหรับหน้าจอ CMYK สำหรับงานพิมพ์ทั่วไป และรหัส Pantone ถ้าแบรนด์ใช้สีพิเศษ (spot color)
ระดับ Icon ต้องมีชุดไฟล์ export ของตัวเองสำหรับบริบทของแอปและเบราว์เซอร์
- Favicon: favicon แบบ SVG สำหรับเบราว์เซอร์รุ่นใหม่ พร้อมไฟล์ PNG หรือ ICO ขนาดเล็กเป็นตัวสำรอง favicon แบบ SVG สามารถมีกฎสีสำหรับโหมดสว่างและโหมดมืดในตัวได้
- Apple touch icon: ไฟล์ PNG ขนาด 180 x 180 พิกเซล ใช้เมื่อมีคนบันทึกเว็บไซต์ไว้บนหน้าจอหลักของ iPhone หรือ iPad
- ไอคอนใน web app manifest: ไฟล์ PNG ขนาด 192 x 192 และ 512 x 512 พิกเซล ใช้โดย Android และ progressive web app
- ไอคอนสำหรับ app store: ไฟล์ต้นแบบขนาด 1024 x 1024 พิกเซลสำหรับ iOS App Store โดยแพลตฟอร์มจะสร้างขนาดเล็กให้เอง ส่วน Android ใช้รูปแบบ adaptive icon ของตัวเองที่แยกเลเยอร์ด้านหน้าและพื้นหลัง สัญลักษณ์จึงต้องอยู่ภายในพื้นที่ตรงกลางที่ระบบจะไม่ครอปออก
- รูปโปรไฟล์โซเชียล: ไฟล์สี่เหลี่ยมจัตุรัสที่ Icon อยู่ภายในวงกลมได้อย่างพอดี เพราะแพลตฟอร์มส่วนใหญ่ครอปรูปโปรไฟล์เป็นวงกลม
ข้อกำหนดของแพลตฟอร์มเปลี่ยนไปตามเวลา ให้ถือว่าขนาดพิกเซลข้างต้นเป็นชุดที่ใช้กันทั่วไปในปัจจุบัน และตรวจสอบเอกสารของแต่ละแพลตฟอร์มเองทุกครั้งที่ export ตั้งชื่อไฟล์ให้สม่ำเสมอ (เช่น brand-primary-fullcolour.svg หรือ brand-icon-reversed-512.png) และเก็บไว้ในโฟลเดอร์กลางโฟลเดอร์เดียวพร้อมไฟล์ PDF คู่มือแบรนด์ คนถัดไปจะได้ไม่ต้องสร้างไฟล์ใหม่เอง
เลือกเวอร์ชันให้ถูก: ตารางอ้างอิงฉบับย่อ
ตารางด้านล่างสรุปทั้งสี่ระดับ ว่าแต่ละระดับมีองค์ประกอบอะไร และมักใช้ที่ไหน ปรับบริบทให้ตรงกับผลสำรวจของคุณเอง
| ระดับ | องค์ประกอบ | บริบทที่ใช้บ่อย |
|---|---|---|
| Full | สัญลักษณ์ ชื่อแบรนด์ และสโลแกนหรือชื่อนิติบุคคล | ป้าย ส่วนท้ายเว็บไซต์ ปกงานนำเสนอ เอกสารทางการ |
| Primary | สัญลักษณ์และชื่อแบรนด์ในแนวนอน | หัวเว็บไซต์เดสก์ท็อป นามบัตร ลายเซ็นอีเมล สื่อการตลาดส่วนใหญ่ |
| Compact | แบบซ้อนหรือแบบย่อ พร้อมรายละเอียดที่ลดลง | หัวเว็บไซต์บนมือถือ ฉลาก ใบเสร็จ ของพรีเมียมชิ้นเล็ก |
| Icon | สัญลักษณ์หรืออักษรตัวเดียว | Favicon ไอคอนแอป รูปโปรไฟล์โซเชียล ลายน้ำ |
ตัวอย่าง responsive logo จากแบรนด์ที่คนรู้จัก
แบรนด์ใหญ่หลายแบรนด์ทำงานแบบนี้อยู่แล้ว แม้จะไม่ได้เรียกโลโก้ของตัวเองด้วยชื่อสี่ระดับแบบเดียวกัน ตัวอย่างที่เห็นได้ชัดในที่สาธารณะ เช่น
- Nike ใช้ "Swoosh" เพียงอย่างเดียวบนสินค้าและช่องทางดิจิทัล และยังใช้คู่กับชื่อ Nike ด้วย สัญลักษณ์นี้ปรากฏคู่กับชื่อมานานจนใช้เดี่ยว ๆ ได้
- Starbucks ตัดคำว่า "Starbucks Coffee" ออกจากวงแหวนรอบรูปนางเงือก (siren) ในปี 2011 ทำให้สัญลักษณ์นางเงือกเพียงอย่างเดียวกลายเป็นเครื่องหมายหลักบนแก้วและในแอป
- Mastercard เปิดตัวโลโก้เวอร์ชันที่มีเพียงวงกลมสองวงซ้อนกันโดยไม่มีชื่อในปี 2019 ขณะที่เวอร์ชันที่มีชื่อแบรนด์ยังคงใช้งานอยู่
- Google รีแบรนด์ในปี 2015 โดยมีทั้งชื่อแบรนด์เต็ม และตัว "G" หลากสีแยกต่างหากสำหรับพื้นที่เล็กอย่างไอคอนแอปและ favicon
- YouTube ใช้โลโก้เต็มที่มีสัญลักษณ์ปุ่มเล่นคู่กับชื่อแบรนด์ และใช้ปุ่มเล่นเพียงอย่างเดียวเป็นไอคอนแอปและในพื้นที่แคบ
บทเรียนร่วมกันคือ สัญลักษณ์เหล่านี้ใช้เดี่ยว ๆ ได้หลังจากปรากฏคู่กับชื่อแบรนด์มาหลายปี แบรนด์ใหม่สามารถวางระบบแบบเดียวกันได้ แต่ควรให้ชื่อแบรนด์ยังมองเห็นได้ในเวอร์ชัน Full, Primary และ Compact จนกว่ากลุ่มเป้าหมายจะคุ้นเคยกับ Icon
ข้อผิดพลาดที่พบบ่อยกับ responsive logo
- ครอปแทนการออกแบบ การตัดสัญลักษณ์ออกมาจากไฟล์ Primary จะได้ Icon ที่เส้นบางเกินไป และมีระยะห่างที่ไม่ได้ออกแบบมาให้ใช้เดี่ยว ๆ
- มีเวอร์ชันมากเกินไป เจ็ดหรือแปดแบบทำให้คนที่ต้องเลือกสับสน สี่ระดับพร้อมเวอร์ชันสีที่ชัดเจนครอบคลุมแบรนด์ส่วนใหญ่ได้
- แต่ละเวอร์ชันค่อย ๆ ห่างกันออกไป ถ้าเวอร์ชัน Compact ใช้ฟอนต์ต่างกันหรือใช้เฉดสีแบรนด์ต่างกัน ระบบจะไม่รู้สึกว่าเป็นแบรนด์เดียวกันอีกต่อไป
- ไม่มีกฎที่เขียนไว้ หากไม่มีขนาดขั้นต่ำและกฎการสลับ คนจะใช้เวอร์ชันที่บังเอิญอยู่บนเดสก์ท็อปของตัวเอง
- ลืมเรื่องการครอปเป็นวงกลม Icon ทรงสี่เหลี่ยมที่ชิดขอบจะเสียมุมไปบนทุกแพลตฟอร์มที่แสดงรูปโปรไฟล์เป็นวงกลม
- ลืมโค้ดของเว็บไซต์ โลโก้บนหัวเว็บควรสลับเวอร์ชันที่ breakpoint ที่ถูกต้อง นี่เป็นหน้าที่ของคนที่สร้างเว็บไซต์ และควรอยู่ในบรีฟออกแบบเว็บไซต์ตั้งแต่แรก
Responsive logo ในตลาดไทย
แบรนด์ในประเทศไทยต้องรับมือกับความซับซ้อนเพิ่มอีกชั้นหนึ่ง คือหลายแบรนด์ต้องให้โลโก้ใช้งานได้ทั้งภาษาไทยและภาษาอังกฤษ อักษรไทยมีสระและวรรณยุกต์ที่อยู่เหนือและใต้บรรทัดหลัก ชื่อแบรนด์ภาษาไทยจึงมักต้องการพื้นที่แนวตั้งมากกว่าภาษาอังกฤษที่ขนาดเดียวกัน และเครื่องหมายเล็ก ๆ เหล่านี้คือรายละเอียดแรกที่หายไปเมื่อโลโก้ถูกย่อ
ทางเลือกหนึ่งที่ใช้ได้จริงคือให้ชื่อแบรนด์ภาษาไทยปรากฏเฉพาะในระดับ Full และ Primary ขณะที่ระดับ Compact ใช้ชื่อภาษาอังกฤษหรือชื่อย่อ และ Icon ใช้สัญลักษณ์ที่ไม่ขึ้นกับภาษาใด ไม่ว่าจะเลือกแบบไหน ควรเขียนไว้ในคู่มือแบรนด์ พร้อมระบุว่าภาษาใดเป็นภาษาหลักในบริบทใด
ช่องทรงสี่เหลี่ยมและทรงกลมขนาดเล็กก็มีความสำคัญมากในประเทศไทย เพราะการติดต่อกับลูกค้าจำนวนมากเกิดผ่าน LINE Official Account เพจ Facebook และร้านค้าบนมาร์เก็ตเพลส ซึ่งล้วนแสดงแบรนด์เป็นรูปโปรไฟล์เล็ก ๆ ข้างข้อความและรายการสินค้า Icon ที่อ่านได้ชัดในขนาดนั้นทำงานหนักในทุก ๆ วัน แบรนด์ที่ใช้เว็บไซต์ WordPress ควรตรวจด้วยว่าธีมให้ตั้งโลโก้หัวเว็บแยกกันสำหรับเดสก์ท็อปและมือถือ และตั้ง site icon ได้หรือไม่ ซึ่งเป็นข้อกำหนดที่พบบ่อยในโปรเจกต์การออกแบบเว็บไซต์ WordPress
คำถามที่พบบ่อยเกี่ยวกับ responsive logo
Responsive logo ต่างจากโลโก้หลายแบบ (logo variation) อย่างไร
Responsive logo คือชุดของโลโก้หลายแบบที่ออกแบบเป็นระบบเดียว พร้อมกฎว่าจะใช้แต่ละแบบเมื่อใด ส่วนโลโก้หลายแบบทั่วไปอาจเป็นแค่เวอร์ชันทางเลือกที่ทำขึ้นคนละช่วงเวลา ระบบจะกำหนดขนาดขั้นต่ำ ลำดับการตัดรายละเอียด และเวอร์ชันที่เหมาะกับแต่ละบริบท
ระบบ responsive logo ต้องมีกี่เวอร์ชัน
แบรนด์ส่วนใหญ่ใช้สี่ระดับได้ดี คือ Full, Primary, Compact และ Icon โดยแต่ละระดับมีเวอร์ชันสีเต็ม สีเดียว และกลับสี แบรนด์ที่มีจุดสัมผัสน้อยมากอาจต้องการเพียงสามระดับ และการเพิ่มเกินสี่ระดับมักสร้างความสับสนมากกว่าความยืดหยุ่น
เปลี่ยนโลโก้ที่มีอยู่ให้เป็น responsive logo ได้ไหม
ได้ ในกรณีส่วนใหญ่โลโก้เดิมสามารถต่อยอดเป็นระบบ responsive ได้โดยไม่ต้องเปลี่ยนเวอร์ชัน Primary นักออกแบบจะสำรวจว่าโลโก้ไปปรากฏที่ไหนบ้าง ตัดสินใจว่าอะไรตัดออกได้ แล้ววาดระดับ Compact และ Icon ใหม่ให้ยังชัดเจนในขนาดเล็ก
รูปแบบไฟล์ไหนดีที่สุดสำหรับ responsive logo บนเว็บไซต์
SVG มักเป็นรูปแบบที่ดีที่สุดสำหรับเว็บไซต์ เพราะคมชัดในทุกขนาด โหลดเร็ว และเปลี่ยนสีผ่านโค้ดสำหรับโหมดมืดได้ ควรเก็บเวอร์ชัน PNG พื้นหลังโปร่งใสไว้เป็นตัวสำรองสำหรับแพลตฟอร์มที่ไม่รองรับ SVG
มีขนาดขั้นต่ำมาตรฐานสำหรับโลโก้ไหม
ไม่มี ขนาดขั้นต่ำที่เป็นสากลไม่มีอยู่จริง เพราะขนาดที่เหมาะสมขึ้นอยู่กับรายละเอียดของงานออกแบบแต่ละชิ้น ให้กำหนดขั้นต่ำของแต่ละระดับด้วยการทดสอบโลโก้ในขนาดที่เล็กลงเรื่อย ๆ บนหน้าจอจริงและในงานพิมพ์ แล้วบันทึกผลไว้ในคู่มือแบรนด์
วางระบบครั้งเดียว ใช้ได้ทุกที่
Responsive logo เป็นการลงทุนที่ไม่มากเมื่อเทียบกับการรีแบรนด์ทั้งหมด และช่วยตัดการตัดสินใจเล็ก ๆ จำนวนมากที่มักถูกทำแบบลวก ๆ ภายใต้กำหนดส่งงาน ถ้าโลโก้ปัจจุบันของคุณออกแบบมาเพื่องานพิมพ์และมีปัญหาบนมือถือ ใน favicon หรือในรูปโปรไฟล์โซเชียล การทบทวนงานออกแบบโลโก้สามารถต่อยอดให้เป็นระบบ Full, Primary, Compact และ Icon พร้อมไฟล์และกฎที่ทีมและนักพัฒนาของคุณใช้งานได้ทันที
