Создание сайта требует слаженной работы команды специалистов. Давайте разберемся, в какой последовательности и кем разрабатываются веб-сайты; какое место в этом процессе занимает UX/UI дизайн.
Хочу обратить внимание, что в этом уроке все написано максимально простым языком, чтобы было проще понять суть процесса. Когда это будет усвоено, я перейду к специальным терминам уже в следующем уроке.
Но без новых слов сегодня не обойдется.
Веб-сайт можно назвать веб-приложением, если он имеет не только статический набор страниц, но и включает тесное взаимодействие с пользователем и реакцию на его действия для решения дополнительных задач (кроме предоставления информации).
Пример сайта: персональный блог. Пример Веб-программы: генератор логотипа на основе ваших предпочтений, который работает с использованием нейросетей.
Чем сложнее проект, тем больше специалистов нужно задействовать и тем больше этапов нужно пройти. Дальше все этапы разработки веб-сайта, в которых участвует UX/UI дизайнер, отмечены галочкой
Обратите внимание, что у каждой компании собственные процессы, поэтому этапы, их составляющие и даже последовательность могут несколько отличаться. В крупных корпорациях шаги могут быть более сложными, а в маленьких студиях самих этапов будет меньше.
- Этап 1. Аналитика, сбор информации, написание технического задания
- Этап 2. Поиск референсов, создание мудбордов
- Этап 3. UX–дизайн
- Этап 4. UI–дизайн
- Этап 5. Презентация проекта
- Этап 6. Экспорт ресурсов
- Этап 7. Верстка (HTML/CSS/JS)
- Этап 8. Программирование
- Этап 9. Тестирование
- Этап 10. Деплой
- Домашнее задание
- Выводы
Перед началом разработки рискованного проекта, например стартапа имеет смысл провести исследование рынка: попробовать проанализировать конкурентов, спрогнозировать прибыль. Этим занимаются, как бизнес-аналитики, так и консалтинговые компании. Часто анализом и сбором информации о проекте занимается UX-дизайнер.
Этап встречается на высокобюджетных проектах. Иногда бизнес-аналитиков держат в штате на постоянной основе для проведения новых исследований.
На основе собранной информации и проведенного анализа пишется техническое задание – подробное описание требований и необходимых функций, которые должен иметь веб-сайт после окончания разработки. Менеджер проектов и product owner (читается как продукт овнер) также занимаются написанием технической документации.
После утверждения концепции, техническое задание передается UX/UI дизайнеру для поиска UX-решений и визуального стиля. То есть, мы ищем среди уже существующих сайтов и пытаемся «угадать», что понравится клиенту. Для этого часто используют такие сайты, как Behance и Dribbble. Все найденные удачные примеры собираются в коллекцию, которая называется moodboard (читается как мудборд).
Далее мудборды показывают заказчику и отмечают, что ему понравилось, а что нет. Этот этап позволяет сэкономить время и пропустить много неудачных попыток найти соответствующий визуальный стиль.
На цьому етапі UX–дизайнер починає проектувати досвід користувача. Тобто він придумує, як користувач буде працювати з системою. Залежно від деталізації та опрацювання технічного завдання може знадобитися:
- Выявить типичных пользователей и их задачи — позволяет понять кто и как будет пользоваться веб-сайтом, прописать каждую функцию в виде последовательности действий:
![User story]( "User story")
- Разбить веб-сайт на экраны и показать их в виде схемы. Логика переходов между экранами задается именно на этом этапе:
![User flow]( "Юзер флоу")
- Нарисовать скетчи экранов — на основе предыдущих этапов UX–дизайнер определяет расположение и размеры элементов интерфейса. На этом этапе цвета и визуальный стиль игнорируются, обычно все рисуется в черно-белых или серых цветах. Ниже изображен один и тот же рисунок экрана выполненный в разных стилях, что никак не влияет на заложенный смысл:
![Скетчи экрана]( "Скетчи экрана")
- Создать интерактивные экраны – на основе предыдущих набросков UX–дизайнер делает интерфейс, с которым может взаимодействовать пользователь (он становится интерактивным). То есть вы можете нажимать на кнопочки и веб-сайт будет на это реагировать (например, переходить между экранами). При этом вы экономите время, поскольку программирование не нужно. Уже сейчас вы сможете протестировать свое решение на реальных пользователях, ведь интерфейс работает как в браузере. Наверное, это один из самых впечатляющих и полезных этапов. Вы можете провести исследование и посмотреть, как пользователи выполняют определенные задачи, с какими проблемами сталкиваются и тут же их исправить.
![Прототип]( "Прототип")
Для простых веб-сайтов, например, сайты-визитки, блоги, интернет-магазины достаточно нарисовать лишь эскизы экранов (в студиях часто игнорируется и этот этап). Это и логично, ведь эти виды сайтов могут быть настолько детально проработаны, что UX–дизайн и так очевиден.
Но не стоит недооценивать этот этап для сложных и уникальных веб-приложений. Например, вам нужно создать интерфейс для подсчета калорий и нутриентов на основе вашего рациона. Это задание можно решить множеством способов, но выявить лучший на основе лишь статических набросков невозможно. А вот протестировав интерфейс на пользователях и получив их отзывы, уже можно делать выводы.
Когда определились с эскизами всех экранов UI дизайнер работает над поиском визуального стиля: подбирает цветовую гамму, шрифты, иконки, выстраивает сетку и отрисовывает ключевые эскизы с предыдущего этапа.
Когда визуальный стиль утверждён заказчиком, отрисовываются остальные экраны. Важно понимать, что на этом этапе решается, как должен выглядеть сайт после завершения разработки (в отличие от предыдущего этапа, где определялась структура каждого экрана).
После того, как все экраны отрисованы UX/UI дизайнер готовит презентацию проекта.
Usually, a static presentation is sufficient, but later we will get acquainted with interactive prototypes. See the example below and pay attention to the animation of the elements appearing and what happens when the user clicks on the movie card.
После успешной презентации и утверждения проект переходит в стадию верстки и программирования. Они могут выполняться параллельно. Чтобы начать верстать Frontend–разработчикам нужны все иконки, картинки, иллюстрации в отдельных файлах, которые называют ресурсами.
Подготовку и экспорт ресурсов выполняет UX/UI–дизайнер. Что такое верстка, объясняет следующий параграф.
Верстка – это написание кода, который позволяет получить статические страницы без переходов между экранами. Такие страницы имеют все элементы интерфейса, визуально все выглядит, как готовый продукт. Эти страницы открываются в браузере, но как только вы нажимаете какую-то кнопку или хотите перейти по ссылке (пытаетесь взаимодействовать) — ничего не происходит.
Проводячи аналогію з мікрохвильовою піччю на цьому етапі верстальники створюють лише лицьову панель з ручками, дверима та корпус — це frontend (читається як фронтенд). Інші деталі (магнетрон, керуюча плата, ролер), які забезпечують функціональність пристрою відсутні.
Эту работу выполняют верстальщики и frontend-разработчики с использованием таких технологий:
- HTML (HyperText Markup Language) — язык гипертекстовой разметки, с помощью которого задаются элементы веб-страницы и её содержимое;
- CSS (Cascading Style Sheets) — каскадные таблицы стилей, с помощью которых задаётся внешний вид элементов, которые мы создали с помощью HTML;
- 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 читается кьюэй – Quality Assurance в переводе проверка качества):
- Вручную — тестировщик запускает сайт и проходит по всем сценариям пользователей, пытаясь выявить ошибки в работе;
- Автоматически — QA-специалист пишет скрипт, который запускает настоящий браузер и выполняет все действия вместо человека.
Иногда для тестирования привлекаются обычные пользователи, но их предупреждают, что сайт еще не готов и может содержать ошибки. Это называется открытым бета-тестированием.
Deploy (читается как деплой) или развертывание веб-сайта — это процесс переноса и запуска сайта на сервере в сети Интернет. Дело в том, что разработка сайта выполняется локально. То есть сайт, который разрабатывается, не доступен в Интернете вообще.
Системные администраторы и devops–инженеры (читается как девопс) обеспечивают бесперебойную работу веб-сайта. Кстати, эти работы выполняются в терминале, который использует символьный графический интерфейс.
С этого момента этот курс рассчитан на самостоятельное изучение и выполнение домашних заданий. Понимаю, что некоторые задания могут быть непростыми для вас.
Для дополнительной поддержки воспользуйтесь чатом в телеграме. Здесь вы сможете задать вопросы, касающиеся уроков, или просмотреть примеры правильного выполнения от других учеников.
Чат недоступен для граждан россии.
Прочитайте статтю Професії IT сфери: огляд посад. Вона містить додаткові спеціальності, про які жодного слова не сказано в цьому уроці. Добре подумайте і вкажіть ці нові спеціальності, а також етап, на якому вони задіяні. Спробуйте пояснити свою думку. Якщо для якогось етапу ви не знайшли нову спеціальність, то його пропускаємо.
Отправляйте ответы в директ в Instagram @frusia.pro. Укажите, что это второй урок или оставляйте комментарий здесь под уроком. По каждой домашке дам ответ.
Теперь мы знаем, из каких шагов состоит процесс создания нового сайта и какие специалисты в этом участвуют. В следующей части мы сконцентрируемся на типовых задачах UX/UI-дизайнера и разберемся, какие программы для этого используются.
Подписывайтесь на меня в Instagram @frusia.pro, будьте в курсе анонсов новых уроков, смотрите проверки домашних заданий в сторис, задавайте вопросы, а также на вас ждет множество полезных постов о дизайне.
Пройти тест
Чтобы урок был засчитан как пройденный, вам нужно правильно ответить на 80% вопросов из теста. Чтобы пройти тест и проверить свои знания, вам нужно войти в систему и записаться на курс или зарегистрироваться, если вы еще этого не сделали.
Продолжить обучение
