Правила дизайна хорошей кнопки

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

Я уже вижу, как ты тянешь свои пальчики к клавиатуре, чтобы написать о том, что ты и сам всё знаешь, а статья бесполезная. Но давай будем честны, большинство дизайнеров до сих пор делают макеты в стиле «Русский Behance» для цветочных магазинов «Елена», и выглядит это крайне ужасно.

Правила дизайна хорошей кнопки

Ладно, не сердись, давай повторим банальщину вместе, а новички узнают что-то новое)

1. Горизонтальные отступы

Правила дизайна хорошей кнопки

Не стоит делать кнопки слишком узкими или широкими, идеальный отступ для удобного взаимодействия с кнопкой — 32PX с обеих сторон.

2. Вертикальные отступы

Правила дизайна хорошей кнопки

Так же кнопка не должна быть слишком высокой или плоской.
18 PX — то что нужно.

Для создания кнопок в Figma я использую Auto Layout, там очень удобно задавать параметры отступов 
Для создания кнопок в Figma я использую Auto Layout, там очень удобно задавать параметры отступов 

3. Шрифт и его размер

Правила дизайна хорошей кнопки

Не стоит использовать слишком большой или маленький размер шрифта, 16pt- самый оптимальный вариант. Так же стоит заметить, что слишком тонкий стиль шрифта может быть плохо читаемым.
Отдельный котел в аду ждёт всех дизайнеров, которые абсолютно во всех кнопках используют кааааапс!
Тебе удобно читать книгу, В которой ВСЁ написано С большой БУКВЫ? Вот и пользователю тоже не очень. Так же, если ты еще не силён в типографике, постарайся не использовать какие-то сложные шрифты с засечками или наклоном. Их трудно сочетать с другими шрифтами, поэтому попробуй что-то простое и распространенное: Roboto, San Francisco или Montserrat.

4. Еще немного правил

Правила дизайна хорошей кнопки

Радиус закруглений стоит использовать кратным — 2 px., так тебе будет проще сочетать его с другими закругленными элементами в дизайне.
Избегай градиентов! В большинстве своём они сильно удешевляют дизайн и делают текст в кнопке плохо читаемым. Если ты хочешь добавить объём, то стоит заменить градиент тенью.

Заключение

Правила созданы, чтобы их нарушать, поэтому не бойся экспериментировать!
Больше обращай внимание на дизайн продуктов, которыми ты восхищаешься. А главное в этой жизни, не использовать, СУ# *А, КАПС В кнопках!

Больше интересных статей и материалов в моём Telegram-канале
Можешь скачать мой Figma-исходник и поиграть с простыми примерами.
Обнял, приподнял!

3434
50 комментариев

Комментарий недоступен

37
Ответить

Когда один коммент полезнее и интереснее всего поста

15
Ответить

А высота кнопки 38 у бутстрапа это 36+2 внешней обводки по 8пикс сетке? :)

Ответить

Комментарий недоступен

30
Ответить

Извините, мистер бизнесмен, не хотел сбивать ваш деловой настрой 😆

13
Ответить

Порвался)))

2
Ответить

И ты ты тянешь свои пальчики к клавиатуре, чтобы написать «Привееет! 👋»

1
Ответить