Как мы делаем дизайн быстро, стильно и в 99% случаев без правок

Подписывайтесь на мой тг-канал, чтобы узнать больше о фишках и наблюдениях при работе веб-студии: https://t.me/andrey_overlay

Мы совершенно не выпячиваем дизайн наших проектов: не участвуем в конкурсах (потому что они платные), не трубим из всех щелей о том, что мы лучшие дизайнеры в городе, стране и во вселенной и не пытаемся позиционировать себя как «студия дизайна». Но при этом, все проекты нашей студии имеют высокую конверсию, особенно, если сравнивать с вариантами исполнения сайтов до нашего вмешательства. А также, наши сайты получают исключительно положительную обратную связь от пользователей и заказчиков, и мы сдаём наши проекты без визуальных и логических правок в 99% случаев. Ещё одним фактором качества нашей работы является то, что мы можем отрисовать абсолютно уникальный интернет-магазин всего за 1 месяц.

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

Подготовительные работы по дизайну сайта у нас были и будут бесплатными. Они не занимают много времени, если не заниматься переливанием воды, а сконцентрироваться на поиске важной информации: как конкуренты общаются с пользователями, какой у них есть необычный функционал клиентского опыта, который можем протестировать и мы, какую информацию об услугах или товарах предоставляют своим пользователям конкуренты. Важное замечание: любая аналитика не должна происходить в вакууме — у неё должен быть контекст. Например: если вы изучаете позиционирование конкурентов, то стоит учитывать то, какой компанией хочет быть заказчик в глазах своих пользователей. Учитывая такой контекст, можно формировать позиционирование компании клиента на его сайте: отстраиваться от конкурентов (все делают так, а мы сяк) или изображать лидеров (все делают так, а мы ещё лучше делаем так). При этом, учитывая подход к работе компании заказчика, его регалии и заслуги, ответ найдётся быстро и просто. Исходя из итогов аналитики, появляются вводные для формирования концепции будущего проекта.

У меня и нашей студии есть принципы, что ничего не бывает просто так, и что за словами нужно следить. А чтобы бы за словами было проще следить, нужно полноценно убедиться в том, какой будет проект и детально рассказать об этом владельцу бизнеса, который решил заказать у нас сайт. За концепцию, кстати, мы тоже деньги не берём.При изучении компании заказчика, нужно особое внимание обратить на то, как и каким образом они оказывают свои услуги или продают товары. Всё, что важно по умолчанию сказать о продукте — это его цена и польза. Вся остальная архитектура проекта выстраиваться исходя из особенностей клиентского сервиса компании. Таким образом сайт не только полноценно информирует пользователя о том, как он будет работать с брендом (а если ещё грамотно проинформировать, то это превращается в преимущества и выгоды), так и ещё неплохо разгружает отдел продаж, потому что к ним попадают более «тёплые» контактные данные потенциального клиента. Поэтому мы прорабатываем структуру проекта, перед тем как начинать платные работы. В ней указаны все страницы и блоки, и как это всё будет работать в итоге.

«Красивая» визуальная концепция. По данным исследования учёных Стэнфордского университета, до 46% потенциальных клиентов формируют своё мнение о сайте на основе его дизайна. То есть больше половины пользователей абсолютно не заинтересованы в том, какой «красивый» или «некрасивый» сайт, на который они попали. На самом деле, это общее веяние современного дизайна ещё с 20-го века: главное не идея и необычные композиционные решения, а информативность и удобство. Я придерживаюсь таких же взглядов и позволяю себе и своим сотрудникам «играться с дизайном» в редких случаях, например, если мы делаем визитку компании или сугубо брендовый проект. Если первостепенная задача сайта приносить деньги то всё, что должен сделать профессиональный дизайнер — это не мешать клиенту отдавать свои кровные. Настоящие мастера в этом ещё и немного помогают. Поэтому главное правило современного дизайна, который будет считаться привлекательным большинством смотрящих — он не должен раздражать. Конечно, практически на каждом новом проекте мы стараемся добавлять какие-то интересные интерактивные и визуальные решения, но это по большей части наша прихоть, чем обязательство. Кратко объясняя наши принципы заказчикам и показывая наши работы, мы даём вполне конкретную картину ожиданий от итогов нашей работы. А чтобы было ещё проще понять, какой дизайн у нас получится — показываем схожие стилистические референсы топовых проектов схожих сфер и тематик.

Крайне рекомендую дизайнерам изучать современные дизайн-системы и фронтенд-фреймворки, так будет намного проще понимать, чем вообще сейчас люди пользуются или будут в скором времени.

Если заказчик сайта у нашей студии решил с нами работать, то первым этапом работы над макетом является концепт первого экрана. Мы сразу подбираем все стилистические составляющие: гарнитуры (шрифты), цвета, размерности и прочее. Потом, в течение 1-2х дней мы отправляем эскиз первого экрана сайта — сырой и слабо проработанный. Но этот процесс необходим для того, чтобы убедить заказчика в том, что проект будет выглядеть именно так, как мы обговаривали ранее. Плюсом ко всему, на этом этапе очень удобно выявить какие-то вкусовые предпочтения владельца бизнеса и запланировать работу над контентом (например показать, какого стиля фотографии и изображения потребуются для проекта). И, конечно же, любому человеку намного приятнее взаимодействовать в прозрачной обстановке, когда он чувствует контроль над происходящим.

«Безумие — это точное повторение одного и того же действия. Раз за разом, в надежде на изменение. Это есть безумие». Ну и во-вторых, избавляясь от рутинной работы мы получаем массу преимуществ: сокращаем сроки разработки дизайна, из-за этого сокращается стоимость проекта, потому что сотрудники студии получают зарплату, и уменьшается количество возможных человеческих ошибок. Поэтому, в нашей веб-студии «Гротеск» есть собственная дизайн-система.

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

Есть ещё множество микромоментов, которые усложнили бы наш процесс работы со сторонними дизайн-системами, но перечислять их особо не имеет смысла. Стоит отметить, что я рассмотрел недостатки только со стороны использования нашей студии. Если рассматривать различные дизайн-системы в вакууме, то в большинстве случаев это хорошие и продуманные продукты.

Работа над дизайн-системой ведётся уже продолжительное время. Но при этом, сотрудники нашей студии и я, уже активно используем её несколько лет. Думая, что рассказать о ней, я понял, что лучшим способом будет некоторый исторический экскурс о том, как наша дизайн-система развивалась.

Версия 1.

Началом работы над собственной дизайн-системой можно считать тот момент, когда один из наших заказчиков заказал у нас сразу 4 сайта одной направленности. Поэтому мы сходу заготовили большинство UI-эллементов: кнопки, табы, поля ввода и т.д. При этом, основной идеей было шаблонизировать целые блоки сайтов, чтобы позже их переиспользовать. Так как работа велась над несколькими сайтами сразу, то и создание собственной дизайн-системы совсем не повлияло на сроки разработки сайтов (кстати на все 4 сайта мы потратили всего 3 месяца, включая разработку и публикацию). Позже, сделав ещё несколько проектов с помощью этой системы, мы накопили довольно большое количество готовых блоков, поэтому я решил запустить услугу разработку очень дешёвых сайтов. Найдя заказчика на эту услугу, мы потерпели фиаско и это стало единственным проектом, где я решил вернуть предоплату заказчику. Оказалось, что получая одно из самых дешёвых предложений на рынке, клиент всё равно ожидал получить полностью оригинальный макет (видимо не достаточно глубоко объяснил ему суть того, каким образом достигается такая стоимость). В любом случае, найдя множество недостатков в текущей итерации, я с командой приступил к разработке следующей версии.

Версия 2.

Работа над второй версией началась параллельно с созданием нового сайта для нашей студии. Он, кстати, на ней и собран: https://growtask.ru/. Первым делом, мы переработали UI-элементы: ввели разнообразие стилей (по сути, собрали все популярные решения и их унифицировали), поэтому теперь появилась возможность использовать заготовки стилистически разных компонентов, например: инпуты (поля ввода) с подчёркиванием, обводкой, заливкой, табы и кнопки разных стилей. При этом прибрали общие стили проекта в соответствии с CSS (по сути у нас появились заготовки и в вёрстке, а не только в дизайне). Также, в процессе работы решили абсолютно избраться от заготовленных визуальных блоков, так как времени на их «уникализацию» уходило гораздо больше, чем создание блока с нуля. По сути, с помощью этой версии дизайн-системы, в нашей студии разработано большинство существующих проектов. Но так как у нас появилось гораздо больше запросов на интернет-магазины (благодаря нашей собственной CMS «Simflex», о ней лучше напишу отдельную статью), то появилась потребность в обновлении дизайн-системы.

Версия 3. Текущая.

Одной из основных особенностей текущей дизайн-системы студии стало полное соответствие CSS наших проектов (название классов, стилей и модификаторов). Также, мы уже предзаготовили в коде все ключевые UI-элементы нашей дизайн системы (кнопки, инпуты и т.д.), благодаря отличной работе наших разработчиков. Грубо говоря, теперь для создания кнопки разработчику требуется просто вставить эту кнопку из готового набора и обновить стили согласно макету. Все анимации и взаимодействия уже будут заготовлены. Также, значительно расширилось количество элементов в самой дизайн-системе. Помимо UI-составляющих, появились и UX-составляющие — логика работы сайтов. Так как у нас в последнее время появилось много заказов на интернет-магазины, я решил добавить основные паттерны пути пользователя сразу в дизайн-систему. Так у нас появилась корзина, оформление заказа и другие компоненты, позволяющие быстро воссоздать основные компоненты, позволяющие пользователю взаимодействовать с интернет-ресурсом. При этом, намного проще обновлять уже существующие элементы, чем воссоздавать лучше практики с нуля. А практики мы стараемся использовать только лучшие: ориентируемся на крупные ресурсы, аналитику и, конечно же, опыт.

Таким образом, наша дизайн-система позволяет разработать современный и качественный интернет-магазин всего за 1 месяц и концентрироваться на новом уникальном функционале и фирменных стилях, которые будут соответствовать уникальности компании заказчика, а не на том, что должно присутствовать в проекте по умолчанию.

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

Стоит заметить, что на всех этапах работы над проектом участвую я в роли арт-директора. Кроме опыта, сотрудникам важно иметь взгляд со стороны. Когда я работаю над проектами, так же отправляю свои макеты нашим дизайнерам. Такой процесс называется «ревью» и применяется практически во всех крупных компаниях. Проходя такой этап, практически нивелируется банальный «человеческий фактор» в работе над проектами. Поэтому, наши дизайн-макеты переходят к этапу согласования максимально продуманными и выверенными.

В работе над каждым проектом в нашей студии существует практика поэтапного согласования. Так наш заказчик не выпадает из работы над проектом и имеет полный контроль над своим будущим инструментом для привлечения новых клиентов. Если мы работаем над интернет-магазином, то в обязательном порядке согласуем главную страницу, каталог и личный кабинет перед общей презентацией проекта. По завершению всех работ над дизайн-макетом, мы проводим полноценную презентацию результатов нашей деятельности заказчику. Для того, чтобы такая презентация прошла максимально просто и продуктивно, у нас существует некоторый ряд правил, которыми я, пожалуй, поделюсь:

Я абсолютно не говорю о том, что всё, что мы делаем — правильно. Все наши сотрудники постоянно учатся, и я уверен, что во многом наши процессы ещё изменятся. Но я абсолютно уверен в том, что такой выстроенный процесс работы над дизайном как удовлетворяет заказчика нашей работой, так и гарантирует ему результат. Об этом свидетельствует конверсия наших проектов и отзывы наших дорогих клиентов. А брать что-то себе на заметку или нет — решайте сами. В любом случае, я вами горжусь, если удалось дочитать эту огромную статью до конца. Спасибо.