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 — Музейна вітрина на білому мармурі