ชุดคำสั่งแบบมีโครงสร้างสำหรับสร้างบอร์ดจำลองอัตลักษณ์แบรนด์ SaaS และหน้า Landing Page แบบ 2×2 พร้อมตัวเลือกสีเน้น 4 รูปแบบ
เป้าหมาย: สร้างบอร์ดสำรวจแบรนด์ที่สะอาดตาสำหรับเครื่องมือสร้างหน้า Landing Page ของ SaaS สมมติที่ชื่อ Neito โดยแสดงเว็บไซต์และระบบอัตลักษณ์แบรนด์เดียวกันซ้ำในทิศทางสีที่แตกต่างกัน 4 รูปแบบ
ผืนผ้าใบ: ผืนผ้าใบสีขาวขนาด 16:9 จัดวางเป็นตาราง 2×2 ของแผงจำลองแบรนด์/เว็บไซต์ที่สมบูรณ์ 4 แผง โดยมีพื้นที่ว่างอย่างเพียงพอ แต่ละแผงจะเกือบเหมือนกันทุกประการ ยกเว้นสีเน้นและของตกแต่งแบบไล่ระดับสีเบลอๆ
เลย์เอาต์: แต่ละแผงจาก 4 แผงประกอบด้วยพื้นที่หลัก 2 ส่วน: หน้า Landing Page จำลองขนาดใหญ่ทางด้านซ้าย และคอลัมน์คู่มือแบรนด์แคบๆ ทางด้านขวา ธีมสีเน้นทั้ง 4 ได้แก่: 1 สีฟ้า, 2 สีเขียว, 3 สีส้ม, 4 สีม่วง
รายละเอียดหน้า Landing Page จำลอง: ที่ด้านซ้ายบนให้วางโลโก้เป็นเครื่องหมายทับสองอันตามด้วย “Neito” พร้อมสัญลักษณ์ดาว/ประกายไฟเล็กๆ ที่แถบนำทางด้านบนให้วางรายการ 5 รายการ: Product, Templates, Pricing, About และปุ่ม “Get started” ทรงมนสีดำ วางพาดหัวข่าวแบบ Serif สไตล์บรรณาธิการขนาดใหญ่ไว้ตรงกลางว่า: “Words become landing pages.” ด้านล่างเพิ่มข้อความสนับสนุนสีเทาขนาดเล็กเกี่ยวกับการเปลี่ยนไอเดียและเนื้อหาให้เป็นหน้า Landing Page ที่สวยงามและพร้อมแชร์ จากนั้นวางปุ่มแคปซูลสีดำที่เขียนว่า “Start for free” ใต้ปุ่มให้วางชิปฟีเจอร์ขนาดเล็ก 3 อันพร้อมไอคอน: “No code”, “Quick setup” และ “Always in sync” ด้านหลังพาดหัวข่าวหลักให้ใช้แหวนไล่ระดับสีเบลอขนาดใหญ่ที่โปร่งสบายในสีเน้นของแผงนั้นๆ
การ์ดเว็บไซต์ด้านล่าง: ใต้ส่วน Hero แต่ละส่วน ให้วางการ์ดเนื้อหารูปสี่เหลี่ยมผืนผ้า 3 ใบที่มีขอบบางและมุมมน การ์ดใบที่ 1 เขียนว่า “Build pages from your ideas.” พร้อมปุ่มแคปซูลสีดำเล็กๆ “Try Neito” การ์ดใบที่ 2 เขียนว่า “Launching soon.” และรวมช่องกรอกอีเมลทรงมนเล็กๆ พร้อมปุ่ม “Notify me” สีดำและกราฟิกเส้นวงกลมแบบนามธรรมบางๆ การ์ดใบที่ 3 ระบุหมายเลข “01” และเขียนว่า “Type your thoughts.” พร้อมข้อความบรรยายสั้นๆ และแหวนสีเน้นแบบเบลอที่ถูกตัดขอบขนาดใหญ่ที่มุมขวาล่าง
คอลัมน์คู่มือแบรนด์: เพิ่มหัวข้อเล็กๆ “BRAND IDEA” และบล็อกย่อหน้าสไตล์ญี่ปุ่นสั้นๆ ด้วยข้อความสีดำขนาดเล็ก ด้านล่างให้สร้างส่วนที่ระบุชื่อ 4 ส่วนที่คั่นด้วยเส้นแนวนอนสีเทาบางๆ: COLOR PALETTE, TYPOGRAPHY, VISUAL LANGUAGE และการ์ดตัวอย่าง ในส่วน COLOR PALETTE ให้แสดงตัวอย่างสีวงกลม 2 วงที่ระบุว่า Main และ Accent; ตัวอย่างสี Main จะเป็นสีเกือบขาวและตัวอย่างสี Accent จะตรงกับสีของแผงนั้นๆ พร้อมป้ายรหัสสี Hex กำกับข้างๆ ในส่วน TYPOGRAPHY ให้แสดงตัวอย่างแบบอักษร 2 แบบ: “Aa” แบบ Serif ขนาดใหญ่ที่ระบุสำหรับพาดหัวข่าว และ “Aa” แบบ Sans-serif ขนาดเล็กกว่าที่ระบุสำหรับเนื้อหา ในส่วน VISUAL LANGUAGE ให้แสดงโทเค็นวงกลม 4 อันที่ระบุว่า Flow, Connection, Simplicity และ Flex โดยมีหนึ่งอันหรือมากกว่านั้นใช้สีเน้นเป็นแหวนเบลอ การ์ดตัวอย่างสุดท้ายเขียนว่า “From thought to landing page.” พร้อมข้อความย่อยขนาดเล็กและแหวนสีเน้นแบบเบลอที่ถูกตัดขอบ
สไตล์ภาพ: การนำเสนอการออกแบบเว็บระดับพรีเมียมที่เรียบง่าย, การใช้ตัวอักษรแบบโมโนโครม, พื้นที่ว่างจำนวนมาก, เส้นแบ่งสีเทาอ่อนบางๆ, เงาที่นุ่มนวล, การไล่ระดับสีแบบฝ้า, พาดหัวข่าวแบบ Serif สไตล์บรรณาธิการจับคู่กับป้าย UI แบบ Sans-serif สมัยใหม่ขนาดเล็ก รักษาความคมชัดเหมือนภาพหน้าจอการสำรวจแบรนด์ใน Figma ใช้ Words become landing pages. เป็นพาดหัวข่าวหลักที่ทำซ้ำ, blue, green, orange, purple สำหรับตัวแปรสีทั้ง 4 และ 16:9
ข้อจำกัด: แสดงแผง 4 แผง, การ์ดเว็บไซต์ด้านล่าง 3 ใบต่อแผง, พื้นที่แบรนด์ 2 ส่วนต่อแผง, ตัวอย่างสี 2 สีต่อคู่มือแบรนด์, ตัวอย่างตัวอักษร 2 แบบต่อคู่มือแบรนด์ และโทเค็นภาษาภาพ 4 อันต่อคู่มือแบรนด์ ห้ามเพิ่มรูปภาพ, ผู้คน, กรอบอุปกรณ์, พื้นหลังสีเข้ม หรือแผงเพิ่มเติม