STYLE GUIDE

Эффективный дизайн или простое руководство по управлению стилем

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

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

Цветовая палитра

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

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

Совет

Гармонизация цветовой палитры позволяет верно расставить стилевые акценты и выделить области, на которые требуется сконцентрировать внимание пользователей.

Primery
Green
#00C400
20%
#0BB40B
#099A09
Secondary
Grey-Blue
#2B3446
50%
#99A2B4
#344870
Neutral
Black
#1D1D1D
10%
#CACACA
#767676

Типографика

Хорошая типографика – это качество, которое человек, заходя на ваш сайт, не замечает, но чувствует. От правильности выбора шрифта на 95% зависит успешность ресурса. В этом разделе максимально подробно расписываются правила применения шрифтов в заголовках и основном тексте, их размеры и начертание.

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

Совет

Используйте минимальное количество шрифтов. Более трех разных шрифтов на одном сайте будет выглядеть так, словно над его созданием потрудился не профессионал, а дилетант. Грамотный подход к типографике позволит до 20% улучшить конверсию.

Helvetica Neue Cyr Roman Используемый шрифт
Aa Header 1 Roman 48 px line spacing 55px
Aa Header 2 Roman 36 px line spacing 42px
Aa Header 3 Roman 26 px line spacing 40px
Aa Header 4 Roman 20 px line spacing 40px
Aa Comlementary text Roman 14 px line spacing 22px

Компоненты

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

Совет

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

Button 1 height 47px Используется для форм призыва к действию и приоритетного контента
Button 2 height 47px Используется для второстепенного контента
Button 3 height 47px Кнопки отмены или удаления контента
Arrow-Button height 47px Кнопки перелистывания контента
  • Ссылка в тексте Normal
  • Ссылка в тексте Active
  • Ссылка в тексте Hover
  • Первый пункт списка
  • Второй пункт списка
  • Третий пункт списка
  • Первый пункт списка
  • Второй пункт списка
  • Третий пункт списка

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

+7 999 000-22-11
+7 999 000-22-11
+7 999 000-22-11

Текстовые поля

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

Совет

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

Введите имя
Александ|
Александр
46271№в5ма4ыв
Выпадающий список
Выпадающий список
Первый пункт списка
Второй пункт списка
Третий пункт списка

Иконки

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

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

Совет

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

Icons 1 Основные графические изображения выполнены в представленном минималистичном стиле с использованием обводки, заливка 0%. Использование цветных иконок на данном сайте недопустимо.

ВАЖНО! При масштабировании сохраняется толщина обводки.

Логотип

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

Совет

Логотип – это первый шаг на пути формирования фирменного стиля. Он задает тон всему сайту и создает настроение.

Your Logo Your Logo

Цветное и монохромное отображение логотипа, а также все варианты цветовых сочетаний

Your Logo

Охранное поле логотипа и пропорциональное соотношение отступов

#39D039
#2B3446
#99A2B4

Цвета, допустимые для использования в логотипе

Your Logo

Правила использования логотипа

Your Logo

Запрещается изменение цветовой палитры

Your Logo

Запрещаются любые трансформации логотипа

Your
Logo

Запрещается перенос слов

Your Logo

Запрещается изменение кёрнинга (межбуквенного расстояния)

Your Logo

Запрещается изменение шрифта в логотипе

Сетка и отступы

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

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

120 px
50 px
10 px

Совет

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

90 px Внешний отступ 1
60 px Внешний отступ 2
45 px Внутренний отступ 1
20 px Внутренний отступ 2

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

Модальные окна

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

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

Заказать звонок

Заполните форму и нажмите «Отправить». Мы свяжемся с Вами в ближайшее время

Введите имя
+7 (___)-___-__-__
Отправить
Спасибо!

Ваша заявка на звонок успешно отправлена специалистам

Ошибка!

Сервер временно недоступен, пожалуйста, повторите Ваш запрос позже

Анимация

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

Совет

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

70%
65%
Загрузка...
Загрузка...

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

Совет

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

Хочу также!

Звоните или пишите, и наши лучшие специалисты бесплатно проконсультируют по всем интересующим вопросам.

Нажимая на кнопку "Отправить", вы даете согласие на обработку персональных данных