Digest #1: рисуем иконки и используем белый цвет правильно

В рубрике «Digest» мы будем пересказывать полезные англоязычные статьи для тех, кто занимается сайтами. Сегодня познакомимся с двумя публикациями на тему веб-дизайна: узнаем законы создания иконок и научимся правильно обращаться с белым цветом в оформлении страницы.

7 принципов дизайна иконок

Оригинал: 7 Principles of Icon Design

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

Ясность

Главная цель иконки — передать идею. Важно, чтобы смысл считывался при первом взгляде на неё. Для этого необходимо использовать те визуальные образы, которые понятны вашей целевой аудитории. Текст рядом с иконкой тоже должен помочь вникнуть в её смысл — позаботьтесь и об этом.

Значение этих символов наверняка поймут все

Читаемость

Иконка должна быть хорошо различима. Этому могут мешать слишком мелкие детали или недостаточное расстояние между элементами. Убедитесь, что линии имеют оптимальную толщину, а свободного пространства хватает для комфортного различения всех частей значка.

Эстетичность

Иконка должна иметь правильную композицию. Для этого, конечно, важно соблюдать принципы центрирования и симметрии. Но в конечном счёте всё зависит от сбалансированности элементов, которая определяется «на глаз». Так что оценивайте красоту значков именно с точки зрения их общего восприятия.

В этом примере центральный элемент изображения расположен не строго по центру, потому что его левая часть неравноценна правой. Поэтому элемент сдвинут вправо

Простота

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

Единообразность

Чаще всего мы создаём не один отдельный значок, а целую группу значков. Чтобы все иконки на сайте смотрелись гармонично, проработайте единые правила их создания. То есть определите стандарты размера, заливки и толщины линий. Каждая иконка имеет свой визуальный «вес»: следите за тем, чтобы одно изображение не выглядело «тяжелее» остальных.

Один и тот же символ в разном исполнении, от самого «легковесного» до самого «тяжёлого»

Уникальность

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

Иконки на сайте Waze. Чувствуете настроение?

Удобство использования

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

Тонкости использования белого пространства в веб-дизайне

Оригинал: Tips on Using White Backgrounds in Website Design

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

Почему именно белый фон?

В последнее время белый цвет чаще используется в качестве фонового не только в блогах и интернет-магазинах, но и в других проектах. Тогда как раньше было модно использовать тёмные цвета. Это можно объяснить тенденцией к минималистичности, простоте и натуральности в веб-дизайне. К тому же использование белого фона помогает при адаптации дизайна к разным форматам экранов.

К слову, мы имеем в виду не только классический белый, но и его оттенки: молочный, жемчужный, кремовый, слоновая кость, пергамент, морская раковина и другие. Чаще всего в качестве фона на сайтах как раз и используется один из оттенков белого, а не белый в чистом виде, чтобы не создавать напряжение для глаз излишней яркостью.

Фронтенд-разработчик Майкл Нго использует светлый фон на своей странице

Что может означать белый цвет?

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

А в качестве фона белый цвет выступает в роли «группы поддержки». Он помогает раскрыть главный посыл в дизайне сайта, не мешая воспринимать текст и визуальные элементы. Особенно когда речь идёт о простом и минималистичном оформлении.

Сайт компании Buffalo тоже имеет светлый фон

Советы по использованию белого цвета

Создавайте контраст. Выбирайте тёмные или яркие цвета для оформления текста и графических элементов на сайте — так они будут восприниматься отчётливее.

Стремитесь к простоте. Белый цвет подразумевает ясность и лаконичность, поэтому подбирайте незамысловатые варианты дизайна. То же относится и к содержимому изображений.

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

Добавьте «воздуха». Располагайте элементы страницы на достаточном расстоянии друг от друга. Свободное светлое пространство вокруг текста или изображения помогают заострять внимание посетителя.

Используйте один цвет для акцентов. Выделение элементов одним основным цветом поможет сделать страницу с белым фоном и чёрным текстом более живой.