Все про дизайн кнопок для сайта: от истории и до правильного создания

Кнопка позволяет выполнять множество разных действий на сайте. Например, она может служить инструментом для перехода на следующий этап, или же с ее помощью пользователь принимает те или иные условия. С помощью кнопок интернет-ресурс становится интерактивным. Именно поэтому дизайн кнопок для сайта так важен. Этот компонент является одним из ключевых в проектировании и продвижении интернет-ресурса.

История дизайна кнопок для сайта с 2009 года по наши дни

Далее в статье вы увидите, каким был дизайн кнопок для сайтов и приложений почти 10 лет назад. Дизайнерские тренды постепенно менялись – вместе с ним менялся и дизайн кнопок для сайта. Мы собрали самые яркие примеры, начиная с 2009 года. Все скриншоты взяты из известной тематической социальной сети Dribbble, которая была запущена в том же 2009 году.

• 2009 год

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

• 2010 год

Именно в этом году появилась популярнейшая соцсеть Instagram. Изменения практически не коснулись формы кнопок веб-сайтов, однако в их дизайне появилось намного больше цветовых решений и разных элементов (например, внутренних теней). Что касается типографики на сайте, она стала более декоративной.

• 2011 год

В этом году презентовали CCS3, а количество пользователей всемирной паутины превысило 1 млрд. Множество дизайнеров все еще следуют скевоморфизму и довольно нестандартно развивают данное направление. Согласно скевоморфизму, элементы интерфейса имитируют объекты реальной действительности. Трудно понять, каким правилам следует разработчики, когда создают тени и световые эффекты, но отражены они почти в каждом проекте.

• 2012 год



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

• 2013 год



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

• 2014 год



Произошел релиз популярного Material Design от Google, однако многие мастера не стали использовать этот стиль в полном объеме. Также 2014 год ознаменовался возникновением плоских и прозрачных вариантов кнопок для сайтов, двухпиксельных рамок и всевозможных цветов.

• 2015 год



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

• 2016 год



Дизайнеры хотят чего-то нового, а потому соединяют Flat и Material Design. Дизайн кнопок для сайта претерпевает изменения – появляются цветные тени и подсветки. При этом многие кнопки оформляют при помощи градиента, чтобы не выделять третье измерение, но подчеркивать при этом материал объектов.

• 2017 год



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

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

Читайте также!

«Как сделать адаптивный дизайн сайта для всех устройств?» Подробнее

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

Самые актуальные сегодня виды дизайна кнопок для сайта

Объемная кнопка



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

Где использовать:

• На строке в один ряд;

• На сайтах или в приложениях, где много различного контента, для придания значимости действиям на сайте.

Плоские кнопки



Плоские кнопки не приподнимаются, но тоже заполняются цветом. Главное достоинство дизайна таких кнопок заключается в том, что он не отвлекает пользователя от основного содержания сайта.

Где использовать:

• В диалоговых окнах (для соблюдения единства действия кнопки и контента);

• На панели инструментов;

• Внизу страницы, чтобы юзер мог оперативно их найти.

Переключатель



Благодаря кнопке-переключателю пользователь может переключаться между двумя и более состояниями.

Где использовать:

• Практически все кнопки-переключатели используются в качестве кнопок Вкл/Выкл.

• Кнопки-переключатели можно применять для группы взаимосвязанных друг с другом элементов. Но компоновка макета должна четко указывать на то, что все эти кнопки входят в состав группы. При этом необходимо четко следовать определенным требованиям: в группе должно быть не меньше 3 кнопок. Кроме того, на кнопках должен быть размещен текст или иконка, или же и то, и другое.

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

Контурные кнопки



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

Где использовать:

• Контурные кнопки лучше всего подойдут для вторичного контента, поскольку он не будет (не должны, во всяком случае) конкурировать с вашим основным призывом к действию. В идеале юзер сначала должен видеть основную кнопку СТА, а уже потом (если ему это не интересно) переходить ко второй кнопке.

Плавающая кнопка с выпадающим меню



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

Где использовать:

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

Какой дизайн кнопок для сайта выбрать

Какой дизайн кнопок для сайта лучше выбрать? Все определяется важностью кнопки, количеством контейнеров на экране и разметкой экрана.

1. Функция: насколько кнопка является важной и уникальной? Достаточно ли этого, чтобы превратить ее в плавающую?

2. Габариты: вам следует выбирать вид кнопки с учетом контейнера, в который она будет помещена, а также количества слоев глубины на вашем экране.

3. Разметка: используйте преимущественно один тип кнопки на контейнер. Смешивать типы кнопок следует лишь в том случае, если для этого есть соответствующие основания, к примеру, нужно выделить важную функцию.

Кейс: VT-metall
Узнай как мы снизили стоимость привлечения заявки в 13 раз для металлообрабатывающей компании в Москве
Узнать как

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

Кнопки для сайта могут находиться в 4 состояниях:

Нормальное



Здесь должно быть понятно, что состояние кнопки в данный момент – нормальное. Это основная задача. В качестве примера неудачного дизайна кнопки для сайта можно привести Windows 8. В данном случае юзеру может быть неясно, являются ли объекты в меню настроек кликабельными.

В фокусе



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

Нажатое



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

Неактивное



Есть два пути – скрыть кнопку или показать, что в данный момент она неактивна.

Плюсы первого способа:

• Ситуация в данный момент понятна. Отражается лишь то, что нужно для выполнения текущей задачи.

• Пространство сохранено. Благодаря этому вы можете менять управление и использовать одно пространство для различных целей. Это особенно удобно, если элементы управления представлены в большом количестве. Таким методом пользуется

Читайте также!

«Продающий дизайн сайта: разбираемся с правилами и приемами» Подробнее

Плюсы второго способа:

• Показывает возможность действия. Даже если кнопка неактивна, юзер понимает, что может ей воспользоваться и выполнить то или иное действие. Многие сайты дают подсказки и поясняют критерии использования.

• Обеспечивает контроль над размещением. Юзер понимает, где расположены кнопки и управление.

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

Как разработать дизайн кнопок для сайта в Фотошопе

Многие задаются вопросом, как разработать дизайн кнопок для сайта онлайн – как плоских, так и объемных, при помощи программы Photoshop.

Шаг 1. Создадим фон для будущей кнопки

Сначала создается новый документ, в котором будет выполняться работа. Итак, мы создали серый фон (по какой-то причине именно такой фон часто попадается на сайтах, где необходимы кнопки). Далее следует выбрать на панели инструментов Rounded Rectangle Tool (прямоугольник со скругленными краями).



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

Рекомендуемые статьи по данной теме:

• Что такое лид-магнит и как его создать

• СTА-элементы, которые привлекут в 2 раза больше клиентов

• Разработка дизайна сайта: от выбора стиля до получения макета

Шаг 2. Делаем форму

С помощью инструмента, который вы выбрали, необходимо сформировать такую фигуру.



На панели слоев нужно выбрать слой с нашей фигурой и добавить ей стили Gradient и Stroke (для этого в нижней части панели Layers следует нажать кнопку Functions и выбрать необходимый стиль).

В настройках Gradient нужно выставить прозрачность 100%, цвет градиента от #0e6aab до #73d8fe, стиль Linear и угол 90 градусов.



Далее настраивают Stroke – это будет рамка или ободок для кнопки, который необходимо сделать как можно тоньше, выставив 1рх. «Color» устанавливают такой же, как внизу градиента – #0e6aab.



У нас получится такая основа, которую впоследствии нужно будет немного доработать.



Шаг 3. Создаем текстовую надпись для кнопки

На нашу основу необходимо добавить текст. К примеру, при нажатии должно отправляться письмо. В этом случае следует сделать надпись «Отправить». Мы остановили выбор на шрифте Arial 18 размера, начертание Bold, цвет белый.

Внизу нужно создать копию надписи но Color #1b75af и сдвинуть на одну точку вправо и вниз.



Далее нужно создать еще белый слой-подложку и сдвинуть его по аналогии с текстом. Так вы немного отделите объект от фона и добавите объем.

Дизайн кнопок для сайта html, CSS и JavaScript

Благодаря кнопкам для сайта html пользователь может переходить на заданную страницу. Однако это – не единственное назначение такого рода кнопок. Дизайн кнопок для сайта данного вида очень органично вписывается в общий стиль страницы, то есть, эти элементы выполняют еще и эстетическую функцию.

По сути кнопка – это та же ссылка, но только с приятным дизайном. Кроме того, кнопка может менять цвет, размер или форму, когда пользователь кликает или наводит на нее курсор.

Для создания кнопки применяют два варианта.

1. Первый способ – самостоятельное изготовление;

2. Второй – при помощи специализированных сервисов.

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

Создать дизайн кнопок html для сайта – процесс сложный не столько по разработке, сколько по оживлению. Термином «оживление» в данном случае называют работу, направленную на то, чтобы кнопка в конечном итоге реагировала на действие пользователя. То есть, кнопка должна давать реакцию, когда пользователь кликает по ней, наводит на нее, нажимает. Для этих целей при создании дизайна кнопок html используют CSS или JavaScript.

Кнопка с использованием изображения



Итак, как создать дизайн кнопок для сайта с использованием изображения? Для разработки простой кнопки html, которая выглядит как картинка-ссылка, вставляют тег 'a' (ссылку) на тег img (изображение).

Этот пример – по сути простая картинка-ссылка. Но при этом эта картинка может выглядеть абсолютно по-разному и органично смотреться в общем дизайнерском решении сайта. Однако следует помнить, что кнопка html не может «работать», то есть, менять свой облик в зависимости от ситуации. Чтобы кнопка могла изменяться, необходимо поменять ее начальный вид и добавить CSS.

Кнопки для сайта с использованием CSS



Как выглядит дизайн кнопок для сайта CSS?

CSS является другим языком программирования, отвечающем исключительно за стили. CSS – это каскадная таблица стиля.

Код кнопки для сайта html выглядит так:

<"a" h"r"e"f="Здесь необходимо указать адрес страницы в интернете" class="">

Внимание! Используя примеры, вам следует удалить значок ", чтобы получилось a и href.

Этот пример является простой ссылкой, которую потом преобразовывают в необходимом стиле с помощью CSS. Class в данном случае определяет наименование класса в CSS, чтобы код был применен именно к данному элементу на странице.

• .topbutton { /*класс кнопки*/

• width:111px; /*- ширина кнопки в 111 пикселей*/

• border:1px solid #000; /*- рамка для кнопки в 1 пиксель, сплошная и черная*/

• background:#red; /*- заливка кнопки - красный*/

• text-align:left; /*- выравнивание текста на кнопке по левому краю*/

• padding:10px; /*- отступы от внешних элементов на странице*/

• color:#fff; /*- цвет текста, в данном случае белый*/

• font-family:verdana; /*- шрифт текста (можно открыть и выбрать в Word)*/

• font-size:8px; /*- размер текста на кнопке*/

• border-radius: 3px; /*- округление углов кнопки*/

• }

Примечание! /*комментарий*/ - так в CSS коде можно оставлять комментарии.

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

Более сложная кнопка для сайта

Дизайн кнопок для сайта разрабатывается не только при помощи CSS, но и других языков программирования, которые используют для создания качественных кнопок html сайтов, к примеру, JavaScript. Мощность этого языка программирования выше. Кроме того, с его помощью могут быть реализованы интересные идеи для сайтов в большем количестве.

Читайте также!

«Дизайн-мышление как новый подход удовлетворить клиентов» Подробнее

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

Как уже было отмечено, кнопки html предназначены для того, чтобы перенаправлять юзеров на другие страницы сайта. Но, помимо этого, кнопки также отправляют данные из формы, в которую пользователь вводил информацию о себе, к примеру, при регистрации.



Код кнопки html в этом случае выглядит так:

<"input" type=”botton” name=”имя кнопки для php” value=”текст, который отображается на кнопке”>

Внимание! Используя примеры, вам необходимо удалить " для получения input.

Реализация такой кнопки – довольно легкая задача. На примере показана рабочая кнопка для отправки введенной пользователем информации из формы.

• Type – определяет, что данный элемент является кнопкой.

• Name – это элемент, за счет которого кнопка становится уникальной.

• Value – отображает надпись на кнопке.

Сложность состоит не в создании кнопки html, а в реализации обработки информации, оправленной юзером. Для решения этой задачи нужно знать более сложный язык программирования. PHP дает возможность разрабатывать настоящие сайты, и, к примеру, многие готовые CMS записаны именно на нем.

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

Дизайн кнопок для сайта можно разрабатывать как вручную, так и с помощью специальных сервисов. Эти сервисы умеют автоматически создавать разные виды кнопок, отвечающие вашим требованиям. Но в применении этого метода разработки дизайна есть существенный минус. Чтобы в дальнейшем использовать созданные кнопки, потребуется хорошо разбираться в html.

Изучить html нужно будет для того, чтобы понимать, куда устанавливают кнопку сайта – в меню, блок, выводящий контент, или в footer (самый низ) сайта.

ТОП-5 сервисов CSS для создания дизайна кнопок для сайта

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

Best CSS Button Generator



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

Dextronet CSS



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

CSS Portal



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

CSS Button Generator



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

External CSS3 Button



Скачайте полезный документ:

Чек-лист: Как добиваться своих целей в переговорах с клиентами

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

10 моментов, которые стоит учесть, создавая дизайн кнопок для сайта

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

Помните, что порядок размещения и положение кнопок – очень важные параметры. Особенно важен порядок применительно к парным кнопкам (к примеру, «предыдущий» и «следующий»). Главный акцент в дизайне должен быть сделан на основном или наиболее важном действии юзера.

• Кнопки должны соответствовать контексту.



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

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

• Скрывайте второстепенные элементы.



Помните, что детали, имеющие второстепенное значение, не должны бросаться в глаза. Речь в данном случае идет об элементах меню, контроллерах, различных бегунках. Эти элементы, в частности, могут иметь одинаковые углы (один радиус), но разные тени, границы и градиенты и т. д.

• Аккуратно используйте размытые тени.

Создавая дизайн кнопок для сайта, многие веб-мастера применяют в работе «Закон Теней», согласно которому любые тени оказывают лучший эффект, когда элемент светлее фона. Если же элемент темнее, чем фон, тени следует использовать осторожно.

• Не забывайте о первичных, вторичных и третичных элементах.



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

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

• Остерегайтесь призрачных кнопок.



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

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

Читайте также!

«Разработка дизайна сайта: от выбора стиля до получения макета» Подробнее

• Не используйте текст в виде «ОК».

Разрабатывая дизайн кнопок для сайта, мастера часто применяют надписи «OK», «Cancel», «Да», «Нет» и т.п. Если вы – пользователь ПК, то видите такие кнопки ежедневно. Но такого рода кнопки не имеют никакого отношения к действию, совершаемому пользователем. CТА для ясности и убедительности следует увязывать с действием, которое юзер хочет или собирается выполнить.

• Лучшее место для расположения конверсионных кнопок – правая нижняя часть страницы.



Чтобы аргументировать это утверждение, демонстрируем вам диаграмму Гутенберга. Глядя на нее, вы понимаете, что страница сайта делится на 4 части. Стрелки показывают, как двигается пользователь. Основное его внимание сосредоточено на верхнем левом и правом нижнем квадрантах страницы. На нижний левый квадрант посетитель практически не смотрит. В связи с этим конверсионные кнопки всегда лучше располагать внизу справа.  

• Кнопку желаемого действия в диалоговых окнах лучше помещать в правой части.

Кнопки желаемого действия, например «Купить», «Оформить» и т. д. лучше располагать в правой части, поскольку там они работают более эффективно. Взгляните на этот скриншот:



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

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

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

Автор статьи

Сергей Касьянов

Сооснователь компании «Генератор продаж»

Статья опубликована: 30.01.2018

Последние статьи этого автора:

• Анализ контента сайта: 9 этапов + сервисы помощники
• Про B2C маркетинг простыми словами
• СРА-маркетинг для рекламодателя: агрегаторы, запуск и схемы обмана

Забрать гарантированный подарок

Полезные
материалы
для руководителей

Скачать 3,2 MB