หน้านี้เป็นเอกสารนำเสนอ CI สำหรับลูกค้าและทีมงาน — ไม่ใช่หน้าสำหรับนักท่องเที่ยว

Nessy Explores Beyond the Shore
สอบถามทาง LINE
  1. หน้าแรก
  3. แบรนด์ & CI

Explore Phuket,
Beyond the Shore

01 · คอนเซปต์

เที่ยวภูเก็ตมากกว่าที่คุณเคยเห็น

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

Local

พูดแบบคนในพื้นที่ ใช้ชื่อย่านและชื่อร้านจริง ไม่ใช้ภาษาโบรชัวร์กลางๆ

Friendly

มุมการ์ดโค้ง ประโยคสั้นอ่านง่าย โทนน้ำเงินสว่าง ไม่ใช้น้ำเสียงขายตรง

Reliable

แถบสีเข้ม Secondary กับใบอนุญาตและเลขบัญชีบริษัทต้องเห็นชัดทุกหน้า ความน่าเชื่อถือคือฟีเจอร์

Adventurous

ภาพถ่ายทะเลจริงเต็มความกว้าง ใช้ Sunset เป็นจุดกระตุ้น แต่ไม่เยอะจนดูเป็นเว็บลดราคา

02 · ชุดสี

Nessy Explores — ชุดสี CI 7 สี

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

Brand Teal · น้ำทะเลอันดามัน

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

Deep Ocean · ทะเลลึกยามเย็น

โทนเข้มลึกที่ให้ความมั่นคงและน่าเชื่อถือ สื่อภาพผู้เชี่ยวชาญท้องถิ่นตัวจริง เป็นพื้นหลังของช่วงที่ต้องการความจริงจังอย่าง hero และ footer

Coral · ปะการังและพระอาทิตย์ตก

สีแห่งพลังงานและความกล้าออกไปผจญภัย ใช้เป็นสีเรียกให้ลงมือ (CTA) จุดเดียวที่เด่นสุดในหน้า สื่อความสดใสแบบทะเลใต้

Orange · แสงแดดยามเย็น

โทนอุ่นของแสงภูเก็ตช่วงเย็น เติมความอบอุ่นและเป็นกันเอง ใช้เน้นรายละเอียดและไล่เฉดให้บรรยากาศดูมีชีวิตชีวา

Mango Yellow · มะม่วงสุกและแสงทราย

สีที่สว่างและเป็นมิตรที่สุดในชุด สื่อถึงความสดใสและมิตรภาพแบบคนท้องถิ่น ใช้กับดาวรีวิว ป้าย และไฮไลต์เล็กๆ

Charcoal Navy · หินภูเขาและเงายามค่ำ

โทนเข้มหนักแน่นที่ใช้เป็นสีตัวอักษรหลัก ให้ความชัดเจนและอ่านง่าย เป็นรากฐานที่ทำให้สีสดใสอื่นๆ โดดเด่นขึ้น

Primary
Primary #182429

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

Secondary
Secondary #0F4149

พื้นเข้มของ hero, แถบ CTA และ footer — เป็นตัวคุมคอนทราสต์คู่กับ Primary รวมสองสีนี้ราว 25% ของหน้า

Brand Teal
Brand Teal #017E87

สีนำของแบรนด์ (~10%) — ปุ่มหลัก ลิงก์ สถานะ active และไอคอนหลัก ใช้ตัวอักษรสีขาวได้ (4.84:1)

CTA Coral
CTA Coral #FF6155

สีเน้นหลักสำหรับ CTA และ badge — ใช้แบบมีจุดโฟกัส ไม่หว่าน ตัวอักษรบนพื้น Coral ใช้สี Primary เสมอ (5.36:1)

Accent Orange
Accent Orange #FF7D49

สีเน้นเสริมโทนอุ่น — highlight, ไล่เฉด eyebrow และรายละเอียดตกแต่ง คู่กับ Coral/Yellow ใช้ตัวอักษรสี Primary (6.26:1)

Accent Yellow
Accent Yellow #FED17E

สีเน้นเสริมที่สว่างที่สุด — ดาวรีวิว, ป้าย และไฮไลต์อุ่นๆ เพื่อบุคลิกท้องถิ่นที่สดใส ใช้ตัวอักษรสี Primary (11.1:1)

Background
Background #FFFFFF

พื้นหลังหลักของหน้า (~60% คู่กับพื้นอ่อน) — สะอาด โปร่ง ให้สีแบรนด์และรูปภาพเป็นพระเอก

เฉดที่คำนวณต่อจากสี CI

Brand Teal ได้คอนทราสต์บนพื้นขาว 4.84:1 ซึ่งพอดีเกณฑ์ AA แต่เหลือระยะน้อยเกินไปสำหรับลิงก์ตัวเล็กในเนื้อหา จึงมีเฉดเข้มกว่าไว้ใช้กับตัวอักษร มีเฉด Turquoise ที่สว่างขึ้นสำหรับใช้บนพื้นเข้ม และต้องเพิ่มสีเตือนเพราะ CI ไม่มีสีสำหรับแจ้งเตือน

Derived
Teal Deep #015F67

ลิงก์ในเนื้อหาและตัวอักษร teal บนพื้นสว่าง — 7.4:1 บนพื้นขาว / 6.9:1 บนพื้นอ่อน มีระยะพอสำหรับข้อความเล็ก

Derived
Sea Turquoise #3BBCC6

เฉดสว่างของ Brand Teal สำหรับคำเน้นและไอคอนบนพื้นเข้ม — 4.9:1 บน Secondary สว่างเกินกว่าจะเป็นตัวอักษรบนพื้นขาว

Derived
Muted #5A6B72

ข้อความรองและคำอธิบายการ์ด — เป็น Primary ที่ลดความอิ่มสี ได้ 5.6:1 บนพื้นขาว

Warning
Warn #A63D1E

โซนเตือนภัยมิจฉาชีพเท่านั้น — 6.35:1 บนพื้นขาว ถ้าใช้สี teal ตรงนี้คำเตือนจะหมดความหมาย

สัดส่วนการใช้สี

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

03 · ตัวอักษร

สองฟอนต์ทำงานร่วมกัน — Bricolage Grotesque + Noto Sans Thai

แบรนด์ใช้สองฟอนต์ที่แบ่งหน้าที่ชัดเจน — ข้อความภาษาอังกฤษและหัวเรื่องเด่นๆ อย่าง “Phuket, Beyond the Shore” ในหน้า Hero ใช้ Bricolage Grotesque ส่วนภาษาไทยและเนื้อหาทั้งหมดใช้ Noto Sans Thai ทั้งคู่โหลดจาก Google Fonts

Display · Bricolage Grotesque · ภาษาอังกฤษ / หัวเรื่อง
Phuket, Beyond the Shore Hero H1 · 700
Explore · Local Experiences Bricolage Grotesque · น้ำหนัก 400–800
Text · Noto Sans Thai · น้ำหนัก 700 · หัวเรื่อง
เที่ยวภูเก็ต H1 · 52/1.28 · 700
ภูเก็ตมีมากกว่าทะเล H2 · 30/1.28 · 700
4 เกาะ เจมส์บอนด์ H3 · 20/1.28 · 700
สอบถามทาง LINE Button · 17 · 500
Text · Noto Sans Thai · น้ำหนัก 400 · เนื้อหา

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

Body · 16/28 · 400 Small · 15/24 · 400 Caption · 13/20 · 400 ความยาวบรรทัดสูงสุด 68ch

04 · ไอคอน

ไอคอนเส้น สร้างเองทั้งชุด

ทุกไอคอนเป็น inline SVG ในไฟล์ sprite เดียว ความหนาเส้น 1.75 ปลายเส้นมน ตารางฐาน 24 พิกเซล ห้ามใช้อิโมจิแทนไอคอนในทุกกรณี เพราะรูปร่างต่างกันในแต่ละอุปกรณ์และสกรีนรีดเดอร์อ่านออกมาแปลก

i-ship
i-fish
i-mountain
i-sparkles
i-compass
i-car
i-shield
i-award
i-bank
i-alert
i-chat
i-phone
i-pin
i-clock
i-calendar
i-users
i-star
i-food
i-leaf
i-briefcase
i-percent
i-camera
i-heart
i-ban

ภาพถ่ายจาก brand book คู่กับภาพประกอบ

ภาพถ่าย 7 รูปจาก brand book ใช้ในตำแหน่งที่ภาพต้องขายของ — hero ทุกหน้า และช่วง section ใหญ่ของ Local Phuket กับโซนเอเจนซี่ ส่วนการ์ดแพ็กเกจ 20 ใบ และไทล์หมวด 6 ใบยังใช้ภาพประกอบ SVG เพราะภาพถ่ายชุดนี้ยังไม่ครอบคลุมหมวดผจญภัย โชว์ และรถรับส่ง การผสมในตารางเดียวกันจะทำให้ดูไม่เป็นชุด

อ่าวทะเลภูเก็ตมองจากจุดชมวิวบนเขา
hero-bay — hero หน้าแรกและหน้าแบรนด์
ตึกชิโน-โปรตุกีสในย่านเมืองเก่าภูเก็ต
old-town — โซน Local Phuket
เรือหางยาวจอดริมชายหาดภูเก็ต
longtail — hero หน้าแพ็กเกจ

05 · คอมโพเนนต์

ปุ่ม ป้าย และการ์ด

ทุกปุ่มสูงอย่างน้อย 48 พิกเซล เพื่อให้แตะได้แม่นบนมือถือตามเกณฑ์ 44 พิกเซลของ Apple และ 48 ของ Material

ปุ่ม
Primary · ปุ่มหลัก Outline · ปุ่มรอง

ปุ่มหลักของทั้งเว็บใช้สีเดียวคือ Brand Teal — Coral สงวนไว้สำหรับ badge และปุ่มติดต่อหลัก (LINE) จุดเดียวเท่านั้น ไม่ใช้เป็นสีปุ่มทั่วไป ถ้ามีปุ่มสองสีแข่งกันในหน้าเดียว ผู้ใช้จะไม่รู้ว่าต้องกดอันไหน

Light · บนพื้นเข้ม On dark · ปุ่มรองบนพื้นเข้ม
ป้ายและเรตติ้ง
ขายดีที่สุด ใหม่ ยืนยันแล้ว ตามฤดูกาล 4.8
ตัวอย่าง

การ์ดแพ็กเกจ

ภาพ 4:3 ป้ายมุมซ้ายบน ชื่อ คำอธิบายสองบรรทัด ข้อมูลย่อ และแถบราคาพร้อมปุ่ม

1 วัน 4.8
เริ่มต้น฿1,400 / ท่าน สอบถาม

การ์ดจุดแข็ง

ไอคอนในกรอบสี่เหลี่ยมมุมโค้ง หัวข้อสั้น และคำอธิบายไม่เกินสามบรรทัด ใช้ในกริด 3 หรือ 4 คอลัมน์

“การ์ดรีวิว ใช้เครื่องหมายคำพูดแบบไทย พร้อมอักษรย่อในวงกลมสี Sea Mist แทนรูปคนเมื่อยังไม่มีภาพจริง”
ตัวอย่างชื่อตัวอย่างที่มา

06 · ค่ามาตรฐาน

ระยะ มุมโค้ง เงา และการเคลื่อนไหว

ค่าเหล่านี้เป็นตัวแปร CSS ในไฟล์เดียว แก้ที่ต้นทางแล้วเปลี่ยนทั้งเว็บพร้อมกัน

ระยะและมุมโค้ง

จังหวะระยะ4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64 · 80 px
ระยะระหว่าง section80px desktop · 64px tablet · 56px mobile
ความกว้างเนื้อหาmax-width 1180px
มุมโค้ง6 · 10 · 16 · 24 · 999 px
จุดตัดหน้าจอ560 · 860 · 1024 px

เงาและการเคลื่อนไหว

ระดับเงาe-1 การ์ดนิ่ง · e-2 ปุ่ม · e-3 การ์ดตอน hover · e-4 เมนูลอย
ระยะเวลา140ms เร็ว · 220ms ปกติ · 380ms เข้าจอ
เส้นความเร็วcubic-bezier(.22, .68, .26, 1)
การกดปุ่มscale(.975) ทันทีเมื่อกด
ลดการเคลื่อนไหวprefers-reduced-motion ปิดทุกทรานซิชัน

เกณฑ์การเข้าถึงที่ระบบบังคับไว้

  • เป้าแตะทุกจุดไม่เล็กกว่า 44×44 พิกเซล และปุ่มจริงสูง 48 พิกเซล
  • วงโฟกัสหนา 3 พิกเซลสี Brand Teal บนพื้นสว่าง และสี Sea Turquoise บนพื้นเข้ม
  • ลิงก์ข้ามไปเนื้อหาหลักสำหรับผู้ใช้คีย์บอร์ด
  • ลำดับหัวเรื่อง h1 ถึง h3 ไม่ข้ามระดับ
  • ไม่สื่อความหมายด้วยสีเพียงอย่างเดียว มีไอคอนหรือข้อความกำกับเสมอ
  • ไอคอนตกแต่งใส่ aria-hidden ปุ่มที่มีแต่ไอคอนมี aria-label
  • ผลการกรองแพ็กเกจประกาศผ่านบริเวณ aria-live
  • ไม่ปิดการซูมหน้าจอ และไม่มีการเลื่อนแนวนอนบนมือถือ