10 советов по дизайну для недизайнеров
Любую статью можно сохранить в закладки на сайте, чтобы прочесть ее позже.
Режим чтения увеличивает текст, убирает всё лишнее со страницы и даёт возможность сосредоточиться на материале. Здесь вы можете отключить его в любой момент.
Освоить базовые принципы дизайна под силу каждому. В этом уверен Марк Хемеон — основатель платформы Design Inc. Мы публикуем адаптированный перевод его статьи с простыми советами, которые помогут в работе с дизайном сайта или приложения.
1. Используйте контраст
Цвет фона должен контрастировать со шрифтом, чтобы не утомлять глаза. Например, черный текст лучше читается на белом фоне. Избегайте светло-серых, жёлтых и зелёных тонов — не заставляйте пользователя щуриться.
2. Лучше темно-серый, чем черный
Попробуйте использовать для текста цвет #333333 RGB (51,51,51) вместо обычного черного. Чистый черный текст на белом фоне рябит и мешает глазу сфокусироваться на буквах.
3. Самую важную информацию — в начало
Она должна быть видна без увеличения, скролла или нажатия.
Ниже я собрал хорошие примеры визуальной иерархии.
Открывая приложение, в глаза сразу бросается строка поиска. После нее внимание привлекает сетка фото. Pinterest создал такую иерархию не случайно: в основном люди ищут там картинки.
Spotify
Spotify делает визуальный акцент на обложке альбома, названии песни и кнопке Play. На втором месте — клавиши управления плеером.
4. Выравнивайте все элементы
Простой способ привести в порядок элементы, которые выглядят неаккуратно — выровнять их по краям.
Давайте рассмотрим на примере Medium. Я переделал макет их сайта. Вам не кажется, что элементы выглядят как-то не так?
На первом скриншоте я выделил визуальную границу, которая образовалась из-за неправильного выравнивания. На втором — просто выровнял по левому краю основные блоки контента.
Сейчас все блоки стоят ровно. Выглядит гораздо лучше.
5. Размер шрифта и пустое пространство
Увеличьте размер шрифта — тогда текст будет проще читать. Не забывайте оставлять небольшой межстрочный интервал.
На первом скриншоте — хороший и плохой пример размера шрифта. На втором — межстрочного расстояния.
6. Используйте списки
Если в тексте важна нумерация — пишите списки. Если порядок элементов не важен и вы хотите облегчить пользователю поиск информации (как в Pinterest или Airbnb) — используйте сетку.
На скриншоте слева показано, как человеческий глаз воспринимает списки, справа — сетки.
7. Цвета — в конце
Сначала сделайте макет в чёрно-белом варианте. Это позволит вам сфокусироваться на самом главном в дизайне приложения или сайта.
Цвет вызывает сильную эмоциональную реакцию, а значит, мешает сконцентрироваться на решении главной проблемы в дизайне.
8. Создавайте удобный дизайн
Посмотрите на эту инфографику из статьи проще всегоо навигации на мобильных устройствах. На ней показаны области на экране, до которых правшам дотянуться. Разработчики популярных приложений знают это и размещают основные элементы управления внизу.
9. Используйте готовые палитры
У новичков часто возникают проблемы с подбором правильного цвета. Чтобы сэкономить время, поищите готовые цветовые палитры на Dribbble. Также можно использовать генераторы цветов — например, Coolors или Color Claim.
10. Используйте ресурсы Apple и Google
У Apple и Google есть несколько ресурсов для разработчиков приложений на Android и iOS.
Например, в Google Material есть гайдлайны, цветовые гаммы, иконки и другие полезные элементы.
У Apple есть Human Interface Guidelines, где собрано все, что нужно знать при создании приложения на iOS.
