Создание веб–сайта требует слаженной работы команды специалистов. Так как мы изучаем веб–дизайн, то давайте разберемся в какой последовательности и кем разрабатываются веб–сайты; какое место в этом процессе занимает UX/UI дизайн.
Хочу обратить внимание, что в этой статье все написано максимально простым языком, чтобы было проще понять суть процесса. Когда это будет усвоено, я перейду к специальным терминам уже в следующем уроке.
Но без новых слов сегодня не обойдется.
Веб–сайт можно назвать веб-приложением, если он предоставляет не только статический набор страниц, но и включает тесное взаимодействие с пользователем и реакцию на его шаги для решения дополнительных задач (помимо предоставления информации).
Пример веб-сайта: персональный блог. Пример веб-приложения: генератор логотипа на основе ваших предпочтений (работает с использованием нейросети).
Чем сложнее проект, тем больше специалистов нужно задействовать и тем больше этапов пройти. Далее все этапы разработки веб–сайта, в которых принимает участие UX/UI дизайнер отмечены
Перед началом разработки рискованного проекта, например, стартапа есть смысл провести исследование рынка: попытаться проанализировать конкурентов, спрогнозировать прибыль. Этим занимаются, как бизнес-аналитики, так и консалтинговые компании. Часто анализом и сбором информации о проекте занимается UX-дизайнер.
Этап встречается на высокобюджетных проектах. Иногда бизнес–аналитиков держат в штате на постоянной основе для проведения новых исследований.
На основе собранной информации и проведенного анализа пишется техническое задание – подробное описание требований и необходимых функций, которыми должен обладать веб-сайт после окончания разработки. Менеджер проектов и product owner также занимаются написанием технической документации.
После утверждения концепции техническое задание передается UX/UI дизайнеру для поиска визуального стиля и даже UX-решений. То есть мы ищем среди уже существующих сайтов и пытаемся "угадать", что понравится клиенту. Для этого часто используют такие сайты, как Behance и Dribbble. Все найденные удачные примеры собираются в коллекцию, которая называется moodboard.
Далее moodboard показывают заказчику и отмечают, что ему понравилось, а что нет. Этот этап позволяет сэкономить время и пропустить много неудачных попыток найти подходящий визуальный стиль.
На этом этапе UX–дизайнер начинает проектировать пользовательский опыт. Другими словами он придумывает, как пользователь будет работать с системой. В зависимости от детализации и проработки технического задания может понадобиться:
- Выявить типичных пользователей и их задачи — позволяет понять кто и как будет использовать веб–сайт, прописать каждую функцию в виде последовательности действий:
![User story]( "User story")
- Разбить веб–сайт на экраны и показать их в виде схемы. Логика переходов между экранами задается на этом этапе:
![User flow]( "User flow")
- Отрисовать наброски экранов — на основе предыдущих этапов UX–дизайнер определяет расположение и размеры элементов интерфейса. На этом этапе цвета и визуальный стиль игнорируются, обычно все отрисовывается в черно–белых или серых цветах. Ниже изображен один и тот набросок экрана выполненный в разных стилях, что никак не влияет на заложенный смысл:
![Наброски экрана]( "Наброски экрана")
- Создать интерактивные экраны – на основе предыдущих набросков UX–дизайнер делает интерфейс, с которым может взаимодействовать пользователь (он становится интерактивным). То есть вы можете нажимать на кнопочки и веб–сайт будет на это реагировать (например, переходить между экранами). При этом вы экономите время, так как программирование не требуется. Уже сейчас вы сможете протестировать свое решение на реальных пользователях, ведь интерфейс работает словно в браузере. Пожалуй, это один из самых впечатляющих и полезных этапов. Вы можете провести исследование и посмотреть, как пользователи выполняют определенные задачи, с какими проблемами сталкиваются (и тут же их исправить).
![Прототип]( "Прототип")
Для простых веб–сайтов, например, сайты–визитки, блоги, интернет–магазины достаточно отрисовать лишь наброски экранов (в студиях часто игнорируется и этот этап). Это и логично, ведь эти виды сайтов могут быть настолько детально отработаны, что UX–дизайн и так очевиден.
Но не стоит недооценивать этот этап для сложных и уникальных веб–приложений. Например, вам нужно создать интерфейс для подсчета калорий и нутриентов на основе вашего рациона. Эту задачу можно решить множеством способов, но выявить лучший на основе лишь статических набросков невозможно. А вот протестировав интерфейс на пользователях и получив их отзывы, уже можно делать выводы.
Когда определились с набросками всех экранов UI дизайнер работает над поиском визуального стиля: подбирает цветовую гамму, шрифты, иконки, выстраивает сетку и отрисовывает ключевые наброски из предыдущего этапа.
Когда визуальный стиль утвержден заказчиком, отрисовываются все экраны. Важно понимать, что на этом этапе решается, как должен выглядеть веб-сайт после завершения разработки (в отличии от предыдущего этапа, где определялась структура каждого экрана).
После завершения отрисовки всех экранов UX/UI дизайнер готовит презентацию проекта.
Обычно достаточно статической презентации, но в дальнейшем мы познакомимся и с интерактивными прототипами. Смотрите пример ниже и обратите внимание на анимацию появления элементов и что происходит, когда пользователь кликает на карточку фильма.
После успешной презентации и утверждения проект переходит в стадию верстки и программирования. Они могут выполняться параллельно. Чтобы начать верстать Frontend–разработчикам нужны все иконки, картинки, иллюстрации в отдельных файлах — ресурсах.
Подготовку и экспорт ресурсов выполняет UX/UI–дизайнер. Что такое верстка, поясняет следующий параграф.
Верстка – это написание кода, что позволяет получить статические страницы (без переходов между экранами). Такие страницы имеют все элементы интерфейса, визуально все выглядит, как готовый продукт. Эти страницы открываются в браузере, но как только вы нажимаете какую-то кнопку или хотите перейти по ссылке (пытаетесь взаимодействовать) — ничего не происходит.
Проводя аналогию с микроволновой печью на этом этапе верстальщики создают лишь лицевую панель с ручками, дверью и корпус — frontend. Остальные детали (магнетрон, управляющая плата, роллер), которые обеспечивают функциональность устройства – отсутствуют.
Для выполнения этого этапа верстальщики используют такие технологии:
- HTML (HyperText Markup Language) — язык гипертекстовой разметки, с помощью которого задаются элементы веб–страницы и ее содержимое;
- CSS (Cascading Style Sheets) — каскадные таблицы стилей, с помощью которых задается внешний вид страниц;
- JS (JavaScript) — язык программирования, с помощью которого на этом этапе можно «оживить» некоторые элементы интерфейса: добавить микроанимации, заставить работать слайдер и так далее.
Часто используют frontend–фрейморки — набор инструментов и готовых к использованию компонентов, которые работают на основе HTML, CSS и JS. Это значительно сокращает время разработки.
Bootstrap — самый популярный frontend–фреймворк, который включает в себя шаблоны оформления для веб–форм, кнопок, меток, типографики, блоков навигации и других компонентов.
Программисты или backend–разработчики занимаются созданием функциональной части сайта, всего того, что заставляет работать элементы лицевой панели микроволновой печи (frontend). Вся эта система невидима и спрятана внутри, но именно она оживляет веб–сайт и позволяет ему реагировать на действия пользователей. В микроволновой печи это будет магнитрон, управляющая плата и роллер — backend.
Backend-разработчики используют широкий спектр языков программирования и технологий. Приведу лишь несколько из них:
- HTML, CSS & JS — все то, что используют верстальщики;
- PHP (PHP: Hypertext Preprocessor) — язык программирования, широко использующийся для разработки веб–приложений. Чтобы вы понимали суть, язык PHP позволяет динамически генерировать HTML–код, в ответ на сложившиеся обстоятельства и действия пользователей;
- MySQL — система управления базами данных. Позволяет веб–сайтам хранить и обрабатывать информацию. Например, учетные записи пользователей и их сообщения в социальной сети.
Не стоит пугаться программирования, как и в дизайне там все придумано так, чтобы его инструменты обеспечивали максимальную гибкость и эффективность при решении задач.
Более того, в большинстве графических редакторов встроен свой язык программирования схожий с JavaScript (тот самый, который используют верстальщики и frontend–разработчики). Это позволяет автоматизировать рутинные действия.
Приведу реальный пример из области графического дизайна. Вам нужно нарисовать 10 000 (десять тысяч) билетов с уникальным штрих–кодом, посадочным местом и сохранить каждый из них в отдельном файле. Вручную у вас уйдет на это недели работы. Кроме того, чем больше билетов, тем выше шанс ошибиться. Написав скрипт в Adobe Illustrator на языке JavaScript и выполнив его, вы получите все необходимые материалы в течение 10 минут.
В процессе разработки каждая новая функция тщательно тестируется тестировщиками и QA–специалистами:
- Вручную — тестировщик запускает сайт и проходится по всем сценариям пользователей, пытаясь выявить ошибки в работе;
- Автоматически — QA-специалист пишет скрипт, который запускает настоящий браузер и выполняет все действия вместо человека.
Иногда для тестирования привлекаются обычные пользователи, но их предупреждают, что сайт еще не готов и может содержать ошибки. Это называется открытым бета-тестированием.
Deploy или развертывание веб–сайта — это процесс переноса и запуска сайта на сервере в сети Интернет. Дело в том, что разработка сайта выполняется на компьютерах самих разработчиков, следовательно, посетить их могут только они.
Системные администраторы и devops–инженеры обеспечевают бесперебойную работу веб-сайта. Кстати, эти работы выполняются в терминале, который использует символьный графический интерфейс.
Прочитайте статью Профессии IT cферы: обзор должностей. Она содержит дополнительные специальности, о которых нислова не сказано в этом уроке. Из этих новых специальностей попытайтесь понять и напишите, на каком шаге создания сайта они могут быть задействованы и почему.
Ответы присылайте в директ в Instagram @frusia.pro (укажите, что это второй урок) или оставляйте здесь в комментариях под статьей. По каждой домашке дам ответ.
Теперь мы знаем, из каких шагов состоит процесс создания нового сайта и какие специалисты в этом участвуют. В следующей части мы сконцентрируемся на типичных задачах UX/UI–дизайнера и разберемся, какой софт при этом используется.
Подписывайтесь на меня в Instagram @frusia.pro, будьте в курсе анонсов новых уроков, смотрите проверки домашек в сторис, задавайте вопросы, а также вас ждет множество полезных постов про дизайн.
Stay tuned!