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 — Ак кәгазьдә редакция дизайн студиясе