суббота, 12 декабря 2015 г.

Как создать сайт и не стать врагами с дизайнером и разработчиком

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


Скажу сразу, это мой первый опыт разработки с нуля и руководства всем процессом: от "в футере дорисуй ссылки" вплоть до "сделай вращение баннеров 2 секунды".

Для меня эта работа разделилась на 3 этапа, опишу каждый и выделю важное:
  • создание макета
  • отрисовка дизайна по бренбуку
  • верстка
  • тестирование, доработка

Макет

Макет создавала сама в platformalp, очень удобно и наглядно. Есть большинство инструментов - блоки отзывов, кнопки, формы и прочая мелочь для создания лендинга. Сделала макет за день, но мысли вынашивала около недели. Я делала пометки, что должно быть на сайте и какой текст/мысль должна быть в каждом блоке.

Однажды мы (директор, дизайнер и маркетолог) собрались и вместе доработали порядок следования блоков и какие вопросы должен закрывать сайт. Пользователь спрашивает, а сайт отвечает:
Где я и что мне предлагают?
Зачем мне это нужно?
Почему я должен купить именно это? Как это поможет решить мои проблемы?
Какие гарантии?
Здесь я не буду подробно останавливаться на психологической стороне создания сайтов, но сайты должны быть для людей. Есть много литературы на тему посадочных страниц и сайтов. 

Что здесь важно: 
  • всегда держите в голове портрет вашего пользователя и как он будет пользоваться сайтом, что для него важно в принятии решения о покупке.

Дизайн

Крайне важно представить в голове уже готовый сайт и вообразить себя пользователем, поставить себя на место вашей ЦА и "протыкать" мысленно все кнопки. После согласования нюансов по дизайну - каким должно быть это окно, что произойдет после открытия страницы, что увидит пользователь на первом экране - вся работа передается дизайнерам. 

Что важно здесь:
  • если сайт адаптивный под разные платформы (в наше время грех писать "если", это маст хэв) тогда нужно продумать, как сайт должен выглядеть на разных устройствах. Десктопные пользователи и мобильные имеют разные привычки просмотра, и UX дизайн для них разных. От того, насколько вы детализируете сайт в голове, будет зависеть скорость отрисовки макета. Нельзя сомневаться и просить дизайнеров "прикинуть два вида окошек, и мы посмотрим какое будет выглядеть лучше". Это лишние трудозатраты. 
  • качество всех макетов лучше сразу рисовать для ретины. Пусть оно будет наилучшим, чтобы на всех мониторах смотрелось одинаково отлично, без размытий и пикселей.
  • кроме отличного качества дизайнерам нужно напомнить сохранять все картинки для веб устройств (есть такая опция в графических редакторах, например, в Photoshop). Это важный аспект, который влияет на скорость загрузки сайта. 

Верстка

Наконец, у вас в папке готовые макеты сайта (я говорю про несколько версий - мобильные, планшет, десктоп), дальше выступают разработчики.

Что здесь важно:
  • нужно решить какие блоки текста будут редактироваться/изменяться, какие иконки будут вставляться как картинки (зависит от cms. Например, у нас плейсхолдеры под изображения и текст. И, если картинку не нужно будет менять, то разработчики могут "вшить" в код). Обязательно скажите разработчикам про редактируемые области. Если у вас будет возможность быстро поменять текст, а не просить об этом верстальщика, вы сэкономите свое время.
  • если нужны отдельные иконки - просим дизайнеров вырезать из макета. Не нужно заставлять разработчиков делать эту работу.

Тестирование

Разработчик скажет, когда можно просмотреть черновой вариант. Ставьте себя на место пользователя и изучайте свой сайт - всё ли работает, всё ли понятно? 

Что здесь важно:
  • внимательно пройтись по сайту, проверить работу всех кнопок, ссылок, окон, сделать тестовые заказы - в общем, полностью проверить сайт от и до. 
  • проверить как сайт выглядит на разных устройствах. Для проверки есть онлайн-эмуляторы экранов, (например, http://responsivetest.net/. Кажется, сервис помер) иногда использую его или обращаюсь к коллегам, если у них разные телефоны, планшеты, ноутбуки разной диагонали. 
  • доведите сайт до идеала. Переспите с этим ночь, а на следующий день попросите коллег проверить сайт и прислать правки вам. Соберите правки и отправьте разработчику. Итого: на тестирование и доработки уходит два-три дня.

В общем, всё - сайт готов. Дружите с дизайнерами и разработчиками. Если что-то упустили первые, вторые помогут и наоборот. А вы помогайте всем)

В следующей статье расскажу, как подружиться с Google Tag Manager, облегчить жизнь себе и разработчикам и быстро настраивать события в этом быстро меняющемся мире.

Комментариев нет:

Отправить комментарий