ผังเว็บและ wireframe

ผังเว็บ

• index.html — หน้าแรก single page เลื่อนยาว
  • #top — hero
  • .facts — ไกลไหม แพงไหม งบเท่าไร
  • #plans — แพลนเที่ยว 3 แบบ
  • #places — เที่ยวไหนดี 4 จุด
  • #eat — กินอะไรดี 4 อย่าง
  • #ferry — เรือข้ามฟาก
  • #fac — สิ่งอำนวยความสะดวก 8 หัวข้อ
  • #posts — โพสต์ล่าสุด
• article-template.html — เทมเพลตหน้าบทความ ใช้ซ้ำทุกโพสต์
• places/ — เที่ยวไหนดี
  • wat-poramai.html — วัดปรมัยยิกาวาส
  • leaning-pagoda.html — เจดีย์เอียงมุเตา
  • kwan-aman.html — หมู่บ้านเครื่องปั้นดินเผาเกาะเกร็ด (กวานอาม่าน)
  • riverside-market.html — ตลาดริมน้ำ
• eat/ — กินอะไรดี
  • savoury.html — ทอดมันหน่อกะลา
  • khao-chae.html — ข้าวแช่มอญ
  • dessert.html — ขนมหวานมอญ
  • cafe.html — คาเฟ่ริมน้ำ
• plans/ — แพลนเที่ยว
  • half-day.html — ครึ่งวัน
  • budget-300.html — งบ 300
  • photo.html — สายถ่ายรูป
• 404.html — หน้าไม่เจอ
• docs/ — เอกสารประกอบงาน
  • sitemap.html — หน้านี้
  • brand.html — ชื่อ โลโก้ สี
• about.html — เกี่ยวกับเรา
• contact.html — ติดต่อ
• search.html — หน้าผลค้นหา
• tags/ — หน้าแท็ก

Wireframe 4 ขนาดจอ

เขียนแบบ mobile first ภาพซ้ายสุดคือฐาน แล้วขยายขึ้นไปทางขวาด้วย min-width ไม่ได้ย่อลงมาจากจอคอม

ตารางสี

คอนทราสต์ที่ต้องรักษา

ทุกคู่ตัวหนังสือ/พื้นหลังต้องได้อย่างน้อย 4.5:1 ตามเกณฑ์ WCAG AA