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

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

Что в этом может быть сложного? Что может зависеть от одной кнопки?

А между тем…

Как же у него это получилось? Очень просто! Он знал пять волшебных правил правильной кнопки!

1. Соответствие контексту

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

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

2. Контраст во всем

Чаще всего кнопки несут в себе какую-нибудь важную функцию или просто являются более важными элементами, по сравнению с остальными, на странице. Очень, ну просто очень нужно, чтобы их нажали!

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

Если же в интерфейсе используются кнопки со скругленными углами, возможно, самые главные кнопки нужно сделать совсем другими? Круглыми?

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

3. Обводка

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

Если кнопка темнее, чем фон, то цвет обводки должен быть темнее, чем кнопка, а если все-таки фон решил перекраситься и стать темнее, чем кнопка, то не беда — просто сделайте обводку темнее, чем фон!

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

4. Иконки

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

Наглядные иконки помогают пользователю еще быстрее ориентироваться в вашем замечательном интерфейсе

5. Отображение состояний

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

Все просто, правда?

А теперь вернемся к Годному Дизайнеру и посмотрим, что же оказалось за кадром нашего комикса? А вот что…

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