ОСНОВЫ ДИЗАЙНА ПРОГРАММНЫХ ПРОДУКТОВ • ВВЕДЕНИЕ В ДИЗАЙН ПРОГРАММНЫХ ПРОДУКТОВ • ПРОГРАММЫ ОСНОВЫ ДИЗАЙНА UI • ИЗНАЧАЛЬНО ТЕРМИН «ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС» ПРИМЕНЯЛСЯ КО ВСЕМ ВИДАМ ВЗАИМОДЕЙСТВИЯ ЧЕЛОВЕКА И МАШИНЫ. НА ПРОТЯЖЕНИИ МНОГИХ ЛЕТ ШЛО РАЗВИТИЕ КОМПЬЮТЕРОВ И МОБИЛЬНЫХ УСТРОЙСТВ И СЕГОДНЯ ЭТОТ ТЕРМИН ЧАЩЕ ВСЕГО ОЗНАЧАЕТ «ПОЛЬЗОВАТЕЛЬСКИЙ ГРАФИЧЕСКИЙ ИНТЕРФЕЙС» (GUI). • «ДИЗАЙН ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА (UID) ИЛИ ИНЖИНИРИНГ ИНТЕРФЕЙСА . — ЭТО ДИЗАЙН UI ДЛЯ ПРОГРАММ И УСТРОЙСТВ, ТАКИХ КАК: КОМПЬЮТЕРЫ, БЫТОВАЯ ТЕХНИКА, МОБИЛЬНЫЕ ТЕЛЕФОНЫ И ДРУГИЕ ЭЛЕКТРОННЫЕ УСТРОЙСТВА С АКЦЕНТОМ НА КАЧЕСТВО ОПЫТА ИСПОЛЬЗОВАНИЯ. ЦЕЛЬ UI ДИЗАЙНА • СОЗДАНИЕ МАКСИМАЛЬНО ПРОСТОГО И ПРОДУКТИВНОГО ВЗАИМОДЕЙСТВИЯ С ТОЧКИ ЗРЕНИЯ ДОСТИЖЕНИЯ ЦЕЛЕЙ ПОЛЬЗОВАТЕЛЯ (ОРИЕНТИРОВАННЫЙ НА ПОЛЬЗОВАТЕЛЯ ДИЗАЙН). А КАК НАСЧЁТ ВЕБ ДИЗАЙНА? • «ДИЗАЙН ДЛЯ ВЕБА ОТЛИЧАЕТСЯ ОТ ТРАДИЦИОННОГО ДИЗАЙНА UI ПРОГРАММ. В ОСНОВНОМ, ДИЗАЙНЕР ДОЛЖЕН ПОЛНОСТЬЮ КОНТРОЛИРОВАТЬ И ДЕЛИТЬ ОТВЕТСТВЕННОСТЬ ЗА UI С ПОЛЬЗОВАТЕЛЯМИ И ИХ ОБОРУДОВАНИЕМ\ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ. ЯКОБ НИЛЬСЕН, «РАЗЛИЧИЯ МЕЖДУ ВЕБ ДИЗАЙНОМ И ДИЗАЙНОМ GUI», 1971 ГОД ВЕБ ДИЗАЙН—ЭТО НЕБОЛЬШОЙ ПОДРАЗДЕЛ ДИЗАЙНА UI • БОЛЬШИНСТВО ПРИЛОЖЕНИЙ ОСНОВАНЫ НА ВЕБ UI. МЫ ИСПОЛЬЗУЕМ ВЕБ ТЕХНОЛОГИИ ДЛЯ СОЗДАНИЯ СЛОЖНЫХ ПРИЛОЖЕНИЙ. ВЕБ СТАНДАРТЫ И БРАУЗЕРЫ СТАЛИ БОЛЕЕ-МЕНЕЕ УНИФИЦИРОВАННЫМИ, НО ВМЕСТО ЭТОГО МЫ ИМЕЕМ ДЕЛО С МНОЖЕСТВОМ МОБИЛЬНЫХ УСТРОЙСТВ. ТАКИМ ОБРАЗОМ, ЭТИ АППАРАТНЫЕ\ПРОГРАММНЫЕ КРИТЕРИИ УТРАТИЛИ СВОЮ ЗНАЧИМОСТЬ. ЦЕЛЬДИЗАЙНЕРА — СОЗДАТЬ ПОТРЯСАЮЩИЙ ДИЗАЙН И ПОТРЯСАЮЩИЙ ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС • ДОСТУПНЫ ДЕСЯТКИ ПРОДУКТОВ ДЛЯ ДИЗАЙНА UI. ТОЛЬКО ОТ ВАС ЗАВИСИТ: КАКИЕ ИНСТРУМЕНТЫ И КАКИМ ОБРАЗОМ ИСПОЛЬЗОВАТЬ В СВОЁМ РАБОЧЕМ ПРОЦЕССЕ. ОСНОВНЫЕ ПРИНЦИПЫ ДИЗАЙНА UI • ЯСНОСТЬ (В ЛЮБОМ МЕСТЕ ВАШЕГО ПРИЛОЖЕНИЯ ИЛИ САЙТА НЕКОТОРЫЕ ВЕЩИ ДОЛЖНЫ БЫТЬ СОВЕРШЕННО ЯСНЫ ДЛЯ ПОЛЬЗОВАТЕЛЯ, ПРОСТОТА ИНТЕРФЕЙСА) • ГИБКОСТЬ (СОЗДАЙТЕ ЧТО-НИБУДЬ, ЧТО ХОРОШО ВЫГЛЯДИТ ВО ВСЕХ СИТУАЦИЯХ) • УЗНАВАЕМОСТЬ (ВЕЩИ ДОЛЖНЫ БЫТЬ АБСОЛЮТНО ЗНАКОМЫ ПОЛЬЗОВАТЕЛЮ: ИКОНКИ, НАВИГАЦИЯ, • ЭФФЕКТИВНОСТЬ (ПОЛЬЗОВАТЕЛЬ ВЫПОЛНИТ СВОЮ ОСНОВНУЮ ЗАДАЧУ САМЫМ ЭФФЕКТИВНЫМ • ПРИЗЫВЫ К ДЕЙСТВИЮ — ССЫЛКИ, КНОПКИ И Т.Д. ИСПОЛЬЗУЕТ ПРОСТЫЕ, ПОПУЛЯРНЫЕ ГЛАГОЛЫ, РАСПРОСТРАНЁННЫЕ ЦВЕТОВЫЕ АССОЦИАЦИИ: КРАСНЫЙ ДЛЯ СРОЧНОГО, ЗЕЛЁНЫЙ ДЛЯ ГОТОВОГО И Т.Д., ВСЁ, ЧТО СВЯЗАНО С ОБРАБОТКОЙ ПЛАТЕЖЕЙ) СПОСОБОМ И НИКОГДА НЕ ТЕРЯЕТ РЕЗУЛЬТАТ СВОЕЙ РАБОТЫ) СОГЛАСОВАННОСТЬ И СТРУКТУРА (СТРУКТУРА ПРИДАЁТ ВЕЩАМ ДОСТУПНОСТЬ, СНИЖАЯ БЕСПОРЯДОЧНОСТЬ И НАГРУЗКУ. СОГЛАСОВАННОСТЬ НАВИГАЦИИ НА ВСЕХ ЭКРАНАХ САЙТА ИЛИ ПРИЛОЖЕНИЯ) ЧТО ТАКОЕ ВАЙРФРЕЙМ? ВАЙРФРЕЙМ – ЭТО ОБРАЗ ДИЗАЙНА НИЗКОЙ ТОЧНОСТИ (СКЕЛЕТ ВАШЕГО ДИЗАЙНА). ОН ДОЛЖЕН ЧЕТКО ПОКАЗЫВАТЬ: • ОСНОВОЮ ГРУППУ КОНТЕНТА (ЧТО?) • СТРУКТУРУ ИНФОРМАЦИИ (ГДЕ?) • ОПИСАНИЕ И БАЗОВУЮ ВИЗУАЛИЗАЦИЮ ВЗАИМОДЕЙСТВИЯ МЕЖДУ ИНТЕРФЕЙСОМ И ПОЛЬЗОВАТЕЛЕМ (КАК?) ПРИМЕР ВАЙРФРЕЙМА ЧТО ТАКОЕ ПРОТОТИПЫ? • ПРОТОТИП, КОТОРЫЙ ЧАСТО ПУТАЕТСЯ С ВАЙРФРЕЙМОМ, — ЭТО СЕРЕДИНА НА ПУТИ К ВЫСОКОКАЧЕСТВЕННОМУ ИЗОБРАЖЕНИЮ ФИНАЛЬНОГО ПРОДУКТА, СТИМУЛИРУЮЩЕГО ВЗАИМОДЕЙСТВИЕ С ПОЛЬЗОВАТЕЛЬСКИМ ИНТЕРФЕЙСОМ. • ПРОТОТИП – ЭТО СИМУЛЯЦИЯ ФИНАЛЬНОГО ВЗАИМОДЕЙСТВИЯ МЕЖДУ ПОЛЬЗОВАТЕЛЕМ И ИНТЕРФЕЙСОМ. ОН МОЖЕТ ВЫГЛЯДЕТЬ НЕ СОВСЕМ ТАК, КАК БУДЕТ ВЫГЛЯДЕТЬ ФИНАЛЬНЫЙ ПРОДУКТ, НО ОЧЕНЬ ПОХОЖЕ НА НЕГО (ОПРЕДЕЛЕННО НЕ СЕРОВАТЫЙ НАБРОСОК). ПРИМЕР ПРОТОТИПА ЧТО ТАКОЕ МОКАП? • МОКАП – ЭТО СЕРЕДИНА НА ПУТИ К ВЫСОКО-ТОЧНОМУ, СТАТИЧНОМУ ДИЗАЙНОБРАЗУ. ЧАСТО МОКАПЫ – ЭТО ГРАФИЧЕСКИЕ НАБРОСКИ ИЛИ ДАЖЕ АКТУАЛЬНЫЙ ГРАФИЧЕСКИЙ ДИЗАЙН. ПРИМЕР МОКАПА ПРИМЕР Вайрфрейм Макет рабочий ПРОТОТИПЫ И ТЕСТИРОВАНИЕ • ЭТИ МЕТОДЫ ПОЗВОЛЯЮТ ВАМ ИССЛЕДОВАТЬ И ВЫЯВЛЯТЬ ПРОБЛЕМЫ В ВАШИХ ВАЙРФРЕЙМАХ НА РАННЕЙ СТАДИИ, БЕЗ ОТРИСОВКИ ТОЧНЫХ МАКЕТОВ. • ВЫ МОЖЕТЕ СДЕЛАТЬ ВАШИ ВАЙРФРЕЙМЫ ИНТЕРАКТИВНЫМИ С ПОМОЩЬЮ INVISION. HTTPS://WWW.INVISIONAPP.COM/ • РАННИЙ ПРОТОТИП ТЕСТИРУЕТСЯ ВЖИВУЮ КАК ВАМИ, ТАК И КОМАНДОЙ, ИЛИ ГРУППОЙ ПОЛЬЗОВАТЕЛЕЙ ИЗ ЦЕЛЕВОЙ АУДИТОРИИ. PHOTOSHOP - ПЛАТНОЕ (МОЖНО ПОЛУЧИТЬ ЛИЦЕНЗИЮ НА ГОД (ОКОЛО 24 ТЫСЯЧ РУБЛЕЙ) ЛИБО ЖЕ ПЛАТИТЬ ЗА ПРОДУКТ КАЖДЫЙ МЕСЯЦ (ПРИМЕРНО 1 300 РУБЛЕЙ БЕЗ НДС). • БЕСПЛАТНО СКАЧАТЬ PHOTOSHOP CS6 С ОФИЦИАЛЬНОГО САЙТА http://adobephotoshoprus.ru/fotoshops-photoshop-cs6/ • БАЗОВЫЕ ЗНАНИЯ ПО ФОТОШОПУ ДЛЯ НОВИЧКОВ И ЧАЙНИКОВ https://www.youtube.com/watch?v=rXlJimW-mes FIGMA - УСЛОВНО-БЕСПЛАТНОЕ ПО (ЕСТЬ ПЛАТНОЕ -12 ДОЛЛАРОВ В МЕСЯЦ) https://www.figma.com ПЛЮСЫ: • СОВМЕСТНАЯ РАБОТА НАД ОТДЕЛЬНЫМИ ПРОЕКТАМИ • ПРИСУТСТВУЕТ ВОЗМОЖНОСТЬ ОСТАВЛЯТЬ КОММЕНТАРИИ. ИХ МОГУТ ДОБАВЛЯТЬ НЕ ТОЛЬКО РЕДАКТОРЫ, НО И ОБЫЧНЫЕ ПОЛЬЗОВАТЕЛИ. • КОНТРОЛЬ ВЕРСИЙ. МОЖНО ПОСМОТРЕТЬ, КТО И КОГДА ВНОСИЛ ИЗМЕНЕНИЯ, А ТАКЖЕ ОТКАТИТЬСЯ ДО НУЖНОЙ ВЕРСИИ ВСЕГО В ПАРУ КЛИКОВ В СЛУЧАЕ НЕОБХОДИМОСТИ. • ЛЮБОЙ ЭЛЕМЕНТ СОЗДАВАЕМОГО ИНТЕРФЕЙСА МОЖНО ВЫБРАТЬ И ПРИ НЕОБХОДИМОСТИ ЭКСПОРТИРОВАТЬ. • ЕСТЬ ВОЗМОЖНОСТЬ СОЗДАНИЯ ЗАВИСИМЫХ КОПИЙ ОРИГИНАЛА. • ЕСТЬ ВОЗМОЖНОСТЬ ПЕРЕДВИГАТЬ ВМЕСТО ВЕКТОРНЫХ ТОЧЕК ЛИНИИ • FIGMA РАБОТАЕТ С GOOGLE FONTS • РАЗРАБОТЧИКИ СОЗДАЛИ LIVE-CHAT, ПОЗВОЛЯЮЩИЙ БЫСТРО СВЯЗАТЬСЯ С СОТРУДНИКОМ ТЕХПОДДЕРЖКИ, ЗАДАВ ТОМУ ВОПРОС (ТОЛЬКО ПО ДЕЛУ!) ИЛИ РАССКАЗАВ О КАКОЙ-ЛИБО ТЕХНИЧЕСКОЙ ПРОБЛЕМЕ. МИНУСЫ: • ЗАВИСИМОСТЬ ОТ НАЛИЧИЯ ПОДКЛЮЧЕНИЯ К СЕТИ • ОТСУТСТВУЕТ ОКРУГЛЕНИЕ ПОЛУПИКСЕЛЕЙ. • ПОЧТИ НЕТ ПЛАГИНОВ. НУЖНЫЕ ССЫЛКИ К FIGMA http://figmadesign.ru/3-1-0-sozdanie-novogo-fajla-i-obzor-osnovnyh-funkcij.html начало работы, обзор https://www.youtube.com/watch?v=shL-27JUe9I – уроки на Figma СПАСИБО ЗА ВНИМАНИЕ!