Medium
кремово-біла газета в золоту годину
Medium функціонує як літературний читальний зал, перенесений до Інтернету: тепле кремове тло (#f7f4ed) замінює стерильний білий колір, характерний для SaaS, завдяки чому довгі тексти відчуваються як друкована сторінка. Візуальна система агресивно монохромна — майже всі поверхні інтерфейсу користувача, текст і межі знаходяться у вузькій смузі теплих сірих відтінків від #242424 до #6b6b6b — тому увага читача повністю зосереджена на контенті. Єдиним фірмовим жестом є заголовок із засічками (GT Super, 120px, товщина 400, міжлітерний інтервал -0.055em), навмисний антитрендовий вибір: перехідний книжковий шрифт із засічками в масштабі для відображення, ледь помітний, а не сміливий книги, а чи не програмне забезпечення». Кнопки є повними «пігулками» майже чорного кольору — єдине суцільне чорнило на сторінці.
Головна сторінка в два стовпці: зліва ~55% розташовані заголовок, підтекст та заклик до дії вертикально з великим внутрішнім інтервалом; праворуч ~45% знаходиться панель із ілюстраціями. Лівий стовпець вирівняний лівим краєм (а не центром), що прив'язує сторінку до осі читання. Під головною сторінкою сторінка є єдиною смугою кремового кольору на всю ширину з центрованими посиланнями в нижньому колонтитулі. Ніяких карткових сіток, розділів з функціями, смуг, що чергуються, на головній сторінці — головна сторінка І Є сторінка. Щільність контенту навмисне низька: один заголовок, одна пропозиція, одна кнопка, одне зображення. Сторінка – це обкладинка, а не панель керування.
Ілюстрації носять редакційний та епізодичний характер, а не систематичний. На головній сторінці використовується одна намальована від руки ілюстрація (зелена квітка, геометрична рука, лінії сузір'їв) у вільній, трохи наївній манері. Ілюстрації виглядають як роботи на замовлення, які змінюються в залежності від сезону, а не як робота з постійної бібліотеки. На домашній сторінці немає фотографій. Іконки на головній сторінці відсутні - всю роботу виконують текстовий логотип та текст. Візуальна мова в основному орієнтована на текст, а ілюстрації є пунктуацією.
Палітра
Нейтральні
- 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 — Клініка лісової зелені з кімнатами пастельних тонів