เบรโน

มือถือไม่ได้ย่อ Layout ของคอมพิวเตอร์ให้เล็กลง แต่เรียงเนื้อหาต่อกันลงมา จนต้องเลื่อนยาวเป็น 1.4 เท่า

  • คลินิก
ส่วนที่ 01 ของเว็บไซต์ เบรโน หน้าจอแรก

01หน้าจอแรก

วัดเมื่อ 1 กันยายน 2026

จำนวนหน้าจอบนคอมพิวเตอร์
14.4
สูง 12,939 px ที่ความกว้าง 1440 px
จำนวนหน้าจอบนแท็บเล็ต
13.3
สูง 14,845 px ที่ความกว้าง 834 px
จำนวนหน้าจอบนมือถือ
20.3
สูง 17,101 px ที่ความกว้าง 390 px

6 ส่วนของเว็บไซต์

อ่านเว็บไซต์ทีละส่วน ว่าแต่ละส่วนมีไว้ทำอะไร และงานออกแบบทำเรื่องไหนเป็นหลักในส่วนนั้น

01หน้าจอแรก

ส่วนที่ 01 ของเว็บไซต์ เบรโน หน้าจอแรก

ชื่อแพทย์ตัวใหญ่มาก ตัวอักษรไม่มีเชิง ข้างๆ เป็นการ์ดภาพแพทย์ และป้ายวุฒิสีเขียว 2 ป้าย

02ตัวเลขบนแถบสีเขียว

ส่วนที่ 02 ของเว็บไซต์ เบรโน ตัวเลขบนแถบสีเขียว

แถบสีเขียวมีข้อความสั้นๆ วิ่งผ่าน และตัวเลข 3 ตัว คือจำนวนคนไข้ที่ดูแล คะแนน และความพึงพอใจ

03ขั้นตอนนัดหมอ

ส่วนที่ 03 ของเว็บไซต์ เบรโน ขั้นตอนนัดหมอ

พื้นสีเขียวมิ้นต์ ไอคอน 3 ตัวในกรอบมุมมน ตัวละ 3 บรรทัด คือจอง เข้าตรวจ และติดตามผล

04ใช้ประกันหรือจ่ายเอง

ส่วนที่ 04 ของเว็บไซต์ เบรโน ใช้ประกันหรือจ่ายเอง

ตาราง 5 แถว ประกันอยู่ตรงกลาง แบบจ่ายเองแรเงาไว้และกว้างกว่านิดหน่อย ดูตารางก็เลือกได้เลย

05คนไข้คนหนึ่ง

ส่วนที่ 05 ของเว็บไซต์ เบรโน คนไข้คนหนึ่ง

พื้นสีเขียวมิ้นต์ ดาว 5 ดวง และรีวิวยาว 7 บรรทัด ได้ความกว้างทั้งหน้าไปคนเดียว

06ห้องตรวจ

ส่วนที่ 06 ของเว็บไซต์ เบรโน ห้องตรวจ

ภาพห้องตรวจมุมกว้างภาพเดียว โทนอุ่น แสงสลัว หัวข้ออยู่มุมล่างซ้ายของภาพ

จุดเด่นของงานออกแบบ

ทุกสีอ่านจากหน้าเว็บที่แสดงผลจริง ถ่วงน้ำหนักตามพื้นที่ที่สีนั้นกินอยู่ ไม่นับภาพถ่าย

  • #ffffff54%
  • #0c0d1438%
  • #0d94884%
  • #134e4a1%
  • #1018281%
  • #99a1af1%
  • #6a72821%
  • #1e29391%
ฟอนต์ที่โหลด
satoshi, Source Serif 4, Archivo, Playfair Display, DM Sans, Inter
Inter ใช้กับหัวข้อ
สร้างบน
Next.js
วัดเมื่อ
1 กันยายน 2026

บนทุกหน้าจอ

หน้าเดียวกันที่ความกว้าง 1440, 834 และ 390 พิกเซล วาดด้วยสเกลเดียวกัน มือถือที่เห็นแคบกว่าเท่าไร ของจริงก็แคบกว่าเท่านั้น

เบรโน ทั้งหน้าตามที่แสดงผลที่ความกว้าง 1440px
คอมพิวเตอร์ 1440px
เบรโน หน้าเดียวกันที่ความกว้าง 834px
แท็บเล็ต 834px
เบรโน หน้าเดียวกันที่ความกว้าง 390px
มือถือ 390px