обработка данных

Нажмите сюда, если долго загружается,
либо "ESC" - отмена
 
Заказ обратного звонка
Заказать звонок
Наш специалист свяжется с Вами и ответит на все вопросы
Обработка данных
Наш специалист свяжется с Вами и ответит на все вопросы.
OK

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

Источник: https://habrahabr.ru
Время чтения: ~5 мин
Как не облажаться с дизайном. Инструкция для чайников за 5 минут
Статьи
630
Изображение носит иллюстрационный характер. Источник: habrahabr.ru
Принципам хорошего дизайна может научиться любой человек. Из этой статьи вы получите базовые знания и практические навыки дизайна, которые сможете применить уже сейчас (и удивить ваших друзей дизайнеров).

Если вы не верите, что можете научиться дизайну, просто вспомните слова легендарного Дэвида Грола (барабанщик в группе Nirvana, гитарист и вокалист FooFighters, прим. ред.) об изучении новых вещей:
Я никогда не учился играть на барабанах. Я никогда не учился играть на гитаре. Я как-то сам до всего дошёл. Если вы действительно любите своё дело, увлечены им и сфокусированы, вы сможете сделать всё, что захотите.
А теперь, помня эти слова, вы готовы к нашему крэш-курсу? Пристегните ремни, мы начинаем в произвольном порядке.
#1. Используйте много контраста
Цвет фона и текста должны достаточно отличаться, чтобы не вызвать утомления глаз. Обычно чёрный текст на белом фоне читается лучше всего. Держитесь подальше от светло-серых, жёлтых и зелёных тонов. Если вам приходится щуриться, чтобы прочитать текст, то у вас проблемы.
Как не облажаться с дизайном. Инструкция для чайников за 5 минут
Источник: habrahabr.ru
#2. Почти чёрный лучше, чем чёрный
Если у вас есть выбор, попробуйте использовать для текста цвет #333333 RGB (51,51,51) вместо чисто чёрного. Чисто чёрный текст на белом колеблется для глаз и не даёт сфокусироваться на буквах.
Как не облажаться с дизайном. Инструкция для чайников за 5 минут
Источник: habrahabr.ru
#3. Важный контент сначала
Расположите самую важную информацию вначале, чтобы описать основную цель вашего приложения или сайта. Важный контент должен быть виден без зума, скролла или тапов.
Как не облажаться с дизайном. Инструкция для чайников за 5 минут
Источник: habrahabr.ru
Давайте посмотрим на несколько хороших примеров визуальной иерархии в реальной жизни.

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

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

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

Facebook (внизу справа) очень похож на Instagram и на первое место ставит контент ваших друзей.
Как не облажаться с дизайном. Инструкция для чайников за 5 минут
Источник: habrahabr.ru
#4. Выравнивайте все элементы
Самый быстрый способ поправить элемент, который выглядит неуместно или сомнительно, это выравнять его. Когда дизайнеры говорят о необходимости использовать сетку, они пытаются обратить внимание на отсутствие выравнивания.
Выравнивание — то одно из самых простых улучшений, которое можно сделать на сайте или в приложении, чтобы они стали выглядеть в 10 раз лучше.
Как не облажаться с дизайном. Инструкция для чайников за 5 минут
Источник: habrahabr.ru
Вот ещё один пример, на этот раз от Medium. Я немного переделал макет. Как он выглядит? Не кажется ли вам, что что-то не так?
Подсказка: обратите внимание на выравнивание левого края. На рисунке слева я специально выделил линией его отсутствие. Справа все основные блоки выровнены.
Как не облажаться с дизайном. Инструкция для чайников за 5 минут
Плохое выравнивание слева и исправленное справа. Источник: habrahabr.ru
#5. Размер шрифта и белое пространство
Мы делаем дизайн не для муравьёв. Увеличив размер шрифта, ваш контент станет гораздо легче читать при наличии достаточного расстояния между строк.
Как не облажаться с дизайном. Инструкция для чайников за 5 минут
Хороший и плохой размер шрифта. Источник: habrahabr.ru
Как не облажаться с дизайном. Инструкция для чайников за 5 минут
Хороший и плохой интерлиньяж. Источник: habrahabr.ru
#6. Используйте список, если важен порядок
Если порядок не имеет значения и вы хотите вдохновить людей на поиск (как Pinterest или AirBnB), то используйте сетку.
Как не облажаться с дизайном. Инструкция для чайников за 5 минут
Паттерны взглядов при использовании списка и сетки. Источник: habrahabr.ru
#7. Сначала сделайте дизайн в чёрно-белых тонах и добавьте цвет позже
Это позволит вам сфокусироваться на самом главном в вашем приложении.

Цвет побуждает сильную эмоциональную реакцию и чаще всего мешает сконцентрироваться на решении основной дизайн-проблемы.
Как не облажаться с дизайном. Инструкция для чайников за 5 минут
Источник: habrahabr.ru
#8. Создавайте комфортный дизайн
Ограничение движений руки — это важная проблема, посмотрите на иллюстрацию из замечательной статьи Luke Wroblewski о навигации на мобильных устройствах.

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

Многие эффективные мобильные приложения располагают навигацию и основные элементы управления в нижней трети экрана мобильного телефона.
Как не облажаться с дизайном. Инструкция для чайников за 5 минут
Источник: habrahabr.ru
#9. Используйте готовые палитры
Цвет — это немного недостижимое искусство. Я очень рекомендую отправиться на Dribbble и поискать там цветовые палитры («Color Palettes»). Или можно использовать генераторы цветов, например, Coolors или Color Claim.
Используйте готовые палитры и сэкономьте себе часы бесконечных споров и догадок.
#10. Используйте рекомендации Apple и Google
У этих компаний есть отличные ресурсы для разработчиков приложений на iOS или Android.

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

У Apple есть Human Interface Guidelines, где вы найдёте всё, что вам нужно, для дизайна приложения на iOS.
Как не облажаться с дизайном. Инструкция для чайников за 5 минут
Источник: habrahabr.ru
Помните, главное — это практика
Для того, чтобы научиться видеть хороший дизайн, потребуется время, но вы заметите, как эти правила помогут вам улучшить ваши навыки.
Поделиться
Поделиться
Поделиться
Поделиться
Поделиться
Поделиться
Поделиться
Подписка на новости. Получайте важное первым
ПОДПИСАТЬСЯ