Привет дружок-пирожок. Это будет супер-короткая статья, в которой я поведаю тебе несколько основных правил, которые помогут дизайнить адекватные кнопки для веб-сайтов.
Я уже вижу, как ты тянешь свои пальчики к клавиатуре, чтобы написать о том, что ты и сам всё знаешь, а статья бесполезная. Но давай будем честны, большинство дизайнеров до сих пор делают макеты в стиле «Русский Behance» для цветочных магазинов «Елена», и выглядит это крайне ужасно.
Ладно, не сердись, давай повторим банальщину вместе, а новички узнают что-то новое)
1. Горизонтальные отступы
Не стоит делать кнопки слишком узкими или широкими, идеальный отступ для удобного взаимодействия с кнопкой — 32PX с обеих сторон.
2. Вертикальные отступы
Так же кнопка не должна быть слишком высокой или плоской.
18 PX — то что нужно.
3. Шрифт и его размер
Не стоит использовать слишком большой или маленький размер шрифта, 16pt- самый оптимальный вариант. Так же стоит заметить, что слишком тонкий стиль шрифта может быть плохо читаемым.
Отдельный котел в аду ждёт всех дизайнеров, которые абсолютно во всех кнопках используют кааааапс!
Тебе удобно читать книгу, В которой ВСЁ написано С большой БУКВЫ? Вот и пользователю тоже не очень. Так же, если ты еще не силён в типографике, постарайся не использовать какие-то сложные шрифты с засечками или наклоном. Их трудно сочетать с другими шрифтами, поэтому попробуй что-то простое и распространенное: Roboto, San Francisco или Montserrat.
4. Еще немного правил
Радиус закруглений стоит использовать кратным — 2 px., так тебе будет проще сочетать его с другими закругленными элементами в дизайне.
Избегай градиентов! В большинстве своём они сильно удешевляют дизайн и делают текст в кнопке плохо читаемым. Если ты хочешь добавить объём, то стоит заменить градиент тенью.
Заключение
Правила созданы, чтобы их нарушать, поэтому не бойся экспериментировать!
Больше обращай внимание на дизайн продуктов, которыми ты восхищаешься. А главное в этой жизни, не использовать, СУ# *А, КАПС В кнопках!
Больше интересных статей и материалов в моём Telegram-канале
Можешь скачать мой Figma-исходник и поиграть с простыми примерами.
Обнял, приподнял!
Комментарий недоступен
Когда один коммент полезнее и интереснее всего поста
А высота кнопки 38 у бутстрапа это 36+2 внешней обводки по 8пикс сетке? :)
Комментарий недоступен
Читаешь серьезный журнал про бизнес, трюки увлечение роста продаж, стартапы и на тебе.
Привет дружок-пирожок.Извините, мистер бизнесмен, не хотел сбивать ваш деловой настрой 😆
Порвался)))
И ты ты тянешь свои пальчики к клавиатуре, чтобы написать «Привееет! 👋»
Слабо.
1. В дизайне не отражены состояния кнопок - ховер, фокус и нажатая.
2. Нет обоснования откуда взялись "магические цифры" - 32px, 18px, 16pt.
"оптимально" же..
Попробуй зайти сейчас в Figma и нарисовать такую кнопку - у тебя выйдет кнопка высотой в 56px. Куда ты применишь «оптимальный» размер? Поставь такую кнопку в свои обычные макеты просто рядом с обычными кнопками (38-44px) и посмотри, как можно загнать новичка в коллапс таким гайдом)
"Не стоит делать кнопки слишком узкими или широкими."
"Не стоит использовать слишком большой или маленький размер."
"Кнопка не должна быть слишком высокой или плоской."
"Правила созданы, чтобы их нарушать, поэтому не бойся экспериментировать!" ))
Захотелось глянуть сайт цветочного магазина Елена))
я то же хочу посмотреть
Это краткий пересказ гайдлайна MD?
Нет, там другие цифры, на сколько я помню
молдовы?
автор попал к нам из начала нулевых, когда использовали абсолютные значения а про пропорции и разные разрешения слышали только избранные.
Именно.
горизонтальные - 32, вертикальные - 18, шрифт - 16Про адаптив и разные размеры кнопок под разные разрешения автор не слышал
справедливости ради: пиксели прекрасно масштабируются согласно разрешениям и пропорциям экранов
Я и так всё знаю, а статья бесполезная.
Спасибо за материал, познавательно))
P. S. Пирожочек.. Сразу бабушка Шелдона вспомнилась)
А что не так с этой кнопкой?
Автор не любит капс:))
Она работает в таком варианте:
прикольная кнопка
А В А М П Р А В Д А У Д О Б Н О Ч И Т А Т Ь Т Е К С Т С Т А К И М И О Т С Т У П А М И?
ничем не обоснованный font-spacing, необоснованный капс (че эта К Н О П К А на меня орёт?), тонкий шрифт (тем более на кнопке, тем более белым на цветном) - харам (люди с плохим зрениям скажут дизайнеру спасибо).
такие кнопки должны отправляться в помойку вместе с дизайнером
Как скажете (:
Комментарий недоступен
Коллега просто ещё в начале пути, и впереди ещё много новых открытий и разочарований.
Комментарий недоступен
Комментарий недоступен
Не подскажете где можно прочитать про кнопки более детально?
Комментарий недоступен
Сергей, речь в статье о Web сайтах и приложения, на мобильных устройствах совершенно другие параметры, так что вы правы)
Комментарий недоступен
Bootstrap
Если не ошибаюсь, последний свежий тренд в UI дизайне - это вот такие кнопки, с такой вот необычной тенью. Не могу правда пока найти гайдбук с таким трендом.
Неоморфизм) Выглядит круто, но функционала в себе практически не несёт
Комментарий недоступен
Комментарий недоступен
Если не ошибаюсь,то pt — это типографский пункт, полиграфическая тема в дюймах. Разве не принято в интерфейсах пользоваться пикселями? Объясните связь, пожалуйста, между единицами.
Я бы сказал, что уже не пиксели, а dp.
Почитайте https://material.io/design/layout/pixel-density.html
Благодарю, ознакомлюсь
Коллега, согласен, что основы нужно периодически вспоминать и проговаривать и для себя и для новичков. Так что дело ваше правое.
Однако тут и для основ маловато. Вышло пока весьма поверхностно, часто безосновательно.
Нет ничего про состояния, кнопки разных уровней, кнопки с иконками... короче, тема огромная. Почитайте конструктивные комментарии и по возможности дополните статью.
Удачи!
Комментарий недоступен
Ну а мобильная то где(
Не очень универсальна статья, т.к. не понятно, под какие размеры экранов это подходит.
Что то вы совсем не старитесь. Про кнопку то можно было бы по-подробнее, а здесь даже состояний нет, да и видов кнопок на самом деле много.
Хотя бы:
Комментарий недоступен