Allbirds
วัสดุธรรมชาติบนผ้าลินินสีขาว
Allbirds ดำเนินงานด้วยความสงบและมั่นใจอย่างเป็นธรรมชาติ—พื้นหลังเกือบทั้งหมดเป็นสีขาวดำ เสริมด้วยสีทรายอบอุ่น (#e0dacf) และโทนสีเอิร์ธโทนที่นุ่มนวล ซึ่งได้มาจากภาพถ่ายผลิตภัณฑ์โดยตรง อินเทอร์เฟซผู้ใช้ไม่รบกวนประสบการณ์การใช้งานผลิตภัณฑ์: พื้นผิวสีขาว ขอบบาง การนำทางด้วยตัวพิมพ์ใหญ่ทั้งหมด และปุ่มควบคุมรูปทรงแคปซูลที่ให้ความรู้สึกเหมือนปุ่มจริงมากกว่าองค์ประกอบบนเว็บ Self Modern (ฟอนต์ serif ที่ออกแบบเอง) ถูกใช้สำหรับช่วงเวลาสำคัญไม่กี่ช่วงที่ต้องการความใส่ใจด้านบรรณาธิการ—หัวข้อและชื่อคอลเลกชัน—ในขณะที่ Geograph ถูกใช้สำหรับตัวอักษร ข้อความ และปุ่มทุกปุ่มในสามน้ำหนักที่สมดุลกัน การ์ดหมวดหมู่กลายเป็นระบบสี: แต่ละการ์ดจะใช้สีพื้นหลังจากผลิตภัณฑ์ที่แสดง ทำให้การนำทางกลายเป็นจานสี Pantone ที่มีชีวิตชีวา
ความกว้างสูงสุดอยู่ที่ประมาณ 1200 พิกเซล จัดวางอยู่ตรงกลางโดยมีระยะห่างด้านข้างพอสมควร องค์ประกอบหลักคือแถบเนื้อหาข่าวแบบเต็มความกว้างบนพื้นหลังสีทรายโทนอบอุ่น พร้อมด้วยภาพสินค้าแบบหมุนได้ขนาดใหญ่ที่แผ่กระจายออกมาจากตรงกลาง การนำทางหมวดหมู่เป็นตารางการ์ดสีเดียวกันสี่ใบในสี่คอลัมน์ โดยแต่ละใบมีแบบจำลองรองเท้าหนึ่งคู่ที่อยู่ตรงกลาง ด้านล่างของหน้าจอ เลย์เอาต์จะสลับระหว่างแผงแบ่งแบบเต็มความกว้าง (ภาพไลฟ์สไตล์ทางซ้าย + ตัวอย่างสินค้าทางขวา) และภาพสินค้าแบบหมุนได้ที่อยู่ตรงกลางภายใต้ชื่อส่วนขนาดเล็กที่มีขีดเส้นใต้ จังหวะโดยรวมคือ: แผงเนื้อหาข่าวแบบเต็มความกว้าง → ตารางสี่คอลัมน์ → ภาพสินค้าแบบหมุนได้ที่อยู่ตรงกลาง → แผงแบ่งสองคอลัมน์ → ภาพสินค้าแบบหมุนได้ที่อยู่ตรงกลาง ระยะห่างระหว่างส่วนต่างๆ คือ 40-56 พิกเซล ทำให้การเปลี่ยนผ่านดูโปร่งสบายแต่ไม่อึดอัด การนำทางเป็นแถบด้านบนแบบเรียบง่ายและคงที่ โดยมีลิงก์หลักอยู่ตรงกลาง
การถ่ายภาพคือระบบภาพทั้งหมด ภาพถ่ายผลิตภัณฑ์ทั้งหมดเป็นภาพระยะใกล้ ถ่ายจากมุมเล็กน้อย โดยใช้พื้นหลังสีทึบที่เข้ากันหรือเสริมกับสีเน้นของรองเท้า ทำให้แต่ละภาพกลายเป็นการศึกษาเรื่องสีอย่างมีประสิทธิภาพ ภาพถ่ายไลฟ์สไตล์ถ่ายด้วยโทนสีอบอุ่น สดใส ในสภาพแวดล้อมทางธรรมชาติ (ทุ่งอะกาเว พื้นไม้ พื้นที่ขรุขระ) ปรับโทนสีให้ดูนุ่มนวลเล็กน้อยเพื่อให้เข้ากับโทนสีที่ดูนุ่มนวล ไม่มีภาพประกอบ ไม่มีภาพเรนเดอร์ 3 มิติ ไม่มีกราฟิกนามธรรม โดยร่วมมือกับ Pantone มีการใช้โทนสีจริงเป็นองค์ประกอบกราฟิก ไอคอนต่างๆ มีความเรียบง่ายและเป็นสีขาวดำ (ไอคอนแบบเส้นขอบในตำแหน่งนำทางและตำแหน่งเสริม)
จานสี
เป็นกลาง
- Canvas White
#ffffff— ภาพพื้นหลังหน้าเว็บ, พื้นผิวการ์ด, ภาพพื้นหลังการ์ดผลิตภัณฑ์ - Charcoal
#212121— สามารถใช้สีกลางสำหรับองค์ประกอบ UI รอง เส้นแบ่ง และป้ายกำกับที่ไม่เด่นชัดได้ แต่ไม่ควรใช้เป็นสีหลักสำหรับปุ่มกระตุ้นการดำเนินการ (Call to Action) - True Black
#000000— หัวข้อ ไอคอน กรอบที่มีความคมชัดสูง ข้อความนำทาง - Warm Sand
#e0dacf— พื้นหลังส่วนหลัก เงาพื้นผิวเพิ่มเติม แผงเนื้อหาขนาดใหญ่ - Olive Char
#222519— สามารถใช้สีกลางสำหรับองค์ประกอบ UI รอง เส้นแบ่ง และป้ายกำกับที่ไม่เด่นชัดได้ แต่ไม่ควรใช้เป็นสีหลักสำหรับปุ่มกระตุ้นการดำเนินการ (Call to Action) - Iron Gray
#525252— ข้อความรอง, ข้อความเสริม, กรอบที่ไม่รบกวนสายตา
การจัดพิมพ์
จาก 12 เป็น 40 พิกเซล · 6 ขั้นตอน
- Self Modern — ทดแทน: Playfair Display · โครงร่าง 400 · มีการใช้หัวข้อข่าวและบทบรรณาธิการอย่างจำกัด โดยเน้นวลีสำคัญและชื่อเรื่องของชุดบทความ ตัวอักษรแบบมีเชิงและตัวเอียงช่วยลดความซ้ำซากจำเจของตัวอักษรแบบไม่มีเชิง และสื่อความหมายว่า "นี่คือสาระสำคัญของเรื่อง"
- Geograph — ทดแทน: Inter · โครงร่าง 400, 500, 700 · แบบอักษรหลักที่ใช้ในส่วนติดต่อผู้ใช้ประกอบด้วยข้อความหลัก ป้ายกำกับนำทาง ปุ่ม หัวข้อผลิตภัณฑ์ ส่วนท้าย ช่องป้อนข้อมูล และไอคอน โดยใช้ขนาด 500 สำหรับหัวข้อที่เน้น และ 700 สำหรับชื่อผลิตภัณฑ์ การเว้นระยะห่างระหว่างตัวอักษรที่กว้าง (0.025em–0.10em) ในตัวพิมพ์ใหญ่ของป้ายกำกับนำทางและหมวดหมู่ช่วยสร้างสไตล์แบรนด์ที่สอดคล้องกัน
- HurmeGeometricSans3 — ทดแทน: Inter · โครงร่าง 400 · ไม่ค่อยได้ใช้เป็นป้ายสำรองหรือป้ายเฉพาะสำหรับปุ่ม แต่บริษัท Geograph ใช้ระบบนี้เป็นประจำทุกวัน
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | หนาแน่น |
| ขั้นตอนพื้นฐาน | 8-16px |
| รัศมีปุ่ม | 9999px (pill) |
| รัศมีการ์ด | 16px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 40-56px |
| ความกว้างของหน้า | 1200px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Allbirds และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Lightship — ภาพจำลองเส้นทางบนท้องถนนที่งดงามราวกับภาพยนตร์ ผนังแกลเลอรี่สีครีมอบอุ่นประดับด้วยภาพถ่ายทิวทัศน์ขนาดใหญ่ที่ติดตั้งในระยะห่างพอประมาณ ตัวอักษรสีดำบางๆ แทบมองไม่เห็นบนกรอบภาพ และมีสีส้มสดใสเพียงสีเดียวที่ตัดกับสีขาวดำราวกับกองไฟในทุ่งหญ้า
- Faire ES — แคตตาล็อกขายส่งครีมบำรุงผิวอุ่น
- Adanola — ภาพแฟชั่นบนกระดาษสีขาว การถ่ายภาพแฟชั่นที่เน้นการจัดวางตัวอักษรและภาพถ่ายบนพื้นผิวสีขาวสะอาดตา โดยใช้หมึกสีดำสำหรับตัวอักษร และแบบอักษร sans-serif อันเป็นเอกลักษณ์ (Favorit) ที่สะท้อนถึงสไตล์โดยรวมของแบรนด์
- Oura Ring — ห้องทำข้าวโอ๊ตแสนอบอุ่นที่อาบไปด้วยแสงแดดอ่อนๆ
- Stykka — เวิร์คช็อปสไตล์สแกนดิเนเวียภายใต้แสงสีขาว – โชว์รูมเงียบสงบที่จัดแสดงงานฝีมือ โดยมีเพียงเสียงของภาพถ่ายเท่านั้นที่ดังก้องอยู่
- DJI — ผืนผ้าใบสีดำด้านอวกาศพร้อมไฮไลท์สีฟ้าสดใสเพียงจุดเดียว
- Altitude Beverages — หน้านิตยสารขาวดำ ลองนึกภาพหน้านิตยสารแฟชั่นที่ปราศจากสีสันใดๆ ยกเว้นภาพนิ่ง ข้อความและพื้นที่ว่างสีขาวบอกเล่าเรื่องราวทั้งหมด
- AATHER — ฝ่ามือที่เปิดออก เปลวไฟเพียงหนึ่งเดียว – ความหรูหราอันเงียบสงบที่แฝงอยู่ในความนิ่งงัน
- Cowboy — แกลเลอรี่จักรยานสัญชาติเบลเยียมในบรรยากาศเครื่องลายครามสีขาวบริสุทธิ์ โชว์รูมที่พื้นผิวแบบด้าน ตัวอักษรขนาดใหญ่ที่ใช้ในสื่อสิ่งพิมพ์ และการตกแต่งที่แทบจะไม่มีเลย ช่วยดึงดูดสายตาไปที่จักรยานและสิ่งของภายใน
- Refero — การจัดวางหน้าบทความบนพื้นหลังหินอ่อนสีขาว - หน้าสินค้าที่สร้างสรรค์โดยนักออกแบบตัวอักษร โดยที่หัวข้อแบบมีเชิงเป็นเอกลักษณ์ของแบรนด์ และองค์ประกอบอื่นๆ นั้นดูเรียบง่ายไม่โดดเด่น
- Face Formula — ภาพถ่ายบุคคลสไตล์สแกนดิเนเวีย ภาพที่สงบนิ่งราวกับอยู่ในนิตยสาร โดยสายตาของนางแบบและหัวข้อข่าวที่เขียนด้วยตัวอักษรแบบมีเชิงแคบๆ นั้นสื่อความหมายได้ด้วยตัวเอง บนฉากหลังที่ดูเย็นชาและมีหมอกจางๆ
- Shupatto — ตู้จัดแสดงในพิพิธภัณฑ์บนฐานหินอ่อนสีขาว