Medium

крэмава-белая газета ў залатую гадзіну

Medium функцыянуе як літаратурная чытальная зала, перанесеная ў вэб: цёплы крэмавы фон (#f7f4ed) замяняе стэрыльны белы колер, характэрны для SaaS, дзякуючы чаму доўгія тэксты адчуваюцца як друкаваная старонка. Візуальная сістэма агрэсіўна манахромная - амаль усе паверхні карыстацкага інтэрфейсу, тэкст і межы знаходзяцца ў вузкай паласе цёплых шэрых адценняў ад #242424 да #6b6b6b - таму ўвага чытача цалкам засяроджана на кантэнце. Адзіным фірмовым жэстам з'яўляецца загаловак з засечкамі (GT Super, 120px, таўшчыня 400, міжлітарны інтэрвал -0.055em), наўмысны антытрэндавы выбар: пераходны кніжны шрыфт з засечкамі ў маштабе для адлюстравання, ледзь прыкметны, а не смелы геметрычны кнігі, а не праграмнае забеспячэнне». Кнопкі ўяўляюць сабой поўныя "пілюлі" амаль чорнага колеру - адзіныя суцэльныя чарнілы на старонцы.

Галоўная старонка ў два слупкі: злева ~55% размешчаны загаловак, падтэкст і заклік да дзеяння вертыкальна з вялікім унутраным інтэрвалам; справа ~45% знаходзіцца панэль з ілюстрацыямі. Левы слупок выраўнаваны па левым краі (а не па цэнтры), што прывязвае старонку да восі чытання. Пад галоўнай старонкай старонка ўяўляе сабой адзіную паласу крэмавага колеру ва ўсю шырыню з цэнтраванымі спасылкамі ў ніжнім калантытуле. Ніякіх картачных сетак, раздзелаў з функцыямі, якія чаргуюцца палос на галоўнай старонцы - галоўная старонка І ЁСЦЬ старонка. Шчыльнасць кантэнту наўмысна нізкая: адзін загаловак, адна прапанова, адна кнопка, адна выява. Старонка - гэта вокладка, а не панэль кіравання.

Ілюстрацыі носяць рэдакцыйны і эпізадычны характар, а не сістэматычны. На галоўнай старонцы выкарыстоўваецца адна намаляваная ад рукі ілюстрацыя (зялёная кветка, геаметрычная рука, лініі сузор'яў) у свабоднай, злёгку наіўнай манеры. Ілюстрацыі выглядаюць як заказныя работы, якія мяняюцца ў залежнасці ад сезона, а не як работа з пастаяннай бібліятэкі. На галоўнай старонцы няма фатаграфій. Абразкі на галоўнай старонцы адсутнічаюць - усю працу выконваюць тэкставы лагатып і тэкст. Візуальная мова ў асноўным арыентаваная на тэкст, а ілюстрацыі служаць пунктуацыяй.

Чысты SaaS Рэдакцыйны Манахром

https://medium.com

Палітра

Нейтральныя

Newsprint Cream #f7f4ed — Палатно старонкі, фон галоўнага акна, фон частак - цёплае, злёгку крэмавае адценне, які стварае адчуванне друкаванага, а не лічбавага інтэрфейсу.
Paper White #ffffff — Паверхні карт, якія выступаюць панэлі, палі ўводу формаў і любыя паверхні, якія неабходна аддзяліць ад крэмавага палатна.
Ink #242424 — Асноўны тэкст, тэкст, спасылкі, загалоўкі - ледзь цяплей чыста чорнага, добра глядзіцца на крэмавым фоне.
Body Gray #333333 — Дадатковы колер тэксту і асноўны колер па змаўчанні выкарыстоўваюцца там, дзе патрабуецца колер крыху святлей, чым чарнільны, без страты кантрасту.
Button Black #191919 — Падтрымліваецца нейтральны колер для другарадных элементаў карыстацкага інтэрфейсу, падзельнікаў і прыглушаных подпісаў. Не варта прызначаць яго асноўным колерам для заклікаў да дзеяння.
Marginalia Gray #6b6b6b — Падтрымка нейтральнага колеру для дадатковага карыстацкага інтэрфейсу, падзельнікаў і прыглушаных пазнак.

Друкарня

ад 13 да 120px · 5 прыступак

medium-content-sans-serif-font — замена: Inter · напісання 400 · шрыфт medium-content-sans-serif - знойдзены ў вынятых дадзеных, але не апісаны ІІ.
GT Super — замена: Playfair Display · напісання 400 · Загалоўкі і асноўны тэкст - пераходны кніжны шрыфт з засечкамі ў экстрэмальным маштабе з вузкай міжлітарнай адлегласцю і міжрадковым інтэрвалам 0,83. Выбар таўшчыні 400 (не тоўсты) у 120px - гэта фірмовы знак: працу выконваюць формы літар, а не таўшчыня. Адмоўная міжлітарная адлегласць звужае аптычныя зазоры, дзякуючы чаму «Чалавечыя гісторыі і ідэі» успрымаюцца як адзіны друкарскі блок.
Söhne — замена: Inter · напісання 400 · Шрыфт UI sans-serif выкарыстоўваецца для навігацыі, кнопак, падзагалоўкаў і невялікіх загалоўкаў. Дыяпазон 13-14px прызначаны для пазнак навігацыі і кнопак; 20-22px - для падзагалоўкаў і другараднага тэксту ў загалоўку. Чысты гратэск з гуманістычнымі прапорцыямі - чытэльны пры малых памерах, ненадакучлівы пры вялікіх.

Інтэрвалы і форма

Прызначэнне	Значэнне
Шчыльнасць	сярэдняя
Базавы крок	16-24px
Радыус кнопак	9999px
Радыус картак	0px
Цені	не - межы замест ценяў
Паміж секцыямі	64px
Шырыня старонкі	1200px

ІІ збярэ ваш сайт у стылі Medium і напоўніць яго

Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.

Стварыць сайт у гэтым стылі

Падобныя стылі

Steep — Аналітыка шрыфтоў з засечкамі на паперы цёплага адцення
Newformcap — Рэдакцыйная газета ў грымёрцы
Claude — Надрукаваны на цёплым пергаменце артэфакт - чарніла на касцяной паперы, гліна як адзінае каляровае дыханне.
11x– Digital workers — Кінематаграфічная рэдакцыйная пустыня - панарамныя фатаграфіі мясцовасці на фоне манументальных загалоўкаў з засечкамі, дзе старонка чытаецца як разварот раскошнага часопіса
Revolut — Манахромная рэдакцыйная праца, заснаваная на фатаграфіі аблокаў - белыя чарнілы, гузікі-таблеткі, адна сіняя палоска колеру ў свеце, у астатнім выкананым у шэрых танах
Scheduling — Рэдакцыйная фарба на крэмавай паперы
Titan — архіў у цёплых танах манахром
Programa — Швейцарская дызайн-студыя апоўдні. Белая сцяна галерэі асветлена адзінай жоўтай настольнай лямпай - усё ў адценнях шэрага, пакуль якая-небудзь кнопка, значок або акцэнт не прыцягнуць увагу, і тады гэты адзіны жоўты акцэнт вызначае ўвесь пакой
Sana Agents — Лаймавая іскра на белым фоне ў рэдакцыйным артыкуле
Visual — Цёплы рэдакцыйны самвыд. Крэмавая папера, плакаты з засечкамі, манахромныя нататкі на палях, адзін жоўты маркер
Midday — Рэдакцыйная брашура на пергаменце - загаловак з засечкамі 72px на фоне цёплага каменнага фону, асноўны тэкст без засечак з інтэрвалам, элементы кіравання ў форме таблетак, адсутнасць ценяў
Chat for impact — Клініка лясной зеляніны з пакоямі пастэльных тонаў