61. Простые способы улучшить дизайн

В этом выпуске: видео о создании интерактивного поля в Axure 8, конспект лекций с курса Игоря Штанга, статьи о финансах «Щуки», простых приёмах улучшения дизайна, тестировании на этапе проектирования, уровнях дизайнера.

Интерактивное поле в Axure 8

Как в Axure 8 сделать интерактивное поле для ввода количества товаров в заказе — 5-минутное видео от Егора. Использование локальных переменных и работа с простыми функциями в текстовом поле.

Конспект лекций с курса Игоря Штанга

Никита Ларионов выложил конспект лекций с курса Игоря Штанга «Типографика и вёрстка», который недавно прошёл в Волгограде. Например:

Одинаковое содержание в одинаковых модулях выглядит скучно. Чтобы интересно расположить его в рамках готового пространства есть 7 приёмов.

  1. Заполнить модули не до конца. Оставьте некоторые модули пустыми, обтравите фотографии;
  2. Оформить элементы по-разному. Разделите их цветом или шрифтом. Представьте себе однообразную структуру, в которой расставлены акценты;
  3. Заполнить элементами разных классов или разного качества. Вставьте в каталог товаров ссылку на статью или цитату из отзыва;
  4. Предусмотреть область, которая будет выглядет по-другому. Сетка одна, но модули объединяются по-разному;
  5. Выйти за пределы модуля. У вас есть чёткие куски, но некоторые изображения вылетают за пределы своих модулей. Если у вас прослеживается деление на модули, то можно подумать, как заводить элементы один на другой. Если у вас «каша из элементов», то лучше в это не лезьте;
  6. Добавить новый слой. Подчеркните особенную динамику и направление. Например, текст стоит с чётким ритмом, а картинки летают как хотят;
  7. Соблюсти баланс порядка и хаоса. Структура должна остаться читаемой. В хорошем макете сначала думают о структуре, а потом о разнообразии.

Финансы «Щуки»

Иван Величко рассказал о финансах дизайн-бюро «Щука».

Формат оплаты:

  • Почасовая оплата только с Pure. Такая модель не интересна, так как размер прибыли зафиксирован и может только уменьшиться, если сотрудник напортачил;
  • Остальным клиентам предлагаются фиксированные бюджет и время;
  • Сколько часов дизайнеры потратят на проект, прикидывает арт-директор.

Как считают часы:

  • Для западных заказчиков час работы стоит 60 евро, для российских — 3000 рублей;
  • Повышение стоимости не привело к уменьшению количества заказов;
  • Сотрудники работают максимум 6 часов в день;
  • Они склонны занижать потраченное время, боясь показаться неэффективными.

Общие показатели:

  • В штате 14 сотрудников;
  • В 2017 году выручка составила 25 млн рублей;
  • За счёт повышения стоимости и более точной оценки проектов во 2-м полугодии удалось получить 2 млн прибыли;
  • Плановая норма прибыли — 20%. Хотят поднять до 30% за счёт снижения транзакционных издержек и более чёткой постановки задач;
  • На счетах есть финансовая подушка около 4 млн рублей (в районе двухмесячного оборота).

Стоимость проектов:

  • Средний бюджет — 700 тысяч рублей;
  • Перестали брать проекты меньше 500 тысяч. Разматывать маховик пресейла и концептуального проектирования ради меньшего нецелесообразно;
  • Если дизайнеру нечем заняться, лучше обновлять портфолио, а не делать дешёвый проект.

Простые приёмы улучшения дизайна

Адам Ватан и Стив Шёгер предложили 7 простых приёмов, с помощью которых можно улучшить дизайн:

  1. Использовать для создания иерархии цвет и толщину, а не размер текста;
  2. Отказаться от серого текста на цветном фоне. Лучше полупрозрачный белый или отдельный гармонирующий с фоном цвет (особенно, когда используются фоновые изображения);
  3. Добавить вертикальное смещение теней и уменьшить их размытие и растягивание;
  4. Уменьшить количество рамок и разделительных линий. Вместо них можно добавить блоку тень, раскрасить фон, добавить отступы;
  5. Использовать векторные иконки в том размере, для которого они рисовались. Не увеличивать их слишком сильно;
  6. Добавлять акценты с помощью цветной границы блока;
  7. Не забывать про иерархию, раскрашивая кнопки в семантически подходящие цвета.

(Самая популярная ссылка в этой подборке, если судить по количеству лайков в ВК.)

Тестирование на этапе проектирования

Дмитрий Мелентьев написал о тестировании на этапе проектирования:

  • Бумажных прототипов;
  • Интерактивных прототипов в мелкой детализации;
  • Интерактивных макетов;
  • Альфа-версий продуктов;
  • Похожих продуктов.

Про интерактивные макеты:

Дизайнер делает красивый интерфейс, в котором вы размечаете области, при взаимодействии с которыми должно что-то происходить. Обычно это просто «on click» или «on move».

Вся эта красота делается интерактивной и тестируется на пользователях:

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

Есть небольшой нюанс: надо постоянно напоминать, что это прототип. Потому что такой прототип уж слишком похож на реальность.

Уровни дизайнера

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

Но в остальном — какой-то компот с кусочками противоречивых фактов из жизни автора:

  • «В моей карьере было не более трех заказчиков и на фрилансе я проработал меньше года»;
  • «Я создал резюме в 17 лет, портфолио в 18. Первые 1−2 года в нем были только фейковые работы, но даже они приводили клиентов».

Фейковые работы привели не более 3 клиентов? Менее года или всё-таки первые 1−2 года? Ничего не понимаю.

(Заметка из моего личного телеграм-канала «Френч-пресс».)