Дизайн (общие понятия)

Дизайн-концепция (интерфейсы)

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

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

Что такое Figma и почему её используют

Вместо Photoshop и Illustrator многие команды выбирают Figma — альтернативный продукт, созданный специально для UI- и UX-дизайнеров.

В отличие от Photoshop, Figma не использует собственных средств для отрисовки контента. Эти функции возложены на облачные вычисления.

В Photoshop приходится постоянно подстраиваться под пиксельную сетку, чтобы исправить размытые контуры объектов. А в Figma есть автоматическая привязка контента к сетке, что обеспечивает четкие края.

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

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

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

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

Анимация

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

Зачем нужна анимация в интерфейсе?

Анимация — популярный инструмент, но специалисты не умеют его использовать, за редким исключением. Мало кто понимает, зачем она нужна, и проектировщики с дизайнерами интерфейсов воспринимают ее, как украшательство. Это заблуждение.

Вплоть до 2011 года во времена активного использования флеша при разработке сайтов, люди видели обилие ненужной, но иногда красивой анимации. Сайты практически превращались в видеоролики. Обилие анимации не помогало людям сориентироваться. Уровень интерактивности был высоким, юзабилити — низким. Бренды хотели просто произвести впечатление на людей.

В 2011 году флеш умер в веб- и мобильной разработке. А компании не успели перестроиться. Сегодня анимация должна применяться совершенно иначе. Но разработчики все еще скептически относятся к ней, отводя ей категорию украшательств, а не удобств для пользователя.

На самом деле анимация интерфейса сегодня — это неотъемлемая составляющая юзабилити.

Имитация реального мира — основа юзабилити

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

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

3 базовых принципа имитации реального мира

1. Физическая модель. При разработке интерфейса дизайнер должен сформулировать физическую модель, согласно которой будут двигаться и взаимодействовать все элементы.Чтобы демонстрировать работы и услуги, мы каждый раз верстали и отправляли клиентам PDF-презентацию. Это тяжело и затратно. В результате был создан сайт, который стал актуальной презентацией агентства с возможностями интерактивной среды.Физическая модель нашего сайта — презентация. Мы отталкиваемся от работ, каждая из которых представлена в виде стопки слайдов. Ее можно хватать или свайпить горизонтально. При вертикальном свайпе (листании) мы наглядно показываем, что слайды находятся в стопке один над другим. Это возможно благодаря правильной интерактивности, основанной на принципах анимации интерфейса и имитацию объектов реального мира. Так в общем виде формулируется физическая модель.Частный случай модели: кнопка на сайте по умолчанию легкая, состоящая из обводки и призыва к действию. При наведении она заполняется цветом и становится визуально тяжелее. С помощью анимации интерфейса мы наглядно реализуем вес кнопки в режиме ховера.Слои — это еще один инструмент создания реалистичной физической модели. Сами по себе они не имеют смысла, но помогают создать живой дизайн в связке с анимацией.
2. Контекст / связь Связь между различными состояниями интерфейса способствует созданию иллюзии живого взаимодействия.Например, вы решили почитать обычную бумажную книгу. Что происходит, когда изучили весь текст разворота? Скорее всего, переворачиваете страницу. Процесс перелистывания — пауза в чтении. Хорошо это или плохо? С позиции полезного действия книги — плохо, с позиции человека — привычно. Перелистывание — привычное действие, позволяющее видеть связь между страницами. Плохо, если в конце вам нужно нажать на кнопку, и один текст мгновенно сменится на другой, что невозможно в жизни. Без связи и процесса перелистывания сложнее понять, что происходит и почему. Старый способ загрузки веб-страниц не естественен для реального мира. Людей «заставили привыкнуть к плохому», т. к. технологии не позволяли имитировать живые взаимодействия качественно.Наглядный пример связи в интерфейсах — это раскрытие iOS-приложения из иконки. Виден контекст, процесс привычен. Интерфейс «вырастает» из иконки и туда же «прячется» при клике на кнопку Home. Это хороший UX, который достигается благодаря анимации интерфейса.
3. Анимация, имитирующая живое взаимодействие Одно из предназначений анимации интерфейса, как уже было сказано выше, заключается в создании иллюзии взаимодействия с объектом реального мира.Анимация используется для имитации взаимодействий, с которыми вы сталкиваетесь в жизни. Речь идет о динамических характеристиках, таких как инерция, эластичность, вес и пр. Разработчики должны понимать, что в реальном мире практически не встречается равномерное прямолинейное движение.Тяжелые объекты имеют большую инерцию, чем легкие, что влияет на тип анимации и изинг — математическая модель ускорения или замедления. Для одного типа анимации применяется экспоненциальный тип замедления (анимация типа out), для другого — синусоидальное ускорение (анимация типа in) и т. п. Для каждого конкретного случая скорость, длительность анимации, изинги и типы анимаций выбираются индивидуально. Это обеспечивает имитацию живого взаимодействия.
   
   Примеры грамотного использования анимации интерфейсов:
• плавающие элементы интерфейса;
• подсказки и уведомления;
• слои + анимация;
• демонстрация обновлений или получение сообщения;
• привлечение внимания человека к какому-либо элементу;
• пояснение нестандартной навигации;
• индикаторы загрузки — способ скоротать время.

Почему скевоморфизм не актуален?

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

Когда-то Стив Джобс считал скевоморфизм идеальным направлением, которое позволит любому пользователю быстро адаптироваться и разобраться в интерфейсе. Даже если до этого человек никогда в жизни не пользовался iPhone, iPad и Mac.

Например, в iOS 6 иконка заметок была изображена в виде записной книжки, почты — в виде конверта, а приложение iBooks для чтения книг — один в один как настоящая книжная полка.

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

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

В 2013 году Apple отошла от скевоморфизма, сменив его на новый тренд — плоский дизайн. В нем нет полутонов, текстурности, объема, света/тени. Только контрастные яркие простые иконки.

Мобильные операционные системы — iOS, Android — сейчас «плоские». Такой же является и Windows 10.

Дизайн система

Что такое дизайн-система

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

Для чего нужна дизайн-система

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

Пример атома: шрифт, цвет, стиль (плашка с обводкой или тенью тоже включается).

Более сложные, обособленные, повторяющиеся части дизайна (карточка товара, шапка, подвал) называются компонентами.

Из чего состоит дизайн-система

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

Адаптация

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

Тестирование адаптивных версий или дизайна мобильных приложений необходимо проводить сразу на устройстве.

Отличие адаптации от мобильной версии сайта

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

Когда блоки просто перестраиваются и изменяют размер — это адаптация, но как только на странице происходит изменение этих блоков — это уже мобильная версия.

Дополнительные элементы

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

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