Цитаты из книги «Дизайнер интерфейсов. Принципы работы и построение карьеры»

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

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

чения информации, но к ней всегда остается быстрый доступ

При скролле страницы часть элементов навигации можно скрыть, оставив только ключевые действия и основные пункты

Старайтесь, чтобы в навигации было не более трех уровней.

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

Подумайте об устройствах, которые будут использоваться. Если предполагается значительный мобильный трафик, то следует заранее продумать адаптивный интерфейс. Недаром несколько лет назад была столь популярна концепция Mobile first, предлагающая сделать адаптивный дизайн для мобильных устройств и только после этого приступать к веб-версии. Продумывая адаптив, заранее решите, как должна вести себя навигация. Самый популярный вариант – свернуть всё в бургерное меню. А что делать, если у него два уровня? В этом случае одно меню

предстоит работать. 3. Продумывание сценариев. На данном этапе вы глубже понимаете, каким образом человек будет использовать сервис. 4. Создание фреймворка. Фреймворк – структура, вокруг которой строятся все элементы. Он помогает оптимальным образом разместить их на странице. 5. Поиск визуального стиля. На этом этапе нужно окончательно определиться с цветами, стилем типографики и общим посылом проекта. 6. Дизайн макетов. Финальная стадия, когда необходимо подготовить все макеты и возможные состояния интерфейса и передать их клиенту или разработчикам.

Классический дизайн-процесс включает в себя следующие этапы. 1. Погружение в задачу. Здесь важно понять цели проекта и определить потребности и проблемы целевой аудитории. Многое вам подскажет заказчик. 2. Исследование. Вы анализируете всю полученную от заказчика информацию и проводите самостоятельные исследования с помощью открытых источников. Помимо этого, вы изучаете конкурентов и схожие по механике сервисы, чтобы глубже понять сферу, в которой

В моей «базе знаний» материалы делятся на несколько типов. Анализ конкурентов. Это текстовый файл, в котором хранятся названия всех сервисов со схожей механикой и интересные функции, обнаруженные в ходе исследования. Сценарии. У каждого сервиса есть несколько сценариев, дизайнер должен их знать и хорошо помнить. Их достаточно записать в виде нумерованного списка в текстовом файле. Customer Journey Map. Инструмент, который помогает проанализировать сценарии на наличие потенциальных проблем. У меня он хранится в табличном виде. Интерфейсы. Здесь я описываю мысли и идеи о ключевых местах сервиса. Идеи. В этот файл я заношу общие мысли по будущему развитию продукта. Когда я говорил, что дизайнер может неделями не открывать графический редактор, я как раз имел в виду работу над организацией информации. 12.5. Разработчик