Дизайн сайта это упаковка бизнеса, которая ведёт клиента к заявке, а не просто визуальное решение. В UL-Friends работа начинается с брифа, структуры и прототипа. Затем готовятся макеты: главная, внутренние страницы, мобильный адаптив и состояния ключевых блоков. Стоимость зависит от типа проекта: лендинг, корпоративный сайт, интернет-магазин или сервис. На старте показываем, что входит в работу, где возможны доплаты и сколько стоит каждый этап.
Разбираем первый экран, путь до формы, читаемость и мобильный сценарий. Показываем, что мешает пользователю дойти до заявки и какие правки дают эффект без полной перерисовки. Чаще всего перерисовки требует одна страница: посадочная под рекламу.
Как ведём макет
Макет проверяем не на «нравится», а на путь пользователя: видно ли оффер на первом экране, понятен ли следующий шаг, не спорят ли между собой кнопки. Красота без сценария заявок не приносит.
Отдаём исходники в Figma со слоями, компонентами и сеткой, а не картинки. Дальше макет можно передать любому разработчику или дорабатывать своими силами. Мы собираем по нему сайт целиком, если верстать больше некому.
Мобильную версию собираем отдельным сценарием: другой порядок блоков, другая длина текста, другие кнопки. Больше половины трафика приходит с телефона, и он не должен быть уменьшенным десктопом.
Симптомы
Сайт выглядит так, будто его собрали десять лет назад, и доверие теряется до первого абзаца. Обновляем визуальный язык, не ломая работающий сценарий: путь до заявки остаётся прежним, меняется подача.
На экране пять кнопок одного веса, и ни одна не выглядит главной. Расставляем приоритеты: одно целевое действие на экран, остальное уводим на второй план. Выбор из пяти равных вариантов заканчивается отказом от выбора.
Мелкий шрифт, серый по светло-серому, строки во всю ширину экрана. Настраиваем размеры, контраст и длину строки по нормам доступности, чтобы страницу можно было читать с телефона на улице.
Разделы рисовали в разное время и разные люди: кнопки, отступы и заголовки не совпадают. Собираем набор повторяемых компонентов, дальше новые страницы складываются из них, а не рисуются с нуля.
Макет рисовали для десктопа, а телефон получился сжатой копией. Мобильную версию проектируем отдельно: другой порядок блоков, другая длина текста, другие размеры кнопок под палец.
Дизайнер отдал картинки без слоёв и сетки, разработчик считает пиксели на глаз. Отдаём исходники с компонентами, состояниями и правилами поведения, чтобы вёрстка не превращалась в пересказ макета.
Контраст в макете
| Критерий WCAG 2.2 | Уровень | Минимальный контраст |
|---|---|---|
| 1.4.3 Контрастность, минимальная | AA | 4,5:1 для обычного текста и 3:1 для крупного |
| 1.4.6 Контрастность, усиленная | AAA | 7:1 для обычного текста и 4,5:1 для крупного |
| 1.4.11 Контраст нетекстовых элементов | AA | 3:1 к соседним цветам |
Крупным стандарт считает текст от 18 пунктов, а полужирный от 14 пунктов. Нетекстовые элементы это то, по чему пользователь опознаёт элемент управления и его состояние, плюс те части графики, без которых содержание не понять. Контраста не требуется от логотипа и названия бренда, от неактивных элементов управления и от чисто декоративных изображений. Макет мы проверяем по уровню AA: он достижим без потери фирменного стиля, тогда как AAA заметно сужает палитру.
Бесплатно · 2 минуты
Девять вопросов о сайте, аудитории и заявках. Разберём, где визуально обрывается путь до обращения: непонятный оффер, слабый первый экран, перегруженные формы или отсутствие доказательств. На готовых макетах сайт собирается и на Тильде, и на WordPress.
Две минуты вопросов вместо долгих согласований
Дальше по проекту
Структуру разделов согласуют с семантикой до того, как макет уйдёт в вёрстку.
Макет проверяется трафиком: реклама показывает, на каком экране люди уходят.
Креативы для соцсетей собираются из того же визуального языка, что и макет сайта.
Обзор направления: во что макет превращается в Тильде и на движке WordPress.
Первой в вёрстку обычно уходит посадочная под конкретный оффер, а не весь сайт.
До первого экрана
Сначала проверяем, как клиент ищет услугу: через поиск, рекламу, каталог или экспертный контент. Для лендинга, корпоративного сайта и интернет-магазина нужны разные сценарии, поэтому стоимость дизайна сайта считается по-разному.
Считаем, сколько стоит заявка, какой средний чек и какие страницы влияют на продажу. Иногда дешевле усилить один лендинг, чем рисовать многостраничный сайт без понимания воронки. Экономика важнее лишних экранов.
Оцениваем готовность будущего сайта к трафику: структура, скорость принятия решения, мобильная версия, читабельность, контраст, формы, блоки доверия. Хороший макет сразу готовится под вёрстку и дальнейшее развитие.
Дизайн не заменяет отдел продаж, но помогает не терять обращения. Продумываем формы, квизы, кнопки, путь к консультации и передачу заявок в CRM. Чем быстрее обработка лида, тем выше шанс превратить трафик в клиента.
Для каких сфер
Сдержанная подача, аккуратные таблицы характеристик, документы и схемы. Посетитель здесь сравнивает параметры, а не любуется анимацией, поэтому читаемость данных важнее эффектных переходов.
Убеждают фотографии реальных объектов, планы, этапы и понятная подача цены. Плотная сетка с крупными изображениями действует сильнее любых обещаний в заголовке.
Решают карточка товара и путь к корзине: цена, наличие, доставка на виду, минимум шагов до оформления. Отдельно рисуем состояния списка при фильтрации, посетитель видит их чаще главной страницы.
Нужны спокойная типографика, фотографии специалистов и структура по ситуациям клиента. Избыточная графика в этой нише снижает доверие, а не повышает интерес.
Адрес, карта, расписание и кнопка звонка должны читаться с ходу и с телефона. Для сервиса по вызову номер выносим в шапку и дублируем плавающей кнопкой внизу экрана.
Если ориентиров в отрасли нет, смотрим соседние рынки с похожим сценарием выбора. Берём оттуда приёмы подачи, а не картинку целиком, иначе сайт получится копией чужого.
Наши работы
Кто рисует
Сначала описываем, кто приходит на страницу и каким шагом должен закончить визит, и только потом рисуем. Макет без ответа на этот вопрос красив ровно до первой проверки живым трафиком.
Собираем библиотеку кнопок, карточек, форм и заголовков с состояниями. Дальше новая страница появляется за часы, и сайт не расползается на несовпадающие стили через полгода.
Мобильную версию прорабатываем как самостоятельный сценарий, а не как сжатый десктоп. С телефона приходит больше половины посетителей, и там же теряется большая часть заявок.
Дизайн делает агентство, которое умеет и собрать по макету сайт, и привести на него трафик. Поэтому в макет заранее закладываются места под цифры, отзывы, формы и события аналитики.
Цена макета
Цена дизайна зависит от числа уникальных экранов, глубины проработки адаптива и наличия готового брендбука, считаем после разбора задачи. Вилки по остальным услугам собраны в прайсе агентства.
Для малого бизнеса и проверки гипотезы: бриф, базовый прототип, дизайн ключевой страницы и рекомендации по адаптиву.
Для разработки дизайна под ключ: прототип, главная, внутренние шаблоны, мобильная версия, подготовка к вёрстке и SEO-структура.
Для проектов, где дизайн связан с рекламой, SEO, CRM и аналитикой: кастомная команда, KPI и контрольные точки.
Кто делает макет
Макет рождается в переписке, поэтому канал связи важен не меньше портфолио. Ниже контакты, по которым идёт согласование правок, и данные предпринимателя, с которым подписывается договор.
Стандарты интерфейса
Макет проверяется не только на вкус. Есть критерии доступности и метрики стабильности вёрстки.
Про дизайн
Цена зависит от числа уникальных экранов, глубины проработки адаптива и наличия готового брендбука, считаем после разбора задачи. Лендинг рисуется быстрее многостраничного сайта или интернет-магазина. Тарифы «Старт» и «Комплекс» считаем по запросу, пакет с KPI индивидуально. Исходники отдаём в Figma со слоями и компонентами.
Работа начинается с брифа, структуры и прототипа, затем готовятся макеты: главная, внутренние страницы, мобильный адаптив и состояния ключевых блоков. Сначала описываем, кто приходит на страницу и каким шагом должен закончиться визит. Макет проверяем на путь пользователя, а не на «нравится».
Дизайн лендинга делается быстрее многостраничного сайта или интернет-магазина. Точный срок зависит от прототипа, числа шаблонов, адаптива и скорости согласований. За 24 часа после заявки оцениваем задачу и даём первичный ориентир по срокам и этапам. Структуру согласуем с семантикой до отрисовки макетов.
Сначала смотрим, как клиент ищет услугу: через поиск, рекламу, каталог или экспертный контент. Если ориентиров в отрасли нет, берём соседние рынки с похожим сценарием выбора, но заимствуем приёмы подачи, а не картинку целиком, иначе сайт получится копией чужого. Решения зависят от отрасли: производству важна читаемость данных.
Можно: отдаём исходники в Figma со слоями, компонентами и сеткой, дальше макет можно передать любому разработчику или дорабатывать своими силами. Если верстать больше некому, мы собираем по нему сайт целиком на Тильде или WordPress. Макет при этом проверяется на путь пользователя до заявки, а не на красоту.
