การสร้างแบรนด์บนเว็บไซต์: คู่มือทำเว็บไซต์ให้ดู ฟัง และให้ความรู้สึกเป็นคุณ

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

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

คำตอบสั้น ๆ

การสร้างแบรนด์บนเว็บไซต์ คือวิธีที่เว็บไซต์แสดงแบรนด์ ผ่านสามชั้นที่ทำงานร่วมกัน:

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

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

3 ชั้นของการสร้างแบรนด์บนเว็บไซต์

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

อัตลักษณ์ด้านภาพ: หน้าตาเป็นอย่างไร

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

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

สีต้องผ่านเกณฑ์การเข้าถึงสำหรับทุกคนด้วย ที่ระดับ AA WCAG 2.2 กำหนดอัตราส่วนคอนทราสต์อย่างน้อย 4.5:1 สำหรับตัวอักษรขนาดปกติ และ 3:1 สำหรับตัวอักษรขนาดใหญ่ สัญญาณภาพที่ใช้ระบุปุ่มควบคุม เช่น เส้นขอบช่องกรอกข้อมูล และตัวบอกโฟกัส ต้องมีอย่างน้อย 3:1 เทียบกับสีที่อยู่ติดกัน สีเหลืองอ่อน เทากลาง และฟ้าอ่อน มักไม่ผ่าน เมื่อเป็นตัวอักษรบนพื้นขาว ทางแก้มักเป็นโทนที่เข้มขึ้นสำหรับตัวอักษร ไม่ใช่แบรนด์ใหม่ บทความ คอนทราสต์สีและตัวอักษรที่อ่านง่าย แสดงวิธีทำไว้

อัตลักษณ์ด้านถ้อยคำ: ฟังดูเป็นอย่างไร

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

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

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

ประสบการณ์: ทำงานอย่างไร

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

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

วิธีสร้างแบรนด์ให้เว็บไซต์ ทีละขั้น

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

1. เริ่มจากการวางตำแหน่ง ไม่ใช่สี

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

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

2. เปลี่ยนอัตลักษณ์ให้เป็นระบบที่พร้อมใช้บนจอ

แปลงแบรนด์ไกด์ไลน์ของคุณ ให้เป็นสิ่งที่เว็บไซต์ใช้:

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

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

3. เขียนน้ำเสียงไว้ พร้อมตัวอย่าง

คำคุณศัพท์อย่างเดียว ไม่ช่วยคนเขียน คู่มือน้ำเสียงที่ได้ผล มีสี่ส่วน:

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

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

4. เลือกภาพที่มีมุมมองชัดเจน

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

5. ให้โครงสร้างและการโต้ตอบแสดงแบรนด์

บุคลิกอยู่ในวิธีที่เว็บไซต์ทำงาน ได้แก่ ลำดับของเมนู หลักฐานไหนอยู่ข้าง CTA แต่ละจุด แบบฟอร์มยืนยันว่าส่งแล้วอย่างไร และหน้า 404 พูดว่าอะไร การเคลื่อนไหวควรเข้ากับอุปนิสัยของแบรนด์ แบรนด์ที่สงบ เหมาะกับการเปลี่ยนภาพที่สั้นและนุ่มนวล บทความ Micro-interaction และ motion design อธิบายการเคลื่อนไหวที่ช่วย ไม่ใช่รบกวน

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

6. ตรวจก่อนเปิดตัว แล้วปกป้องมันไว้

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

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

การสร้างแบรนด์บนเว็บไซต์มักพลาดตรงไหน

โลโก้ที่แปะลงบนเทมเพลต

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

ไกด์ไลน์ที่เขียนไว้สำหรับสิ่งพิมพ์อย่างเดียว

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

น้ำเสียงที่เปลี่ยนไปในแต่ละหน้าหรือแต่ละภาษา

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

แบรนด์อยู่แค่ใน hero ที่เหลือใช้ค่าเริ่มต้น

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

เว็บไซต์ของคุณตรงแบรนด์ไหม? เช็กลิสต์

• เมื่อปิดโลโก้ไว้ สามหน้าที่สุ่มมา ยังจำได้ว่าเป็นของคุณ
• ถ้าใส่ชื่อคู่แข่งลงบนหน้าแรกของคุณ ข้อความจะไม่เป็นความจริงอีกต่อไป
• ใช้สีตามบทบาท และตัวอักษรผ่านเกณฑ์คอนทราสต์ของ WCAG (4.5:1 สำหรับตัวอักษรขนาดปกติ)
• ฟอนต์ของแบรนด์โหลดได้ในทุกภาษา หรือมีฟอนต์สำรองที่ตั้งใจเลือกไว้
• ภาพแสดงคน ผลงาน หรือสินค้าจริงของคุณ และภาพสต็อกที่ใช้ ทำตามแนวทางเดียวกัน
• ปุ่ม ข้อความแจ้งข้อผิดพลาด และอีเมลยืนยัน ฟังดูเหมือนส่วนอื่นของเว็บไซต์
• ทุกเวอร์ชันภาษา ฟังดูเหมือนบริษัทเดียวกัน
• favicon ภาพสำหรับแชร์บนโซเชียล และอีเมลแจ้งเตือน เข้ากับเว็บไซต์
• หน้าสำคัญโหลดเร็วบนมือถือ และการติดต่อใช้แค่ไม่กี่แตะ
• คนแก้ไขคอนเทนต์ เพิ่มหน้าหรือแคมเปญได้ โดยไม่ทำให้หน้าตาเสีย

ทุกบทความในซีรีส์แบรนด์และประสบการณ์

คำถามที่พบบ่อย

แบรนด์ดิ้งกับการออกแบบเว็บไซต์ต่างกันอย่างไร?

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

ต้องมีแบรนด์ไกด์ไลน์ก่อนสร้างเว็บไซต์ไหม?

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

จะรักษาเว็บไซต์หลายภาษาให้ตรงแบรนด์ได้อย่างไร?

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

เริ่มจากตรงไหน

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

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