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

Steep

การวิเคราะห์แบบอักษร Serif บนกระดาษอุ่น

Steep นำเสนอข้อมูลวิเคราะห์ในรูปแบบเนื้อหาบทความ—หัวข้อแบบ Signifier serif ลอยอยู่เหนือพื้นหลังสีขาวเกือบทั้งหมด และสีพีชโทนอบอุ่นเพียงสีเดียว (#fbe1d1) ช่วยเน้นย้ำระบบที่แทบจะไม่มีสีสันใดๆ หน้าเว็บอ่านแล้วเหมือนหน้าปกนิตยสารสินค้า: ตัวอักษรขนาดใหญ่แบบเขียนหวัด พื้นที่ข้อความกว้างขวาง การ์ดขนาดใหญ่ที่มีขอบโค้งมน 24 พิกเซล และปุ่มควบคุมรูปทรงแคปซูลที่เรียบไปกับพื้นผิว ส่วนประกอบต่างๆ ให้ความรู้สึกสงบและเบา—เงาไม่เด่นชัด ขอบบาง และใช้สีเพื่อเน้นฟังก์ชันการใช้งาน (ข้อความเน้นสีพีช ตัวอักษรสีน้ำตาลเข้มบนพื้นหลังสีพีช) พื้นผิวผลิตภัณฑ์ (ตารางภูมิภาค แผนภาพการเปิดใช้งาน ตัวสร้าง AI) ถูกนำเสนอเป็นองค์ประกอบลอยอยู่รอบๆ ส่วนหัว แทนที่จะซ้อนอยู่ภายในโครงสร้างของแดชบอร์ด

เค้าโครงหน้าเว็บมีความกว้างสูงสุด 1200 พิกเซล จัดวางอยู่ตรงกลาง โดยส่วนหลักๆ จะใช้พื้นที่เกือบเต็มความกว้างของหน้า แต่ยังคงอยู่ในกรอบ เค้าโครงหลักประกอบด้วยส่วนหัวที่อยู่ตรงกลาง ใช้ฟอนต์ serif ขนาดใหญ่ ส่วนหัวย่อย และปุ่มรูปทรงแคปซูลสองปุ่ม ล้อมรอบด้วยการ์ดรายละเอียดผลิตภัณฑ์แบบลอยตัวสี่ใบ (ตารางภูมิภาคด้านบนซ้าย การ์ดลงทะเบียนด้านขวา แผนภาพการเปิดใช้งานด้านล่างซ้าย ตัวแก้ไข AI ด้านล่างตรงกลาง) ซึ่งซ้อนทับบนพื้นสีขาวโดยมีระยะห่างที่แตกต่างกัน พื้นหลังของส่วนต่างๆ สลับกันระหว่างสีขาวกระดาษและสีเทาการ์ด ทำให้เกิดจังหวะที่สงบโดยไม่มีความแตกต่างที่เด่นชัด ส่วนต่างๆ ใช้เค้าโครงแบบสองคอลัมน์สำหรับข้อความและ UI โดยมีช่องว่างแนวตั้งขนาดใหญ่ 80 พิกเซล การนำทางเป็นแถบด้านบนโปร่งใสเพียงแถบเดียว (ไม่มีพื้นหลัง ขอบ หรือเงา) โดยมีโลโก้อยู่ทางซ้าย ลิงก์นำทางอยู่ตรงกลาง และปุ่มกระตุ้นการดำเนินการสองปุ่ม (ลิงก์ข้อความ + ปุ่มรูปทรงแคปซูลที่เติมสี) อยู่ทางขวา ความหนาแน่นของเค้าโครงโดยรวมนั้นกว้างขวาง หน้าเว็บ "หายใจ" ได้ระหว่างส่วนต่างๆ และเนื้อหาจะไม่แออัดที่ขอบ

การออกแบบภาพเน้นที่ตัวผลิตภัณฑ์ ไม่ใช่ไลฟ์สไตล์: องค์ประกอบ UI แบบลอยตัว (ตารางภูมิภาคที่มีข้อมูลห้าแถว แผนภูมิเส้นแสดงกิจกรรมในเดือนสิงหาคม-พฤศจิกายน วงแหวนแสดงความคืบหน้า ช่องป้อนข้อมูล AI) ถูกจัดเรียงเป็นภาพหน้าจอที่ตัดแต่งรอบๆ หัวข้อข่าว ไม่มีรูปถ่าย ภาพประกอบ หรือกราฟิกนามธรรม องค์ประกอบภาพของผลิตภัณฑ์ทั้งหมดวางอยู่บนการ์ดสีขาวแบบลอยตัวที่มีขอบบางและเงาอ่อนๆ วงกลมรูปอวตารมีตัวบ่งชี้ทิศทางเคอร์เซอร์ขนาดเล็ก ซึ่งเป็นสัญลักษณ์ที่บ่งบอกถึงการโต้ตอบแบบเรียลไทม์ องค์ประกอบหลักคือภาพตัดปะของข้อความและ UI มากกว่าหัวข้อข่าวตรงกลางพร้อมรูปภาพสต็อก

จานสี

เป็นกลาง

  • Ink Black #17191c — ข้อความหลัก พื้นหลังปุ่มที่เติมสี และโลโก้การนำทางเป็นพื้นผิวสีเข้มเพียงอย่างเดียวในระบบ ข้อความกระตุ้นการดำเนินการและหัวข้อทั้งหมดในข้อความหลักจะปรากฏบนพื้นหลังสีดำสนิทนี้
  • Paper White #ffffff — พื้นหลังของหน้าเว็บ ข้อความบนปุ่ม และพื้นผิวการ์ดนูน เป็นโทนสีพื้นหลังหลัก ซึ่งมีจุดความถี่ประมาณ 76 จุด
  • Mist Gray #f2f2f3 — พื้นผิวของการ์ด พื้นหลังเพิ่มเติม การเติมช่องป้อนข้อมูล—เลเยอร์ที่มองไม่เห็นอยู่ใต้กระดาษสำหรับเนื้อหาที่ฝังอยู่
  • Fog White #fafafb — พื้นหลังหน้าเพิ่มเติมสำหรับสลับส่วนและพื้นผิวเมื่อวางเมาส์เหนือภาพ - สูงกว่ากระดาษหนึ่งระดับเพื่อสร้างลายเส้นที่ดูละเอียดอ่อน
  • Slate Gray #777b86 — สีของลิงก์, ข้อความเสริมที่ดูจืดชืด, ข้อความส่วนท้าย - สีเทาโทนเย็นที่ลดความอิ่มตัวลง วางไว้ระหว่างข้อความหลักและข้อความที่ไม่สามารถรวมไว้ได้
  • Ash Gray #979799 — ป้ายกำกับเพิ่มเติม แท็กหมวดหมู่ (การตลาด การเงิน การขาย) - สีอ่อนกว่าสีลิงก์หนึ่งระดับ

การจัดพิมพ์

จาก 15 เป็น 90 พิกเซล · 8 ขั้นตอน

  • Signifier — ทดแทน: GT Sectra · โครงร่าง 400 · แบบอักษรมีเชิงสำหรับหัวข้อและชื่อเรื่อง—ใช้เฉพาะสำหรับ H1/H2 ในสามขนาด โดยน้ำหนักของแบบอักษรจะคงอยู่ที่ 400 (ปกติ) ในทุกขนาด ซึ่งเป็นเอกลักษณ์เฉพาะตัว: แบบอักษรมีเชิงจะให้ความรู้สึกนุ่มนวลมากกว่าที่จะโดดเด่นเหมือนแบบอักษรตัวหนา
  • Sohne — ทดแทน: Inter · โครงร่าง 400, 430, 450, 480, 500 · แบบอักษรหลัก แบบอักษรสำหรับส่วนติดต่อผู้ใช้ และแบบอักษรสำหรับการนำทางมีความหลากหลาย ครอบคลุมทุกอย่างตั้งแต่ข้อมูลเมตาไปจนถึงหัวข้อย่อย น้ำหนักตัวอักษรแบบไล่ระดับ (430, 450, 480) สร้างลำดับชั้นที่ละเอียดอ่อนโดยไม่ทำให้ดูหนาเกินไป

ช่วงเวลาและรูปแบบ

วัตถุประสงค์ความหมาย
ความหนาแน่นเฉลี่ย
ขั้นตอนพื้นฐาน8px
รัศมีปุ่ม9999px
รัศมีการ์ด24px
เงาไม่ - ใช้เส้นขอบแทนเงา
ระหว่างส่วนต่างๆ80px
ความกว้างของหน้า1200px

AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Steep และเติมข้อมูลลงไป

  • ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
  • ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
  • ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
  • การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม

สไตล์ที่คล้ายกัน

  • 1X NEO — 1X Tech คือโฮมเธียเตอร์ที่เงียบสงบ หน้าเว็บสีอ่อนที่มีข้อความบรรณาธิการเปิดขึ้นพร้อมกับฉากภาพยนตร์ของผู้คนและหุ่นยนต์ฮิวมานอยด์ ในขณะที่องค์ประกอบอินเทอร์เฟซถูกลดขนาดลงเหลือเพียงคำบรรยายขนาดเล็กที่เว้นระยะห่างกัน และภาพขาวดำที่นุ่มนวล
  • B150 — หลักสูตรขั้นสูงด้านการสร้างเกรนฟิล์มแห่งอนาคต การสร้างส่วนบทความที่สว่างสดใสและนุ่มนวลตัดกับภาพผลิตภัณฑ์และผู้สร้างสรรค์ในขนาดเท่าคนจริงที่มีสีเข้ม
  • Captions — โต๊ะตัดต่อที่สว่างไสวด้วยแสงแดด วางแถบนำทางโค้งโปร่งแสงไว้เหนือพื้นที่ทำงานสีขาวสะอาดตาที่ดูมีร่องรอยเล็กน้อย จากนั้นเติมเต็มด้วยพื้นผิวการทำงานสีฟ้าอ่อนและภาพระยะใกล้ของฟุตเทจ
  • Newformcap — บทบรรณาธิการหนังสือพิมพ์ในห้องแต่งตัว
  • Claude — สิ่งประดิษฐ์ที่พิมพ์ลงบนกระดาษหนังอุ่นๆ—หมึกบนกระดาษกระดูก ดินเหนียวเป็นเพียงสีสันเดียวที่แทรกอยู่
  • 11x– Digital workers — ภาพตัดต่อสไตล์ภาพยนตร์ที่ดูรกร้างว่างเปล่า—ภาพถ่ายพาโนรามาของภูมิประเทศที่ตัดกับพาดหัวข่าวตัวอักษรใหญ่แบบมีเชิงที่อ่านแล้วเหมือนหน้าปกนิตยสารหรูหรา
  • Revolut — ผลงานบรรณาธิการขาวดำที่สร้างจากภาพถ่ายก้อนเมฆ—หมึกสีขาว กระดุมแบบกล่องยา และแถบสีฟ้าเพียงเส้นเดียวในโลกสีเทา
  • Scheduling — หมึกพิมพ์บรรณาธิการบนกระดาษสีครีม
  • Titan — คลังภาพขาวดำโทนสีอบอุ่น
  • AWE — หอดูดาวหุ่นยนต์หลังเที่ยงคืน สร้างหน้าจอสีดำคล้ายหอศิลป์ ที่ซึ่งตัวอักษรสีซีดจางลอยอยู่เหนือภาพที่สร้างด้วย AI และข้อความขนาดเล็กบนแผงควบคุม
  • Programa — สตูดิโอออกแบบของสวิสในช่วงกลางวัน ผนังสีขาวสว่างไสวด้วยโคมไฟตั้งโต๊ะสีเหลืองเพียงดวงเดียว ทุกอย่างเป็นโทนสีเทาจนกระทั่งปุ่ม ไอคอน หรือของตกแต่งชิ้นใดชิ้นหนึ่งดึงดูดสายตา และสีเหลืองนั้นเองก็เป็นจุดเด่นที่กำหนดภาพรวมของห้องทั้งหมด
  • Sana Agents — ประกายสีเขียวมะนาวบนพื้นหลังสีขาวในภาพถ่ายเชิงบรรณาธิการ

แคตตาล็อกของสไตล์ต่างๆ แยกตามหมวดหมู่