Типографика как основа
Не украшение, а несущая конструкция: шрифтовые пары, кегли и межстрочные задают иерархию и ощущение дороговизны раньше любых эффектов.
Дизайн сайта
Мы делаем дизайн только вместе с реализацией — и это не ограничение, а причина качества. Между красивым макетом и работающим сайтом лежит слой решений: как движется анимация, что происходит на узком экране, сколько весит эффект. Всё это решается на стыке дизайна и кода, и когда стык проходит внутри одной головы, замысел доходит до экрана целиком.
Работаем удалённо по всей России. Ниже — как устроен процесс и из чего складывается результат.
Почему мы не отдаём макеты отдельно
Скажем сразу, чтобы вы не читали всю страницу зря: отдельный макет для своей команды разработки мы не делаем. Нужен именно файл с дизайном — честнее найти дизайнера, который работает так. Это нормальный формат, просто не наш.
Причина не в жадности. Макет — статичная картинка, а сайт — поведение. В картинке не видно, как раскрывается блок, с какой инерцией едет скролл, что происходит с сеткой между планшетом и телефоном, сколько весит эффект на среднем мобильном. Всё это решает тот, кто пишет код.
Мы не в претензии к верстальщикам: они делают ровно то, что видят в файле. Но когда замысел в макете не описан, его достраивают по-своему: анимации упрощаются до типового решения, адаптив собирается приблизительно, скорость не контролирует никто. А виноватого потом нет — дизайнер отдал красивое, разработчик собрал по макету. Поэтому у нас это один процесс: иначе до экрана доходит процентов семьдесят задуманного.
Как мы делаем дизайн
Дизайн начинается не с картинки, а с вопроса, что должно произойти на сайте.
Разбор бизнеса и конкурентов
Смотрим, кому вы продаёте, как человек принимает решение и как выглядят те, с кем вас будут сравнивать. Дизайн начинается здесь, а не в редакторе.
Структура и логика экранов
Определяем, что должно произойти на сайте и в каком порядке человек это узнаёт. Сначала последовательность мыслей, потом картинка.
Визуальное направление
Подбираем типографику, палитру и характер движения — то, из чего складывается ощущение уровня. Показываем направление до того, как отрисованы все экраны.
Дизайн главной
Первый экран и ключевые секции целиком: на них видно и подачу, и ритм. Правим до вашего «да» — дальше идём только с утверждённой главной.
Остальные страницы
Внутренние разделы собираются на той же системе: те же шрифтовые пары, отступы и приёмы. Сайт получается единым, а не набором разных страниц.
Передача в разработку без потерь
Отдавать некому: разработка своя. Дизайнер и разработчик — одна голова, поэтому ничего не «упрощается по дороге».
Из чего складывается наш дизайн
Асимметрия и пустота
Воздух работает наравне с элементами. Пустое место направляет взгляд и делает страницу спокойной, а не пустой.
Движение, которое ведёт
Анимации по скроллу не для красоты: они показывают, куда смотреть дальше, и удерживают внимание на длинной странице.
Адаптив на этапе дизайна
Мобильная версия продумывается вместе с десктопной, а не подгоняется после. Поэтому на телефоне ничего не «разъезжается».
Скорость как часть дизайна
Вес эффектов считается сразу. Наш собственный сайт держит мобильный PageSpeed 97 при 3D-графике и анимациях — это следствие такого подхода, а не удача.
Дизайн и скорость
Обычно красивый сайт грузится медленно, и это считают неизбежной платой за внешний вид. Причина в другом: дизайн рисуют, не думая о весе. Тяжёлое видео фоном, десяток шрифтовых начертаний, эффекты, заставляющие браузер пересчитывать страницу на каждом кадре, — в макете всё это не стоит ничего. Стоить начинает на телефоне у клиента.
Мы решаем это на этапе дизайна, а не разгребаем после. Часть эффектов почти бесплатна: прозрачность и сдвиг, типографика, ритм отступов. Часть дорога, но оправданна в одном-двух местах — 3D на первом экране, где она несёт смысл. А часть не окупается никогда: видео фоном, параллакс на каждом блоке, шрифты, которых никто не заметит.
Разница видна в цифрах: этот сайт — с 3D-графикой, движением по скроллу и кинематографическими переходами — держит мобильный PageSpeed 97. Не потому что мы отказались от эффектов, а потому что заранее знали цену каждого.
Что вы получаете
Выглядит дороже конкурентов — и быстрый
Обычно приходится выбирать между «красиво» и «быстро». Мы снимаем этот выбор, решая вопрос веса на этапе замысла.
Узнаваемость вместо шаблона
Сайт нельзя поставить конкуренту без единой правки. Это и есть разница между дизайном и оформлением.
На телефоне так же, как на компьютере
Одинаковое качество подачи на любом экране: половина посетителей увидит только мобильную версию.
Смотреть, а не читать
Про дизайн бесполезно рассказывать словами. Вот работы, где видно подачу.
Сколько стоит
Отдельной цены на дизайн у нас нет — он входит в стоимость разработки и не считается сверх неё. Платить дважды, за макет и за сборку, не нужно: это один процесс.
Поэтому смотреть стоит на цену формата целиком. Все суммы с составом и сроками собраны на странице цен, а подробности по каждому формату — на его странице: лендинг, корпоративный сайт, интернет-магазин и остальные форматы. Прикинуть бюджет под свою задачу можно в калькуляторе стоимости.
Частые вопросы
Сколько стоит дизайн сайта?
Отдельной цены на дизайн у нас нет: он входит в стоимость разработки и не считается сверх неё. Порог входа зависит от формата — например, лендинг от 50 000 ₽. Все цены с составом собраны на странице цен.
Можно ли заказать только макет?
Нет, и мы говорим об этом сразу. Макет, свёрстанный чужими руками, почти всегда теряет часть замысла: плавность движения, поведение на разных экранах, скорость. Если нужен именно файл для своей команды разработки, честнее обратиться к дизайнеру, который так работает.
Сколько времени занимает дизайн?
Отрисовка идёт быстро, время съедают круги правок. Чтобы не растягивать, мы утверждаем главную целиком и только потом идём в остальные страницы — так правки не возвращаются по второму кругу.
Сколько вариантов дизайна вы делаете?
Мы не рисуем три случайных варианта «на выбор» — это способ переложить решение на клиента. Предлагаем одно направление, обоснованное задачей и конкурентами, показываем его на главной и дорабатываем вместе.
Что если дизайн не понравится?
Правим до вашего утверждения: к разработке переходим только после согласования дизайна. Поэтому ситуация «сайт готов, но выглядит не так» не возникает — до кода вы уже приняли то, что получится.
Обсудить дизайн
Расскажите про бизнес и про то, каким сайт должен ощущаться. Покажем направление и назовём цену формата до начала работы.