Peak Design
Сцяна галерэі, часткова асветленая
Peak Design - гэта камерцыйны вопыт галерэйнага ўзроўню: амаль манахромнае палатно, дзе ўсю працу выконваюць рэдакцыйная друкарка і прадметная фатаграфія. Сістэма чаргуе выразныя белыя паверхні і глыбокія амаль чорныя панэлі, ствараючы эфектныя падзеленыя макеты, дзе на адным баку размяшчаецца загаловак з засечкамі курсіўным шрыфтам, а на другім - поўнаэкранны малюнак тавару або ладу жыцця. Друкарня - гэта асноўны голас брэнда: высокі сціснуты дэкаратыўны шрыфт з засечкамі (у стылі Exposure) для загалоўкаў у спалучэнні з нейтральным гратэскавым шрыфтам (Geist) для карыстацкага інтэрфейсу і сціснутым шрыфтам без засечак (bryant) для надпісаў, броў. Інтэрфейс застаецца строгім: ніякіх храматычных элементаў карыстацкага інтэрфейсу, ніякіх дэкаратыўных градыентаў, ніякіх ценяў - толькі тонкія межы, два радыусу скруглення кутоў (4 і 8) і адзін чырвоны акцэнт, які выкарыстоўваецца толькі зрэдку для вылучэння. Кампаненты выглядаюць хутчэй прадуманымі, чым дэкараваны: тонкія падзельнікі, плоскія карткі тавараў, фільтры ў форме таблетак і нябачныя кнопкі, якія ўспрымаюцца як архітэктурныя анатацыі.
Часткі старонкі, якія займаюць усю шырыню экрана, чаргуюцца паміж белым і амаль чорным колерам; кожная частка займае ўсю шырыню вобласці прагляду без абмежаванняў па максімальнай шырыні на ўзроўні часткі. Змесціва ўнутры раздзелаў мае максімальную шырыню ~1440px і цэнтравана. Дамінуючы шаблон загалоўка - гэты падзел 50/50: тэкставы блок (бровы + загаловак + падтэкст + кнопкі) з аднаго боку, малюнак тавара або ладу жыцця, які займае ўсю шырыню экрана, з другога. Ніжэй лініі згіну сеткі тавараў выкарыстоўваюць 4 слупкі картак тавараў аднолькавай шырыні з вялікімі прамежкамі ў 24-32px. Панэлі фільтраў катэгорый размешчаны непасрэдна пад асноўнай навігацыяй у выглядзе гарызантальнага шэрагу «таблетак». Рытм частак вызначаецца чаргаваннем светлых/цёмных палос з вертыкальным водступам 80px паміж часткамі, ствараючы рытм рэдакцыйнага часопіса. Навігацыя ўяўляе сабой фіксаваную верхнюю панэль з тонкай паласой аб'яваў над ёй.
У візуальнай мове дамінуе прадметная фатаграфія: сумкі, рамяні і фотатэхніка сфатаграфаваны на чыста белым фоне без кантэксту паўсядзённага жыцця, асвятленне падсвятляе тэкстуру матэрыялу і дэталі фурнітуры. Выявы паўсядзённага жыцця з'яўляюцца толькі ў поўнаэкранных рэдакцыйных частках (напрыклад, рукі, якія трымаюць камеры па крузе) і займаюць усю шырыню вобласці прагляду з аднаго боку падзеленай панэлі. Выявы не маюць радыусу скруглення кутоў у кантэксце галоўнай выявы (прылягаюць да бакоў), а ў кантэксце картак — радыусу скруглення кутоў. Ніякіх ілюстрацый, ніякай абстрактнай графікі, ніякіх ілюстрацый абразкоў, акрамя функцыянальных абразкоў карыстацкага інтэрфейсу. Прадукт З'ЯЎЛЯЕЦЦА галоўным - фатаграфіі студыйнай якасці, з пастаянным ракурсам, пастаянным асвятленнем, пастаянным белым фонам, а карыстацкі інтэрфейс адыходзіць на другі план, дазваляючы аб'ектам гаварыць самім за сябе.
Палітра
Нейтральныя
- Carbon Ink
#1a211e— Асноўны тэкст, цёмныя бакавыя панэлі, асноўны тэкст, абразкі, рамкі на светлых паверхнях - амаль чорны колер, які служыць асновай для кожнага загалоўка і фармуе цёмныя фонавыя панэлі падзеленых частак. - Paper White
#ffffff— Лёгкая апорная паверхня для стварэння ненадакучлівага фону і падзелу раздзелаў. Не варта вылучаць яе як асноўны колер закліку да дзеяння. - True Black
#000000— Элементы з максімальным кантрастам: заліванне загалоўка на белым фоне, панэль аб'яваў, афармленне ніжняга калантытула, суцэльныя контуры абразкоў - размяшчаюцца там, дзе дызайн патрабуе найболей выразных ліній. - Obsidian
#0c0c0c— Глыбокія паверхні панэляў і накладанні малюнкаў - трохі мякчэй, чым сапраўдны чорны, выкарыстоўваюцца для цёмных участкаў, якія займаюць усю паверхню экрана, якія павінны адчувацца самавіта, але не рэзка, як плоскі чорны колер. - Fog
#eef1f0— Лёгкая апорная паверхня для стварэння ненадакучлівага фону і падзелу раздзелаў. Не варта вылучаць яе як асноўны колер закліку да дзеяння. - Mist
#e0e0e0— Падзяляльныя лініі, адключаныя станы, ледзь прыкметныя структурныя падзельнікі - сярэдне-светла-шэры колер, які вызначае межы паміж секцыямі на белым палатне.
Друкарня
ад 14 да 80px · 6 прыступак
- Geist — замена: Inter · напісання 400, 600, 700 · Асноўны тэкст, загалоўкі тавараў, апісанні, палі форм, тэкст спасылак, змест ніжняга калантытула. Таўшчыня шрыфта: 400 для асноўнага тэксту, 600 для вылучэння, 700 для назваў тавараў і важных убудаваных нататак. Нейтральны шрыфт Grotesque дазваляе шрыфтам Display Serif і condensed Sans адлюстроўваць фірмовы стыль, а шрыфт Geist адказвае за функцыянальнасць і чытальнасць.
- Exposure-style serif (Exposure-10) — замена: Playfair Display · напісання 400 · Загалоўкі для адлюстравання і асноўныя загалоўкі. Адзінарная таўшчыня (400) курсіўным шрыфтам з засечкамі стварае рэдакцыйную самавітасць - менавіта гэтыя словы задаюць тон брэнда, выкарыстоўваюцца эканомна на цёмных панэлях, якія займаюць усю шырыню старонкі, і ў пачатку ключавых частак. Шчыльная міжлітарная адлегласць (-0.025em) дазваляе буйным літарам выглядаць хутчэй стрымана, чым легкаважна.
- Bryant-style condensed sans (bryant) — замена: Druk Wide · напісання 700 · Пазнакі навігацыі, кнопкі фільтрацыі па катэгорыях, тэкст кнопак, "бровы", тэгі раздзелаў і дадатковыя загалоўкі. Сціснутыя загалоўныя літары са станоўчым міжлітарным інтэрвалам ствараюць індустрыяльны, падобны на этыкетку стыль – гэтыя словы ідэнтыфікуюць і інструктуюць, але ніколі не апісваюць.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | сярэдняя |
| Базавы крок | 24px |
| Радыус кнопак | 4px |
| Радыус картак | 8px |
| Цені | не - межы замест ценяў |
| Паміж секцыямі | 80px |
| Шырыня старонкі | 1440px |
ІІ збярэ ваш сайт у стылі Peak Design і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- Arsenijs Fabrica — Прыгажосць, уласцівая рэдакцыйным матэрыялам, раскрываецца пад святлом галерэйных лямпаў. Беласнежныя сцены галерэі, адзіны цёплы страбаскоп, які пульсуе аранжавым колерам на фоне манахромнай выявы, шрыфт, набраны тонкім, як шкло, і багацце вольнай прасторы
- 21 TSI — Барвовая пустата, адзіны сілуэт - рэдакцыйны артыкул у стылі высокай моды, дзе карыстацкі інтэрфейс раствараецца ў атмасферы
- Aevi Wellness — Скандынаўскі аптэкарскі стыль, бязважкі шрыфт. Прыглушаны шэра-блакітны акцэнт парушае агульную ахраматычную, паветраную вёрстку рэдакцыйнага матэрыялу, дзе фатаграфіі тавараў накладваюцца на карткі з тонкай рамкай на цёплым белым фоне.
- Palmer — Керамічная галерэя ў мяккім дзённым святле - узаемадзеянне адбываецца са сцяной, а аб'екты - гэта мастацтва
- PLATFORM — Галерэя "Белы куб" пад святлом пражэктараў.
- Assembly Coffee London — Вуголле ў цёмнай обжарочной. Амаль чорнае палатно з цёплымі, прыглушана асветленымі фатаграфіямі прадукцыі і набранымі курсіўным шрыфтам з засечкамі надпісамі - адчуванне меню спешыалці-кава, надрукаванага ў паўночным самвыдаце
- ARTWORLD — Загаловак моднага выдання на белым ільняным палатне
- Structured — Галерэя эпохі Адраджэння на паперы, якая нагадвае пластылін
- Airbnb — Ціхая белая сцяна галерэі з адной каралава-чырвонай закладкай
- VISIONNAIRE — Рэдакцыйная галерэя вулічнай моды на беласнежным фоне. Брэнд паводзіць сябе як надрукаваны лукбук: плоскае белае палатно, выразныя чорныя чарнілы і адна цёплая крэмавая панэль, выкарыстоўваная ў якасці каляровага блока для дэманстрацыі прадукта ці лагатыпа
- Letter — Прыватная галерэя з пераліўнымі артэфактамі са сховішча. Выставачная зала з чорнымі сценамі, дзе загалоўкі з засечкамі параць над храмаванымі скульптурамі на таніраваных сценах галерэі
- Ramp — Фінансавы аддзел рэдакцыі, чорна-белыя старонкі з адным неонавым маркерам. Практычна манахромная паверхня выдання, дзе адна яркая салатавая рыска ператварае кожнае ўзаемадзеянне ў грашовы сігнал