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

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

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

Давайте вспомним структуру сайта заказа такси премиум-класса: «скачать приложение», «о водителях», «об автомобилях», «страховка», «скачать приложение», «отзывы». Как видите, ключевые действия стоят в начале и конце, чтобы посетитель сайта, просмотрев все блоки, не ушел просто так. Это правило подходит всем.

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

Есть еще одна деталь, с которой я сталкивался не на одном проекте. Как мы говорили, у нас есть два типа пользователей: пассажир и водитель. Для обеих ролей нужна отдельная страница, так как привлекать их будут по разным каналам. Кому же в этом случае отдать главную страницу? А может быть, стоит сделать одну разводящую? Почти все компании со схожей механикой отводят главную страницу под тех пользователей, которые платят деньги. У Airbnb главная предназначена для путешественников, а страница владельцев жилья спрятана в меню (деньги сервису платят постояльцы). Компания по уборке Qlean, Wheely, Upwork и многие другие сервисы используют ту же стратегию, поэтому и в нашем проекте я бы остановился на ней, то есть главную страницу отвел бы под пассажиров, а в меню добавил страницу «Стать водителем».

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

Вариаций возможных дизайн-процессов в интернете много, поэтому я остановлюсь на классическом варианте, который мы обсуждали ранее: 1. Погружение в задачу.2. Исследование и анализ конкурентов.3. Продумывание сценариев.4. Создание фреймворка.5. Поиск визуального стиля. 6. Дизайн-макет.

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

В больших таблицах не помешает выделять строку серым цветом.

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