При создание кнопок начинающие дизайнеры часто допускают несколько, на первый взгляд не существенных, ошибок, которые могут испортить все впечатление от концепции дизайна.
Кнопки — очень важный элемент, с которым пользователь напрямую взаимодействует, когда совершает действия на сайте. Действия, которые мы, как разработчики и дизайнеры сайта, хотим.
Давайте рассмотрим самые распространенные ошибки в создание кнопок начинающими дизайнерами и сразу постараемся их исправить.
Ошибка №1 — внутренние отступы
На примере выше вы видите две кнопки. У первой кнопки есть проблемы с отступами от текста. Из за этого кнопка смотрится не пропорционально и тяжеловато.
У второй кнопки отступы выглядят куда более лаконичнее и кнопка смотрится легче и более располагает пользователя к совершение действия, которая от него просит.
Как вычислить правильный размер отступов
Правильный размер отступов рассчитывается так:
a = кегль текста кнопки (размер шрифта)
Отступ сверху и снизу от текста до края кнопки = a
Отступ слева и справа от текста до края кнопки = a x 2
Ошибка 2 — использование обводки
Обводка кнопок другим цветом, отличным от основного цвета кнопки, как показано в первом варианте — это отсылка в прошлые, 90-е и 2000-е года зарождения дизайна. Она добавляет грузности элементу. Сейчас так не рекомендуется делать. Лучше сделать прозрачную кнопку как показано на втором варианте. Это добавит кнопке легкости. Но прозрачные кнопки, обычно, идут как дополнительные кнопки, когда есть главная. Также, прозрачная кнопка, чаще всего — это результат нажатия или наведения мышкой на основную кнопку.
Ошибка 3 — расположение иконки в кнопке
Если использовать иконку прямо внутри кнопки, то она может повлиять на расположение текста, как показано на первом варианте. Лучше вынести ее немного за пределы, чтобы придать кнопке необычную форму и сохранить правильное расположение текста внутри кнопки.
Еще можно использовать варианты, когда текст кнопки и иконка имеют немного разны фон. При этом остаются целым одной кнопки.
Ошибка 4 — Использование теней
Не нужно делать теней очень жесткой как показано в первом варианте. Это также добавляет лишний вес нашей кнопки и немного отодвигает ее дизайн на несколько лет назад. Гораздо лаконичнее сделать тень мягкой и немного заметнее, чтобы создать эффект объема.
Еще можно использовать цветную тень. Получится приятное для глаза свечение. Хотя это тоже уже немного устаревший прием, но до сих пор успешно применяется в дизайне.
Ошибка 5 — использование градиента
Использование градиента дает возможность придать кнопке более объёмный вид. Но если применять его не правильно — получится отталкивающий эффект.
В первом варианте показано применение радиального типа градиента на кнопке. Смотрится, как вы сами видите, не очень.
А во втором варианте мы применили линейный градиент с более темными цветами ближе к нижней части кнопки. Мы получили эффект объёмной лаконичной кнопки.
#дизайн #кнопки #web design #ux design #uxui