Telegram, WhatsApp+380637610482
วาเลรี ดานยุก
วาเลรี ดานยุกนักพัฒนาพัฒนาเครื่องมือ AI สำหรับธุรกิจ คุณภาพสูง ราคาไม่แพงติดต่อผ่าน Telegram
Duolingo — ตัวอย่างเว็บไซต์ในรูปแบบนี้

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 — ศูนย์ควบคุมการบริการในยามเช้าตรู่ที่อบอวลไปด้วยสีชมพู พื้นที่ทำงานผนังสีขาวที่สว่างไสวด้วยแสงแดด ตัวอักษรสีดำตัวหนา การ์ดสีครีมโทนอบอุ่น และปุ่มกดสีชมพูสดใสเพียงปุ่มเดียวที่กำหนดขอบเขตของแต่ละหน้าจอ แสดงออกถึงความมั่นใจอย่างสนุกสนานมากกว่าความเคร่งขรึมแบบองค์กร