Агентство
интернет-маркетинга

 

Этап дизайн: кнопки 

03.06.2021

Сложность: средняя

4 мин.

1 185

Дизайн кнопок в веб-дизайне

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

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

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

Типы кнопок 

  • Объемные. Добавляют фактуры и выделяются. Рекомендуем их использовать, когда контента на странице много, они придадут большей значимости нажатию на них. Тени создают ощущение, что кнопка поверх/вне страницы. 

дизайн кнопок для сайта

  • Плоские. Не отвлекают от контента, их чаще всего используют на панели инструментов и в диалоговых окнах. 

кнопки в веб дизайне

  • Контурные. Прозрачные кнопки, простой формы, чаще всего прямоугольники, без/с минимальной заливкой, с тонким контрастным контуром. Используют для второстепенного контента. 

красивый дизайн кнопок

  • Плавающие. Скрывают за собой дополнительный функционал: новые окна или действия, например, скачивание файла. 

дизайн кнопок для сайта

Какой цвет и шрифт лучше использовать?

Мы предлагаем руководствоваться следующим: 

  • Бренбук или любая другая устоявшаяся стилистика компании. 
  • Язык цвета и логика. Например, красный цвет ассоциируется с опасностью, поэтому элемент “удалить” делаем красного цвета. Зеленый цвет ассоциируется со спокойствием, элемент “сохранить” делаем зеленым.
  • Если блоки меняют цвет, кнопки тоже должны подстраиваться и выделяться.
  • Выбирайте хорошо читабельные и простые шрифты со средней плотностью. Цвет шрифта контрастный, относительно цвета кнопки. Старайтесь не использовать капс. 
  • Текст располагайте по центру кнопки, с одинаковым расстоянием по краям. 

дизайн кнопок

Какую форму кнопок выбрать?

По формам единого решения нет. Кнопки с острыми краями выглядят более серьезными, кнопки и с закругленными краями выглядят более свободно (и современно, если честно). Главное, чтобы кнопка выглядела именно как кнопка. 

И была подчинена логике, действие вперед — кнопка показывает направо, действие назад, кнопка налево.

дизайн кнопок 2021

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

Научитесь правильно использовать кнопки в веб-дизайне за 4 минуты

 

 

 

 

 

Готовы пообщаться?Готовы пообщаться?Готовы пообщаться?

Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кейсы