Дизайн: как не опозориться, или 5-минутный курс для чайников

0
345

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

Если сомневаетесь, что обучаемы дизайну, то давайте вспомним слова нашего знаменитого друга Дэвида Грола:

«Я никогда не учился барабанам. Я никогда не учился гитаре. Я как-то сам к этому пришел. Я считаю, что если вы действительно чего-то хотите, вы мотивированы и имеете цель, то нет ничего, чего бы вы не могли добиться.»

И с благословения Дэйва, мы начинаем наш крэш-курс:

  1. Больше контраста.

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

  1. Почти черный, лучше чем черный.

Если есть возможность — попробуйте использовать этот цвет — #333333 RGB (51,51,51), взамен черного. Черный шрифт пляшет перед глазами и читателям от этого сложнее фокусироваться.

  1. В приоритете — важный контент.

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

Примеры хорошей визуальной иерархии:

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

В Пинтерест представлена определенная визуальная иерархия: сверху расположена поисковая строка, а ниже следует лента фотографий. То, что поисковая строка — первое, что видит пользователь в Пинтерест, совсем не случайность.

Смысл приложения — поиск: пользователи любят искать и просматривать фотографии.

Давайте разберем еще пример:

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


Нравится материал? Подпишись!

  1. Выравнивание.

Самый быстрый способ исправить то, что не вписывается в общую картину это — проверить, выровнены ли компоненты относительно друг друга.

Именно это имеют в виду дизайнеры, когда просят использовать «сетку».

Исправление «неровностей» — это один из простейших способов улучшить общий вид вебсайта или приложения, который гарантированно доставит пользователям эстетическое удовольствие.

Еще один пример правильной организации компонентов:

Это онлайн планировка контента на Medium.com.

Ничего не напрягает? Подсказка: как вам выравнивание по левому краю?

Этого можно избежать с помощью простого выравнивания компонентов.

  1. Размер и интервалы.

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

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

  1. Используйте режим списка, если порядок имеет значение.

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

Если порядок результата важен, то сортировка контента в режиме списка будет самой эффективной.

Если же порядок не так важен, то можно поэкспериментировать с сортировкой и мотивировать пользователей просматривать больше информации (как в случае с «Pinterest»и «AirBnB»).

  1. Черно-белый черновик.

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

В то время, как цвета могут отвлечь и исказить восприятие во время разработки.

  1. Комфортный дизайн.

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

Было бы прекрасно иметь дополнительный интерфейс для леворуких пользователей.

Успешные приложения пользуются этой информации и размещают важную информацию в нижней части экрана.

  1. Пользуйтесь палитрами.

Как говорится: «На вкус и цвет товарищей нет». Лучший вариант в подобной ситуации-либо просматривать специализированные вебсайты, как Dribbble.com, или же пользоваться генераторами палитр Coolors.

Уберегите себя от часов размышлений, диспутов и сомнений.

  1. Пользуйтесь знаниями Google и Apple OS.

Apple и Google создали и предоставили множество полезной информации для всех, кто разрабатываете программы на их основе.

К примеру, Google Material spec располагает сведениями, ресурсами, палитрами, иконками и прочими компонентами для запуска и проектирования программ.

Apple HIG — подробная инструкция по тому, как создать и спроектировать программу на этой операционной системе.

И помните, все приходит с опытом!

А вот и обещанный бонус: вчера мы подготовили для вас перевод статьи про дизайн спринты, читайте её по ссылке Agile в дизайне: кейс мобильного приложения Oak.