Веб-дизайн
Услуга
01
Веб-дизайн
Красивый макет и работающий сайт — не одно и то же. Дизайн начинается с вопроса, что человек ищет на странице, и заканчивается файлом, по которому верстальщик собирает всё без догадок.
Работы
02
Проекты студии
Что вы
Не картинку в JPG, а рабочий файл, по которому собирают сайт. Разница видна на первом же вопросе верстальщика «а как это ведёт себя на телефоне».
- Проект в Figma с доступом на вашу почту
- Макеты десктопа и мобильной версии
- Состояния кнопок, полей и форм
- Дизайн-система: цвета, шрифты, отступы
- Готовые компоненты для новых страниц
- Иконки и подготовленная графика
Дизайн-система важнее красивой главной. Когда через полгода вам понадобится новая страница услуги, её соберут из готовых блоков за день, а не нарисуют заново в другом стиле.
Мобильные макеты рисуем сразу, а не «адаптируем потом». Больше половины посетителей приходят с телефона, и решать их сценарий в последний момент — самый дорогой способ переделать проект.
В каждом
Входит в работу
- Прототип до отрисовки
- Мобильная версия каждого экрана
- Два круга правок на макет
- Состояния и пустые экраны
- Проверка контраста и читаемости
- Дизайн-система и компоненты
- Ответы на вопросы верстальщика
- Передача исходников заказчику
Структура и прототип
S.
Разбираем задачу и собираем прототип: что на экране, в каком порядке и зачем. На этом шаге правки стоят десять минут, а не два дня перерисовки.
- Разбор задачи
- Смотрим конкурентов
- Прототипы экранов
- Порядок блоков
- Смета и срок
- 3–5 дней
Дизайн-концепция
S.
Рисуем главную в двух версиях — десктоп и телефон — и показываем её как первое впечатление о компании. После утверждения концепции остальные страницы идут быстро.
- Палитра и шрифты
- Главная страница
- Мобильная версия
- Два круга правок
- Утверждение стиля
- 1–2 недели
Страницы и передача
S.
Отрисовываем остальные экраны, собираем компоненты в систему, готовим графику и передаём проект. Дальше отвечаем на вопросы тех, кто верстает.
- Внутренние страницы
- Формы и состояния
- Дизайн-система
- Экспорт графики
- Передача файлов
- 1–2 недели
Сколько это
Считаем по числу уникальных экранов, а не по страницам сайта. Двадцать карточек услуг на одной сетке — это один макет, а главная, каталог и карточка товара — три разные работы.
Если дизайн заказывается вместе с разработкой, он уже входит в стоимость проекта: смотрите цены на страницах разработки сайтов и лендингов. Отдельная услуга нужна тем, у кого есть свои разработчики.
Лендинг
- Одна страница до восьми экранов
- Десктоп и мобильная версия
- Готовая графика
- Срок 1–2 недели
Сайт
- Главная и типовые страницы
- Дизайн-система и компоненты
- Формы и состояния
- Срок 3–4 недели
Редизайн
- Разбор текущего сайта
- Перерисовка по разделам
- Сохранение структуры и адресов
- Срок от 4 недель
Вилки даны как ориентир: точная сумма считается после списка экранов. Съёмка, иллюстрации и покупка стоковых фотографий оплачиваются отдельно.
Кому это
Компаниям со своей разработкой: программисты есть, дизайнера нет. Мы отдаём макеты и дизайн-систему, ваша команда собирает — так работают чаще всего.
Тем, у кого сайт работает, но выглядит на десять лет старше компании. Тогда речь о редизайне: перерисовываем по разделам, сохраняя структуру и адреса страниц, чтобы не потерять поисковый трафик — как это делается правильно.
Если вам нужен готовый работающий сайт, а не файлы, разумнее брать разработку целиком: дизайн там уже внутри, и никто не спорит на стыке. Для личных кабинетов и админок есть отдельная услуга — UI/UX-дизайн.
Типичные
01
Дизайн рисуют по «рыбе». Настоящий заголовок оказывается вдвое длиннее, и красивый макет разваливается на первой же реальной странице.
02
Мобильную версию оставляют «на потом». Половина посетителей приходит с телефона, и переделка обходится дороже, чем отрисовка сразу.
03
Серый текст на светло-сером фоне. Модно ровно до того момента, когда клиент старше пятидесяти не может прочитать цену.
04
Макеты отдают картинками без исходников. Через год для новой страницы приходится нанимать дизайнера заново — и он рисует в своём стиле.
Что нужно
Тексты или хотя бы их черновики. Дизайн по «рыбе» выглядит отлично и разваливается при первом же реальном заголовке — это самая частая причина переделок.
Логотип в векторе, фирменные цвета, если они есть, фотографии производства, команды или работ. Стоковые улыбающиеся люди в костюмах узнаются мгновенно и доверия не добавляют.
Один человек, который утверждает макеты. Дизайн — самая вкусовая часть проекта, и обсуждение вшестером превращается в бесконечность.
Примеры сайтов, которые вам нравятся, и объяснение чем. «Нравится вот этот» без объяснения бесполезно, а «нравится, что видно цену сразу» — уже требование.
Как проверяем
Перед показом каждый экран проходит четыре проверки. Они скучные, зато после них не приходится переделывать сайт на этапе вёрстки.
Реальный текст
Подставляем ваши настоящие заголовки и названия услуг. Если блок разваливается на слове «Проектирование инженерных систем» — правим сейчас, а не потом.
Узкий экран
Смотрим на 360 пикселях, а не только на широком мониторе дизайнера. Таблицы, карточки и длинные кнопки ведут себя там по-разному.
Читаемость
Проверяем контраст текста и фона по нормам доступности. Заодно это спасает от модного серого по светло-серому.
Путь к действию
Открываем экран и ищем глазами кнопку. Если через три секунды не нашли — макет возвращается в работу, каким бы красивым ни был.
Считается
Фотосъёмка и покупка стоковых изображений. Мы подбираем кадры и ставим задачу фотографу, но платите вы напрямую — так дешевле и понятнее, за что.
Иллюстрации и трёхмерная графика, если проект их требует. Это отдельный жанр со своим сроком, и прятать его в цене макета нечестно по отношению к бюджету.
Копирайтинг. Дизайн по «рыбе» переделывается почти всегда, поэтому либо тексты приносите вы, либо мы берём эту работу отдельной строкой — с интервью и двумя итерациями правок.
Вёрстка и программирование. Если разработчиков нет, смотрите разработку сайтов: там дизайн уже включён в проект и не считается дважды.
Авторский
Самая обидная потеря качества происходит между макетом и сайтом. Верстальщик округляет отступы, меняет шрифт на похожий, забывает про состояние наведения — по отдельности мелочи, вместе получается «вроде то, но выглядит дешевле».
Поэтому после сдачи макетов мы остаёмся на связи: отвечаем на вопросы, а когда вёрстка готова, проходим по экранам и отдаём список расхождений. Обычно это страница замечаний, из которых половина правится за час.
Если сайт собираем мы сами, надзор входит в проект по умолчанию — смотрите разработку сайтов. Когда верстает ваша команда, договариваемся отдельно: чаще всего хватает нескольких часов в конце.
Анимации и поведение при прокрутке описываем словами и примерами: в статичном макете их не покажешь, а без описания разработчик придумает своё.
Материалы по теме
А Квадрат
Частые
Сколько стоит дизайн сайта?
От 60 000 ₽ за лендинг и от 120 000 ₽ за сайт с главной, типовыми страницами и дизайн-системой. Считаем по уникальным экранам: двадцать однотипных карточек — один макет, а не двадцать.
В каком виде отдаёте макеты?
Проект в Figma с доступом на вашу почту, слои названы, стили собраны в систему. Любой разработчик сверстает без нашего участия — это принципиально, файлы остаются вашими.
Сколько правок входит?
Два круга на каждый макет. Если нужен третий, обычно дело не в дизайне: расходятся ожидания по структуре или тексту, и мы возвращаемся на шаг назад вместо перекрашивания кнопок.
Можно только дизайн, без разработки?
Да, это обычная история. Отдаём макеты вашим разработчикам и отвечаем на их вопросы, пока идёт вёрстка: пара сообщений в неделю обходится дешевле, чем сайт, собранный «примерно как на картинке».
Нужен ли готовый фирменный стиль?
Достаточно логотипа и цветов. Если стиля нет, дизайн сайта его фактически и задаёт: собираем палитру, шрифтовую пару и правила, чтобы дальше всё выглядело единым.
Сколько времени занимает?
Лендинг — одна-две недели, сайт — две-четыре. Срок идёт от момента, когда есть структура и тексты: без них дизайн превращается в украшение пустоты и потом переделывается.
Давайте
Пришлите ссылку на текущий сайт или список нужных страниц — посчитаем экраны, стоимость и срок. Если выгоднее сделать проект целиком с разработкой, скажем об этом.