Seline Analytics
โต๊ะวิเคราะห์ที่เงียบสงบ บนกระดาษอุ่นๆ
Seline มีพื้นหลังเป็นสีหินโทนอบอุ่น (#fafaf9) โดยมีสีน้ำเงินสดใสเป็นจุดเด่นเพียงสีเดียว ส่วนสีอื่นๆ เป็นสีกลางที่ดึงมาจากโทนสีหินของ Tailwind หัวข้อใช้ฟอนต์ sans-serif เรขาคณิตที่ออกแบบเอง (roobert) ความหนา 400 และระยะห่างระหว่างตัวอักษรแคบ ทำให้ข้อความดูนุ่มนวลและมั่นใจราวกับเสียงกระซิบ ซึ่งแตกต่างจากสไตล์ SaaS ที่มักจะดูฉูดฉาด พื้นผิว UI เป็นการ์ดสีขาวเรียบๆ ลอยอยู่เหนือพื้นหลังโทนอบอุ่นด้วยการเบลอแบบนุ่มนวลขนาด 16 พิกเซล ขอบสร้างด้วยเส้นบางๆ สีหินขนาด 1 พิกเซล ใช้เป็นองค์ประกอบโครงสร้างหลักแทนการใช้เส้นแบ่งหรือแผงหนาๆ เลย์เอาต์ดูโปร่งสบาย: เนื้อหาเต็มความกว้างอยู่ตรงกลางด้วยจังหวะแนวตั้งที่ลงตัว มีปุ่มควบคุมแบบอินเทอร์แอคทีฟรูปทรงแคปซูล ภาพประกอบมาสคอตเพื่อเพิ่มบุคลิก และภาพหน้าจอแดชบอร์ดเป็นหลักฐานของผลิตภัณฑ์ โดยรวมแล้วให้ความรู้สึกเชิงวิเคราะห์แบบบรรณาธิการ: สงบ เรียบง่าย มั่นใจ โดยมีปุ่มกระตุ้นการดำเนินการสีน้ำเงินเป็นองค์ประกอบที่โดดเด่นที่สุดในหน้าเว็บ เนื่องจากองค์ประกอบอื่นๆ ถูกจัดวางอย่างจงใจให้ดูเรียบง่าย
หน้าเว็บมีความกว้างสูงสุด จัดกึ่งกลางที่ระยะประมาณ 1200 พิกเซล โดยมีพื้นที่แนวตั้งเหลือเฟือ ส่วนหัวของหน้าเว็บเป็นข้อความสองบรรทัด จัดชิดซ้าย มีวลีเด่น ("เรียบง่ายและมีประสิทธิภาพ") เป็นสีน้ำเงิน ตามด้วยแถวที่มีปุ่มกระตุ้นการดำเนินการสองปุ่ม (ยาเม็ดสีน้ำเงิน + ยาเม็ดผี) จากนั้นเป็นแถวโลโก้ของพันธมิตรในโทนสีเทา ตามด้วยแถวคะแนนความน่าเชื่อถือ และปิดท้ายด้วยภาพตัวอย่างแดชบอร์ดแบบลอยตัวเต็มความกว้าง ซึ่งทับซ้อนกับส่วนถัดไปเล็กน้อย ด้านล่างของหน้าเว็บเป็นแถวคำรับรองสลับกันในรูปแบบตารางคอลัมน์เดียว ตามด้วยส่วนเต็มความกว้างที่มีคำอธิบายคุณสมบัติ ข้อความจัดชิดซ้าย และภาพผลิตภัณฑ์อยู่ตรงกลาง แถบนำทางเป็นแถบด้านบนแบบเรียบง่าย โดยมีโลโก้อยู่ทางซ้าย ลิงก์นำทางอยู่ตรงกลาง และปุ่มเข้าสู่ระบบสีน้ำเงินอยู่ทางขวา พร้อมด้วยกลุ่มรูปประจำตัวแบบลอยตัวอยู่ตรงกลางแถบนำทางเพื่อใช้ในการยืนยันตัวตน ช่องว่างระหว่างส่วนต่างๆ มีความกว้าง (96 พิกเซล) เพื่อสร้างจังหวะการนำเสนอมากกว่าการรวมข้อมูลที่หนาแน่นเข้าด้วยกัน
ภาษาภาพถูกครอบงำด้วยภาพหน้าจอของอินเทอร์เฟซผู้ใช้ของผลิตภัณฑ์—ภาพตัวอย่างแดชบอร์ดเป็นภาพถ่ายที่แสดงผลด้วยตัวกรองความคมชัดสีเทา (1) (0.94) ซึ่งลดทอนสีของข้อมูลให้เป็นโทนสีขาวดำ รูปคนเพียงรูปเดียวคือสติ๊กเกอร์มาสคอตแบบเส้นตรง (ตัวละครสวมฮู้ด) ที่วาดในสไตล์ SVG โดยใช้เฉพาะเส้นขอบเท่านั้น วางไว้ครั้งละหนึ่งส่วนเพื่อเป็นจุดเด่นที่สนุกสนานให้กับเนื้อหาเชิงวิเคราะห์ พร้อมเงาอ่อนๆ เพื่อสร้างเอฟเฟกต์ความลึกคล้ายสติ๊กเกอร์ โลโก้และสัญลักษณ์ของแบรนด์เป็นประกายไฟ/เปลวไฟสีดำขนาดเล็ก ไม่มีภาพถ่าย—ไม่มีภาพไลฟ์สไตล์ ไม่มีภาพทีม ไม่มีภาพสภาพแวดล้อม วัตถุ (แดชบอร์ด) คือตัวเอก ไอคอนตกแต่งทั้งหมดเป็นสไตล์เส้นขอบ 1 พิกเซลใน #0c0a09 หรือ #3ba6f1 ไม่มีการเติมสี
จานสี
ยี่ห้อ
- Cyan Signal
#3ba6f1— ปุ่มกระตุ้นการดำเนินการหลัก ลิงก์ที่ใช้งานได้ และโครงร่างของไอคอนแบรนด์เป็นองค์ประกอบสีเพียงอย่างเดียวบนหน้าเว็บ ซึ่งใช้สีอย่างประหยัดเพื่อดึงดูดความสนใจไปยังการกระทำนั้นๆ - Cyan Edge
#3398e1— สีน้ำเงินใช้สำหรับเน้นเส้นขอบการกระทำ ป้ายกำกับลิงก์ และองค์ประกอบแบบโต้ตอบ ไม่ควรใช้เป็นสีหลักสำหรับคำกระตุ้นการตัดสินใจ
เป็นกลาง
- Ink Black
#0c0a09— หัวข้อหลัก ข้อความหลักที่เน้น และไอคอนแสดงอารมณ์ จะใช้สีโทนอบอุ่นเกือบดำ - Stone Canvas
#fafaf9— พื้นหลังของหน้าเว็บเป็นสีครีมโทนอบอุ่น ให้ความรู้สึกเหมือนกระดาษมากกว่าสีขาวของหน้าจอ - Pure White
#ffffff— โดยค่าเริ่มต้น พื้นผิวแผนที่ แผงที่ยื่นออกมา และส่วนที่เติมในช่องป้อนข้อมูลจะเรียบและไม่มีเงา - Stone Border
#e8e6e5— เส้นขอบบางๆ บนการ์ด การนำทาง และช่องป้อนข้อมูล เป็นองค์ประกอบโครงสร้างหลัก ไม่ใช่ตัวคั่น - Stone Muted
#d6d3d1— กรอบรูปเพิ่มเติม, โทนสีพื้นหลังที่ดูละมุนละไม, และตัวแบ่งตกแต่ง - Ash Gray
#a8a29e— ข้อความช่วยเหลือ, โครงร่างไอคอน, สถานะที่ถูกปิดใช้งาน - อ่านได้แต่ใช้งานไม่ได้
การจัดพิมพ์
จาก 10 เป็น 52 พิกเซล · 5 ขั้นตอน
- Roobert — ทดแทน: Inter Tight or Satoshi · โครงร่าง 400, 500 · แบบอักษรสำหรับหัวข้อและการจัดวางข้อความคือแบบอักษร sans-serif รูปทรงเรขาคณิตที่ไม่เหมือนใคร โดยมีระยะห่างระหว่างตัวอักษรน้อยมาก (-0.025em ที่ 32px, -0.021em ที่ 52px) ขนาดตัวอักษร 400 x 52px เป็นเอกลักษณ์ของแบบอักษรนี้: ไม่เหมือนใคร ละเอียดอ่อน แต่ทรงอำนาจ และไม่โอ้อวด หัวข้อข่าวจึงอยู่ในตำแหน่งที่เหมาะสมโดยไม่ดูโดดเด่นเกินไป
- Inter — ทดแทน: Inter · โครงร่าง 400, 500, 600 · แบบอักษรหลักสำหรับข้อความเนื้อหา การนำทาง ส่วนติดต่อผู้ใช้ และหัวข้อ เป็นแบบอักษรที่เป็นกลางและใช้ได้กับข้อความนอกจอทั้งหมด ขนาด 14 พิกเซล น้ำหนัก 400 และระยะห่างระหว่างบรรทัด 1.64 เป็นขนาดที่ใช้มากที่สุดสำหรับข้อความเนื้อหา (ความถี่ 1174) การเว้นระยะห่างระหว่างตัวอักษรเป็นบวก (0.004em) ในขนาดเล็กช่วยให้สามารถอ่านส่วนติดต่อผู้ใช้ที่มีรายละเอียดมากได้
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | กว้างขวาง |
| ขั้นตอนพื้นฐาน | 8px |
| รัศมีปุ่ม | 9999px |
| รัศมีการ์ด | 10px |
| เงา | เงาอ่อนๆ |
| ระหว่างส่วนต่างๆ | 96px |
| ความกว้างของหน้า | 1200px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Seline Analytics และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Mollie — เคาน์เตอร์แคชเมียร์ สมุดบัญชีสีเข้ม เว้นพื้นที่สีขาวให้มากพอสำหรับงานออกแบบเชิงบรรณาธิการรอบๆ ข้อความสีดำ จากนั้นเน้นจุดที่เกี่ยวข้องกับผลิตภัณฑ์ด้วยสีครีมโทนอบอุ่น สีน้ำตาลเอสเปรสโซ และภาพถ่ายที่สัมผัสได้ของวิธีการชำระเงินจริง
- Kagi — จัดห้องอ่านหนังสือแยกต่างหาก สร้างพื้นที่สีขาวโล่งกว้างรอบตัวอักษรสีเทาเข้ม โดยใช้สีม่วงอ่อนเป็นจุดเด่น และพื้นผิวสีพาสเทลโทนอบอุ่นเพื่อลดความเงียบสงบลง
- Milanote — Milanote คือสตูดิโอสร้างสรรค์ที่ทุ่มเท สร้างสรรค์หน้าเว็บสไตล์แกลเลอรีบทความโดยใช้กระดานภาพลอยตัว: ผนังที่มีกรอบสีเข้ม พื้นที่แสดงผลสีขาว และภาพหน้าจอที่ดูเหมือนวัตถุจริงที่มีความลึกนุ่มนวล
- Co2 — แผนที่ภูมิอากาศในแสงฤดูหนาว สร้างหน้าเอกสารให้เหมือนภาพถ่ายทางอากาศ โดยใช้หัวเรื่องแบบมีเชิง ข้อมูลที่จัดหมวดหมู่ และภาพน้ำแข็งที่ตัดกับขอบสีขาวกว้าง
- GitButler — สีเทอร์ควอยซ์ที่ส่วนท้ายของข้อความ การผสมผสานระหว่างหัวข้อแบบตัวอักษรมีเชิงที่มีความคมชัดสูงกับตารางเชิงเทคนิคที่ละเอียดอ่อน พื้นผิวสีเทากราไฟต์โทนอบอุ่น และการเน้นสีเทอร์ควอยซ์อย่างแนบเนียน
- ElevenLabs — ภาพถ่ายเชิงสารคดีในโทนสีครีมอบอุ่น พร้อมหัวข้อข่าวที่ไม่ฉูดฉาด สมุดบันทึกสไตล์เบาเฮาส์—กระดาษสีเปลือกไข่ หมึกสีดำ และสีม่วงและสีส้มเพียงเล็กน้อยสำหรับตกแต่งเพื่อแสดงสินค้า
- Awesomic — แผ่นตาข่ายสังกะสีสำหรับงานบรรณาธิการ พร้อมเครื่องหมายวรรคตอนสีส้มที่ชวนให้นึกถึงกระดาษโปรย
- Monad — บทบรรณาธิการวารสารทางเทคนิคเกี่ยวกับกระดาษหนังอุ่น
- Dub — แผงควบคุมกระดาษข้าวแบบด้านของ Link
- Notion — สมุดบันทึกกระดาษอุ่นๆ ท่ามกลางแสงแดดกลางวัน
- Anthropic — วารสารภาคสนามทางวิทยาศาสตร์บนกระดาษหนังลูกวัวสีอบอุ่น—พื้นผิวสีงาช้างเรียบลื่น หัวข้อบรรณาธิการแบบมีเชิง และรายละเอียดสีดินเหนียวเพียงจุดเดียวที่ปรากฏขึ้นเฉพาะเมื่อจำเป็นต้องมีการดำเนินการ
- Calendly — หมึกสีน้ำเงินเข้มบนหินอ่อนเย็น