Medium
หนังสือพิมพ์สีขาวนวลในยามพระอาทิตย์ตกดิน
Medium ทำงานเหมือนห้องอ่านหนังสือที่ถูกย้ายมาอยู่บนเว็บ: พื้นหลังสีครีมอบอุ่น (#f7f4ed) แทนที่สีขาวที่ดูจืดชืดซึ่งมักพบในซอฟต์แวร์แบบ SaaS ทำให้ข้อความยาวๆ รู้สึกเหมือนกำลังอ่านหน้ากระดาษที่พิมพ์ออกมา ระบบภาพเป็นแบบขาวดำอย่างเข้มข้น—พื้นผิว UI เกือบทั้งหมด ข้อความ และขอบต่างๆ อยู่ในแถบสีเทาอบอุ่นแคบๆ ตั้งแต่ #242424 ถึง #6b6b6b—เพื่อให้ความสนใจของผู้อ่านจดจ่ออยู่กับเนื้อหาอย่างเต็มที่ เอกลักษณ์เพียงอย่างเดียวคือหัวเรื่องแบบมีเชิง (GT Super, 120px, น้ำหนัก 400, ระยะห่างระหว่างตัวอักษร -0.055em) ซึ่งเป็นการเลือกที่จงใจต่อต้านกระแส: แบบอักษรมีเชิงสำหรับหนังสือที่ปรับขนาดสำหรับการแสดงผล แทบจะไม่สังเกตเห็นได้เลย แทนที่จะเป็นแบบอักษรไม่มีเชิงแบบเรขาคณิตที่หนาและโดดเด่น บ่งบอกว่า: "เราตีพิมพ์หนังสือ ไม่ใช่ซอฟต์แวร์" ปุ่มต่างๆ เป็นสีดำสนิทเกือบทั้งหมด—เป็นหมึกสีทึบเพียงอย่างเดียวบนหน้าเว็บ
หน้าแรกมีสองคอลัมน์: ด้านซ้ายใช้พื้นที่ประมาณ 55% ของหน้า โดยมีหัวข้อหลัก เนื้อหาย่อย และปุ่มกระตุ้นการดำเนินการเรียงกันในแนวตั้งพร้อมระยะห่างภายในที่เหมาะสม ด้านขวาใช้พื้นที่ประมาณ 45% ของหน้า โดยมีแผงภาพประกอบ คอลัมน์ด้านซ้ายจัดชิดซ้าย (ไม่ใช่จัดกึ่งกลาง) เพื่อยึดหน้าเว็บไว้กับแกนการอ่าน ด้านล่างของหน้าแรก หน้าเว็บเป็นแถบสีครีมเต็มความกว้างเพียงแถบเดียว โดยมีลิงก์อยู่ตรงกลางในส่วนท้าย ไม่มีตารางการ์ด ส่วนแสดงคุณสมบัติ หรือแถบสลับบนหน้าแรก หน้าแรกเป็นเพียงหน้าเดียว ความหนาแน่นของเนื้อหาต่ำโดยเจตนา: หัวข้อหลักหนึ่งหัวข้อ ประโยคเดียว ปุ่มหนึ่งปุ่ม รูปภาพหนึ่งรูป หน้าเว็บนี้เป็นหน้าปก ไม่ใช่แดชบอร์ด
ภาพประกอบเป็นแบบบทความและเป็นตอนๆ ไม่ใช่แบบเป็นระบบ หน้าหลักมีภาพวาดด้วยมือเพียงภาพเดียว (ดอกไม้สีเขียว มือที่เป็นรูปทรงเรขาคณิต เส้นกลุ่มดาว) ในสไตล์ที่ดูหลวมๆ และค่อนข้างเรียบง่าย ภาพประกอบดูเหมือนงานที่ได้รับมอบหมายและเปลี่ยนแปลงไปตามฤดูกาล มากกว่าจะเป็นภาพจากคลังภาพถาวร ไม่มีภาพถ่ายบนหน้าหลัก ไม่มีไอคอนบนหน้าหลัก ทุกอย่างทำด้วยโลโก้ที่เป็นข้อความและข้อความเท่านั้น ภาษาภาพเน้นที่ข้อความเป็นหลัก โดยมีภาพประกอบทำหน้าที่เป็นเครื่องหมายวรรคตอน
จานสี
เป็นกลาง
- Newsprint Cream
#f7f4ed— พื้นหลังของหน้าเว็บ พื้นหลังหน้าต่างหลัก และพื้นหลังของส่วนต่างๆ ใช้โทนสีอบอุ่นออกครีมเล็กน้อย ซึ่งทำให้รู้สึกเหมือนเป็นอินเทอร์เฟซที่พิมพ์ออกมามากกว่าอินเทอร์เฟซดิจิทัล - Paper White
#ffffff— พื้นผิวการ์ด แผงนูน ช่องกรอกแบบฟอร์ม และพื้นผิวใดๆ ที่จำเป็นต้องแยกออกจากพื้นหลังสีครีม - Ink
#242424— ข้อความหลัก, ลิงก์, หัวข้อ - สีโทนอุ่นกว่าสีดำสนิทเล็กน้อย ดูดีบนพื้นหลังสีครีม - Body Gray
#333333— สีข้อความรองและสีพื้นหน้าเริ่มต้นจะถูกใช้ในกรณีที่ต้องการสีที่อ่อนกว่าสีหมึกเล็กน้อยโดยไม่ทำให้ความคมชัดลดลง - Button Black
#191919— สามารถใช้สีกลางสำหรับองค์ประกอบ UI รอง เส้นแบ่ง และป้ายกำกับที่ไม่เด่นชัดได้ แต่ไม่ควรใช้เป็นสีหลักสำหรับปุ่มกระตุ้นการดำเนินการ (Call to Action) - Marginalia Gray
#6b6b6b— รองรับสีกลางสำหรับ UI รอง เส้นแบ่ง และป้ายกำกับที่ไม่ฉูดฉาด
การจัดพิมพ์
จาก 13 เป็น 120 พิกเซล · 5 ขั้นตอน
- medium-content-sans-serif-font — ทดแทน: Inter · โครงร่าง 400 · ฟอนต์ medium-content-sans-serif - พบในข้อมูลที่ดึงมาได้ แต่ไม่ได้ถูกอธิบายไว้โดย AI
- GT Super — ทดแทน: Playfair Display · โครงร่าง 400 · หัวข้อและเนื้อหาหลักใช้แบบอักษรซีริฟแบบเปลี่ยนผ่านที่ใช้ในหนังสือ มีขนาดใหญ่มาก และมีระยะห่างระหว่างตัวอักษรแคบมาก โดยมีระยะห่างระหว่างบรรทัด 0.83 การเลือกใช้ความหนา 400 (ไม่ใช่ตัวหนา) ที่ขนาด 120 พิกเซล เป็นคุณลักษณะเด่นอย่างหนึ่ง นั่นคือ รูปทรงของตัวอักษร ไม่ใช่ความหนาของตัวอักษร ระยะห่างระหว่างตัวอักษรที่แคบช่วยลดช่องว่างทางสายตา ทำให้ "เรื่องราวและความคิดของมนุษย์" รู้สึกเหมือนเป็นกลุ่มตัวอักษรที่สอดคล้องกัน
- Söhne — ทดแทน: Inter · โครงร่าง 400 · แบบอักษร UI sans-serif ใช้สำหรับการนำทาง ปุ่ม หัวข้อย่อย และชื่อเรื่องขนาดเล็ก ช่วงขนาด 13–14 พิกเซลใช้สำหรับป้ายกำกับและปุ่มนำทาง และ 20–22 พิกเซลใช้สำหรับหัวข้อย่อยและข้อความเสริมภายในชื่อเรื่อง แบบอักษร sans-serif ที่สะอาดตาและมีสัดส่วนที่เป็นธรรมชาติ อ่านง่ายในขนาดเล็ก และไม่รบกวนสายตาในขนาดใหญ่
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | เฉลี่ย |
| ขั้นตอนพื้นฐาน | 16-24px |
| รัศมีปุ่ม | 9999px |
| รัศมีการ์ด | 0px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 64px |
| ความกว้างของหน้า | 1200px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Medium และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Steep — การวิเคราะห์แบบอักษร Serif บนกระดาษอุ่น
- Newformcap — บทบรรณาธิการหนังสือพิมพ์ในห้องแต่งตัว
- Claude — สิ่งประดิษฐ์ที่พิมพ์ลงบนกระดาษหนังอุ่นๆ—หมึกบนกระดาษกระดูก ดินเหนียวเป็นเพียงสีสันเดียวที่แทรกอยู่
- 11x– Digital workers — ภาพตัดต่อสไตล์ภาพยนตร์ที่ดูรกร้างว่างเปล่า—ภาพถ่ายพาโนรามาของภูมิประเทศที่ตัดกับพาดหัวข่าวตัวอักษรใหญ่แบบมีเชิงที่อ่านแล้วเหมือนหน้าปกนิตยสารหรูหรา
- Revolut — ผลงานบรรณาธิการขาวดำที่สร้างจากภาพถ่ายก้อนเมฆ—หมึกสีขาว กระดุมแบบกล่องยา และแถบสีฟ้าเพียงเส้นเดียวในโลกสีเทา
- Scheduling — หมึกพิมพ์บรรณาธิการบนกระดาษสีครีม
- Titan — คลังภาพขาวดำโทนสีอบอุ่น
- Programa — สตูดิโอออกแบบของสวิสในช่วงกลางวัน ผนังสีขาวสว่างไสวด้วยโคมไฟตั้งโต๊ะสีเหลืองเพียงดวงเดียว ทุกอย่างเป็นโทนสีเทาจนกระทั่งปุ่ม ไอคอน หรือของตกแต่งชิ้นใดชิ้นหนึ่งดึงดูดสายตา และสีเหลืองนั้นเองก็เป็นจุดเด่นที่กำหนดภาพรวมของห้องทั้งหมด
- Sana Agents — ประกายสีเขียวมะนาวบนพื้นหลังสีขาวในภาพถ่ายเชิงบรรณาธิการ
- Visual — งานพิมพ์ใต้ดินแนวบรรณาธิการที่อบอุ่น กระดาษสีครีม โปสเตอร์แบบมีเชิง ตัวอักษรย่อขาวดำที่ขอบกระดาษ ปากกาเน้นข้อความสีเหลืองหนึ่งด้าม
- Midday — โบรชัวร์สำหรับบรรณาธิการ พิมพ์บนกระดาษหนังลูกวัว - หัวข้อแบบมีเชิงขนาด 72 พิกเซล บนพื้นหลังสีหินอ่อนโทนอบอุ่น เนื้อหาแบบไม่มีเชิงพร้อมเว้นวรรค ปุ่มควบคุมรูปทรงแคปซูล ไม่มีเงา
- Chat for impact — คลินิกสีเขียวเข้มเหมือนป่า พร้อมห้องต่างๆ สีพาสเทล