Веб-дизайн состоит, по большей части, дизайна интерфейса.

Есть много методов, участвовал в разработке красивый и функциональный интерфейс.Here’ моя коллекция из 10, что я думаю you’ найдете полезным в вашей работе.They’ повторно не связаны с какой-либо конкретной теме, а скорее набор приемов я использую в своих собственных проектах.Не мудрствуя лукаво, let’ S получить started.

1.Мягкий блок links

Links (или якоря) встроенных элементов по умолчанию, что означает, что их активная область охватывает только высоту и ширину текста.Эта активная область или пространство, где вы можете нажать, чтобы отправиться на link’ назначения с, может быть увеличена для большего удобства использования.Мы можем сделать это, добавить padding и, в некоторых случаях, также преобразования ссылку в блоке element.Here’ с примером встроенных и мягкие ссылки, с их активной области подсвечиваться, чтобы показать разницу:

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

a {
	display: block;
	padding: 6px;
}

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

2.Верстка buttons

Внимание к каждой детали, то, что отличает отличный продукт от посредственного.Элементы интерфейса, такие как кнопки и вкладки щелчке по много раз в день, пользователям, так что стоит набирать их должным образом, и по набору Я имею в виду позиционирования этикетки.Here’ SA пару примеров из рода неуместны этикетки я иногда замечаю:

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

Однако, если мы будем использовать прописные буквы, а также строчными буквами с восходящим (“ т, ” “ D, ” “ F, ” “ ч, ” “ k” и “ l”), баланс смещается upwards, делая метки появляются слишком высоко на кнопку.В таких случаях, мы должны установить тип использования прописных высоте, как руководство — или установить его немного выше, если большинство из букв в нижнем регистре.Here’ то, что я имею в виду:

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

3.Использование отличие от управления focus

Кроме того, вы также можете управлять фокусом вашего visitors’ внимания с контрастом между элементами.Here’ S примере заголовок поста и некоторых мета-информации под относительно того, кто разместил статью, и его дата:

Все текста установлен в черный цвет.Let’ S уменьшить контраст между мета-информации (дата и author’ имя) и фона, помещая текст в светлый оттенок серого:

Высочайшей контрастностью элементом здесь является заголовок, так что буквально выскакивает на нас.Другие элементы отходят на второй план.Здесь, I’ выбрали автором как второй наиболее важный элемент, и дата, как минимум.Шрифт также отличается по размеру и стилю, но уровень контрастности может быть очень мощным.Let’ S в обратном порядке важности на сегодняшний день, автор и заголовок:

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

4.Использование цвета для управления attention

Цвет также может быть использована для эффективной сосредоточить свое visitors’ внимание на важные или принятия мер elements.Например, во время президентских выборов в США, в значительной степени все candidates’ веб-сайты были пожертвования кнопка красного цвета.Красный цвет очень яркий и мощный цвет, чтобы он привлекает внимание, и она выделяется еще больше, когда остальная часть сайта синий или другой холоднее color.

Теплые тона, такие как красный, желтый и оранжевый естественно яркими и поэтому, как правило, притягивают взгляд.Они также “ expand” когда на фоне холодных цветов, как синий и зеленый.Это означает, что оранжевую кнопку на синем фоне выглядит it’ S течет наружу и с переднего сиденья.Наоборот, синюю кнопку на оранжевом фоне контракты внутрь, желая остаться в фоновом режиме.Here’ S картинка для иллюстрации:

Here’ SA несколько примеров сайтов, которые используют цвет эффективно направлять users’ внимание к важным элементам:

Функции Функция “ We’ Re Hiring” Ссылка на своей странице рабочих мест.Чтобы обеспечить связь не пропустили, дизайнеры установить его на красном фоне, который появляется из темного фона заголовка, эффективного захвата attention.

Causecast использование цвета эффективно.Четыре ярко-розовые элементы выскочить на тебя: логотип, обратной ссылки, ссылки и поддержка веб-сайте описание message.

Хотите “ About” реклама на вашем сайте, чтобы захватить visitor’ S фокус?Сделать фоном желтого цвета.Хотите сделать “ Join” Кнопка выделиться?Цвет ее оранжевый.Убедитесь в том, чтобы не выделить слишком много элементов, хотя, если вы делаете, они могут заблудиться в каждом other’ S company.

5.Белое пространство указывает relationships

Одним из наиболее важных элементов в интерфейсе пробелы между элементами.Если you’ не знакомы с термином пробел, то это означает только, что: пространство между одним из элементов интерфейса и другое, будь то кнопки, панели навигации, текст статьи, заголовки и так далее.Управляя белым пространством, мы можем указать связей между отдельными элементами или группами elements.

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

Текст выглядит все в порядке и, конечно, для чтения, а потому, что пространства над и под каждой товарной позиции равны, они don’ T разделить каждый фрагмент текста ясно.Мы можем улучшить этот счет увеличения пробелов между каждой секции, а также несколько ужесточение линии высоты пунктов:

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

6.Письмо spacing

Веб-дизайн довольно предельным для типографов.Но пока есть только несколько безопасных веб-шрифты и не очень много вещей, которые вы можете сделать, чтобы их стиль, it’ S стоитпомня, что у нас еще есть определенный уровень контроля.“ Tracking” это термин, используемый в области типографии, чтобы описать настройки расстояние между буквами в words.We’ ве получили возможность сде …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров