Allbirds
Натуральныя матэрыялы на белым лёне
Allbirds працуе на аснове спакойнай, натуральнай упэўненасці - амаль цалкам ахраматычнага палатна, дапоўненага цёплымі пясочнымі (#e0dacf) і прыглушанымі землянымі тонамі, узятымі непасрэдна з фатаграфій тавараў. Карыстацкі інтэрфейс не замінае ўспрыманню прадукта: белыя паверхні, тонкія межы, рух з перавагай загалоўных літар і элементы кіравання ў форме таблетак, якія адчуваюцца хутчэй як фізічныя кнопкі, чым як вэб-элементы. Шрыфт Self Modern (карыстацкі шрыфт з засечкамі) выкарыстоўваецца для тых нямногіх важных момантаў, якія патрабуюць увагі рэдактараў - загалоўкаў і назваў калекцый, - у той час як Geograph выкарыстоўваецца для кожнага надпісу, асноўнага тэксту і кнопкі ў трох збалансаваных варыянтах таўшчыні. Карткі катэгорый становяцца каляровай сістэмай: кожная з іх бярэ сваё фонавае адценне з прадстаўленага прадукта, ператвараючы навігацыю ў жывую палітру Pantone.
Максімальная шырыня ~1200px, цэнтраваная з вялікім бакавым водступам. Галоўны элемент - гэта поўнаэкранная рэдакцыйная паласа на цёплым пяшчаным фоне з вялікай каруселлю тавараў, разбежнай ад цэнтра. Навігацыя па катэгорыях уяўляе сабой сетку з 4 аднолькавых каляровых картак у 4 калонках, кожная з якіх утрымоўвае адну цэнтраваную мадэль абутку. Ніжэй лініі згіну макет чаргуецца паміж поўнаэкраннымі падзеленымі панэлямі (фота выявы жыцця злева + узор тавара справа) і цэнтраванымі каруселямі тавараў пад невялікім падкрэсленым загалоўкам часткі. Агульны рытм: поўнаэкранная рэдакцыйная панэль → сетка з 4 калонак → цэнтраваная карусель тавараў → падзел на 2 калонкі → цэнтраваная карусель тавараў. Адлегласць паміж раздзеламі складае 40-56px, ствараючы паветраныя, але не вялізныя пераходы. Навігацыя ўяўляе сабой мінімалістычную фіксаваную верхнюю панэль з цэнтраванымі асноўнымі спасылкамі.
Фатаграфія - гэта ўся візуальная сістэма. Усе здымкі тавару зроблены буйным планам, на невялікім ракурсе, на фоне аднатоннага колеру, які адпавядае або дапаўняе акцэнтны колер абутку - фактычна ператвараючы кожную фатаграфію ў даследаванне колеру. Фатаграфіі ў стылі лайфстайл выкананы ў цёплых, сонечных танах, на прыродзе (агавовые палі, драўляныя насцілы, грубы рэльеф), злёгку прыглушаныя, каб адпавядаць прыглушанай палітры. Ніякіх ілюстрацый, ніякіх 3D-рэндэраў, ніякай абстрактнай графікі. У супрацоўніцтве з Pantone выкарыстоўваецца літаральная каляровая палітра ў якасці графічнага элемента. Іканаграфія мінімалістычная і манахромная (контурныя абразкі ў навігацыйных і дапаможных пазіцыях).
Палітра
Нейтральныя
- Canvas White
#ffffff— Фонавыя выявы старонак, паверхні картак, фонавыя выявы таварных картак. - Charcoal
#212121— Падтрымліваецца нейтральны колер для другарадных элементаў карыстацкага інтэрфейсу, падзельнікаў і прыглушаных подпісаў. Не варта прызначаць яго асноўным колерам для заклікаў да дзеяння. - True Black
#000000— Загалоўкі, значкі, высокакантрасныя рамкі, навігацыйны тэкст. - Warm Sand
#e0dacf— Фон галоўнай секцыі, дадатковае адценне паверхні, вялікія рэдакцыйныя панэлі. - Olive Char
#222519— Падтрымліваецца нейтральны колер для другарадных элементаў карыстацкага інтэрфейсу, падзельнікаў і прыглушаных подпісаў. Не варта прызначаць яго асноўным колерам для заклікаў да дзеяння. - Iron Gray
#525252— Другарадны тэкст, дапаможны тэкст, ненадакучлівыя рамкі.
Друкарня
ад 12 да 40px · 6 прыступак
- Self Modern — замена: Playfair Display · напісання 400 · Загалоўкі і рэдакцыйныя матэрыялы выкарыстоўваюцца эканомна для ключавых фраз і назваў калекцый. Шрыфты з засечкамі і курсіўным напісаннем разводзяць манатоннасць шрыфтоў без засечак і даюць зразумець: «Гэта і ёсць сутнасць гісторыі».
- Geograph — замена: Inter · напісання 400, 500, 700 · Асноўны шрыфт для карыстацкага інтэрфейсу - асноўны тэкст, подпісы навігацыі, кнопкі, загалоўкі тавараў, ніжнія калантытулы, палі ўводу, значкі. 500 для выдзеленых загалоўкаў, 700 для назваў тавараў. Шырокая міжлітарная адлегласць (0.025em–0.10em) у вялікіх літарах у подпісах навігацыі і катэгорыях задае фірмоваму стылю.
- HurmeGeometricSans3 — замена: Inter · напісання 400 · Выкарыстоўваецца рэдка - рэзервовы варыянт або спецыялізаваная пазнака для кнопкі. Кампанія Geograph выкарыстоўвае гэтую сістэму штодня.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | шчыльная |
| Базавы крок | 8-16px |
| Радыус кнопак | 9999px (pill) |
| Радыус картак | 16px |
| Цені | не - межы замест ценяў |
| Паміж секцыямі | 40-56px |
| Шырыня старонкі | 1200px |
ІІ збярэ ваш сайт у стылі Allbirds і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- Lightship — Кінематаграфічная дыярама адкрытай дарогі. Цёплыя крэмавыя сцены галерэі, упрыгожаныя буйнымі пейзажнымі фатаграфіямі, замацаванымі на невялікіх адлегласцях, тонкі чорны шрыфт, ледзь адрозны на рамках, і адзін ярка-аранжавы акцэнт, які парушае манахромнасць, нібы вогнішча на лузе
- Faire ES — аптовы каталог цёплых вяршкоў
- Adanola — Рэдакцыйны лукбук на белай паперы. Модная фотасесія, дзе друкарка і фатаграфія нібы дыхаюць на чыстых белых паверхнях, з чорным чарнілам для шрыфта і ледзь прыкметным фірмовым шрыфтам без засечак (Favorit), якія адлюстроўваюць увесь стыль брэнда
- Oura Ring — Утульная майстэрня, дзе рыхтуюць аўсянку, пад мяккім дзённым святлом
- Stykka — Скандынаўская майстэрня ў белым свеце — ціхая, створаная ўручную выставачная зала, дзе адзіным голасам з'яўляецца фатаграфія.
- DJI — аэракасмічны чорны палатно з адзіным электрычным сінім штуршком
- Altitude Beverages — Манахромны разварот для часопіса. Уявіце сабе разварот моднага часопіса, пазбаўлены ўсіх колераў, акрамя прадметнай фатаграфіі - тэкст і пустую прастору распавядаюць усю гісторыю
- AATHER — Расчыненая далонь, адзіночнае полымя - ціхая раскоша, зняволеная ў нерухомасці
- Cowboy — Бельгійская галерэя веласіпедаў у беласнежным фарфоравым выкананні. Шоурум, дзе матавыя паверхні, буйны шрыфт, які выкарыстоўваецца ў рэдакцыйных матэрыялах, і практычна поўная адсутнасць дэкору прымушаюць погляд засяродзіцца на ровары і яго зместу
- Refero — Рэдакцыйная вёрстка на белым мармуры - старонка тавару, створаная друкарняй, дзе загаловак з засечкамі з'яўляецца візітнай карткай брэнда, а ўсё астатняе не адцягвае ўвагі
- Face Formula — Скандынаўскі рэдакцыйны партрэт. Спакойная часопісная разваротная здымка, дзе погляд мадэлі і загаловак, напісаны сціснутым шрыфтам з засечкамі, гавораць самі за сябе на фоне прахалоднага туману
- Shupatto — Музейная вітрына на белым мармуры