Принципы хорошего дизайна может выучить и использовать любой человек. Из этого гида вы получите базовые знания и практические советы по дизайну, которые сразу сможете применить (и произвести впечатление на друзей-дизайнеров).
Содержание
1. Используйте больше контраста
2. Почти черный воспринимается лучше черного
3. Важный контент – в начало
4. Выравнивайте все
5. Больше воздуха в тексте
6. Используйте список, чтобы показать результаты, если важен порядок
7. Сначала проектируйте черно-белый вариант, цвет добавите позже
8. Создавайте комфортный дизайн
9. Заимствуйте цветовые палитры
10. Используйте ресурсы Apple и Google
1. Используйте больше контраста
2. Почти черный воспринимается лучше черного
3. Важный контент – в начало
4. Выравнивайте все
5. Больше воздуха в тексте
6. Используйте список, чтобы показать результаты, если важен порядок
7. Сначала проектируйте черно-белый вариант, цвет добавите позже
8. Создавайте комфортный дизайн
9. Заимствуйте цветовые палитры
10. Используйте ресурсы Apple и Google
Если вы не верите, что можете вот так просто научиться дизайну, вспомните, что сказал вокалист Foo Fighters про обучение чему-то новому:
Дэйв Грол
Nirvana, Foo Fighters
Я никогда не брал уроки игры на барабанах. Я никогда не посещал занятия по игре на гитаре. Я просто дошел до всего сам. Мне кажется, если вам что-то нравится, вы мотивированы и сфокусированы на том, чего хотите достичь, тогда вы можете сделать что угодно в своей жизни.
Давайте держать эти слова в уме. Ну как, готовы к интенсиву? Все правила, советы и рекомендации ниже приведены без какого-то определенного порядка.
1. Используйте больше контраста
Цвет фона и цвет шрифта должны быть достаточно контрастными, чтобы не вызывать напряжение в глазах. Наиболее разборчивым сочетанием считается черный текст на белом фоне. Держитесь подальше от светло-серого, желтого и зеленого цветов для шрифта. Имейте в виду: если вы щуритесь, чтобы прочитать текст — это проблема.
Источник изображения: developer.apple.com/design/tips
Маша Белая
дизайнер Tilda Publishing
Принцип контраста применим не только к цвету шрифта, но и к его размеру. Например, если размер шрифта заголовка будет мало отличаться от размера шрифта подзаголовка, это больше приведет к ощущению неаккуратности, чем к пониманию важного и второстепенного.
2. Почти черный воспринимается лучше черного
Если у вас есть возможность выбора, попробуйте использовать для шрифта цвет #333 333 RGB (51,51,51) вместо чисто черного. Просто черный текст на белом фоне немного рябит в глазах, в итоге на буквах сложно сфокусироваться.
3. Важный контент — в начало
При создании дизайна расположите самую главную информацию в самом начале, чтобы сразу обозначить цель вашего сайта или приложения. Пользователю должно быть все понятно без зума, прокрутки или кликов.
Источник изображения: developer.apple.com/design/tips
Давайте посмотрим на несколько примеров хорошей иерархии.
Instagram* четко фокусируется на фото или видео, которое запостил пользователь.
Pinterest создает визуальную иерархию, закрепляя строку поиска в верхней части страницы, уже ниже идет их симпатичная сетка с картинками. Pinterest намеренно располагает строку поиска наверху — это самая первая вещь, которую видит пользователь.
Instagram* четко фокусируется на фото или видео, которое запостил пользователь.
Pinterest создает визуальную иерархию, закрепляя строку поиска в верхней части страницы, уже ниже идет их симпатичная сетка с картинками. Pinterest намеренно располагает строку поиска наверху — это самая первая вещь, которую видит пользователь.
Поиск – главная функция сервиса, ведь люди используют Pinterest, чтобы узнавать новое и просматривать результаты.
Давайте посмотрим еще на два примера хорошей иерархии в дизайне.
Spotify явно уделяет много внимания обложкам групп, а также сначала показывает название песни и потом, чуть ниже, панель управления. И даже здесь — в панели управления — есть своя иерархия. Кнопка воспроизведения и паузы выделяются на фоне перемотки назад и вперед.
Facebook* использует ту же тактику, что и Instagram* — он показывает контент от ваших друзей посередине и на весь экран.
Spotify явно уделяет много внимания обложкам групп, а также сначала показывает название песни и потом, чуть ниже, панель управления. И даже здесь — в панели управления — есть своя иерархия. Кнопка воспроизведения и паузы выделяются на фоне перемотки назад и вперед.
Facebook* использует ту же тактику, что и Instagram* — он показывает контент от ваших друзей посередине и на весь экран.
Маша Белая
дизайнер Tilda Publishing
Разработав иерархию, применяйте ее ко всем однотипным элементам на странице. Пусть все заголовки одного уровня будут одинакового размера, а принцип подачи схожих элементов не будет отличаться. Пользователю будет сложно ориентироваться на сайте, у которого все время меняется иерархия.
4. Выравнивайте все
Самый быстрый способ поправить то, что плохо выглядит на сайте и сделать дизайн лучше — убедиться, что у вас все выровнено. Когда дизайнеры говорят о необходимости использовать «сетку», они пытаются предупредить команду о проблеме с выравниванием.
Выровнять контент — одно из самых быстрых улучшений в дизайне, которое применимо к любому приложению или сайту. Выглядеть все будет сразу в 10 раз лучше.
Источник изображения: developer.apple.com/design/tips
Давайте посмотрим на другой пример выравнивания, на этот раз с Medium.com. Этот веб макет, который я позаимствовал с Medium.com — как он вам? У вас нет ощущения, что в нем что-то не так?
Намек: обратите внимание, как выровнен текст по левому краю. Как это выглядит, по-вашему?
Ниже слева я отметил «визуальную реку» — все изгибы, которые получились из-за неправильного выравнивания. Справа я просто сдвинул главные блоки к левому краю.
Ниже слева я отметил «визуальную реку» — все изгибы, которые получились из-за неправильного выравнивания. Справа я просто сдвинул главные блоки к левому краю.
Шаткое выравнивание слева создает эффект реки, справа выравнивание более устойчивое.
Слева плохое выравнивание, справа – исправленный вариант.
5. Больше воздуха в тексте
Мы создаем сайты не для муравьев.
Если вы увеличите размер шрифта и межстрочное расстояние, текст на сайте будет намного легче читать.
Хороший размер шрифта и плохой. Источник изображения: developer.apple.com/design/tips
Хорошее межстрочное расстояние и плохое. Источник изображения: developer.apple.com/design/tips
6. Используйте список, чтобы показать результаты, если важен порядок
Большинство мобильных приложений и сайтов имеют поиск в каком-либо виде, и тут в дизайне всегда много споров — каким образом лучше отобразить результаты.
Если в поисковой выдаче важна иерархия, самым эффективным решением будет список.
Если порядок не так важен, и вы хотите вдохновлять людей узнавать больше (как Pinterest или AirBnB), то выдача результатов в виде сетки лучше воспринимается глазом и мотивирует искать еще.
Как пользователи просматривают результаты поиска в виде сетки. Исследование C. Siu и B. Chaparro.
7. Сначала проектируйте черно-белый вариант, цвет добавите позже
Когда вы создаете дизайн в черно-белом виде, вы концентрируетесь на решении проблем и проектировании продукта, с которым будет взаимодействовать пользователь.
Цвет вызывает сильную эмоциональную реакцию и часто мешает нашей способности фокусироваться на проблемах дизайна.
8. Создавайте комфортный дизайн
Нагрузка на руку у пользователей смартфонов (то есть, почти у всех людей) — реальная проблема. Взгляните на графику из статьи Люка Вроблевски ниже.
Люк показывает на области смартфона, куда легко добраться пальцу и куда сложно — по крайней мере для правши. Кстати, мне очень нравятся приложения, где вы можете переключать интерфейс для праворуких и леворуких.
Многие популярные мобильные приложения ставят навигацию и главные функции в нижней трети телефона.
Многие популярные мобильные приложения ставят навигацию и главные функции в нижней трети телефона.
Источник изображения: статья Responsive Navigation: Optimizing for Touch Across Devices
9. Заимствуйте цветовые палитры
Цвета — это практически черная магия. Я очень рекомендую зайти на Dribbble и поискать там цветовые палитры. Или использовать генераторы палитр, например, Coolors или Color Claim.
Сохраните свое время от бесконечных дискуссий и угадывания вслепую.
10. Используйте ресурсы Apple и Google
Apple и Google создали невероятное количество ресурсов для всех, кто создает программное обеспечение на Android или iOS.
Например в Google Material есть гайдлайны, ресурсы, цвета, иконки и другие элементы дизайна, которые помогут вам создать приложение. У Apple есть их Human Interface Guidelines, в котором собрана вся информация о том, что вам нужно знать при создании приложения на iOS.
Яна Плющева
дизайнер Tilda Publishing
Думаю, это очень полезные советы для новичков. Простые, как рецепт блинчиков. После прочтения будет полезно зайти на сайты, где собирают примеры хороших проектов, и постараться проанализировать их, используя новые знания. Например, на Awwwards, Siiimple или Land-book можно посмотреть, как используется белое пространство, типографика и цвета.
Поставьте себя на место пользователя. Человеку важно быстро сориентироваться на сайте и понять, что вы предлагаете. Порой лучше воспринимается чистая белая страница с четкой иерархией текстов (как документ в Google docs), чем множество цветных фонов и обилие акцентов.
Поставьте себя на место пользователя. Человеку важно быстро сориентироваться на сайте и понять, что вы предлагаете. Порой лучше воспринимается чистая белая страница с четкой иерархией текстов (как документ в Google docs), чем множество цветных фонов и обилие акцентов.
Помните: дизайн — это практика
На то, чтобы натренировать глаз и научиться видеть спорные моменты в дизайне, нужно время и практика. Но вы заметите, что эти 10 советов пройдут с вами долгий путь и помогут сделать дизайн вашего сайта или приложения лучше.
Текст: Марк Хемеон, Design Inc
Перевод: Варя Гурова
Иллюстрации, дизайн и верстка: Юлия Засс
Перевод: Варя Гурова
Иллюстрации, дизайн и верстка: Юлия Засс
Если материал вам понравился, расскажите о нем друзьям. Спасибо!
*Компания Meta Platforms Inc., владеющая социальными сетями Facebook и Instagram, по решению суда от 21.03.2022 признана экстремистской организацией, ее деятельность на территории России запрещена.
Читайте также:
