Дизайн

Веб-дизайн: макет, который переживёт встречу с настоящим текстом

Красивый макет ломается о реальный контент: заголовок в три строки, товар без фотографии, цена из пяти знаков. Рисуем под настоящие данные и отдаём макеты, по которым можно верстать без вопросов.

Обсудить услугу Все услуги разработки
рисуем
под реальный текст
мобильная
версия первой
отдаём
с состояниями и правилами
Дмитрий Сериков — digital-стратегия Divitio
Экспертиза

Чем веб-дизайн отличается от картинки сайта

Макет — не иллюстрация, а инструкция для вёрстки. Значит, в нём должны быть не только идеальные состояния: длинный заголовок, пустой блок, товар без картинки, ошибка в форме, список из одного элемента и из двадцати. Дизайн, нарисованный только в идеале, доделывает верстальщик — как умеет.

Второе — мобильная версия первой. На большинстве коммерческих сайтов телефон даёт больше половины трафика, а рисуют по-прежнему с настольной версии и «потом адаптируют». Результат виден в показателях именно мобильных страниц.

Третье — компоненты вместо отдельных экранов. Кнопка, поле, карточка, модальное окно описываются один раз со всеми состояниями, и дальше страницы собираются из них. Это ускоряет и дизайн, и вёрстку, и последующие изменения.

Четвёртое — дизайн влияет на то, что видит поиск. Текст, спрятанный в картинку или в сворачиваемый блок, подгружаемый скриптом, перестаёт существовать для робота. Мы продвигаем сайты и закладываем это в макеты на этапе рисования.

Для кого

Когда это нужно

Подходит при редизайне, запуске нового сайта или переработке отдельных разделов.

  • Сайт выглядит устаревшим и не вызывает доверия
  • Макеты есть, но верстальщик постоянно задаёт вопросы
  • На телефоне сайт выглядит хуже, чем на компьютере
  • Нужен дизайн под реальный каталог, а не под три товара
  • Каждая новая страница выглядит не как предыдущая

Что входит

Рисуем так, чтобы по макетам можно было работать.

  • Прототип структуры до отрисовки
  • Макеты под реальный контент, включая неудобные случаи
  • Мобильная версия наравне с настольной
  • Состояния интерфейса: наведение, нажатие, ошибка, пустой список, загрузка
  • Компоненты и правила, а не набор разрозненных экранов
  • Передача вёрстке с пояснениями и исходниками
Процесс

Как работаем

01
Прототип — Структура и порядок блоков до отрисовки
02
Контент — Реальные тексты и данные вместо заглушек
03
Дизайн — Мобильная и настольная версии, компоненты
04
Состояния — Ошибки, пустые списки, загрузка, длинные значения
05
Передача — Исходники, правила, пояснения верстальщику
Результат

Что на руках

  • Вёрстка идёт без вопросов и доработок макета
  • Реальный контент не ломает страницы
  • Мобильная версия не выглядит сжатой настольной
  • 01
    Прототипы ключевых страниц
  • 02
    Макеты в мобильной и настольной версиях
  • 03
    Набор компонентов с состояниями
  • 04
    Правила: отступы, типографика, цвета
  • 05
    Исходники в редактируемом виде
FAQ

Вопросы

Можно ли рисовать без готовых текстов?
Можно, но тогда макет придётся переделывать. Дизайн под реальный текст и текст, подогнанный под готовые блоки, — разного качества. Если текстов нет, мы пишем рыбу, максимально близкую по объёму к будущей.
Нужны ли макеты всех страниц?
Нет. Нужны макеты всех типов страниц и набор компонентов. Двадцать однотипных карточек товара рисуются одним шаблоном, а не двадцатью макетами.
Делаете ли вы вёрстку по своим макетам?
Да, и это обычно дешевле: не нужно объяснять. Но макеты делаются так, чтобы по ним мог работать любой верстальщик, включая вашего.
Что если дизайн не понравится?
Для этого есть этап прототипа и обсуждение направления до отрисовки. Основная часть разногласий снимается там, а не на стадии готовых макетов, когда переделка дороже всего.
Заявка

Обсудить: Веб-дизайн

Оставьте контакты — перезвоним в течение рабочего дня, разберём задачу по «Веб-дизайн» и как её связать с SEO и видимостью в ChatGPT и Perplexity. РФ и СНГ.

+7 (938) 124-59-49
divitio@yandex.ru
Telegram
MAX