Паспорт курса
Описание курса
Отзывы выпускников
Аннотация курса
UX / UI проектирование — одно из самых востребованных направлений в сфере digital design.
Согласно ГОСТ, пользовательский интерфейс: Все компоненты интерактивной системы (программное обеспечение или аппаратное обеспечение), которые предоставляют пользователю информацию и являются инструментами управления для выполнения определенных задач. [ИСО 9241-110: 2006].
В рамках наших занятий мы будем заниматься исключительно экранными интерфейсами, хотя понятие интерфейс абсолютно применимо как к приборной панели в автомобиле, так и к системе управления эхолокационной установкой на борту судна.
Важно понимать, что создавая интерфейс мы в первую очередь должны отвечать на задачи, представляемые заказчиком и учитывать потребности пользователя. Более того, существуют различные подходы к проектированию интерфейсов. Мы будем придерживаться user centered подхода и поставим пользователя во главу угла.
Для UX, или user experience, характерно перед началом разработки интерфейса провести анализ ожиданий пользователя, понять его потребности. Важно провести обзор аналогичных продуктов, которыми он уже пользовался, составить список задач, которые пользователь сможет решить при использовании интерфейса и т.д.
Т.е. UX — это детальная аналитическая проработка продукта, его проектирование, последующие тестирования и отладка.
При UI-проектировании мы концентрируемся на более поверхностной части работы, но, отнюдь, не менее важной. Мы рисуем кнопки, иконки, работаем над общим стилем интерфейса, над качественной картинкой.
Таким образом, UI как бы использует наработки UX для получения правильного результата. Интерфейс красиво нарисованный может не работать и пользователь закроет его полюбовавшись парой красивый, но не понятных изображений. А UX-правильный сайт может быть скучным и непривлекательным, и пользователь выберет более приятный аналог при прочих равных. Поэтому обе сферы нужны и важны. Но это разные области знания и ни в коем случае не стоит их смешивать.
Предварительные требования
Уверенный пользователь ПК;
Владение графическими пакетами Adobe Photoshop, Adobe Illustrator;
Знание основ веб-технологий и Javascript.
Программа курса
История экранных интерфейсов. Общие понятия интерфейса и его элементы. Интерфейсы сегодня, тенденции и тренды. Проектировщик интерфейсов, кто он? Поиск референсов, графические стоки.
Практика: Создание простого лэндинга по примеру. Повторить стиль одной страницы, изменив название и основное изображение.
История и тенденции развития экранных интерфейсов, технологический аспект. Приемы для создания нужного настроения на сайте. Первостепенность задачи при проектировании. Значимость различных элементов. Примеры стилей и их применения. Проектный подход, рисование кнопок и иконок.
Практика: Создание сета элементов в различных стилях (для 2-х сайтов, игрового и продающего). Отрисовать по 2 иконки и по 2 кнопке для каждого из сайтов.
Экранная верстка. Модульные сетки и их применение. Модульные сетки и их адаптивность. С чего начинать макет интерфейса?
Практика: Создание макетов простой страницы на основе модульной сетки в Photoshop и в Figma.
Отличия простого и сложного web-дизайна. Зачем нужен лендинг и в чем его особенности? Проектирование полных страниц в Figma, мобильный интерфейс.
Практика: Создание лендинга сайта и его мобильной версии.
Текст, как составляющая удобства использования или usability. Экранная типографика, ее особенности. Текст в web, его значимость для пользователя и для систем. Порядок элементов, логика взаимодействия.
Практика: Доработайте контент своего сайта. Проверьте, чтобы тексты и короткие тексты, заголовки, были оформлены верно. Соблюдая общий стиль отрисуйте экраны взаимодействия, состояния кнопок и элементов, чтобы все было готово к анимации.
Figma и порядок организации проекта.
Практика: навести порядок в структуре документа, объединить элементы по группам, создать страницы с фрэймами и дашбордами, в которые вы соберете все основные компоненты, на которые вы опираетесь в работе. Назвать все четко и понятно.
Практика: создать анимированный контент, записать его с экрана в формат gif и прислать ссылку на папку с gif-анимацией внутри. Постарайтесь максимально анимировать все возможные кнопки, слайдеры, выезжающие и раскрывающиеся экраны.
Практика: Полная отладка макета, создание десктопной и мобильной версий сайта. Запись анимации и презентация макета.
Проект включает в себя качественные и/или количественные методы исследования, создание карты пользователя (персона), пользовательские истории, сценарии пользовательского опыта, проектирование, юзабилити-тестирование, отчет по оценке пользовательского опыта, предложения по улучшению.
Преподаватели курса