Купить за 79 руб.
ПОЛУЧИТЬ БЕСПЛАТНО !

Получите бесплатный комплект иконок

(Время действия акции ограниченно)

Иконок много не бывает, не так ли? Получи этот замечательный комплект иконок на свою электронную почту уже через несколько минут!

Для этого просто заполни форму ниже:

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

Мы уважаем и ценим наших подписчиков и поэтому обещаем, что твой адрес не будет передан третьим лицам.

Присоединяйтесь к нам !

Зарегистрируйте Бесплатный Аккаунт или подключите Безлимитный Доступ всего от 180 руб./мес.

Узнать подробнее

Последние новости из мира веб-графики

Принципы успешного дизайна кнопок

13 Марта 2014

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

Сегодня я хочу поделиться с тобой советами по изготовлению удивительно элегантных и стильных кнопок для твоего сайта.

 

1. Соответствие бренду компании

 

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

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

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

 

2. Придайте контраст вашим кнопкам

 

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

использование кнопок в веб-дизайне

 

 

3. Уделите внимание углам кнопки

 

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

 

4. Разделяйте главные кнопки от второстепенных

 

 

использование кнопок в веб-дизайне

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

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

 

5. Выбирайте правильные цвета обводки при создании дизайна кнопок

 

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

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

 

6. Будьте осторожны при использовании эффекта размытой тени

 

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

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

 

7. Применение знаковых элементов

 

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

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

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

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

 

8. Учитывайте первичные, вторичные и третичные стили

 

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

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

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

источник

Поделитесь с друзьями:

У Вас есть отличная идея, техническое задание и бюджет на ее реализацию ?

Заказать выполнение проекта