Заказчик
Карен Карапетян — директор компании и архитектор с 20-летним опытом. Визуальная точность для него не просто предпочтение, а профессиональный стандарт, с которым он работает каждый день.
Личный сайт Дизайн 2026
Сайт с точностью до пикселя
Я уже работала с Кареном и знала насколько он придирчив к деталям. Поэтому разработала дизайн с особым вниманием к визуальному выравниванию и контролировала вёрстку, чтобы в итоге всё получилось точно до 1 пикселя.
Контекст, задача и моя роль
Сроки
21 день на дизайн, 35 дней на разработку и запуск.
Задача
Карен, помимо работы директором компании, активно развивает личную медийность: снимает видео, пишет статьи, выступает на конференциях. Ему нужен был единый сайт-визитка, где организаторы конференций и потенциальные партнёры могли бы быстро узнать о нём и найти ссылки на его официальные аккаунты.
Команда и моя роль
UX/UI Backend разработчик Frontend разработчик
Я — UX/UI дизайнер. Разработала дизайн с адаптивами и передала макеты в разработку с подробными спецификациями по отступам и сеткам, чтобы на этапе вёрстки не оставалось места для интерпретаций. А также проверила финальный результат на соответствие макетам на разных устройствах.
Выбор концепции
Подготовила три варианта дизайн-концепции.
← Первая — в духе сайта его компании: минимализм, чёрно-белая палитра, светлый фон.
→ Вторая — та же лаконичность, но в тёмной палитре.
Оба варианта были безопасным выбором, близким к тому, что Карен уже видел в своих проектах.
Третью концепцию осознанно сделала другой: яркую, с цветом.
Карен как-то упомянул, что устал от отсутствия цвета в своих интерьерах — хотя клиенты часто просят сдержанный дизайн, ему самому хочется больше красок. Эту деталь я и заложила в третий вариант.
Карен выбрал именно её.
Поиск визуального стиля
Внутри выбранной концепции сделала несколько вариантов главного экрана — пробовала разную композицию, шрифтовые пары и общее графическое решение, чтобы найти баланс между красочностью и серьёзностью.
Дизайн всех страниц
Страница статьи
Главная страница
В процессе работы решили сузить использование цвета — оставили яркие акценты только на обложках статей и кнопках, чтобы цвет не спорил с текстом, а точечно привлекал внимание.
Главная проблема — у текстового блока всегда есть небольшой отступ (1-2 пикселя) между краем блока и самой буквой — это особенность шрифта. А вот у картинок и фигур такого отступа нет, их край точно совпадает с видимой границей.
Из-за этого при выравнивании "по цифрам" текст и картинки визуально смотрелись неровно, хотя по факту были выровнены идеально. Поэтому специально закладывала дополнительное расстояние у картинок и фигур — чтобы всё выглядело ровно не только в цифрах, но и на глаз.
Из-за этого при выравнивании "по цифрам" текст и картинки визуально смотрелись неровно, хотя по факту были выровнены идеально. Поэтому специально закладывала дополнительное расстояние у картинок и фигур — чтобы всё выглядело ровно не только в цифрах, но и на глаз.
В шапку некоторых страниц добавила маленькое фото Карена и оставила место для текста. Так, на странице статьи он приглашает подписаться на рассылку, а на странице контактов говорит, что читает все письма.
Всего было сделано 6 типов страниц: главная, страница статей, статья, обо мне, контакты и попап.
Адаптация под мобильные устройства
Перенесла сетку и систему отступов на узкие экраны телефонов и планшетов, сохранив ту же логику выравнивания, что и в десктопной версии. Всё прошло стандартно, без особых сложностей.
Проверка вёрстки
Знала, что Карен будет проверять готовый сайт с собой дотошностью. Поэтому взяла с него пример и проверяла каждый блок буквально с линейкой, сверяя расстояния с макетом.
Там, где находила расхождения, отправляла программистам точные правки — что именно съехало и на сколько пикселей. Прошли несколько кругов правок, пока каждый элемент не встал идеально по макету.
Все расстояния — попиксельно по макету.
Итог
Сейчас сайт принят и наполняется контентом. Этот проект — хороший пример того, как высокие требования заказчика становятся ориентиром, а не препятствием.
А внимание к человеку помогает понять его истинные пожелания — и сделать результат, который ему действительно нужен.
Нужен сайт с таким же вниманием к деталям?
Напишите — обсудим вашу задачу.