Дизайн сайтов
Хороший дизайн сайта для B2B — это не украшение, а способ быстро объяснить сложный продукт и вызвать доверие к компании. Мы проектируем интерфейсы, в которых инженер находит характеристики, закупщик — условия, а руководитель — аргументы в пользу сделки. Делаем дизайн как для собственных разработок, так и для передачи вашей команде программистов.
Забудьте про фрилансеров.Сделаем проект от и до.
Дизайн заказываюткомпании с непростым продуктом
Так это может выглядеть
Дизайн, который объясняет.Наш подход к дизайну сайтов
У B2B-сайтов особая аудитория. Сюда редко заходят «просто посмотреть»: посетитель ищет конкретное оборудование, сравнивает поставщиков, собирает документы для согласования или проверяет, можно ли доверять компании. Он готов читать, но не готов разбираться в запутанной навигации и искать нужную таблицу среди декоративных картинок. Поэтому для нас дизайн начинается с вопроса «что человек должен понять и сделать на этой странице», а не с выбора модного стиля.
Мы проектируем интерфейсы от задач пользователя. Сначала собираем информацию: кто ваши клиенты, какие у них роли, на каком этапе сделки они приходят на сайт, какие возражения нужно снять. Потом превращаем это в прототипы — схемы страниц без оформления, на которых видно, где что расположено и как посетитель переходит от интереса к заявке. Только когда логика согласована, подключается визуальный дизайн.
Визуальная часть тоже работает на задачу. Промышленной компании нужна сдержанная, надёжная эстетика с крупными фотографиями производства и понятными схемами. Технологическому стартапу — выразительная подача, которая выделит его среди конкурентов. Дистрибьютору с большим ассортиментом — чистый и быстрый каталог, где ничто не отвлекает от товаров. Мы не навязываем один стиль, а подбираем его под бренд и аудиторию.
Отдельное внимание — мобильной версии. Даже в B2B заметная часть посетителей открывает сайт с телефона: снабженец по дороге на объект, руководитель между встречами. Мы рисуем макеты для телефона и планшета, а не надеемся, что вёрстка как-нибудь сама подстроится.
Дизайн можно заказать как отдельную услугу или как часть полной разработки сайта. Во втором случае дизайнер работает в одной команде с разработчиками, и макеты воплощаются без потерь.
От идеи до макетов.Этапы работы дизайнера
Погружение
Интервью с командой заказчика, изучение продукта, анализ сайтов конкурентов и отраслевых ожиданий. Определяем цели сайта и ключевые сценарии.
3–5 днейСтруктура и прототипы
Карта сайта и чёрно-белые прототипы основных страниц. Обсуждаем расположение блоков, приоритет информации и путь к заявке.
1–2 неделиКонцепция главной
Первый экран и главная страница в двух направлениях стиля. Выбираем одно, дорабатываем по комментариям.
1 неделяВнутренние страницы
Шаблоны разделов, карточек, статей, контактов и служебных страниц в едином стиле. Каждый шаблон учитывает реальный контент.
1–3 неделиАдаптивные версии
Макеты для планшета и телефона, продуманные отдельно: меню, таблицы, фильтры и формы на маленьком экране.
3–7 днейUI-кит и передача
Библиотека компонентов с состояниями, цвета, типографика, сетка и описание поведения элементов для разработчиков.
2–4 дняЧто вы получите.Результат работы
Карта сайта
Утверждённая структура разделов и страниц с понятной логикой навигации, согласованная с вашим ассортиментом и задачами продаж.
Интерактивные прототипы
Кликабельные схемы, по которым можно пройти сценарий посетителя до запуска разработки и заранее найти неудобные места.
Дизайн-макеты
Все шаблоны страниц в десктопной и мобильной версиях, подготовленные в современном редакторе с удобной структурой слоёв.
UI-кит
Кнопки, поля, карточки, таблицы, иконки и другие компоненты со всеми состояниями. С ним сайт можно развивать, не теряя единого стиля.
Сценарии анимации
Описание микровзаимодействий: наведение, раскрытие, появление блоков. Анимация помогает восприятию, а не отвлекает.
Сопровождение вёрстки
Дизайнер отвечает на вопросы разработчиков и проверяет готовую вёрстку на соответствие макетам. Это особенно важно, если программирует другая команда.
Выбор формата.Что можно заказать
| Формат | Что входит | Кому подходит |
|---|---|---|
| Дизайн лендинга | Прототип и макет одной страницы, мобильная версия | Запуск продукта, рекламная кампания, мероприятие |
| Дизайн корпоративного сайта | Структура, прототипы, 8–15 шаблонов, адаптив, UI-кит | Компании, которым нужен представительский сайт |
| Дизайн каталога или магазина | Каталог, фильтры, карточки, корзина, личный кабинет | Производители и дистрибьюторы с ассортиментом |
| Дизайн интерфейсов портала | Кабинеты, таблицы, формы, дашборды, роли пользователей | B2B-порталы и внутренние сервисы |
| Дизайн-концепция | Главная страница и ключевой шаблон в финальном стиле | Когда нужно выбрать направление перед большим проектом |
Из портфолио.Примеры дизайн-проектов
Дизайн сайта производителя промышленных насосов
Заказчику было важно показать инженерную экспертизу и упростить подбор оборудования. Мы спроектировали подборщик по параметрам и страницы моделей с чертежами, характеристиками и документацией.
Интерфейсы кабинета для дистрибьютора химии
Кабинет с сотнями позиций и сложными условиями поставки выглядел как выгрузка из учётной системы. Переработали таблицы, сделали быстрый поиск и понятные статусы заказов.
Концепция сайта IT-интегратора
Компания выросла из небольшой команды в крупного интегратора, а сайт остался прежним. Разработали визуальный язык с акцентом на отраслевые решения и реальные проекты.
Дизайн лендинга для выставки оборудования
Нужна была страница для нового аппарата к отраслевой выставке, сроки — сжатые. Сделали лендинг с 3D-изображением прибора, ключевыми характеристиками и формой записи на демонстрацию.
Дизайн каталога для производителя тротуарной плитки
Покупателям было сложно представить, как плитка будет выглядеть на участке, а цвета на фотографиях искажались. Мы сделали каталог с визуализацией раскладок, образцами в интерьере и фильтром по назначению покрытия.
Проверка качества.Каким должен быть макет
- Главное предложение считывается на первом экране за несколько секунд
- На каждой странице понятно, какое действие ждут от посетителя
- Текст читается комфортно: размер, контраст, длина строки
- Таблицы характеристик удобны и на телефоне
- Кнопки и ссылки выглядят кликабельными
- Макеты нарисованы с реальными текстами, а не заглушками
- Предусмотрены состояния: ошибки форм, пустой поиск, загрузка
- Стиль согласован с фирменным стилем и печатными материалами
- Все компоненты собраны в UI-кит с понятными названиями
- Изображения можно реально получить — съёмкой или визуализацией
- Формы заявок короткие и объясняют, что произойдёт после отправки
- Навигация остаётся понятной при росте количества разделов
О деталях.Что отличает нашу работу
Реальный контент в макетах
Рисуем с вашими текстами, характеристиками и фотографиями. Макет с «рыбой» выглядит красиво, но разваливается, когда в него попадают настоящие данные.
Дизайнер думает о разработке
Наши дизайнеры работают бок о бок с программистами и знают, что реализуется быстро, а что потребует лишних недель.
Визуальный контент
Если фотографий нет или они не подходят, организуем съёмку или 3D-визуализацию продукции в рамках наполнения контентом.
Доступность
Следим за контрастом, размером шрифтов и понятностью элементов, чтобы сайтом было удобно пользоваться людям с разным зрением и на разных устройствах.
Вкус — не критерий.Как оценивать дизайн
Один из самых сложных моментов в работе над дизайном — согласование. Макет показывают руководителю, коммерческому директору, маркетологу, и у каждого своё мнение: «слишком светло», «хочется больше синего», «у конкурентов было иначе». Обсуждение быстро превращается в спор о вкусах, а проект стоит на месте.
Мы предлагаем оценивать макеты по другим вопросам. Понятно ли за несколько секунд, чем занимается компания? Может ли инженер клиента найти нужную характеристику? Где закупщик увидит условия поставки? Что убедит нового клиента, что с вами можно работать? Если на эти вопросы есть хорошие ответы, дизайн выполняет свою задачу — даже если оттенок кнопки кому-то кажется не идеальным.
Чтобы разговор был предметным, каждую презентацию макетов мы сопровождаем объяснением: почему блоки расположены именно так, какие сценарии учтены, какие решения приняты на основе интервью и анализа. Комментарии удобно оставлять прямо на макете, а итоговые правки мы собираем в единый список и согласуем, прежде чем вносить.
Лучшая проверка — показать прототип или макет нескольким реальным клиентам. Даже пять коротких разговоров часто дают больше, чем долгие внутренние обсуждения: становится видно, где человек запутался, что пропустил и что ему понравилось.
Опыт в цифрах.Санмедиа
Перед заказом.Вопросы о дизайне сайтов
Можно ли заказать только дизайн, а разработку сделать самим?
Сколько вариантов дизайна вы предлагаете?
Сколько правок входит в стоимость?
Сколько стоит дизайн сайта?
Нужен ли фирменный стиль до начала работы?
В каком редакторе вы делаете макеты?
Можно ли переделать дизайн существующего сайта без смены движка?
Кому принадлежат макеты после завершения проекта?
Как быстро можно получить дизайн?
Как вы учитываете требования поисковиков в дизайне?
Расскажите о задаче —посчитаем проект
Опишите в двух словах, какой сайт нужен и к какому сроку. Мы изучим задачу, зададим уточняющие вопросы и в течение двух рабочих дней пришлём оценку сроков и бюджета. Можно написать и напрямую: [email protected].
Ответим в течение рабочего дня · Без навязчивых звонков · NDA по запросу