หลายธุรกิจไม่มีแบรนด์ไกด์ไลน์สำหรับเว็บไซต์ สิ่งที่มีคือไฟล์ PDF ที่ทำไว้สำหรับนามบัตร ป้าย และพรีเซนเทชันขายงาน ซึ่งระบุสี Pantone โลโก้กว้าง 30 มม. และฟอนต์ที่ติดตั้งอยู่ในแล็ปท็อปของนักออกแบบ พอส่งให้ทีมทำเว็บ ช่องโหว่ก็โผล่ออกมาอย่างรวดเร็ว
นี่ไม่ใช่ความผิดของนักออกแบบแบรนด์ เว็บไซต์เรียกร้องหลายอย่างจากอัตลักษณ์แบรนด์ที่งานพิมพ์ไม่เคยต้องเจอ คือต้องใช้งานได้ในทุกความกว้างหน้าจอ ที่ขนาด 16 พิกเซลบนแท็บเบราว์เซอร์ บนพื้นหลังทั้งสว่างและมืด ในทุกภาษาที่ธุรกิจใช้ และในถ้อยคำบนปุ่ม รวมถึงข้อความแจ้งข้อผิดพลาด
บทความนี้จะชี้ให้เห็นว่าไกด์ไลน์ที่ทำมาเพื่องานพิมพ์เป็นหลักขาดตรงไหน แล้วไล่ดูทีละรายการว่าต้องส่งมอบอะไรบ้าง
คำตอบสั้น ๆ
แบรนด์ไกด์ไลน์สำหรับเว็บไซต์ เปลี่ยนอัตลักษณ์แบรนด์ให้เป็นไฟล์และกฎที่เบราว์เซอร์และทีมทำเว็บนำไปใช้ได้ อย่างน้อยที่สุด ควรส่งมอบ:
- โลโก้หลายเวอร์ชัน เป็นไฟล์ SVG ลงไปจนถึงขนาด favicon และไอคอนแอป
- ชุดสีสำหรับหน้าจอ เป็นค่า hex จัดกลุ่มตามหน้าที่
- ฟอนต์ที่มีสิทธิ์ใช้งานบนเว็บ รองรับทุกภาษาที่คุณเผยแพร่
- แนวทางสำหรับไอคอน ภาพ และการเคลื่อนไหว
- กฎเรื่องน้ำเสียงและไมโครคอปี้ สำหรับแต่ละภาษา
- เทมเพลตภาพสำหรับแชร์บนโซเชียล
ทำไมไกด์ไลน์สำหรับงานพิมพ์ ใช้บนจอไม่ได้
หน้าจอไม่มีขนาดตายตัว
หน้ากระดาษมีขนาดเดียว แต่เว็บไซต์ต้องแสดงผลตั้งแต่มือถือจอแคบ ไปจนถึงจอมอนิเตอร์กว้าง ๆ โลโก้ชุด (lock-up) ที่วางได้สบาย ๆ บนหัวจดหมายขนาด A4 อาจต้องบีบลงในส่วนหัวของหน้าเว็บบนมือถือที่มีพื้นที่จำกัด และกฎที่กำหนดเป็นมิลลิเมตรก็ช่วยอะไรไม่ได้
สีคือแสง ไม่ใช่หมึก
งานพิมพ์ใช้สีพิเศษของ Pantone หรือการผสมสีแบบ CMYK แต่หน้าจอเปล่งแสง และสีบนเว็บเป็นค่า RGB ซึ่งมักเขียนเป็นค่า hex สีที่แปลงค่ามาเป็นแค่จุดเริ่มต้น เพราะบนหน้าจอสีอาจดูหม่นลงหรือเพี้ยนไป ส่วนหมึกสีเมทัลลิกหรือสีสะท้อนแสง ทำได้แค่ใกล้เคียง
ฟอนต์ต้องมีสิทธิ์ใช้ และส่งถึงผู้ชม
ในงานพิมพ์ ฟอนต์แค่ต้องติดตั้งในคอมพิวเตอร์ของนักออกแบบ แต่บนเว็บไซต์ ไฟล์ฟอนต์ถูกส่งไปยังเบราว์เซอร์ของผู้เข้าชมทุกคน ซึ่งมักต้องซื้อสิทธิ์ใช้งานบนเว็บแยกต่างหาก และฟอนต์ที่มีแค่อักษรละติน จะใช้ไม่ได้ทันทีในวันที่คุณเพิ่มภาษาที่ใช้ตัวอักษรชุดอื่น
เว็บไซต์เคลื่อนไหว และโต้ตอบกลับ
โบรชัวร์ไม่เคยต้องบอกว่า “อีเมลนี้ดูไม่ถูกต้อง” หรือตอบสนองเมื่อมีคนเอาเมาส์ไปชี้ ถ้าไกด์ไลน์ไม่ครอบคลุมสถานะต่าง ๆ การเปลี่ยนผ่าน และข้อความในส่วนติดต่อผู้ใช้ คนที่สร้างเว็บไซต์ ก็จะเป็นคนตัดสินใจเรื่องเหล่านี้เอง
โลโก้ สี และฟอนต์: หัวใจของไกด์ไลน์เว็บ
โลโก้ชุด และเวอร์ชันขนาดเล็ก
ขอโลโก้ทุกรูปแบบการจัดวางเป็นไฟล์ SVG ซึ่งเป็นไฟล์เวกเตอร์ที่คมชัดในทุกขนาด พร้อมไฟล์ PNG สำหรับเครื่องมือที่ไม่รองรับ SVG
ทั้งหมดนี้รวมกันเป็น โลโก้แบบ responsive คือชุดโลโก้หลายเวอร์ชันที่เรียบง่ายขึ้นเมื่อพื้นที่เล็กลง ตัดแท็กไลน์ออกก่อน แล้วตัดตัวอักษรชื่อแบรนด์ จนเหลือแค่สัญลักษณ์ ถ้าอัตลักษณ์ของคุณยังไม่มี ให้นักออกแบบแบรนด์สร้างขึ้น แทนที่จะปล่อยให้นักพัฒนาด้นสดด้วยการครอปเอาเอง
Favicon และไอคอนแอป
Favicon ปรากฏบนแท็บเบราว์เซอร์ บุ๊กมาร์ก และข้างชื่อเว็บไซต์ของคุณในผลการค้นหาของ Google เมื่อย่อเหลือ 16 ถึง 32 พิกเซล โลโก้เต็มจะกลายเป็นจุดเลอะ ๆ จึงมักต้องวาดแยก เป็นสัญลักษณ์หรือโมโนแกรมที่ใช้เส้นหนาขึ้น ชุดไอคอนทั่วไปประกอบด้วย:
- Favicon แบบ SVG พร้อมเวอร์ชัน PNG หรือ ICO แบบสี่เหลี่ยมจัตุรัส: Google Search แนะนำให้ใช้ขนาดใหญ่กว่า 48 × 48 พิกเซล และไม่ได้ระบุ SVG ไว้ในรูปแบบไฟล์ที่รองรับ
- ไฟล์ PNG ขนาด 180 × 180 พิกเซล สำหรับหน้าจอโฮมของ iPhone และ iPad หรือที่เรียกว่า Apple touch icon
- ไอคอนขนาด 192 × 192 และ 512 × 512 พิกเซล ในไฟล์ web app manifest ซึ่ง Chrome และเบราว์เซอร์อื่นที่คล้ายกันใช้เมื่อมีคนติดตั้งเว็บไซต์ของคุณ หรือเพิ่มลงหน้าจอโฮม
- เวอร์ชัน maskable ที่วางสัญลักษณ์ไว้ในวงกลมตรงกลาง กว้าง 80% ของความกว้างไอคอน เพราะ Android ครอปไอคอนเป็นวงกลม สี่เหลี่ยมมุมมน และรูปทรงอื่น ๆ แตกต่างกันไปตามอุปกรณ์
ชุดสีที่พร้อมใช้บนจอ
ชุดสีสำหรับเว็บต้องมีสีมากพอที่จะสร้างส่วนติดต่อผู้ใช้ได้ทั้งหมด และแต่ละสีต้องมีหน้าที่ของตัวเอง
ตกลง 2 เรื่องให้ชัด ก่อนเริ่มสร้าง อย่างแรก ใครเป็นคนอนุมัติค่าสีบนหน้าจอ นักออกแบบแบรนด์ควรอนุมัติค่า hex โดยดูบนมือถือและแล็ปท็อป ไม่ใช่แค่แปลงค่าให้ อย่างที่สอง คู่สีไหนที่ใช้กับข้อความได้ สีแบรนด์หลายสีอ่อนเกินไปสำหรับข้อความตัวเล็กบนพื้นขาว โดย WCAG 2.2 ระดับ AA กำหนดอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความขนาดปกติ และ 3:1 สำหรับข้อความขนาดใหญ่ และส่วนของปุ่มหรือช่องควบคุมที่คนต้องมองเห็น เช่น เส้นขอบช่องกรอก และตัวบ่งชี้โฟกัส บทความ คอนทราสต์สีและตัวอักษรที่อ่านง่าย ของเรา แสดงวิธีปรับชุดสีที่ไม่ผ่านเกณฑ์ โดยไม่เสียเอกลักษณ์
ฟอนต์ที่ใช้บนเว็บได้ ครบทุกภาษา
การส่งมอบเรื่องฟอนต์มักสะดุดที่สิทธิ์การใช้งาน มากกว่าเรื่องรสนิยม
ตรวจสิทธิ์การใช้งาน สิทธิ์ใช้ฟอนต์บนเดสก์ท็อปส่วนใหญ่ ไม่ครอบคลุมการใช้บนเว็บไซต์ ผู้ผลิตฟอนต์ขายสิทธิ์ใช้งานบนเว็บด้วยเงื่อนไขต่างกัน เช่น คิดตามจำนวนการดูหน้าเว็บต่อเดือน คิดต่อโดเมน หรือจ่ายครั้งเดียว ส่วนฟอนต์โอเพนซอร์ส เช่น ฟอนต์บน Google Fonts ใช้บนเว็บได้ฟรี เก็บหลักฐานสิทธิ์การใช้งานไว้เป็นลายลักษณ์อักษร ในชื่อบริษัทของคุณ
ส่งไฟล์เว็บฟอนต์ WOFF2 คือรูปแบบเว็บฟอนต์แบบบีบอัด ที่เบราว์เซอร์สมัยใหม่ทุกตัวรองรับ ตกลงรายการน้ำหนักและสไตล์ตัวอักษรให้สั้น เพราะทุกแบบที่หน้าเว็บใช้ คือไฟล์ที่ต้องดาวน์โหลดเพิ่มอีกหนึ่งไฟล์ แม้ว่า variable font จะรวมหลายน้ำหนักไว้ในไฟล์เดียว ถ้าสิทธิ์ใช้งานเป็นแบบโฮสต์บนบริการเท่านั้น ให้สิทธิ์ทีมทำเว็บเข้าถึงบริการนั้นแทน
ครอบคลุมทุกภาษา ตรวจว่าฟอนต์รองรับทุกภาษาที่เว็บไซต์จะเผยแพร่ ทั้งตอนนี้และในอีกไม่กี่ปีข้างหน้า รวมถึงเครื่องหมายกำกับเสียงต่าง ๆ ถ้าไม่รองรับ ให้ระบุฟอนต์คู่ที่ให้อารมณ์เข้ากัน
ระบุฟอนต์สำรอง บอกว่าควรแสดงฟอนต์ระบบตัวไหนระหว่างที่เว็บฟอนต์กำลังโหลด หรือเมื่อโหลดไม่สำเร็จ
เรื่องขนาด ความยาวบรรทัด และการจับคู่ฟอนต์ ดูบทความ ตัวอักษรบนเว็บ สำหรับเว็บไซต์ธุรกิจ ของเรา
ไอคอน ภาพ การเคลื่อนไหว และภาพแชร์
ไอคอน
ไอคอนที่หยิบมาจากคลังฟรีหลายแหล่ง ทำให้เว็บไซต์ดูเหมือนเอาของหลายที่มาประกอบกัน มากกว่าผ่านการออกแบบ กำหนดสไตล์ (แบบเส้น หรือแบบทึบ ความหนาเส้น ความมนของมุม) กริดที่ใช้วาด (มักเป็นสี่เหลี่ยม 24 พิกเซล) และชุดไอคอนเริ่มต้นเป็นไฟล์ SVG แล้วเพิ่มกฎอีกข้อ: ไอคอนช่วยเสริมข้อความกำกับ ไม่ได้มาแทนที่
แนวทางภาพถ่ายและภาพประกอบ
ภาพสต็อกทั่วไป คือจุดที่หลายเว็บไซต์เริ่มดูไม่เหมือนแบรนด์ ระบุเนื้อหาของภาพ (คน สถานที่ และผลงานจริงของคุณ) แสง การปรับโทนสี และวิธีนำเสนอคนในภาพ แล้วเพิ่มหมายเหตุสำหรับเว็บ:
- ครอปสำหรับรูปทรงต่าง ๆ ภาพฮีโร่แบบกว้างบนแล็ปท็อป จะกลายเป็นแถบแคบ ๆ แนวตั้งบนมือถือ จึงควรให้ตัวแบบอยู่ห่างจากขอบ หรือเตรียมภาพครอปแบบอื่นไว้ให้
- ไฟล์ต้นฉบับ ไม่ใช่ภาพที่ดึงจาก PDF ส่งไฟล์ความละเอียดเต็ม แล้วทีมทำเว็บจะปรับขนาดและบีบอัดเอง ตามที่บทความ ปรับแต่งรูปภาพสำหรับเว็บไซต์ ของเรา อธิบายไว้
- สิทธิ์การใช้งาน ยืนยันว่าทุกภาพมีสิทธิ์ใช้งานออนไลน์ รวมถึงในโฆษณา
- ข้อความบนภาพ ระบุว่าวางหัวข้อทับบนภาพได้ไหม และต้องใช้เลเยอร์ทับแบบไหนเพื่อให้ยังอ่านง่าย
สำหรับภาพประกอบ ให้ระบุสไตล์ ความหนาเส้น และชุดสี พร้อมตัวอย่างงานที่เสร็จแล้ว และบอกว่าใครสร้างชิ้นงานใหม่ได้บ้าง
หลักการเคลื่อนไหว
การเคลื่อนไหวเป็นส่วนหนึ่งของอัตลักษณ์แบรนด์ดิจิทัล ถ้าไม่มีแนวทาง เว็บไซต์มักจบลงที่ดูนิ่งไร้ชีวิต หรือเคลื่อนไหวมากเกินไป หลักการไม่กี่ข้อก็เพียงพอ:
- บุคลิก: รวดเร็วและแม่นยำ หรือนุ่มนวลและสงบ?
- จังหวะเวลา: ระยะเวลาและ easing ที่ใช้เป็นประจำ เพื่อให้การเปลี่ยนผ่านต่าง ๆ รู้สึกไปในทางเดียวกัน
- ข้อจำกัด: เอฟเฟกต์ตอนชี้เมาส์ และการค่อย ๆ ปรากฏ ใช้ได้ ส่วนข้อความที่ขยับขณะคนกำลังอ่าน หรืออะไรก็ตามที่กะพริบ ไม่ควรใช้
- ลดการเคลื่อนไหว: ระบบปฏิบัติการส่วนใหญ่มีการตั้งค่าให้ลดการเคลื่อนไหว ซึ่งเว็บไซต์ตรวจจับได้ด้วย CSS media feature
prefers-reduced-motion ควรอธิบายว่าเวอร์ชันที่สงบกว่ามีหน้าตาอย่างไร
บทความ ไมโครอินเทอร์แอกชัน และการออกแบบการเคลื่อนไหว ของเรา อธิบายวิธีนำหลักการนี้ไปใช้ในส่วนติดต่อผู้ใช้
ภาพสำหรับแชร์บนโซเชียล
เมื่อมีคนแชร์หน้าเว็บบน LinkedIn หรือแอปแชต ภาพพรีวิวมักเป็นสิ่งแรกที่คนเห็นจากแบรนด์ของคุณ เตรียมเทมเพลตสำหรับภาพ Open Graph เหล่านี้ ซึ่งมักมีขนาด 1,200 × 630 พิกเซล โดยวางโลโก้และข้อความให้ห่างจากขอบ เพราะแต่ละแพลตฟอร์มครอปและปรับขนาดพรีวิวต่างกัน และเตรียมภาพเริ่มต้นไว้สำหรับหน้าที่ไม่มีภาพของตัวเอง
แนวทางน้ำเสียงและไมโครคอปี้
บนเว็บไซต์ ทุกหัวข้อ ปุ่ม ป้ายกำกับในฟอร์ม และข้อความแจ้งข้อผิดพลาด ถ้าไม่ฟังดูเป็นคุณ ก็ฟังดูเหมือนเทมเพลต
น้ำเสียงที่ใช้ได้บนหน้าเว็บ
แนวทางน้ำเสียงที่ดี อธิบายน้ำเสียงด้วยลักษณะ 3 หรือ 4 ข้อ และแสดงให้เห็นว่าใช้จริงอย่างไร คำว่า “เป็นกันเอง มืออาชีพ เชี่ยวชาญ” ใช้อธิบายได้แทบทุกธุรกิจ จึงควรจับคู่แต่ละลักษณะกับตัวอย่าง “เราพูดว่า / เราไม่พูดว่า” จากข้อความบนเว็บจริง เช่น ย่อหน้าเปิดของหน้าบริการ หรือหมายเหตุเรื่องราคา
กฎของไมโครคอปี้
ไมโครคอปี้คือข้อความเล็ก ๆ ที่ช่วยให้คนลงมือทำ กำหนดกฎสำหรับ:
- ปุ่มและลิงก์: ข้อความที่บอกว่าจะเกิดอะไรขึ้น (“ขอใบเสนอราคา”) ไม่ใช่ “ส่ง” หรือ “คลิกที่นี่”
- ฟอร์มและข้อผิดพลาด: ถ้อยคำของป้ายกำกับ วิธีระบุช่องที่ไม่บังคับ และข้อความแจ้งข้อผิดพลาดที่อธิบายวิธีแก้ โดยไม่โทษผู้เข้าชม
- ข้อความยืนยัน และสถานะว่าง: สิ่งที่คนเห็นหลังส่งการติดต่อสอบถาม หรือเมื่อค้นหาแล้วไม่พบอะไร
- รายละเอียดด้านสไตล์: การใช้ตัวพิมพ์ใหญ่ในข้อความภาษาอังกฤษ (sentence case หรือ title case) วิธีเขียนวันที่ ราคา และเบอร์โทร รวมถึงชื่อเรียกบริการของคุณที่ใช้เป็นหลัก
บทความ ออกแบบฟอร์มบนเว็บ ของเรา แสดงให้เห็นว่ากฎเหล่านี้ใช้จริงอย่างไรในฟอร์มที่นำการติดต่อสอบถามเข้ามา
น้ำเสียงในทุกภาษา
ความเป็นทางการ อารมณ์ขัน และข้อความสั้นที่ติดหู แปลแล้วไม่ได้ผลเหมือนเดิมเสมอไป ขอหมายเหตุสั้น ๆ สำหรับแต่ละภาษา ว่าควรเป็นทางการแค่ไหน และเรียกผู้อ่านอย่างไร พร้อมอภิธานศัพท์ของคำที่ต้องใช้ให้ตรงกันทุกที่ บทความ วางแผนเว็บไซต์หลายภาษา ของเรา อธิบายเรื่องที่ต้องตัดสินใจในภาพกว้าง
สิ่งที่ต้องส่งให้ทีมทำเว็บ
ไฟล์แบรนด์สำหรับเว็บไซต์จะมีประโยชน์ก็ต่อเมื่อคนหาเจอ รวมทุกอย่างไว้ในโฟลเดอร์กลางโฟลเดอร์เดียวที่มีการจัดเวอร์ชัน ระบุคนหนึ่งคนที่ตอบคำถามเรื่องแบรนด์ได้รวดเร็ว และอ้างถึงทั้งสองอย่างใน บรีฟเว็บไซต์ ของคุณ จากนั้นไล่ตรวจตามเช็กลิสต์แบรนด์ไกด์ไลน์สำหรับเว็บนี้:
อุดช่องว่างที่ยังขาด
มีไม่กี่ธุรกิจที่ติ๊กได้ครบทุกช่อง จึงควรตกลงกันก่อนเริ่มโปรเจกต์ว่าใครจะเติมช่องว่างแต่ละข้อ
สถานะของส่วนติดต่อผู้ใช้และคอมโพเนนต์ต่าง ๆ เป็นส่วนที่นักออกแบบเว็บเพิ่มเข้ามาเอง แต่ควรบันทึกไว้ในไกด์ไลน์ หรือในดีไซน์ซิสเต็ม เพื่อไม่ให้ค่อย ๆ เพี้ยนไป บทความ ดีไซน์ซิสเต็มสำหรับเว็บไซต์ ของเรา อธิบายวิธีทำ ถ้าคุณกำลังเปลี่ยนตัวอัตลักษณ์แบรนด์เอง ให้เริ่มจาก รีแบรนด์เว็บไซต์ของคุณ แทน
ขั้นตอนถัดไป
อ่านแบรนด์ไกด์ไลน์ของคุณแบบที่ทีมทำเว็บจะอ่าน คือมองเป็นพิกเซล ค่า hex รูปแบบไฟล์ และภาษา ทุกช่องว่างที่คุณปิดได้ตอนนี้ คือการตัดสินใจอีกเรื่องที่ไม่มีใครต้องมาเดาเอากลางโปรเจกต์
ถ้าอยากรู้ว่าอัตลักษณ์ น้ำเสียง และประสบการณ์ ประกอบกันอย่างไรบนเว็บไซต์จริง อ่าน คู่มือสร้างแบรนด์บนเว็บไซต์ ฉบับใช้งานจริง ของเรา เมื่อไฟล์ของคุณพร้อมแล้ว หรือถ้าอัตลักษณ์ที่ทำมาเพื่องานพิมพ์ ยังต้องปรับก่อนจะเหมาะกับหน้าจอ ดูว่าเราวางแผนและสร้างเว็บไซต์อย่างไรในบริการ ออกแบบและพัฒนาเว็บไซต์ หรือ บอกเราว่าเว็บไซต์ของคุณต้องการอะไร