Спершу — чим це не є
«Зерно» — не реальний клієнт. Кавʼярня, бренд, дати обсмажки й адреса вигадані. Я зробив цей сайт, бо прайс — це абстракція: «лендинг, від 400 €, 1–2 тижні» майже нічого не каже власнику бізнесу про те, що саме приїде наприкінці тих двох тижнів.
Тож ось відповідь у натуральну величину: не макет, а готовий сайт, з усім, що входить у справжнє замовлення, і без жодного шматка, взятого з шаблону.
Текст був раніше за макет
Спочатку написаний текст — окремим документом, — і лише потім верстка. Це не питання смаку: саме цей порядок вирішує результат.
Дизайн, що починається з макета, закінчується текстом, дописаним під розміри блоків, — а блоки обрали за те, що вони гарно врівноважені. Дизайн, що починається з тексту, ставить блоки туди, куди веде аргумент. Відвідувач приходить із питанням — чому сюди, а не в кавʼярню навпроти? — і сторінка має відповісти в тому порядку, в якому він думає, а не в тому, який підказала сітка.
Документ із текстом іде разом із проєктом як окремий результат роботи, з варіантами заголовків. Клієнту лишаються слова, а не тільки пікселі.
Лендинг без жодної картинки
На сторінці немає жодного <img>. Усі ілюстрації — а їх дванадцять — намальовані просто в розмітці векторною графікою.
Це не технічний трюк, а саме те, завдяки чому сторінка швидка на телефоні:
- Нічого не треба довантажувати. Сторінка приходить одним запитом; після появи тексту немає другої хвилі завантаження зображень.
- Нічого не стрибає. Фото, які приходять із запізненням, штовхають макет під пальцем у читача. Вектор уже на місці разом із текстом.
- Чітко на будь-якому екрані. Жодного мила на retina-дисплеї й жодних окремих розмірів, які треба експортувати й підтримувати.
- Не чужі фотографії. Мальоване не потребує ліцензії, точно збігається з палітрою бренду й не спливе наступного місяця на сайті конкурента.
Більшість лендингів повільні з однієї нудної причини — фотографії. Прибрати їх повністю вдається не завжди (ресторану таки потрібні знімки страв), але спитати себе, які зображення справді відпрацьовують свою вагу, варто щоразу.
Порядок сторінки
Перший екран із пропозицією і маршрутом до дверей → чому сюди, а не деінде → меню зі справжніми цінами → слова інших людей → фінальний заклик з адресою й годинами роботи. Нічого несподіваного — і в цьому суть: порядок повторює послідовність, у якій людина ухвалює рішення, а адреса повторюється в кінці, бо саме там воно й ухвалюється.
Кольори, відступи й типографіка беруться з іменованих токенів, заданих один раз на початку файлу. Прохання клієнта «зроби коричневий тепліший» — це одне значення, а не пошук по тисячі рядків.
Що змінив би для платного клієнта
- Свої шрифти замість гуглівських. Демо тягне шрифти з Google — це зайве зʼєднання з чужим сервером ще до того, як зʼявиться перша літера. Портфоліо, яке ви зараз читаєте, віддає власні шрифти; справжній проєкт робив би так само.
- Форма запису чи звʼязку. Демо веде на адресу й телефон. Робочій кавʼярні потрібне бронювання столика, а це вже й захист від спаму, і політика приватності.
- Справжній контент. Вигадані ціни й дати обсмажки замінити найлегше — і саме вони мають бути точними: усе інше на сторінці переконливе рівно настільки, наскільки правдиві факти на ній.