Medium
алтан цагт цөцгийтэй цагаан сонин
Медиум нь вэб рүү шилжүүлсэн утга зохиолын уншлагын танхим шиг ажилладаг: дулаан, өтгөн дэвсгэр (#f7f4ed) нь SaaS-ийн ердийн ариутгасан цагаан өнгийг орлож, урт текстийг хэвлэмэл хуудас шиг мэдрүүлдэг. Харааны систем нь түрэмгий монохромтой - бараг бүх UI гадаргуу, текст, хүрээ нь #242424-ээс #6b6b6b хүртэлх дулаан саарал өнгийн нарийн зурваст байрладаг тул уншигчийн анхаарал бүрэн агуулгад төвлөрдөг. Цорын ганц гарын үсэг бол serif гарчиг (GT Super, 120px, жин 400, үсгийн зай -0.055em) бөгөөд энэ нь чиг хандлагын эсрэг санаатай сонголт юм: дэлгэцэнд зориулж масштабтай, тод геометрийн sans-serif биш харин бараг мэдэгдэхүйц шилжилтийн номын serif фонт нь "Бид програм хангамж биш ном хэвлүүлдэг" гэсэн дохио өгдөг. Товчлуурууд нь бараг хар өнгийн дүүрэн "эм" бөгөөд энэ нь хуудсан дээрх цорын ганц хатуу бэх юм.
Нүүр хуудас нь хоёр баганатай: зүүн тал нь хуудасны зайны ~55%-ийг эзэлдэг бөгөөд гарчиг, дэд текст, үйлдэл хийхийг уриалсан хэсгүүд нь босоо байрлалтай, дотор зай ихтэй; баруун тал нь хуудасны зайны ~45%-ийг эзэлдэг бөгөөд зураг чимэглэлийн самбартай. Зүүн багана нь зүүн тийш зэрэгцсэн (төвд байрлуулаагүй) бөгөөд хуудсыг унших тэнхлэгт бэхэлсэн. Нүүр хуудасны доор хуудас нь хөл хэсэгт төвлөрсөн холбоос бүхий дан, бүтэн өргөнтэй, цөцгий өнгөтэй тууз юм. Нүүр хуудсан дээр картын тор, онцлог хэсэг эсвэл ээлжлэн зураас байхгүй - нүүр хуудас БОЛ хуудас. Агуулгын нягтрал санаатайгаар бага байна: нэг гарчиг, нэг өгүүлбэр, нэг товчлуур, нэг зураг. Хуудас нь хавтас болохоос хяналтын самбар биш.
Зураг чимэглэлүүд нь системчилсэн бус, харин редакцийн болон хэсэгчилсэн хэлбэртэй байна. Үндсэн хуудсанд гараар зурсан ганц зураг (ногоон цэцэг, геометрийн гар, одны зураас) нь сул, бага зэрэг гэнэн хэв маягаар харагдаж байна. Зураг чимэглэлүүд нь байнгын номын сангаас биш, улирлын чанартай өөрчлөгддөг захиалгат бүтээлүүд шиг харагдаж байна. Үндсэн хуудсан дээр гэрэл зураг байхгүй. Үндсэн хуудсан дээр дүрс байхгүй - бүх ажлыг текстийн лого болон текст гүйцэтгэдэг. Харааны хэл нь голчлон текст рүү чиглэсэн бөгөөд зураг чимэглэл нь цэг таслалын үүрэг гүйцэтгэдэг.
Палетт
Төвийг сахисан
- Newsprint Cream
#f7f4ed— Хуудасны зураг, үндсэн цонхны дэвсгэр болон хэсгийн дэвсгэр нь дулаан, бага зэрэг өтгөн өнгөтэй бөгөөд дижитал интерфэйсээс илүү хэвлэмэл интерфэйсийн мэдрэмжийг төрүүлдэг. - Paper White
#ffffff— Картын гадаргуу, өргөгдсөн самбар, маягтын оруулгын талбарууд болон цөцгий өнгийн зотон даавуунаас тусгаарлах шаардлагатай аливаа гадаргуу. - Ink
#242424— Үндсэн текст, үндсэн текст, холбоосууд, гарчиг - цэвэр хар өнгөнөөс арай дулаан, цөцгий дэвсгэр дээр сайхан харагддаг. - Body Gray
#333333— Хоёрдогч текстийн өнгө болон анхдагч урд өнгийг бэхний өнгөнөөс арай цайвар өнгө шаардлагатай үед ашигладаг бөгөөд тодосгогч чанарыг алдагдуулахгүйгээр ашигладаг. - Button Black
#191919— Хоёрдогч UI элементүүд, хуваагч болон дуугүй шошгоны хувьд төвийг сахисан өнгө дэмжигддэг. Үүнийг үйлдэл хийх дуудлагын үндсэн өнгө болгон ашиглаж болохгүй. - Marginalia Gray
#6b6b6b— Хоёрдогч хэрэглэгчийн интерфэйс, хуваагч болон дуугүй шошгоны төвийг сахисан өнгөний дэмжлэг.
Типографи
13-аас 120 пиксел хүртэл · 5 алхам
- medium-content-sans-serif-font — солих: Inter · тоймууд 400 · дунд зэргийн агуулгатай, serifгүй фонт - гаргаж авсан өгөгдөлд байдаг боловч хиймэл оюун ухаанаар тайлбарлагдаагүй.
- GT Super — солих: Playfair Display · тоймууд 400 · Гарчиг болон үндсэн текст нь маш нягт үсгийн зайтай, мөр хоорондын зай нь 0.83 байх шилжилтийн номын сериф фонт юм. 120 пикселийн нягтралтай 400 (тод биш) жинтэй фонтыг сонгох нь онцлог шинж чанар юм: жин биш, харин үсгийн хэлбэрүүд нь ажлыг гүйцэтгэдэг. Сөрөг үсгийн зай нь оптик зайг нарийсгаж, "Хүний түүх ба санаанууд"-ыг нэгдмэл хэвлэлийн блок мэт сэтгэгдэл төрүүлдэг.
- Söhne — солих: Inter · тоймууд 400 · Хэрэглэгчийн интерфэйсийн sans-serif фонтыг навигаци, товчлуур, дэд гарчиг болон жижиг гарчигуудад ашигладаг. 13–14 пикселийн хүрээ нь навигацийн шошго болон товчлууруудад зориулагдсан; 20–22 пиксел нь гарчиг доторх дэд гарчиг болон хоёрдогч текстэд зориулагдсан. Хүнлэг харьцаатай цэвэр sans-serif фонтыг жижиг хэмжээтэй үед уншигдахуйц, том хэмжээтэй үед анзаарагдахгүй.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | дундаж |
| Үндсэн алхам | 16-24px |
| Товчлуурын радиус | 9999px |
| Картын радиус | 0px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 64px |
| Хуудасны өргөн | 1200px |
Хиймэл оюун ухаан таны вэбсайтыг Medium хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- Steep — Халуун цаасан дээрх Сериф фонтын шинжилгээ
- Newformcap — Хувцас солих өрөөнд байгаа редакцийн сонин
- Claude — Дулаан илгэн дээр хэвлэсэн эд өлгийн зүйл - ясны цаасан дээр бэх, өнгөний цорын ганц амьсгал нь шавар юм
- 11x– Digital workers — Кино урлагийн редакцийн цөл газар—тансаг зэрэглэлийн сэтгүүлийн хэвлэгдсэн мэт гайхалтай сериф гарчигтай харьцуулсан газрын ландшафтын панорама зургууд
- Revolut — Үүлсийн гэрэл зураг дээр үндэслэсэн монохром редакцийн бүтээл - цагаан бэх, эмний хайрцагны товчлуурууд, саарал өнгийн ертөнц дэх ганц цэнхэр судал.
- Scheduling — Цөцгийтэй цаасан дээрх редакцийн бэх
- Titan — дулаан өнгөтэй монохром архив
- Programa — Үд дундын Швейцарийн дизайны студи. Цагаан галерейн ханыг ганц шар ширээний чийдэн гэрэлтүүлж байна. Бүх зүйл саарал өнгөтэй харагдаж, товчлуур, дүрс эсвэл чимэглэл нүдэнд тусах хүртэл, дараа нь тэр ганц шар чимэглэл өрөөг бүхэлд нь тодорхойлно.
- Sana Agents — Редакцийн хуудсан дээрх цагаан дэвсгэр дээр шохойн гялалзсан зураг
- Visual — Дулаан редакцийн самиздат. Цөцгий өнгийн цаас, сериф зурагт хуудас, монохром захидал, нэг шар өнгийн маркер.
- Midday — Илгэн дээрх редакцийн товхимол - дулаан чулуун дэвсгэр дээр 72 пикселийн сериф гарчиг, зайтай sans-serif үндсэн хуулбар, эм хэлбэртэй удирдлага, сүүдэргүй
- Chat for impact — Пастел өнгийн өрөөнүүдтэй ойн ногоон эмнэлэг