
Duolingo
มาสคอตประจำห้องเรียนสุดน่ารักบนกระดาษสีขาว
อินเทอร์เฟซของ Duolingo ออกแบบมาเหมือนหนังสือภาพสำหรับเด็ก: พื้นหลังกระดาษสีขาว ตัวอักษรอวบอ้วนกลม และสีเขียวเข้มเพียงสีเดียวที่สื่อถึง "คำตอบที่ถูกต้อง" ได้ทันที ข้อความหลักมีโทนสีเทาอ่อนที่ดูสบายตา ทำให้สีเขียวและสีฟ้าที่ใช้เป็นสีเน้นทำหน้าที่ด้านอารมณ์ทั้งหมด—สีเขียวสำหรับความคืบหน้าและหัวข้อ สีฟ้าสำหรับลิงก์ที่คลิกได้และการกระทำเพิ่มเติม ส่วนประกอบต่างๆ มีรูปร่างคล้ายเม็ดยาหรือมุมโค้งมนหนาๆ พร้อมขอบสีดำหรือสีอื่นๆ ทำให้แต่ละปุ่มดูเหมือนสติกเกอร์ที่ติดอยู่บนหน้าเว็บมากกว่าส่วนควบคุม UI แบบแบนๆ
แต่ละส่วนจะ occupies ความกว้างเต็มหน้ากระดาษและจัดเรียงในแนวตั้งเป็นคอลัมน์เดียว โดยแต่ละคอลัมน์สูงประมาณ 800 พิกเซล ความกว้างของเนื้อหาสูงสุดอยู่ที่ประมาณ 1 พิกเซลเมื่อจัดวางอยู่ตรงกลาง ข้อความอยู่ทางซ้ายและภาพประกอบอยู่ทางขวาจะสลับกัน โดยเว้นพื้นที่แนวตั้งไว้มาก (80 พิกเซลระหว่างส่วนต่างๆ) ไม่มีตารางการ์ดหรือเลย์เอาต์หลายคอลัมน์ แต่ละส่วนเป็นบล็อกข้อความเดียวที่จับคู่กับภาพประกอบเดียว การนำทางเป็นแถบด้านบนแบบเรียบง่ายพร้อมโลโก้และตัวเลือกภาษา ซึ่งจะปรากฏเป็นแถบคงที่ระหว่างส่วนต่างๆ ส่วนท้ายเป็นแถบสีเขียวที่ทอดยาวตลอดความกว้างของหน้ากระดาษ จังหวะการเขียนเป็นแบบบรรณาธิการ: หัวข้อ ย่อหน้า คำกระตุ้นการตัดสินใจ ภาพประกอบ การทำซ้ำ
ภาพประกอบในหนังสือเล่มนี้ใช้ตัวมาสคอตแบบแบนสองมิติ (นกฮูกดูเอ็ตและรูปคนต่างๆ) ที่มีรูปทรงเรขาคณิตโค้งมน เส้นขอบสีดำหนา และโทนสีที่ตัดกัน ได้แก่ สีชมพู สีม่วง สีเหลือง สีส้ม และสีฟ้า ซึ่งจะไม่ปรากฏในส่วนติดต่อผู้ใช้เลย ภาพประกอบจะอยู่ถัดจากข้อความทางด้านขวาของแต่ละส่วน บนพื้นหลังสีขาวล้วน ไม่มีกรอบหรือพื้นหลังใดๆ ไม่มีภาพถ่าย—ตัวละครทำหน้าที่เป็นเนื้อหาภาพ ไอคอนใช้เส้นขอบหนา สอดคล้องกับสไตล์ของมาสคอต ความหนาแน่นของภาพอยู่ในระดับปานกลาง: แต่ละส่วนมีภาพประกอบขนาดใหญ่หนึ่งภาพของตัวละคร โดยส่วนที่เหลือของหน้าจะใช้สำหรับตัวอักษรและพื้นที่ว่าง
จานสี
ยี่ห้อ
- Eager Green
#58cc02— สีเขียวใช้สำหรับเน้นลิงก์ แท็ก และวลีสั้นๆ ไม่ควรใช้เป็นสีหลักสำหรับข้อความกระตุ้นการกระทำ (Call to Action) - Storybook Green
#d7ffb8— แสงเงาอ่อนๆ บนพื้นผิวสีอ่อน โทนสีพื้นหลังที่ละเอียดอ่อนอยู่ด้านหลังป้ายกำกับนำทางในส่วนท้ายของเว็บไซต์
เป็นกลาง
- Spark Blue
#1cb0f6— สีน้ำเงินใช้สำหรับเน้นลิงก์ แท็ก และวลีสั้นๆ ไม่ควรใช้เป็นสีหลักสำหรับข้อความกระตุ้นการกระทำ (Call to Action) - Fresh Leaf
#a5ed6e— สีเขียวใช้สำหรับเน้นลิงก์ แท็ก และวลีสั้นๆ ไม่ควรใช้เป็นสีหลักสำหรับข้อความกระตุ้นการกระทำ (Call to Action) - Night Ink
#000437— ลิงก์ แท็ก และวลีสั้นๆ ที่ไฮไลต์ไว้ จะถูกไฮไลต์ด้วยสีม่วง - Paper White
#ffffff— พื้นผิวแผ่นกระดาษ กระดาษแข็ง และข้อความปุ่มกดบนพื้นหลังสีเขียว/เข้ม - Charcoal
#4b4b4b— ส่วนหัวและเนื้อหาหลักของ Hero - ข้อความสีเข้มแบบสากลที่ช่วยให้หัวข้อสีโดดเด่นขึ้นมา - Pencil Gray
#777777— ย่อหน้าหลักของข้อความจะถูกเน้นด้วยตัวอักษรที่ไม่เด่นชัด ในขณะที่ข้อความบรรยายรองจะจางหายไปด้านหลัง เพื่อให้องค์ประกอบที่มีสีสันโดดเด่นขึ้นมา
การจัดพิมพ์
จาก 13 เป็น 64 พิกเซล · 7 ขั้นตอน
- feather — ทดแทน: Inter · โครงร่าง 700 · หัวข้อส่วนต่างๆ เช่น "ฟรี สนุก ได้ผล" และ "แบบทดสอบภาษาอังกฤษ Duolingo" จะแสดงผลโดยใช้แบบอักษรโค้งมนที่ออกแบบมาเป็นพิเศษ ซึ่งทำให้แบรนด์มีสไตล์ที่ดูสนุกสนาน เป็นมิตร และเหมือนมาสคอต แทนที่ด้วย "Feather Bold" หรือ "Nunito Black" ในน้ำหนักที่เหมาะสม ระยะห่างระหว่างตัวอักษร: -0.0200em
- duolingo-sans — ทดแทน: Inter · โครงร่าง 500 · ย่อหน้าหลักและลิงก์นำทางใช้ขนาด 17px/500 ซึ่งเป็นแบบอักษร sans-serif ทรงเรขาคณิตที่ยังคงอ่านง่าย ทำให้ความหนาของเส้น 700 เน้นจุดสำคัญได้ ควรใช้แบบอักษร 'DIN Next', 'Inter' หรือ 'Nunito Sans' แทน
- duolingo-sans — ทดแทน: Inter · โครงร่าง 700 · ใช้ค่า weight-700 ทั้งหมด: ตัวอักษรพิมพ์ใหญ่ในป้ายกำกับนำทางมีขนาด 15px (ls 0.0530em) หัวข้อย่อยมีขนาด 19px และ 32px และการเน้นลิงก์มีขนาด 13px ใช้แบบอักษรเดียวกับข้อความหลัก ความแตกต่างที่มองเห็นได้อยู่ที่น้ำหนัก ไม่ใช่การเปลี่ยนแบบอักษร ระยะห่างระหว่างตัวอักษร: 0.0530em สำหรับตัวอักษรพิมพ์ใหญ่ในป้ายกำกับนำทาง
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | หนาแน่น |
| ขั้นตอนพื้นฐาน | 12px |
| รัศมีปุ่ม | 12px |
| รัศมีการ์ด | 12px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 80-120px |
| ความกว้างของหน้า | 1200px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Duolingo และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Family — ภาพประกอบจากนิทานบนกระดาษปาร์ชเมนต์สีครีม
- Say Briefly — สมุดร่างภาพสำหรับเอเจนซี่สร้างสรรค์ บนกระดาษสีครีม
- Flying Papers — คำสารภาพในรายการการ์ตูนเช้าวันเสาร์
- Portrait — กำแพงแห่งความทรงจำที่บันทึกไว้ด้วยภาพถ่ายโพลารอยด์บนกระดาษสีครีม สมุดภาพสีครีมสดใสที่ใช้หมึกสีน้ำเงินเข้มเป็นตัวอักษร เส้นขอบ และกรอบเพียงอย่างเดียว พร้อมด้วยภาพวาดสายรุ้งที่วาดด้วยมือเพียงครั้งเดียว บนปุ่ม "ลงทะเบียน" และบนคำว่า "ตลอดไป" ที่เป็นตัวเอียง แล้วก็ไม่ปรากฏอีกเลย
- Karl — ไดโอรามาแบบหนังสือป๊อปอัพสามมิติในวันที่แดดจ้า
- Navigate — สติกเกอร์ชุดใหญ่ติดอยู่บนกระดาน: ตัวอักษรขนาดใหญ่แบบประหลาด ทั้งหมดอยู่ในรูปทรงของแผ่นป้ายและไอคอนหลากสีห้าแบบ ซ้ำกันเหมือนโลโก้
- Monte — เช้าวันหนึ่งริมชายฝั่งที่มีแสงสีสนิม
- MotherDuck — เทอร์มินัลที่ระบายสีด้วยดินสอสีบนกระดาษสีครีม
- Wise Design — แผงขายของนีออนบนถนนสายหลักระดับโลก—ป้ายสีเขียวสดใสโดดเด่นสะดุดตาในตลาดที่แออัด ขณะที่ด้านหลังนั้น อินเทอร์เฟซผู้ใช้ผลิตภัณฑ์ที่ขัดเกลาอย่างดีปรากฏขึ้นอย่างแนบเนียน
- Hatch — งานออกแบบสไตล์ภาพวาดด้วยมือแบบใต้ดิน ผสมผสานกับชามใส่ลูกอมสีพาสเทล พื้นหลังกระดาษสีครีมประดับด้วยสีเขียวมิ้นต์ จุดสีเหมือนกระดาษโปรย และข้อความกระตุ้นให้ลงมือทำรูปทรงคล้ายเม็ดยา โดยใช้ตัวอักษรแบบมีเชิงขนาดใหญ่และตัวหนาที่สื่อถึงความสนุกสนาน และมีมาสคอตสีฟ้าขยิบตาอยู่ที่มุมภาพ
- Superr — สมุดนักเรียนอุ่นๆ ในแสงแดดอ่อนๆ ยามบ่าย กระดาษสีครีม ปากกาเมจิกสีส้มที่ไม่มีฝาปิด และสติ๊กเกอร์ชื่อเคลือบพลาสติกกองโตที่รอการลอกออก
- Mews — ศูนย์ควบคุมการบริการในยามเช้าตรู่ที่อบอวลไปด้วยสีชมพู พื้นที่ทำงานผนังสีขาวที่สว่างไสวด้วยแสงแดด ตัวอักษรสีดำตัวหนา การ์ดสีครีมโทนอบอุ่น และปุ่มกดสีชมพูสดใสเพียงปุ่มเดียวที่กำหนดขอบเขตของแต่ละหน้าจอ แสดงออกถึงความมั่นใจอย่างสนุกสนานมากกว่าความเคร่งขรึมแบบองค์กร