Abr@X@bra.ru
5-минутный путеводитель для не-дизайнера
5-минутный путеводитель для не-дизайнера

5-минутный путеводитель для не-дизайнера

14.05.2017
49

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

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

Я никогда не брал уроки игры на барабанах. Я никогда не брал уроки игры на гитаре. Я просто понял как это работает.

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

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


2. Почти черный легче читать, чем черный

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


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

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


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

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

Pinterest (внизу, справа) создает визуальную иерархию, прикрепляя панель поиска к вершине, за которой следует их хорошая сетка ниже.

Pinterest очень намерен о том, что их окно поиска будет первым элементом на странице.

Поиск - это основная функция приложения


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

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


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


4. Совместите все вещи

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

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


5. Размер текста

Мы не разрабатываем для муравьев.

Увеличение размера шрифта сделает ваше содержание гораздо легче читать и переваривать.


6. Сначала создайте черно-белое изображение, добавьте цвет позже

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

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


7. Создайте удобный дизайн

Напряжение руки - реальная проблема, рассмотрим рисунок ниже из удивительной статьи Люка Вроблевски: «Отзывчивая навигация: оптимизация для сенсорных устройств».

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

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


8. Используйте цветные палитры

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


9. Используйте соглашения Apple и Google OS

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

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

В Apple есть HIG - руководство по интерфейсу пользователя, в котором изложены все, что вам нужно знать о том, как разрабатывать приложение для iOS.


Помните, что дизайн требует практики

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

Дизайн
Читайте также:
Дорожная карта веб-разработчиков в 2017 году

Дорожная карта веб-разработчиков в 2017 году

Эти диаграммы были созданы пользователем GitHub Kamranahmedse. Они визуализируют три дорожных карты, чтобы стать веб-раз...
Читать
Битрикс D7, инфоблоки - ORM

Битрикс D7, инфоблоки - ORM

Модуль ORM для инфоблоков.

Все знаю что у битркс появилась какая-никакая, но все-таки ORM.

И они даже модуль...

Читать
Вызов горячих функции PhpStorm/WebStorm

Вызов горячих функции PhpStorm/WebStorm

Привет мой юный друг) Это была ирония! Теперь давай перейдем собственно к делу, данный пост будет интересен тем разраб...
Читать