Лендинг, юзабилити, адаптив... Как понять своего дизайнера?

Итак, вы заказчик, и вы решили обратиться к дизайнеру, чтобы он сделал вам сайт. Приходите к нему с запросом "Сделай мне красиво", а он начинает сыпать незнакомыми терминами... Знакомо? Чтобы таких ситуаций не было, написала небольшой ликбез, который позволит говорить с подрядчиком на одном языке.

Лендинг, юзабилити, адаптив... Как понять своего дизайнера?

Что означает эта пресловутая юзабилити?

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

Подробнее про юзабилити можно почитать здесь.

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

Низкий уровень юзабилити может убить даже самую крутую рекламную компанию. Если пользователь не может понять, как ему приобрести товар или услугу, он просто уходит с сайта.
Низкий уровень юзабилити может убить даже самую крутую рекламную компанию. Если пользователь не может понять, как ему приобрести товар или услугу, он просто уходит с сайта.

Что лучше - лендинг или многостраничник? А что дешевле?

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

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

Улучшит ли редизайн конверсию?

Планируя редизайн сайта, я запрашиваю у клиента данные Google Analytics, Яндекс.Метрики и другую информацию по обратной связи от клиентов. Я анализирую, где именно пользователи испытывают проблемы при взаимодействии с сайтом и предлагаю решения на основе своего опыта.

С этой точки зрения можно сказать, что да, конверсия улучшится, так как будут исправлены основные недочеты в юзабилити (мы же уже выучили это слово? :)). Но дизайнер не может гарантировать определенные показатели конверсии, так как она зависит еще и от контента заказчика, рекламных кампаний, работы отдела продаж и т.д.

Лендинг, юзабилити, адаптив... Как понять своего дизайнера?

Можно ли сделать сайт раз и навсегда?

К сожалению, нет. Тренды дизайна обновляются, CMS тоже - чтобы ваш сайт оставался актуальным, необходимо хоть немного, но редизайнить его, хотя бы раз в 2-3 года. Это не обязательно должна быть полная переработка дизайна - достаточно изменять небольшие элементы, как это делает, например, Amazon или Google. Также необходимо следить за показателями метрик и оптимизировать сайт, чтобы он наилучшим образом соответствовал запросам пользователей.

Поэтому, заказывая сайт, оставайтесь в рамках бюджета. Помните, что ему будет нужно своевременное обновление. А чем дороже сайт - тем дороже будет и редизайн.

Чем плоха Tilda?

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

1. Суперсложный дизайн и суперуникальную анимацию вы здесь не создадите.

2. За пользование всеми ресурсами Тильды нужно платить ежемесячно.

3. Ваш сайт все равно будет привязан к Тильде, и если сервис "полетит" или вы забудете его проплатить, то сайт будет недоступен. Да, можно выгрузить исходный код и разместить его на своем движке, но чтобы внести изменения в дизайн, нужно будет делать это в Тильде и снова выгружать код.

Если вы хотите быстро создать лендинг, и эти пункты вас не смущают - почему бы и нет.

Даже на Тильде
Даже на Тильде

Почему сайт на Тильде стоит так дорого? Это же конструктор

Чтобы дизайн получился по-настоящему уникальным, я использую:

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

В итоге, хоть дизайн на Тильде и может получиться быстрее, чем традиционная связка "дизайн + верстка + натяжка на CMS", трудозатрат он тоже требует значительных.

Что такое адаптив, и почему за него надо платить?

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

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

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

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

Зачем мне заполнять бриф? Вы не можете просто сделать красивый сайт?

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

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

Дизайнер делает сайт под ключ? И что такое эта ваша верстка и CMS?

Дизайнер делает дизайн - то есть, визуальный макет сайта, картинку. Чтобы сайт "появился" в интернете, нужно сначала сделать его верстку, а затем разместить на движке (CMS).

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

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

Лендинг, юзабилити, адаптив... Как понять своего дизайнера?

CMS - это система управления сайтом. Чтобы сайт разработал, его код (верстку) нужно разместить на CMS. Наиболее популярные системы - WordPress, Битрикс, OpenCart - с ними работает достаточно много специалистов. Также есть самописные движки, которые создаются под конкретный сайт.

Углубляться в тематику разработки не буду, это очень большая тема. Здесь я только хочу показать, что в понятие дизайна сайта не входит его верстка и размещение на CMS. Да, есть дизайнеры, которые умеют делать верстку. Есть дизайнеры, которые могут сделать весь комплекс работ по сайту. Но либо они очень дороги, либо качество их работ оставляет желать лучшего, потому что ИМХО невозможно развиваться во всех сферах одинаково успешно.

А дизайн в Photoshop будет? Что такое Figma?

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

В Фигме легко создавать прототипы, дизайн, кликабельные прототипы - то есть, сразу можно будет показать, что будет происходить при нажатии на ту или иную кнопку. Это онлайн-сервис, поэтому не нужно пересылать для показа заказчику никакие файлы - достаточно скинуть ссылку. Я сталкивалась с тем, что для многих заказчиков непривычно просматривать макеты в Фигме, но это дело практики. Попробуете один раз - и поймете, насколько это удобно.

Лендинг, юзабилити, адаптив... Как понять своего дизайнера?

Откуда вы знаете дизайн-тренды и принципы юзабилити? Почему я должен вам верить?

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

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

Надеюсь, статья была полезна. Если у вас остались вопросы по поводу дизайна и того, как там все работает, буду рада ответить!

Я - Лена, UX/UI дизайнер, делаю осмысленный дизайн стартапов, сложных продуктов (ERP/CRM/BPM), работаю с банками, застройщиками, фармой. От 2000₽/час, от 100.000₽ за проект. Некоторые работы можно посмотреть тут, заказать тут.

Недавно создала свой ТГ-канал, где буду делиться своим опытом и полезными фишками. Подписывайтесь, будет интересно!

Elena Nexman, UX/UI дизайнер
1212
14 комментариев

Привет! Клёвая статья на актуальную тему. И хорошо, что заказчики сейчас понимают роль дизайнера и необходимость дизайна для своего бизнеса.

В статье есть раздел: «Дизайнер делает сайт под ключ? И что такое эта ваша верстка и CMS?». В нем слишком поверхностно рассказано про процесс создания сайта под ключ. Ведь если заказчику сказать просто: ну нужен будет верстальщик еще — это будет некорректно, ведь в создании сайта участвуют еще специалисты. Сам встречался с тем, что заказчик обращался за дизайном и приходилось объяснять, что я готов сделать дизайн, но верстку, бэк и сео я не делаю.

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

Поэтому, было бы круто, если бы вы сделали новую статью подробнее именно про процесс создания сайта от начала до конца :)

2

Спасибо большое! Да, действительно, тема очень объемная - думаю да, стоит отдельную статью про это сделать :)

Очень развёрнутый ответ, не ожидал. Спасибо.

1

Помогаю чем могу :)

Привет, а какие книги по UX/UI рекомендуешь?

- Не заставляй меня думать
- Эмоциональный веб-дизайн
- Искусство цвета (не особо есть толк, но прочитать стоит. Либо я уже знала практически всё, что там написано к моменту прочтения)
- Сначала мобильные
- Дизайнь. Современный креатифф
- Сожги свое портфолио (почти классика в дизайне)

Да и вообще по UX подойдут любые книги, статьи, видео про логическое мышление, закономерности, где есть статистические данные, маркетинг. Они развивают как человека, способного мыслить и понимать. Развивают твой кругозор как специалиста, умеющего думать фактами, практикой, рабочими идеями, а не просто лепить красивые картинки

По UI - я бы советовала ничто иное как дрибл, беханс, пинтерест и awwwards. Так и развивается чувство прекрасного

А совмещая это с UX - получается великолепный дизайн. Он полезен, прост, удобен. Он красив.

2

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