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