Ми виміряли дев'ять сайтів люксових брендів. Ось що в їхньому дизайні працює

Шрифти, кнопки, ціни та анімація, виміряні на живих сайтах у жовтні 2026 року.

МЕТОДИКА

Вимірювали, а не милувалися

Кожен дизайнер має думку про люксові сайти. Майже завжди вона складається однаково: ви відкриваєте Cartier або Van Cleef & Arpels, хвилину гортаєте, відчуваєте щось дороге й ідете з враженням. Мені хотілося чогось кориснішого за враження, тому цього разу ми вимірювали.

У ніч з 9 на 10 жовтня 2026 року наша команда відкрила дев'ять сайтів ювелірних і люксових домів: Cartier, Graff, Van Cleef & Arpels, Tiffany & Co., Bulgari, David Yurman, Messika, Mikimoto і Brunello Cucinelli. Ми дивилися американські версії сайтів у вікні комп'ютера 1440 на 900 пікселів і на екрані телефона 390 на 844. У кожного бренду розбирали головну, категорію, звичайний виріб і, якщо такий є онлайн, виріб High Jewellery. Необов'язкові cookies ми відхиляли, нічого не клали в кошик і не надсилали форм. Шрифти, кольори, форму кнопок і тривалість анімації брали зі стилів, які обчислює сам браузер, тож кожна цифра нижче показує, що сайт справді відображав того дня, а не те, як це виглядає на око.

П'ять сайтів із дев'яти одразу відмовилися пускати автоматичний браузер, і їх довелося відкривати вручну у звичайному. Це дещо каже про те, наскільки серйозно ці доми охороняють свої сторінки. Bulgari дозволив подивитися шість сторінок і зачинив двері.

Цей замір починався не як стаття для блогу. Перш ніж щось проєктувати, ми вивчаємо ринок, у якому житиме сайт, і цей прохід став частиною повного аналізу для Schoeffel, перлинного дому, заснованого 1921 року, новий сайт якого ми зараз будуємо. На початку жовтня для його архітектури ми розібрали тринадцять ювелірних і люксових сайтів, із них п'ять перлинних домів, а тут повернулися до великих домів і виміряли їх. Як такий аналіз визначає проєкт, ми описали у статті «Процес створення сайту, який малюють агенції, хибний».

Коротко

• П'ять домів вирішують питання ціни High Jewellery п'ятьма різними способами: від «Price on application» до кольє за $250,000 з кнопкою ADD TO CART.
• Люкс швидкий. Більшість кнопок змінюють стан за 0 до 0,5 секунди, а спокій створюють простір і нерухомість, а не повільна анімація.
• У шести кнопок покупки з восьми ідеально прямі кути, і майже всі вони чорні.
• Звична пара шрифтів: антиква для назв і гротеск для інтерфейсу. Cartier робить навпаки.
• Навіть найкращі припускаються базових помилок: кнопка з контрастом 1,3:1, головна вагою 19,9 МБ, віконця чату поверх кнопки покупки.

ЦІНА

П'ять домів, п'ять відповідей на питання «скільки?»

Найцікавіше дизайнерське рішення на люксовому сайті стосується не шрифту і не кольору. Воно стосується того, що стоїть поруч із виробом за ціною квартири. Ми порівняли сторінки виробів High Jewellery і знайшли п'ять різних відповідей.

Graff ховає ціну. На каблучці з діамантом смарагдового огранювання написано «Price on application», і кошика немає взагалі. Замість нього закріплена смуга внизу екрана пропонує три способи поговорити з людиною: ENQUIRE, APPOINTMENT BOOKING і ORDER BY PHONE. Той самий сайт продає підвіску за $4,300 зі звичайною кнопкою ADD TO BAG, тож перехід від магазину до салону зроблено навмисно.

Van Cleef & Arpels показує ціну, але не кошик. Сережки Flowerlace коштують «$ 40,400 Excluding taxes», а купити їх можна лише через ORDER BY PHONE. Знати цифру вам дозволено, покласти її в кошик ні.

Cartier показує ціну і зберігає логіку магазину. Кольє з лінії Faune et Flore у розділі High Jewelry показує $154,000 у тій самій закріпленій смузі, що й підвіска за $2,830. Виробу не було в наявності, тому головна кнопка казала NOTIFY ME.

Tiffany продає його як підвіску. Кольє Schlumberger за $250,000 з добірки High Jewelry використовує рівно той самий шаблон, що й підвіска Tiffany Knot за $1,900: чорна ADD TO CART, під нею BOOK AN APPOINTMENT і FIND IN STORE.

У Bulgari сторінки виробу немає взагалі. Колекцію High Jewelry Eclettica представлено журнальною сторінкою заввишки 11 470 пікселів, з вісьмома відео, без цін і з формою «Contact an expert» у самому кінці.

Жоден із цих варіантів не хибний. Кожен говорить про стосунки, яких хоче дім. Graff і Bulgari вважають, що виріб такого рівня починається з розмови. Van Cleef & Arpels відкритий щодо ціни, але покупку лишає особистою. Cartier і Tiffany ставляться до сайту як до справжнього магазину на будь-якому рівні цін. Урок для дизайну в тому, що рішення про ціну треба ухвалити до того, як намальовано сторінку, бо воно змінює шаблон, кнопки і смугу на телефоні.

На цьому рівні ціна це дизайнерське рішення, а не поле в базі.

АНІМАЦІЯ

Люкс не повільний

Я очікував, що заміри підтвердять штамп: дорогі сайти рухаються повільно. Не підтвердили.

У Van Cleef & Arpels кожна виміряна кнопка змінює стан миттєво, з переходом 0 секунд. У David Yurman 0,15 секунди, у Mikimoto 0,15, у Bulgari 0,2, у Graff 0,3, у Messika і Tiffany 0,4, у Cartier 0,5 на кнопках і появах. Найдовшою анімацією, яку ми знайшли, виявилася поява фотографій виробів у Van Cleef & Arpels за 0,5 секунди. У більшості посилань на більшості сайтів переходу немає зовсім.

Звідки тоді відчуття спокою? З того, чого сторінки робити відмовляються. На перших екранах дуже мало слів: 28 на головній Cartier, від 34 до 38 у Van Cleef & Arpels і Messika. Фотографії отримують усю ширину. Ніщо не блимає, вимагаючи уваги. Сайт може відповідати за десяту частку секунди і при цьому не здаватися квапливим, бо нерухомість закладено в розкладці, а не в кривій анімації.

Тому ми інакше ставимо завдання щодо руху у своїх преміальних проєктах. Анімацію лишаємо для моментів, які її заслуговують, наприклад для появи фотографії виробу чи відкриття сторінки, а кнопки хай відповідають руці одразу.

КНОПКИ

Прямі кути і чорна кнопка

Якщо хочете знати, який вигляд має люксова кнопка покупки у 2026 році, цифри майже одностайні.

У головної кнопки покупки заокруглення кутів рівно 0 у Graff, Van Cleef & Arpels, David Yurman, Messika, Cartier і Tiffany & Co. Заокруглює лише Bulgari, на 3 пікселі, і Mikimoto, на 4. Кнопки-капсули, які панують у масовому інтернет-магазині, на жодному з дев'яти сайтів не трапляються в ролі головної дії.

Колір підкоряється тій самій дисципліні. David Yurman, Messika, Tiffany і Bulgari використовують чистий чорний (#000000), Cartier майже чорний #1d1c1c. Лише два доми ставлять на кнопку власний колір: Graff приглушену бронзу #897358, якою пофарбовано і верхню смугу, і кнопку чату, а Mikimoto бліде золото #e5d3a9 з темнішою золотою рамкою. Van Cleef & Arpels діє ще тихіше: ADD TO BAG у нього просто білий прямокутник із контуром.

Спільне в цих рішеннях одне: стриманість з єдиним винятком. Дім дозволяє собі один сильний елемент, чорний блок чи бронзовий, а все інше лишає нейтральним, щоб око знало, куди дивитися.

ШРИФТИ

Антиква для назви, гротеск для решти

Чотири доми використовують класичну люксову пару: антикву для назв виробів і заголовків і гротеск для інтерфейсу. Graff набирає назви виробів шрифтом ChronicleDisplay дуже світлого накреслення 200 (32 px на сторінці виробу, 38 px у High Jewellery), а текст і навігацію шрифтом Optima Nova. Van Cleef & Arpels ставить Janson Text кеглем 45 px на головній і в категоріях і Maison Neue кеглем 13 px для всього, на що можна натиснути. Tiffany поєднує антикву Sterling SSM, стиснуту від'ємним міжлітерним інтервалом, із гротеском Santral. Mikimoto використовує Cormorant Garamond.

Cartier міняє ролі місцями. Назви виробів, ціни, навігацію і кнопки набрано гротеском Brilliant Cut накреслення 600 великими літерами, а антиква Fancy Cut з'являється лише в описах. Виходить радше архітектурно, ніж романтично, і впізнається миттєво.

Два доми обходяться однією родиною для всього: Messika шрифтом Futura PT, де ціна є єдиним жирним текстом на сторінці виробу, і Bulgari власним Bulgari Type світлого накреслення 300.

Те, як набрано ціну, каже не менше за шрифти. Tiffany друкує і $1,900, і $250,000 кеглем 13 px, тим самим, що й основний текст, ніби число лише деталь. Mikimoto набирає ціну своєю антиквою 28 px, рівно такого ж розміру, як назва виробу. Bulgari і Mikimoto показують центи ($3,950.00), Graff, Van Cleef & Arpels і Bulgari додають поруч із цифрою «excluding taxes». Ніщо з цього не випадкове: розмір ціни показує, наскільки бренду з нею комфортно.

ПЕРШИЙ ЕКРАН

Одна картинка чи рухоме шоу

Головні сторінки поділяються на два табори. Graff, Cartier, David Yurman і Messika відкриваються відео. Перший екран Graff це відеослайдер, заголовок якого змінювався між нашими двома візитами («Say yes with Graff», потім «Diamonds Take Flight»); на одному знімку білий заголовок лежить на світлій вуалі й майже зникає. Автоматичне відео David Yurman принаймні має помітні кнопки паузи і звуку, це маленька ввічливість, яку більшість сайтів пропускає.

Van Cleef & Arpels і Brunello Cucinelli роблять навпаки. Van Cleef & Arpels віддає перший екран одному виробу, балерині з коштовного каміння, з дворядковим заголовком і одним текстовим посиланням. Cucinelli ставить одну фотографію кампанії на всю ширину і два текстові посилання. Саме ці екрани відчуваються найдорожчими, і їх же найпростіше зробити й найшвидше зрозуміти.

Один об'єкт на екран і досі найсильніша люксова розкладка. Відео може працювати, але тоді перше враження залежить від кадру, який випадково йде в момент, коли відвідувач прийшов.

Один виріб на тихому екрані досі виглядає дорожче за будь-яке шоу.

ПОМИЛКИ

Де помиляються навіть найкращі

Заміри впіймали і те, що не пройшло б звичайну дизайн-перевірку в жодній агенції, зокрема в нашій.

Контраст. Van Cleef & Arpels набирає ORDER BY PHONE чорним текстом (#000000) на майже чорній кнопці (#222222). Контраст близько 1,3:1, а рекомендації з доступності вимагають для тексту такого розміру щонайменше 4,5:1. На екрані напис ледь видно. І це та сама кнопка, яку дім найбільше хоче, щоб ви натиснули в High Jewellery.

Вага. Головна Graff під час першого візиту завантажила 19,9 МБ, Van Cleef & Arpels 15,7 МБ. Головна David Yurman важила 5,5 МБ, але потребувала 287 окремих запитів. На телефоні в лобі готелю це різниця між тим, щоб побачити кампанію, і сірим прямокутником.

Усе, що лежить поверх кнопки покупки. На телефоні шириною 390 px кнопка чату Graff перекриває ADD TO BAG, кнопка «Help» у Messika закриває частину ADD ENGRAVING, а віджет доступності Mikimoto лежить на лівому краю закріпленої смуги ADD TO BAG. Найімовірніше, кожен із цих віджетів додавала своя команда у свій час, і ніхто не подивився на них разом на маленькому екрані.

Перешкоди. Messika відкрила вікно підписки на розсилку поверх категорії та сторінки виробу за кілька секунд після того, як ми відхилили cookies.

Структура. На п'яти головних із дев'яти немає видимого заголовка h1, а в Brunello Cucinelli h1 є, але порожній. На мобільних картках категорії Mikimoto поруч із назвами видно внутрішні складські коди на кшталт «U___16W_CFG». Нічого з цього не видно в дизайн-макеті, саме тому воно й виживає.

СЕРВІС

Людина за сторінкою

Кожен із дев'яти сайтів намагається тримати живу людину в зоні досяжності, і способи варто вивчити. У David Yurman на кожній сторінці смуга з BOOK AN APPOINTMENT і CONTACT US, а на головній ще й розділ «At your service». Messika тримає чорну смугу згори: «A Messika adviser is available to respond to all your questions». Cartier ставить CONTACT AN AMBASSADOR і BOOK AN APPOINTMENT тихими текстовими посиланнями під кнопкою покупки. Tiffany і Mikimoto розміщують у шапці поруч із кошиком маленький сервісний дзвоник. Найдалі пішов Brunello Cucinelli із закріпленою кнопкою «AI Boutique» на кожній сторінці.

Оплата теж стала частиною люксового інтерфейсу. David Yurman, Messika і Mikimoto показують під ціною щомісячні платежі через Affirm, Graff пропонує Splitit, а David Yurman просто на сторінці виробу дає обрати доставку або самовивіз із бутика. Найлюксовіші сайти більше не найнедоступніші; це ті, де легко дотягнутися до людини і легко заплатити.

НАШІ ПРАВИЛА

Що ми беремо собі і чого не робимо

Ми вимірювали не для того, щоб когось копіювати. Треба було вирішити, що перенести у власну роботу, починаючи зі Schoeffel, де ці знахідки одразу лягли в архітектуру, ще до візуального дизайну. Ось до чого нас привели заміри.

Беремо:

• Один об'єкт на першому екрані й дуже мало слів.
• Антикву для назв і важливих чисел, спокійний гротеск для всього, на що натискають.
• Прямі або майже прямі кнопки, один сильний колір для головної дії, все інше тихо.
• Рішення про ціну для кожного цінового рівня до того, як намальовано перший шаблон.
• Людину на відстані одного дотику на кожній сторінці, але не поверх кнопки покупки.

Не робимо:

• Каруселі й автоматичні слайдери як перше враження.
• Кнопки-капсули в ролі головного заклику поза оформленням замовлення.
• Фірмовий колір, розлитий на цілі секції, замість кольору в деталях.
• Плаваючі віджети, які ніхто не перевірив разом на екрані шириною 390 px.
• Головні сторінки, що важать більше, ніж варте відео кампанії.

Такий дизайн менше про винахід і більше про дисципліну: про рішення, чого сторінка робити не буде. Про той самий принцип з боку відвідувача ми писали у статті про дизайн, якого не помічають. Якщо ваш бренд живе в цьому світі, наша робота з UI/UX-дизайну починається саме з такого заміру вашого ринку.

Люкс на екрані це насамперед дисципліна не додавати зайвого.

FAQ

Джерела

Заміри Peretz Agency від 9 і 10 жовтня 2026 року (американські версії сайтів, комп'ютер 1440 × 900 і телефон 390 × 844, обчислені стилі). Виміряні сторінки:

• Graff: каблучка High Jewellery, підвіска Butterfly
• Van Cleef & Arpels: сережки Flowerlace, підвіска Vintage Alhambra
• Cartier: кольє Faune et Flore, підвіска Love
• Tiffany & Co.: кольє Schlumberger, підвіска Tiffany Knot
• Bulgari: High Jewelry Eclettica, кольє Divas' Dream
• David Yurman, Messika, Mikimoto, Brunello Cucinelli: головна, категорія і сторінка виробу американських версій сайтів
• W3C: Understanding contrast (minimum), WCAG 2.2