Superhuman
алтын сааттык редакциялык панель
Супер адам редакциялык сүрөткө тартуу менен программалык интерфейстин кесилишинде жайгашкан — жылуу, пергамент сымал полотно (эч качан таза ак эмес) кочкул кызыл бренд элементтерин жана ачык кызгылт көк түстөгү акценттерди камтыйт. 460 шрифт менен жайгаштырылган аталыштар кыйкыруунун ордуна шыбырап, толук беттеги кинематографиялык сүрөткө тартууга мүмкүндүк берет, ал эми тунук продукт интерфейсинин карталары сүрөттөрдүн үстүндө айнек сыяктуу калкып жүрөт. Палитра көпчүлүк учурда тынч жана редакциялык бойдон калат: каймак түстөгү беттер, көмүр түстөгү текст, жылуу-боз чек аралар жана элементтердин ортосундагы кең аралык, түс атайылап бренддин тыныш белгилери үчүн сакталган — бир кочкул кызыл чакырык, кочкул кызыл шилтемелер, ачык сирень түстүү кошумча баскыч. Система интерфейс беттериндеги күчтүү көлөкөлөрдү жана градиенттерди атайылап болтурбайт; Тереңдикке катмарлуу сүрөткө тартуу жана аталыштагы назик фондук бүдөмүктүк аркылуу жетишилет, үстүнкү катмарды көбөйтүү эффектиси аркылуу эмес.
Негизги элемент - борборлоштурулган аталышы (48-64 пиксель/460) жана шараптын сүрөтү менен толтурулган бир гана чакырык менен толук көлөмдөгү сүрөт, ал эми сол жана оң четтеринде калкып жүргөн тунук продукт UI карталары жайгашкан. Негизги элементтин астында ак тилкелүү логотип тилкеси (ар бир катарда 6 уяча, максималдуу туурасы чектелген), андан кийин пергамент кенепте ак карта беттери бар өтмөк бөлүгү жайгашкан. Кара бирюза түстүү тилке барактын үчтөн эки бөлүгүндө ритмди бузат - толук туурасы, эки тилке (сүрөт сол жакта, текст оң жакта) - жылдырганда жалгыз тоналдык контрастты түзөт. Андан кийин градиенттүү атмосфералык тилке пайда болот. Бөлүмдөрдүн ортосундагы вертикалдык аралык 64-96 пиксель. Мазмундун максималдуу туурасы борборлоштурулган ~1200 пиксель, негизги элемент жана кара тилке көрүү терезесинин толук туурасын камтыйт. Навигация - бүдөмүк фону бар бир гана бекитилген баштык; каптал тилкеси жок, мега меню жок. Төмөнкү колонтитул - шилтемелердин көп тилкелүү жайгашуусу бар толук көлөмдөгү бургундия баракчасы. Жалпы ритм: негизги кадр → тынч ак/каймак түстүү мазмун → негизги сүрөтү бар кара сызык → атмосфералык градиент → бордо түстүү колонтитул, редакциялык темпин түзүү үчүн жарык жана кара сызыктарды алмаштырып турат.
Негизги визуалдык элемент - кинематографиялык фотография: ачык асмандын фонундагы толук көлөмдөгү портрет фокустук чекит катары кызмат кылат, экинчи атмосфералык тилке барактын ылдый жагында жайгашкан. Сүрөт жылуу түстө, бир аз басаңдатылган жана профиль боюнча тартылган, алтын саатты эске салат, бул корпоративдик эмес, редакциялык сезимди жаратат. Тунук геометриялык тик бурчтуктар жана кол менен жазылган жазуулары бар кара тилке ойго баткан адамдын сүрөтүнүн үстүнө жайгаштырылган - бир сүрөттүн ордуна беттердин коллажы. Колдонуучу интерфейси өзүнчө скриншоттор катары эмес, түздөн-түз сүрөттүн үстүнө жайгаштырылган калкып жүрүүчү айнек карталар катары көрсөтүлгөн. Градиенттүү атмосфералык тилкеден башка эч кандай скриншот иллюстрациялары, 3D рендерлери жана абстракттуу декоративдик формалар жок. Сүрөтчөлөр минималисттик монохром сызык сүрөтчөлөрү, туурасы ~16-20 пиксел, бир туурасы 460 пункттуу тексттин салмагына туура келет.
Түстөр палитрасы
Бренд
- Midnight Wine
#421d24— Негизги аракет баскычтары, баннер жарнамасы жана төмөнкү колонтитул жылуу, дээрлик кара бургундия түсүндөй сезилет, ал кызылга караганда сыяга көбүрөөк окшош, түстөр палитрасын ашыкча күчсүздөнтпөстөн бекемдейт. - Royal Violet
#714cb6— Кызгылт көк түс шилтемелерди, тегдерди жана кыска сөз айкаштарын белгилөө үчүн колдонулат. Аны аракетке чакыруу үчүн негизги түс катары колдонбоо керек.
Нейтралдуу
- Lilac Mist
#d4c7ff— Экинчилик бетти толтуруу, жарык сүрөтчөлөрү жана арбак баскычтарынын фондору бренддин стилин кыйытып турган күңүрт кочкул кызыл түскө ээ, ал өзүнө ашыкча көңүл бурдурбастан. - Deep Lagoon
#0c4243— Негизги баяндоо элементи катары колдонулган тилкенин караңгы фоны системадагы жалгыз караңгы бет болуп саналат жана анын үстүнө геометриялык оймо-чийме менен айкалышкан. - Warm Parchment
#f2f0eb— Барактын жумушчу бети басымдуулук кылган элемент болуп саналат; жылуу каймак түсү ак түстүн ордуна негиз катары колдонулат, бул бүтүндөй системага редакциялык жылуулук тартуулайт. - Soft Mist
#e3e3e2— Майда чек аралар, карталардын контурлары, бөлүүчү сызыктар — пергамент менен айкалышкан, бирок четтерин даана аныктаган жылуу, ачык боз түс. - Ink Charcoal
#292827— Негизги текст, аталыштар, сүрөтчөлөрдүн контурлары - жылуу, дээрлик кара түс, кагазда сыя сыяктуу сезилет, эч качан муздак болбойт #000 - Stone Gray
#666666— Экинчи даражадагы негизги текст, кошумча тексттер, байкалбаган сүрөттөмөлөр - бир орто боз түс, негизги текст менен эч качан атаандашпаш үчүн сейрек колдонулат.
Типография
12ден 64 пикселге чейин · 8 кадам
- Super Sans VF — алмаштыруу: Inter (closest open equivalent for variable weight range) · контурлар 460, 500, 540, 600, 700 · Бүтүндөй системада бир гана шрифт. Октук өзгөрмөлөр 460тан (бардык чоң аталыштар үчүн кол тамга, бир аз кыскартылган шрифт) 540ка (басым жасалган негизги текст) жана 700гө (кичинекей, калың жазуулар) чейин диапазонду камтыйт. Атайын иштелип чыккан VF 460 салмактагы аталыштарды башаламан эмес, атайылап жасалгандай кылып көрсөтөт — 48-64 пиксель өлчөмүндө тамгалардын ортосундагы аралык тар болгондо, "бир аз кыскартылган" эффект ичке эмес, ишенимдүү катары кабыл алынат.
Интервалдар жана форма
| Максаты | Мааниси |
|---|---|
| Тыгыздык | тыгыз |
| Негизги кадам | 8px |
| Баскычтын радиусу | 16px |
| Картанын радиусу | 16px |
| Көлөкөлөр | көлөкөлөрдүн ордуна чек аралар жок |
| Бөлүмдөрдүн ортосунда | 64-96px |
| Барактын туурасы | 1200px |
Жасалма интеллект сиздин веб-сайтыңызды Superhuman стилинде куруп, аны толтурат
- Instagram, TikTok, Facebook шилтемелери аркылуу өнүмдөр жана посттор менен толтуруңуз.
- Эски сайтыңыздан мазмунду өткөрүп бериңиз — жөн гана даректи көрсөтүңүз.
- Эң мыкты кыймылдаткычтагы заманбап дизайн: серверди рендеринг жана SEO оптималдаштыруу менен React ( Next.js).
- Издөө натыйжалары жана нейрон тармактарынын сунуштары үчүн толугу менен автоматташтырылган SEO оптималдаштыруу.
Окшош стилдер
- AI for Business — Жылуу боз түстөгү бруталисттик редакциянын көргөзмө залы
- Jeton — Жылуу мрамордогу финтех тууралуу редакциялык макала
- Airtable — Ар кандай түстөр менен белгиленген бөлүмдөрү бар жайлуу семинар
- Osmo — Боз бетондогу Куруучулар музейи
- Linktr — Редакциялык плакаттар момпосуй сыяктуу тизилип коюлган. Вебсайт түстүү блоктор менен иштелип чыккан, ачык жашыл түстөгү аталыштар кобальт-көк дубалдардын фонунда, ал эми ак таблетка сымал навигация элементтери бордо талааларынын үстүндө калкып жүрөт.
- Outsource Consultants — Сөөк кагазга басылган чоң форматтагы архитектуралык барак. Монографиялык эстетика, мында индиго түсүнүн бир гана жаркыраган жери жылуу, типографиялык максималисттик торчону үзгүлтүккө учуратат.
- Streamtime — Тактильдүү чыгармачыл маанай тактасы - Дизайнердик скрапбукинг үстөлү
- Switch-Lit — Каймак кагазга сыя менен басылган редакциялык торчо
- HubSpot — Жылуу каймак түстөгү кагаз, бир гана кызгылт сары түстөгү акцент менен. HubSpot калың кагазга басылган дизайнердик журналга окшош — серифтик аталыштар, жылуу каймак түстөгү баракчалар жана эң маанилүү пункттарды гана баса белгилеген бир гана оттуу кызгылт сары түстөгү акцент.
- Granola — Жылуу пергаментке жазылган талаа жазуулары — Гранола күн нуру тийген столдо ачылган эскирген Молескин дептериндей окулат: сериф жазуулары бекемдик сезимин берет, өсүмдүк негизиндеги сыя сыяктуу органикалык жашыл түстөгү акценттер жана открыткалардын четтериндеги кол менен жазылган жазууларга окшош майда сызыктар.
- Secure — Европалык кафедеги күндүзгү жумшак абада болгон баарлашуу видео чалуунун жылуу жана стилдүү вариантына окшош, мында serif шрифтиндеги жаңылыктар техникалык продукт баракчасындай эмес, ойлонулган журнал макаласындай окулат.
- Mockups made easy — Ак кагаздагы редакциялык дизайн студиясы