- PVSM.RU - https://www.pvsm.ru -

Как не облажаться с дизайном. Инструкция для чайников за 5 минут

Как не облажаться с дизайном. Инструкция для чайников за 5 минут - 1

Перевод «Я люблю ИП [1]»

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

Если вы не верите, что можете научиться дизайну, просто вспомните слова легендарного Дэвида Грола (барабанщик в группе Nirvana, гитарист и вокалист FooFighters, прим. ред.) об изучении новых вещей:

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

А теперь, помня эти слова, вы готовы к нашему крэш-курсу? Пристегните ремни, мы начинаем в произвольном порядке.

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

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

Как не облажаться с дизайном. Инструкция для чайников за 5 минут - 2

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

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

Как не облажаться с дизайном. Инструкция для чайников за 5 минут - 3

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

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

Как не облажаться с дизайном. Инструкция для чайников за 5 минут - 4

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

Instagram (внизу слева) делает основной фокус на фото/ видео, которое опубликовал пользователь.

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

Как не облажаться с дизайном. Инструкция для чайников за 5 минут - 5

Давайте рассмотрим ещё пару примеров.

Spotify (внизу слева) делает акцент на обложке альбома и названии песни. Несмотря на то, что кнопки управления плейером вторичны, Spotify выделяет из них кнопку Play.

Facebook (внизу справа) очень похож на Instagram и на первое место ставит контент ваших друзей.

Как не облажаться с дизайном. Инструкция для чайников за 5 минут - 6

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

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

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

Как не облажаться с дизайном. Инструкция для чайников за 5 минут - 7

Вот ещё один пример, на этот раз от Medium. Я немного переделал макет. Как он выглядит? Не кажется ли вам, что что-то не так?

Подсказка: обратите внимание на выравнивание левого края. На рисунке слева я специально выделил линией его отсутствие. Справа все основные блоки выровнены.

Как не облажаться с дизайном. Инструкция для чайников за 5 минут - 8

Плохое выравнивание слева и исправленное справа

5. Размер шрифта и белое пространство

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

Как не облажаться с дизайном. Инструкция для чайников за 5 минут - 9

Хороший и плохой размер шрифта

Как не облажаться с дизайном. Инструкция для чайников за 5 минут - 10

Хороший и плохой интерлиньяж

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

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

Как не облажаться с дизайном. Инструкция для чайников за 5 минут - 11

Паттерны взглядов при использовании списка и сетки

7. Сначала сделайте дизайн в чёрно-белых тонах и добавьте цвет позже

Это позволит вам сфокусироваться на самом главном в вашем приложении.

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

Как не облажаться с дизайном. Инструкция для чайников за 5 минут - 12

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

Ограничение движений руки — это важная проблема, посмотрите на иллюстрацию из замечательной статьи Luke Wroblewski о навигации на мобильных устройствах [2].

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

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

Как не облажаться с дизайном. Инструкция для чайников за 5 минут - 13

9. Используйте готовые палитры

Цвет — это немного недостижимое искусство. Я очень рекомендую отправиться на Dribbble [3] и поискать там цветовые палитры («Color Palettes»). Или можно использовать генераторы цветов, например, Coolors [4] или Color Claim [5].

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

Прим. ред., вот ещё несколько сайтов:

  • Colormind [6] — создание цветовой гаммы на основе искусственного интеллекта,
  • Color Farm [7] — цветовые палитры из популярных работ на Dribbble,
  • Color Lisa [8] — цветовые палитры из картин великих художников,
  • SwissColors [9] — цветовые палитры в стиле швейцарского дизайна,
  • HTML Color Codes [10] — очень хороший сайт для дизайнеров и разработчиков о цвете, на сайте есть отличный инструмент для создания цветовых палитр, названия цветов в различных вариантах (Hex, RGB, HSL, HTML), готовые палитры цветов для Flat и Material дизайна, пособия по использования цвета и ссылки на другие полезные ресурсы,
  • Color Hunt [11] — специально отобранные, красивые палитры цветов, которые обновляются каждый день,
  • Colordot [12] — цветовая палитра, где с помощью мышки можно исследовать все оттенки цветов.

Как не облажаться с дизайном. Инструкция для чайников за 5 минут - 14

10. Используйте рекомендации Apple и Google

У этих компаний есть отличные ресурсы для разработчиков приложений на iOS или Android.

Например, Google Material Design [13], где собраны инструкции, инструменты, цвета, иконки и компоненты, которые помогут вам начать в дизайне вашего приложения.

У Apple есть Human Interface Guidelines [14], где вы найдёте всё, что вам нужно, для дизайна приложения на iOS.

Как не облажаться с дизайном. Инструкция для чайников за 5 минут - 15

Помните, главное — это практика

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

Обложка в начале статьи lstore.graphics [15]

Автор: Я люблю ИП

Источник [16]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/dizajn-interfejsov/255062

Ссылки в тексте:

[1] Я люблю ИП: http://www.iloveip.ru

[2] навигации на мобильных устройствах: https://www.lukew.com/ff/entry.asp?1649

[3] Dribbble: https://dribbble.com

[4] Coolors: https://coolors.co

[5] Color Claim: http://www.vanschneider.com/colors/

[6] Colormind: http://colormind.io

[7] Color Farm: http://color.farm

[8] Color Lisa: http://www.colorlisa.com

[9] SwissColors: http://swisscolors.net

[10] HTML Color Codes: http://htmlcolorcodes.com

[11] Color Hunt: http://colorhunt.co

[12] Colordot: https://color.hailpixel.com

[13] Google Material Design: https://material.io

[14] Human Interface Guidelines: https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/

[15] lstore.graphics: https://lstore.graphics

[16] Источник: https://habrahabr.ru/post/328492/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best