Веб-дизайн в Костроме

Веб-дизайн – это дизайн сайтов. Он включает в себя разработку интерфейса и инструментов взаимодействия пользователя с сайтом. Является разновидностью цифрового дизайна, то есть создается в цифровой среде.

Веб-дизайн, как и любой digital-дизайн, отличается динамичностью и интерактивностью. Это не статичная картинка, которой просто любуешься. Здесь есть интерактив, кнопки СТА, моделирование, анимация и т.д. Пользователь взаимодействует с продуктом при помощи мыши (на десктопах) или касанием пальцев (на смартфонах).

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

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

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

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

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

Графический дизайн зародился в печатной индустрии. Он делается для газет, журналов, книг. В нем тоже есть логика, навигация, но нет прямой интерактивности.

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

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

Графический дизайн по-другому называется UI-дизайн (User Interface – пользовательский интерфейс).

Сайт – это своего рода представительство компании в Интернете, ее цифровое лицо. Обычно именно с сайта начинается знакомство пользователя с брендом. Человек заходит на веб-ресурс и за несколько секунд составляет мнение о нем.

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

Что произойдет, если у вас будет некрасивый, дилетантский, шаблонный дизайн сайта? Вы не сможете зацепить клиента. И, увы, второго шанса произвести первое впечатление у вас уже не будет.

«Зачем интернет-магазину дизайн? Взял шаблон, настроил под себя, главное каталог…» Тоже так думаете? Это частое заблуждение.

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

Цель дизайна в данном случае – помочь магазину продать товар покупателю.

Каким критериям должен соответствовать дизайн интернет-магазина:

1. Универсальность. Рассчитываем на широкую аудиторию – людей разного пола, возраста, социального статуса, предпочтений и т.п. Интернет-магазины редко бывают узкой тематики и с узкой целевой аудиторией.

   Мода приходит и уходит, а классика актуальна всегда и нравится всем. Как это работает в случае с интернет-магазинами? Делаем дизайн простым и при этом «богатым», отдаем предпочтение спокойным, однородным цветам и простым формам, прорабатываем детали.

2. Уникальность. Дизайн должен запомниться покупателю, чтобы он вернулся сюда снова.

3. Сдержанность и умеренность. Не перегружаем дизайн информацией. Хороший дизайн – это когда уже нечего удалить. Дизайн не должен «выпирать» и отвлекать пользователя от совершения действий, ведущих к покупке. Все-таки на первый план выводим товары, а дизайн оставляем на втором плане в качестве дополнительного, завершающего штриха.

   При этом дизайн – это не что-то безликое. Он должен вызывать эмоции, которые подведут к покупке.

   В цветовой схеме сайта используем не более 2-3 цветов. Используем мягкие и спокойные цвета, чтобы вызвать доверие и согласие (на сайте с кричащими, ядовитыми цветами человек не сможет находиться долго). Цвет фона – чистый. Если и применять паттерн, то очень неброский и однородный.

4. Логичность. Используем правила Золотого сечения, пропорции Фибоначчи, модульные сетки.
5. Привычность. Располагаем элементы на сайте так, как привык пользователь. Он должен, не задумываясь, находить необходимую информацию или кнопку на привычных местах. Тут поможет «правило дурака»: уж если дурак поймет, то все другие точно.
6. Продуманные сценарии поведения. Откуда к вам приходит покупатель – из поисковиков, соцсетей, с рекламных баннеров? Какие действия ему нужно совершить, находясь в разных разделах сайта, чтобы достичь цели?

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

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

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

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

Правда, сайт получится бесплатным условно. За пользование этим ресурсом вам придется платить. Обычно это сумма в пределах 500 рублей в месяц.

Для сайта, который создается всего за пару часов, дизайн играет уже второстепенную роль.

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

Создание дизайна сайта начинается с беседы с заказчиком и аналитики.

Прежде чем приступать непосредственно к разработке прототипа и затем конечного дизайна, нам нужно:

• понять, чем занимается заказчик и какой дизайн он хочет (потом на основе брифа составляется техзадание, в котором прописывается структура продукта и требования к дизайну),
• проанализировать нишу и конкурентов – изучаем бизнес заказчика, анализируем 5-10 конкурентных сайтов (какая у них подача информации, какие блоки, в чем плюсы и минусы и т.д.), учитываем чужой опыт, чтобы сделать лучше,
• спроектировать информационную архитектуру, то есть описать будущие блоки сайта в общих чертах, без прорисовки – делаем на простом листе или в графическом редакторе, согласовываем с заказчиком,
• собрать референсы, то есть работы других дизайнеров – по результатам их анализа нужно найти баланс между тем, чтобы вписаться в тренды и при этом привнести в дизайн что-то новое, выделиться.

И только после всех этих предварительных работ дизайнер переходит непосредственно к разработке прототипа сайта.

Создание прототипа, который имитирует функционал готового сайта, называется прототипированием.

Прототип – это набросок будущего сайта. Черно-белый, без детальной проработки, без картинок. Но дизайнер уже имеет дело с композицией, компоновкой, подбором шрифтов.

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

На этом этапе мы формируем гипотезы и делаем исследования. На основании этих данных составляем перечень функционала и прописываем сценарии поведения.

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

Что делаем?

• Определяем функционал сайта (например, каталог продукции, карточки товаров, поиск на сайте, фильтры и сортировка, оформление заказа, оплата и доставка, личный кабинет и пр.) и набор уникальных страниц.
• Потом создаем сетку сайта, стили текста, базовый набор UI-элементов. Прототипы делаются в черно-белом цвете.
• Делаем главную страницу, от которой потом будут выстраиваться остальные. Разрабатываем хедер, футер, элементы навигации, располагаем блоки внутри страницы. Продумываем и тестируем интерактивные элементы: активные ссылки, ховер-эффекты, всплывающие формы обратной связи, слайдеры (сменяющие друг друга картинки).
• Разрабатываем внутренние страницы. Учитываем элементы взаимодействия: межстраничные переходы, клики, выпадающие списки.

По окончании этого этапа получаем структуру сайта и карту взаимодействия с ним пользователя. После этого этапа прототип готов превратиться в конечный дизайн.

Наш любимый инструмент для прототипирования и UI-дизайна – Figma. Также работаем с Axure, Sketch, Adobe XD.

И только уже после прототипирования дизайнер переходит непосредственно к тому, что принято считать непосредственно дизайном.

Как видим, около 70-80% работы дизайнера складывается из аналитики и проектирования и только 20-30% — это непосредственно сам дизайн.

Хотите эффективный сайт? Вам нужен уникальный, индивидуальный дизайн. Какие преимущества он вам даст:

1. Вы выделитесь среди конкурентов. Вы будете отличаться, и уже одно это будет вашим конкурентным преимуществом.
2. Создадите образ солидной организации. В случае с сайтом работает народная мудрость о том, что встречают по одежке. По внешнему виду веб-ресурса посетитель сделает выводы о том, насколько у вас крупные ресурсы и серьезные намерения. Вы смогли позволить себе авторский сайт? Это автоматически поднимает ваш статус и дает гарантии вашим клиентам. Вы не из числа тех, кто делает все на скорую руку/ является временным игроком/ скоро закроется/ некомпетентен в своей сфере/ имеет плохой вкус и пр.
3. Сформируете бренд. Уникальный дизайн сайта будет привязан к корпоративному стилю и будет работать на повышение узнаваемости вашего бренда.
4. Выведите целевую аудиторию на эмоции, сформируете доверие. ЦА предпочитает сайты с авторским дизайном, обращает на них внимание и остается на них. У вас получится произвести первое впечатление со знаком «+». От этого будет зависеть успех дальнейшего продвижения проекта.
5. Добьетесь высокой эффективности. У сайтов с индивидуальным дизайном выше конверсия и ниже показатель отказов, чем у шаблонных ресурсов. В результате и стоимость лида будет ниже.

Дизайнер продумывает:

• Композицию. Она должна быть целостной, каждый элемент должен иметь обоснование. Расставляем акценты в виде кнопок, заголовков, картинок.
• Общий стиль. Одно из универсальных правил – жизненность. Элементы на сайте должны напоминать то, что мы видим в обычной жизни, то, что создано природой. Поэтому предпочтение стоит отдать сглаженным формам и спокойным деталям.
• Цветовые решения. За каждым цветом закреплены определенные эмоции, которые он вызывает у пользователя почти всегда. Зеленый – жизнеутверждающий, умиротворенный; красный – смелый; синий – свежий; желтый – радостный, энергичный и пр. Это нужно учитывать при разработке дизайна сайта. Также важно выдержать дизайн сайта в цветах логотипа (обычно наш дизайнер сначала разрабатывает логотип для компании, а потом уже с учетом него делает дизайн сайта).
• Типографику. Речь идет о подборе шрифтов, цвета для текста, расстояния между буквами, словами, абзацами. Все это важно и для привлекательности ресурса, и для удобства его использования. Например, если вы говорите о моде или архитектуре, то можно выбрать шрифт с засечками. Для сайтов об искусстве или для детей можно применять рукописные шрифты. Для юридической компании будут уместны строгие гарнитуры шрифтов с четким написанием.

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

Сайты должны быть не только красивыми, но и удобными. Разработкой сайта должен заниматься UX-дизайнер. UX переводится как «пользовательский опыт», а UX-дизайнер продумывает, как пользователь будет взаимодействовать с продуктом (переходить из одного раздела в другой, нажимать кнопки, заполнять формы, пользоваться другими элементами интерактива и пр.).

При разработке дизайна сайта необходимо учитывать правила юзабилити. Вот они:

1. Пользователь должен видеть статус системы, чтобы понимать, что сейчас в ней происходит.
2. Система должна быть простой, символы – похожими на реальный мир.
3. У пользователя должна быть возможность продублировать или отменить свое последнее действие.
4. Следует придерживаться стандартов однотипных сайтов (слева меню, наверху разделы, ввод логина и пароля, корзина).
5. Предотвращайте ошибки, заранее предупреждая о них пользователя (например, предупреждение о низком заряде батареи).
6. Интерфейс должен быть интуитивно понятным, используем всем понятные знаки.
7. Системы с ускорителями и возможностью настраивать действия всегда в выигрыше.
8. Приветствуется минимализм в дизайне – тогда пользователь быстрее достигнет желаемого.
9. Объясняйте пользователю, из-за чего произошла ошибка и как себя в этой связи вести.
10. Размещайте справочные материалы в зоне быстрой доступности.

Обязательное требование к сайту – его кроссплатформенность, то есть способность работать с несколькими операционками, к примеру, Windows и Linux.

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

А что может дизайнер?

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

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