Привет! Меня зовут Данил. 12 лет занимаюсь веб-разработкой на разных ролях. От веб-программиста, проектировщика, проджект-менеджера, до продакт-менеджера и владельца веб-студии.
Зная все стадии разработки сайтов, расскажу об узких местах и что дизайнеру-новичку можно улучшить в своей работе.
Смотрите шире
В небольших проектах или при отсутствии понимания процесса веб-разработки, дизайнеры являются проектировщиками, задают структуру сайта и страниц, предлагают конкретные решения: расположение элементов, слайдеры, цвета и т. п. Эти решения могут не учитывать задачи всех заинтересованных лиц: верстальщика, программиста, маркетолога, заказчика.
Поэтому собирайте как можно больше требований от всех участников проекта, интересуйтесь в каком виде передавать готовые материалы дальше и т.п.
Статья посвящена не сколько отрисовки дизайн-макетов, сколько процессу разработки сайта и участия дизайнера в нем, взаимодействия с заказчиком и с другими членами команды.
Процесс разработки сайтов
Чтобы понять, что улучшить, нужно знать полный цикл производства. Каждый этап огромная тема, рассмотрим вкратце.
Среднестатистический процесс разработки сайта состоит из этапов:
- Поиск заказа и продажа. Пресейл, брифинг, предварительный расчет стоимости работ, продажа, подписание договора
- Проектирование. Сбор требований, исследования, прототипирование, подготовка ТЗ на разработку.
- Разработка дизайна и адаптивность. Здесь может быть брендинг и другие работы.
- Верстка и тестирование верстки
- Интеграция верстки с CMS (или без)
- Тестирование верстки
- Наполнение сайта контентом
- Общее тестирование сайта
- Оптимизация кода, предстартовые работы и старт сайта
Дальше могут быть SEO продвижение, реклама, сопровождение и улучшение сайта.
Мои рекомендации веб-дизайнеру
1. Уделите много вниманию брифу
Опишите в брифе ЦА заказчика, цели, которые должен достичь сайт, опишите что является ключевым/целевым действием на страницах, сколько этих страниц должно быть и т.п. Для примера, оставляю первичный бриф, с которым прихожу на встречу с заказчиком
Еще в моем брифе есть пункты по стилю. Я предлагаю заказчику скинуть варианты сайтов, которые нравятся и которые не нравятся. И нужно описать, что именно нравится, а что нет. Это помогает понять вкусовые предпочтения заказчика и попасть дизайном в точку
— Татьяна Филипович, дизайнер
2. Описывайте вводную от заказчика и прилагайте её к брифу
Вводная может быть размером 500 символов, описанная словами, которые сказал заказчик + ваши комментарии и заметки. Это нужно для фиксации первоначальной задачи. Чтобы обращаться к этому тексту при недопонимании или вспомнить, что от вас хотели и как это описывали.
3. Утверждать каждый этап выполненных работ
Каждый этап работ: бриф, тексты, прототипы, макет страницы, дизайн проекта полностью, должны утверждаться заказчиков.
Для этого вы должно четко и ясно спросить «Макет согласован, идём дальше?». Обязательно фиксируйте договорённость письменно, на почте или в мессенджере.
Повторю ещё раз: КАЖДЫЙ ЭТАП!!!
Это существенно снизит ваши шансы, на финишной прямой, услышать «Ой, я думал это примеры, а не дизайн. Давайте все переделаем».
Обычно согласовываю прототип. После того, как прототип согласован, изменения по структуре сайта за доп плату. Первый экран не согласовываю. Обычно сразу страницу. Но да, важно все проговаривать в письменном виде
— Татьяна Филипович, дизайнер
4. Проектируйте или выясните кто будет проектировать
Давайте вкратце, тема очень обширная, но должна быть затронута.
Проектирование — процесс разработки прототипов, написания ТЗ на дальнейшие этапы работы (дизайнеру, верстальщику, разработчику, контент-менеджеру и т.п.). Сайт зарождается именно в этот момент.
Пропуская этап или уделяя ему мало внимания можно получить не логичные макеты и при разработке будет много переделок и ошибок.
Если проект с достаточным бюджетом и есть проектировщик или заказчик берет на себя роль проектировщика (имея компетенцию), то с вас снимается задача.
Если проектировщика нет — задача, пусть в минимальном объеме, ложиться на вас. Обязательно обговорите кто занимается этим этапом и в каком объеме. Проектирование не дизайн, реплики заказчика «Ну набросайте картинки, будет достаточно» — не приведут ни к чему хорошему. На проектирование нужно выделить время, иногда больше чем на разработку дизайна. Нужно понимать что с чем взаимодействует на страницах, как это будут разрабатывать, наполняться и т.п.
Если проектировать будете вы, хотя бы бегло изучите как проектируются сайты, заложите на это время и бюджет. Либо переложите на клиента. Наброски страниц на листочках тоже можно использовать как прототипы.
Наброски — это первый этап проектирования. Он называется скетч. Соглашусь, что проектирование это самый важный этап, т.к. на этом этапе должен получиться прототип сайта, который соответствует целям заказчика и пользователя
— Татьяна Филипович, дизайнер
5. Не предлагайте и не соглашайтесь делать несколько вариантов макетов в рамках фиксированного бюджета
Каждая вариация, каждый новый макет страниц, не входившие в начальную договорённость должны оплачиваться отдельно. Если допустить такое, вы будете делать объем работ на порядок больше, а заказчик сядет вам на шею
6. В КП/брифе указывайте полный перечень работ в рамках бюджета
До начала работ, в вашем предложении заказчику перечисляйте полное количество страниц и блоки на этих страницах. Если этого не сделать, у вас неожиданно появятся задания на разработку макетов каталога товаров, корзины, личных кабинетов и дашборда с статистикой и т.п. 🙂
7. Если нет логотипа и фирменного цвета — обсудите как быть
Не нужно делать логотип, если конечно вы сами этого не хотите. Иногда можно вместо логотипа написать название проекта красивым шрифтом. Если нет цветов бренда, утвердите их с заказчиком, путем поиска референсов. Референсы, это не цветовые палитры, это должны быть референсы готовых сайтов с похожими или такими же цветами.
8. Используйте реальные тексты, фото, видео
Если использовать стоковые или абстрактные фото и текст-рыбу, макет получится не правдоподобным. После разработки и наполнения контентом, сайт будет разительно отличаться от макетов.
Используйте реальный контент. Но вы не должны писать тексты или монтировать видео. Запрашивайте их у заказчика. Если по каким-то причинам ресурсов нет или их не могут предоставить, генерируйте приближенные к правде тексты, например с помощью нейросети ChatGPT. Фотографии также можно сгенерировать через нейросети, например Midjourney.
Фото из открытого доступа лучше не брать. Т.к. их нельзя использовать без указания источника. Есть стоки, платные и бесплатные. Если нужные фото есть только на платном стоке, то можно предложить клиенту оплатить их или предоставить свои. Главное понимать, какие фото подходят, а какие нет. Если у вас медицинский сайт, а там все врачи со стоков, то это будет явно не лучшим вариантом. По поводу текстов. Если дизайнер может написать текст, то можно предложить такую опцию заказчику за дополнительную плату
— Татьяна Филипович, дизайнер
9. Регламентируйте время, в течении которого будет обратная связь и ресурсы от заказчика
Простая и вроде бы очевидная мысль, но если вы не договоритесь о сроках, то длительность вашей работы будет растягиваться. В начале проекта вы можете сказать «Чтобы мне соблюсти сроки, нужно чтобы вы давали обратную связь в течении 3х дней. Если нет обратной связи, будем считать, что макеты приняты».
10. Ищите референсы и готовые решения
Подбирайте референсы, что нравится и не нравится. Это нужно как вам, так и вашему заказчику, оставляйте их в макетах, например в странице Прототипы или Референсы:
- Смотрите лучшие практики в шаблонных решениях , например темы для CMS на ThemeForest Там много продуманных и классных тем, шаблонов, макетов и т.п.
- Вдохновляйтесь лучшими работами на WWWAwords
- Ищите примеры на Behance и Dribbble
- В группах/чатах по дизайну
- Изучайте конкурентов вашего заказчика, лучших в нише
11. Отстаивайте свои решения
Если вы знаете, что делаете, у вас уже есть практический опыт в дизайне, вы делаете подобную работу далеко не первый раз — ОТСТАИВАЙТЕ СВОЙ ДИЗАЙН!!!
Если вы прогнетесь под напором энергичного заказчика, пышущего гениальными идеями в стиле «Ой, давайте тут кнопку круглую сделаем, мне больше нравится круглые элементы», то финальные макеты вы захотите скинуть в Мордор, а удовольствие от работы испарится совсем.
Но понимайте, когда вам говорят по делу и когда начинается вкусовщина и излишний перфекционизм.
12. Концентрируйтесь на вашей основной компетенции
Вы дизайнер, а не посудомойка 🙂
Это значит, что если вы делаете веб-дизайн, основная задача — продумать интерфейс, скомпоновать элементы, расположить элементы по сетке, адаптировать, упаковать проект и передать его дальше (заказчику, верстальщику, разработчику и т.п.).
В ваши задачи не входит (только если вы явно это обговорили и получили за это деньги) разработка иконок, разработка баннеров, покупка на стоках картинок, написание текстов и т.п.
Обговорите заранее, что будете делать, а что нет. Зафиксируйте договорённости в коммерческом предложении или брифе.
13. Всегда можно передоговориться
Не нужно 1 раз в неделю просить больше денег за свою работу, если вы уже утвердили бюджет. Стоит поднимать вопрос пересмотра бюджета, если фактический объем оказался больше, чем изначально договорились (а такое может быть даже если вы всё изучили и подготовились).
Всегда можно открыто и честно сказать заказчику «Углубившись в работу, понимаю, что рисовать макеты будет существенно дольше и если вы готовы, заплатите пожалуйста за эту работу больше на ххх рублей».
Можете постесняться попросить больше и с грустью делать работу. А можете преодолеть себя и на ваше предложение согласятся. Работу вы сделаете с большим энтузиазмом, радостью и результат будет круче.
Заказчик может согласиться не сразу, поэтому проявите настойчивость. Если по причине фиксированного бюджета увеличить его не могут, то уже ничего не сделаешь. Но практика показывает, что заказчик или представитель заказчика — закладывают подушку на непредвиденные расходы.
14. Подготавливайте макеты для верстальщика
Да, представьте, что завершение вашей работы — это не конец проекта. Дальше с макетами будет работать верстальщик и может быть даже не один. Позаботьтесь и помещайте все иконки во фреймы, чтобы верстальщику было не сложно ими пользоваться, размещайте картинки одинаково, чтобы их понятно было как сохранять и т.п.
Ниже полезные видео, а так же раздел с кратким списком таких особенностей для передачи макетов верстальщику.
Вы скажите «Но моя работа закончена на этом, за чем мне думать о ком то ещё»?
А вот нет. К вам через месяц или два придет заказчик и скажет, что нужно переделать макеты. Но у вас уже в работе новый заказ и будет проблемно возвращаться к старому.
Верстальщик будет говорить «Опять дизайнеры накосячили, я не могу с этим работать» и возможно, заказчик подумает, стоит ли продолжать сотрудничество и советовать вас своим знакомым.
Думайте о других и о вас тоже позаботятся.
Смотрим в светлое будущее
Ура! Вы прошли квест, трудности коммуникаций, утверждений макетов, переписок, потасовок и других радостей работы. Макеты утверждены. Что дальше?
1. Развивайте сотрудничество с заказчиком
Всегда лучше развить сотрудничества с тем, с кем работали, чем искать новых клиентов и притираться.
Если вам понравилось сотрудничество, обязательно обговорите с заказчиком дальнейшие задачи, если они есть.
А если нет задач, спросите, могут ли вас порекомендовать коллегам, знакомым, кому могут быть полезны ваши услуги. Часто такие знакомые обнаруживаются. Без работы не останетесь.
2. Продвигайте себя, оформляйте кейсы
Вы будете думать «Ой, да потом я оформлю кейсы на Биханс и Дрибббл, в Инсту выложу работы». Но вы можете погрязнуть в рутине, будете откладывать на потом.
Пока память о проекте свежа, оформите кейсы, разместите в соц. сетях. Со временем это войдет в привычку и не нужно будет тратить много усилий на оформление кейсов и презентации.
Оформляйте кейсы и привлекайте новых клиентов, а в раскрутке поможет Betop.me — сервис продвижения дизайнеров на Behance, Dribbble и Artstation
