Сегодня рассмотрим, какие обычно задачи выполняет UX/UI–дизайнер, какие программы для этого используются. Затронем графический дизайн в контексте UI дизайна. Познакомлю с новыми словами, с которыми будете сталкиваться ежедневно в работе. Очень много информации перекликается с прошлым уроком, но сегодня углубляемся в детали и учим профессиональные термины.

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

Освоив один графический редактор, сможете быстро перейти на другой — отличия минимальны. Например, программы Figma и Adobe Xd практически в точности копируют Sketch.

И, конечно, поймем в чем разница между векторной и растровой графикой.

Задачи UX–дизайнера

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

Создание юзер флоу

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

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

Юзер флоу обязательно отвечает на такие вопросы:

  1. Кто пользователь? У нас это покупатель (роль пользователя);
  2. Какая у него цель? Хочет купить велосипед. Ответ следует из задания менеджера;
  3. Какие шаги предпринять, чтобы выполнить цель? Что конкретно нужно сделать пользователю, чтобы купить велосипед. Какие кнопки нажать и через какие экраны пройти?

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

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

Таск флоу

Task flow (читается таск флоу) — последовательность задач. Это схема включает в себя лишь названия экранов и действий. Часто вам даже не нужно притрагиваться к компьютеру, делаете набросок маркером в блокноте или на доске. Схемы могут включать разветвления в зависимости от действий пользователя:

Task flow на бумаге

Запомните ключевые моменты при составлении таск флоу:

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

После отрисовки и правок на бумаге можно перерисовать схему в графическом редакторе, иногда это делается сразу:

Task flow в графическом редакторе

Вайрфлоу

Wireflow (пишется вместе, читается вайрфлоу) — это последовательность набросков экранов (вайрфреймов). Это схема включает грубые наброски экранов с важными элементами интерфейса (кнопки, поля ввода, места для картинок) и действия. Их тоже часто рисуют вручную:

Wire flow на доске

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

Wire flow в графическом редакторе

Скринфлоу

Screenflow (пишется вместе, читается скринфлоу) — последовательность экранов с готовой UI-частью. Этот вид используется на более поздних этапах разработки. Здесь дизайн каждого экрана выполнен с максимальной (финальной) детализацией. Выполняется только в графических редакторах и специализированных приложениях (к примеру Overflow помогает рисовать стрелочки между экранами):

Screenflow в графическом редакторе

Отрисовка вайрфреймов

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

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

В зависимости от задачи может использоваться, как в технической документации для разработчиков, так и основой для UI-дизайнера. Могут выполняться аналогично юзер флоу в блокноте, на доске или в графическом редакторе. Существуют даже специальные программы для имитации ручных набросков на компьютере (Balsamiq Wireframes).

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

Wireframe и mockup

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

Лоу-фидэлити вайрфреймы

Low-fidelity wireframes (читается лоу-фидэлити вайрфреймс) – очень грубые и быстро выполненные наброски экранов. Обычно содержат минимум текста, в большинстве случаев он заменен горизонтальными линиями, все кнопки и изображения показаны прямоугольниками (иногда используются круги). Часто расположение и размер элементов приблизительны.

Хай-фидэлити вайрфреймы

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

Сравнение low- и high-fidelity wireframes

Создание прототипа

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

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

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

Интерактивный прототип

Usability-тестирование

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

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

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

Как проходит usability-тестирование

Инструменты UX–дизайнера

  • Блокнот и маркер – позволяет быстро создавать грубые наброски вайрфреймов, делать зарисовки юзер флоу. Незаменимый инструмент на ранних этапах;
  • Figma — идеально подходит для всех задач. Позволяет даже создавать интерактивные прототипы с простой анимацией и запускать их на смартфоне. Работает на всех платформах (Windows, macOs, Linux) и в браузере. Поставляется с бесплатным набором вайрфреймов Конкуренты также неплохи – Sketch и Xd – есть все необходимое;
  • Moqups — специализированное приложение для создания вайрфреймов и юзер флоу с компонентами на все случаи жизни (для вебсайтов, мобильных и настольных приложений). Пригодится, если не хотите все отрисовывать вручную или нет времени на поиск готовых библиотек для Figma. Работает прямо в браузере. Требуется регистрация, но возможности бесплатной версии неплохи;
  • Axure — продвинутая работа с интерактивными прототипами. Есть возможность генерировать HTML, что потом позволяет встраивать Google Analytics (или любой другой сервис для отслеживания поведения пользователей) и проводить сложные удаленные usability-тесты.

Программы для UX-дизайна

Задачи UI–дизайнера

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

Подбор цветовой палитры

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

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

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

Есть множество сервисов для создания цветовых схем (Adobe Color, Coolors, Colormind, Colorhunt, Palettr), которые генерируют новый набор на основе лишь одного базового цвета или подгруженой вами картинки.

Цветовые схемы

Работа с типографикой

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

Шрифт — это набор символов, оформленные в одном стиле и составляющие единую систему.

Гарнитура — это набор шрифтов, объединенные в одно семейство.

Кегль — это размер высоты буквы шрифта.

Интерлиньяж – это межстрочный интервал или расстояние между строками.

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

Некоторые понятия их типографики

Подбор, обработка иконок и изображений

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

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

Существуют бесплатные и платные сайты для подбора иллюстраций и фотографий (Freepik, Unsplash, Shutterstock). UI-дизайнеры редко сами отрисовывают иконки и тем более иллюстрации. Это работа графического дизайнера.

Иконки

Создание набора элементов интерфейса

UI-kit (читается юай-кит) или User Interface Kit — это набор элементов интерфейса для дальнейшей разработки страниц сайта. Набор будет разным для стартапа, блога и социальной сети. Самые распространенные элементы: кнопки, элементы навигации, поля ввода, выпадающие списки, переключатели, формы и так далее.

UI-kit в современных графических редакторах делается на основе компонентов. Это позволяет значительно ускорить внесение правок. Представьте себе ситуацию. У вас есть 20 отрисованных экранов. Внезапно заказчик захотел изменить скругление кнопок несмотря на все уговоры дизайнеров. Используя UI-кит на основе компонентов вам прийдется внести изменения лишь в одном месте, правки на всех страницах будут сделаны автоматически и мгновенно. Это ли не магия? Без компонентов (например, если вы используете Photoshop) вам прийдется пройтись по всем страницам и переделать каждую кнопочку вручную.

Простой UI-kit

Отрисовка страниц

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

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

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

Mockup с ноутбуком

Создание адаптивного и отзывчивого дизайна

Adaptive design (читается адаптив дизайн) или адаптивный дизайн — это проектирование сайта, компоновка которого меняется в зависимости от устройства (размера экрана), базируясь на нескольких макетах фиксированной ширины.

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

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

Responsive design (читается респонсив дизайн) или отзывчивый дизайн — это подвид адаптивного дизайна, в котором переходы между вариантами отображения плавные. При изменении размера окна браузера дизайн подстраивается словно "резиновый". При этом структура компоновки статична (боковые колонки не исчезают).

Разница между adaptive- и responsive-дизайном

Инструменты UI–дизайнера

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

  • Figma – однозначный фаворит списка. Предоставляет широчайшие возможности для UI-дизайнера и работает на всех платформах (Windows, macOS, Linux) и даже в браузере. При этом делает это очень быстро и бесплатно;
  • Sketch – платный ($99 с обновлениями на год) графический редактор только для macOS. Именно он послужил вдохновением для Figma и Xd. Является самым популярным из этой тройки в силу своего возраста. При этом по некоторым функциям уступает Figma (например, нет цветовых стилей);
  • Xd – бесплатный графический редактор для Windows и macOS от компании Adobe. Обладает хорошим набором функций и отлично подходит, как и два других участника списка.

Программы для UI-дизайна

Виды графики

Графические ресурсы делятся на растровые и векторные. Когда вы приступите к практике, вы увидите, как это влияет на работу. Сейчас же я могу лишь объяснить это в теории.

Векторная графика

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

Растровая графика

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

Если открыть растровое и векторное изображение в соответствующих редакторах и увеличить их, то мы увидим, что:

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

Отличия векторной и растровой графики

Задачи графического дизайнера

Сюда входит широкий круг задач, но я выделила лишь основные, которые пересекаются с UX/UI-дизайном:

  • Отрисовка логотипа и создание фирменного стиля;
  • Отрисовка иконок;
  • Отрисовка иллюстраций;
  • Отрисовка баннеров, маркетинговых материалов, упаковки.

В отличие от UX/UI дизайнера, графический дизайнер иногда использует дополнительное оборудование, например, графический планшет. Кроме того, художественное образование может сильно помочь в профессии.

Инструменты графического дизайнера

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

  • Illustrator – мощный платный ($21 в месяц) векторный графический редактор для платформ Windows и macOs от компании Adobe. Используется для отрисовки и редактирования иконок и иллюстраций;
  • Photoshop – мощный платный растровый редактор от той же компании. Пожалуй это самый функциональный растровый редактор из существующих. Позволяет подготавливать, ретушировать и изменять фотографии до неузнаваемости;
  • Gimp – бесплатный растровый графический редактор с широким набором функций, который уступает Photoshop лишь из-за своей молодости.

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

Программы для графического дизайна

Домашнее задание

  1. Выберите сайт, которым вы ежедневно посещаете. Нарисуйте такс флоу в блокноте для двух типичных сценариев использования этого сайта.
  2. Придумайте новую функцию для сайта, которым вы пользовались хотя бы однажды (необязательно для вашего любимчика из первого задания). Отрисуйте таск флоу для этой новой функции.
  3. Отрисуйте вайрфлоу для сценариев из первого задания. Можете использовать карандаш или вытирающуюся ручку, чтобы делать правки. Постарайтесь приблизиться в пропорциях к оригиналу.
  4. Последнее задание повышенной сложности. Отрисуйте вайрфлоу для сценария из второго задания. Здесь нужно быть очень наблюдательным, так как вы еще не знаете, какие элементы интерфейса существуют вообще. Но вы можете подсмотреть у других сайтов.

Делайте фото ваших юзер флоу и присылайте в директ в Instagram @frusia.pro (не забудьте указать, что это к третьему уроку) или оставляйте ссылки здесь в комментариях под уроком (ссылки я позже заменю на картинки прямо в комментариях).

По каждому ответу дам фидбек, так вы убедитесь, что усвоили материал правильно.

Выводы

Вот мы и получили представление, с чем приходится сталкиваться UX/UI-дизайнеру в повседневной работе. Это был самый длинный и сложный урок с массой новых терминов. Пожалуйста, изучите его досконально и сделайте домашнее задание. Все это лишь теория, в следующий раз (урок выйдет через неделю) мы переходим к практике, а именно к изучению Figma. Обещаю, будет еще интереснее!

Подписывайтесь на меня в Instagram – @frusia.pro – будьте в курсе анонсов новых уроков, смотрите проверки домашек в сторис, задавайте вопросы, а также вас ждет множество полезных постов про дизайн.

Stay tuned!

Читать четвертый урок


Обучение дизайну
Май 2020


Что ещё почитать

Что нужно знать начинающему UX/UI дизайнеру. Полный список. Roadmap

Основы Figma. Часть 2. Группы. Работа с слоями. Пипетка. Импорт изображений. Делимся проектом

Дизайн. Интерфейс. UX и UI

Основы Figma. Часть 1. Регистрация. Интерфейс. Первые шаги. Навигация и свойства объектов

Основы Figma. Часть 3. Фреймы. Сетки. Направляющие. Знакомство с компонентами

Процесс создания веб-сайта


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



Комментарии

sergo · 13 апреля 2020 18:44  
Таскфлов и вайрфлов нарисовал, фото скинул вам в инстаграм.
sergo · 21 апреля 2020 15:36  

1, 2 текфлоу на одном фото Ответ на домашнее задание 1 и 2 от Sergo

3. Вайрфлов на первое задание Ответ на домашнее задание 3 от Sergo

4. Вайрфлов на 2 задание с новой функцией Ответ на домашнее задание 4 от Sergo

Комментарий frusia.pro: Это домашнее задание отправили в директ в Инстаграм и согласились опубликовать его.

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

Задания 1–2

Вы вынесли функции «поставить лайк», «оставить комментарий» и новую «тайминг» в отдельные квадраты. Это неправильно.

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

Функция «поделиться» спорная, так как вызывает дополнительное всплывающее окно. Поэтому её можно вынести в отдельный элемент таскфлоу (или расписать текстом).

Задания 3–4

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

Lana · 24 августа 2020 13:23  
Отправила задание 3 в директ, пожалуйста проверьте
Люба Фурсеева · 24 августа 2020 23:40  
Lana, проверила и ответила. Переходите к следующему уроку
darya · 14 сентября 2020 22:41  
задание 1
/Users/dasha/Downloads/photo_2020-09-14 22.38.48.jpeg
darya · 14 сентября 2020 22:56  
Люба, спасибо вам за урок! но отправить сюда картинки не получается совсем :(
Люба Фурсеева · 14 сентября 2020 23:00  
darya, пожалуйста. Отправляйте картинки мне в директ в Instagram @frusia.pro, проверю.
Анастасия · 4 ноября 2020 15:20  
1) https://drive.google.com/file/d/1BhNf64898tp7vSD-0ny4iZxnaDnws5fg/view?usp=sharing
2) https://drive.google.com/file/d/1v0XVOZbpZ9LWK8R9Un9E_gtyS01WYgeq/view?usp=sharing
3) https://drive.google.com/file/d/1XRdkkMfIbnXIQrHSra7BaHDTziEv7GDG/view?usp=sharing
4) https://drive.google.com/file/d/1mo7ZJHAR8aCIQt8i9iCkMDO3bsraU1eq/view?usp=sharing

Откройте пожалуйста доступ к этим ссылкам. Сделать это можно в настройках, когда "шарите" ссылку.

Анастасия · 9 ноября 2020 16:47  
Открыла доступ по ссылкам
1) https://drive.google.com/file/d/1BhNf64898tp7vSD-0ny4iZxnaDnws5fg/view?usp=sharing
2) https://drive.google.com/file/d/1v0XVOZbpZ9LWK8R9Un9E_gtyS01WYgeq/view?usp=sharing
3) https://drive.google.com/file/d/1XRdkkMfIbnXIQrHSra7BaHDTziEv7GDG/view?usp=sharing
4) https://drive.google.com/file/d/1mo7ZJHAR8aCIQt8i9iCkMDO3bsraU1eq/view?usp=sharing

Комментарий frusia.pro:

Задания 1–2

Вы немного недопоняли принцип построения таскфлоу. В каждый отдельный квадрат мы выносим экран, который дальше будет отображен в вайрфлоу. А вы в свою очередь просто описали путь пользователя, его действия, а не экраны. Чтобы было понятнее я распишу как должно было выглядеть первое задание. 5 квадратов, в том же порядке: (1) поиск на главной странице, (2) результаты поиска, (3) страница товара, (4) корзина, (5) чекаут. Закрытие/открытие сайта вообще не упоминается, это понятно "по умолчанию".

Задания 3–4

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

Анастасия · 30 ноября 2020 12:25  
Переделала первых два задания:
https://drive.google.com/file/d/1QlGlhGhk0G-nAH34kk2GXJxWksVaJVo0/view?usp=sharing

Комментарий frusia.pro:

Откройте пожалуйста доступ по ссылке.

Анастасия · 1 декабря 2020 01:33  
Не понимаю, как так вышло, что снова не открыла доступ.

Доступ открыла
https://drive.google.com/file/d/1QlGlhGhk0G-nAH34kk2GXJxWksVaJVo0/view?usp=sharing

Комментарий frusia.pro:

Все правильно. Еще совет: давайте каждому таскфлоу название (текстовый заголовок сверху). Например в первом случае, как я понимаю, таскфлоу «Просмотр видео», а во втором – «Добавление в вишлист»

Oksana · 4 декабря 2020 12:29  
Проверьте, пожалуйста:
https://drive.google.com/file/d/1HR41Pz_BINPMuJBZmD3fNnSpRG5k0mvk/view?usp=sharing
https://drive.google.com/file/d/1dN4ZIE7uFC36nlnZz3ZbQ8r95EUevnSm/view?usp=sharing

Комментарий frusia.pro:

Задание 1.

Я увидела два сценария по второй ссылке: 1) выбор и просмотр акции, 2) покупка товара. Очень хорошо. Лишь одно замечание: когда соединяете экраны стрелками-переходами старайтесь размещать их строго вертикально и горизонтально. Вы же используете диагональные линии, которые могут немного запутывать восприятие.

Задание 2.

Вижу новую функцию для сравнения товаров внутри категории, отлично.

Задание 3–4.

К сожалению, по первой ссылке получаю сообщение "Sorry, the file you have requested does not exist". Подозреваю, что тут были решения по остальным заданиям. Пожалуйста, загрузите файл еще раз и предоставьте рабочую ссылку.

Сергей · 9 февраля 2021 18:08  
1. https://drive.google.com/file/d/1_eOo_ylddOikia03RM9nnVJXvKR4_JS2/view?usp=sharing
https://drive.google.com/file/d/1XuzCSSgRKW6jKCTpb4BzQk9HU82b_abE/view?usp=sharing
2.https://drive.google.com/file/d/1XCj_hg9jskBUmRti8DzZRURSUyEB89YD/view?usp=sharing
3.https://drive.google.com/file/d/1TKgE1Kv_09EDSlOgcGiNy_zuIx4VXz30/view?usp=sharing
https://drive.google.com/file/d/15dhQIsTeB7MPwsbUmo5kjpKfL5C0GX4H/view?usp=sharing
https://drive.google.com/file/d/1_JF0r5gP4OnnG8OCQ74OECvY22JO8Ve9/view?usp=sharing
4.https://drive.google.com/file/d/16wzYApkfnvW63S5dqL69p-9W10uMjBAa/view?usp=sharing

Комментарий frusia.pro:

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

Александр · 25 апреля 2021 18:21  
Добрый день, проверьте пожалуйста.
1 - 2 задание - https://drive.google.com/file/d/1cE_Xz-h5up5aw0A4nuc5gAcoF9Jrdf63/view?usp=sharing
3 задание - https://drive.google.com/file/d/1SBtnZLPnWPxQhvzE8udFVzZKYygpaQuZ/view?usp=sharing
4 задание - https://drive.google.com/file/d/130EE10nisp5ZNTboY24Otqb4UbKsZTkp/view?usp=sharing

Комментарий frusia.pro:

Добрый день, вы отлично справились с каждым из заданий, молодец! Пожалуйста переходите к следующему уроку.

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