Дизайн

Как не облажаться с дизайном

Перевод статьи Марка Хемеона, основателя платформы по поиску работы для дизайнеров Design Inc.


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

Если вы не верите, что можете вот так просто научиться дизайну, вспомните, что сказал вокалист Foo Fighters Дэйв Грол про обучение чему-то новому: «Я никогда не брал уроки игры на барабанах. Я никогда не посещал занятия по игре на гитаре. Я просто дошел до всего сам. Мне кажется, если вам что-то нравится, вы мотивированы и сфокусированы на том, чего хотите достичь, тогда вы можете сделать что угодно в своей жизни»

Давайте держать эти слова в уме. Ну как, готовы к интенсиву? Все правила ниже приведены без какого-то определенного порядка.

1. Используйте больше контраста

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

tild3034-3066-4139-b638-656236653862__104

2. Почти черный воспринимается лучше черного

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

tild3264-3537-4431-a434-376265343632__gteg

3. Важный контент — в начало

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

tild3837-6666-4663-b437-383264353533__105

Давайте посмотрим на несколько примеров хорошей иерархии.

Instagram четко фокусируется на фото или видео, которое запостил пользователь.

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

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

tild3537-3962-4335-b933-653331393631__noroot

Давайте посмотрим еще на два примера.

Spotify явно уделяет много внимания обложкам групп, а также сначала показывает название песни и потом, чуть ниже, панель управления. И даже здесь — в панели управления — есть своя иерархия. Кнопка воспроизведения и паузы выделяются на фоне перемотки назад и вперед.

Facebook использует ту же тактику, что и Instagram — он показывает контент от ваших друзей посередине и на весь экран.

tild6666-6133-4633-a566-383534366566__ffj

4. Выравнивайте все

Самый быстрый способ поправить то, что плохо выглядит на сайте — убедиться, что у вас все выровнено. Когда дизайнеры говорят о необходимости использовать «сетку», они пытаются предупредить команду о проблеме с выравниванием.

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

tild6139-6137-4236-b630-623431326637__101

Давайте посмотрим на другой пример выравнивания, на этот раз с Medium.com. Этот веб макет, который я позаимствовал с Medium.com — как он вам? У вас нет ощущения, что в нем что-то не так?

tild3831-3939-4764-b766-623161663638__blob

Намек: обратите внимание, как выровнен текст по левому краю. Как это выглядит, по-вашему?

Ниже слева я отметил «визуальную реку» — все изгибы, которые получились из-за неправильного выравнивания. Справа я просто сдвинул главные блоки к левому краю.

Screen Shot 2017-05-25 at 17.18.38

Шаткое выравнивание слева создает эффект реки, справа выравнивание более устойчивое.
 
Screen Shot 2017-05-25 at 17.18.43

Слева плохое выравнивание, справа — исправленный вариант.

5. Больше воздуха в тексте

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

tild3866-3234-4431-a362-636666326635__103

Хороший размер шрифта и плохой.
 
tild3839-3330-4630-b838-303732313339__102

Хорошее межстрочное расстояние и плохое.

6. Используйте список, чтобы показать результаты, если важен порядок

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

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

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

tild3236-3061-4561-b732-616236636335__14d9sfv_znbzd8zvq_r0rq

Как пользователи просматривают результаты поиска в виде сетки.

7. Сначала проектируйте черно-белый вариант, цвет добавите позже

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

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

tild3834-6133-4032-b230-306138303539__1dv0jkfb84bbl8h3ozuzava

8. Создавайте комфортный дизайн

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

Многие популярные мобильные приложения ставят навигацию и главные функции в нижней трети телефона.

tild3463-3933-4533-b466-633439306438__1i4pquavtocwpuvvcd1sxa

9. Заимствуйте цветовые палитры

Цвета — это практически черная магия. Я очень рекомендую зайти на Dribbble и поискать там цветовые палитры. Или использовать генераторы палитр, например, Coolors или Color Claim.

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

10. Используйте ресурсы Apple и Google

Apple и Google создали невероятное количество ресурсов для всех, кто создает программное обеспечение на Android или iOS.

Например в Google Material есть гайдлайны, ресурсы, цвета, иконки и другие элементы, которые помогут вам создать приложение. У Apple есть их Human Interface Guidelines, в котором собрана вся информация о том, что вам нужно знать при создании приложения на iOS.

tild6136-3031-4364-b966-633937353166__materialio

Помните: дизайн — это практика

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

Источник: tilda.education