Разработка Ui kit для сайта

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

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

Шрифт

В качестве основного шрифта для сайта выступает Circe.

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

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

Цвет

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

Фон ресурса и Ui kit будет в светло-серых оттенках во избежание переконтраста на мобильных устройствах.

Типографика

Рекомендации по размещению текста:

Мы набрали абзац текста, привели пример цитаты, предложили несколько вариантов заголовков, а также показали, как будут выглядеть списки. Не обязательно четко придерживаться данных правил. Другими словами, если текст нужен 14 кеглем, то его можно сделать таким. Главное правило – это соблюдение пропорциональности. К примеру, текст абзаца не слишком гармонично сочетается с заголовком «Оглавление».

Ссылки

Пример цвета в обычном состоянии и при наведении:

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

Кнопки

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

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

Ввод текста

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

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

Выпадающие списки

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

Слайдеры

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

Оформление вкладок

Здесь понятно показано их состояние в каждом из действий.

 

 

Элементы выбора

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

 

Таблицы

Подается стандартный пример оформления таблицы по аналогичной стилистике сайта.

 Иконографика

С иконками информация легче воспринимается. Наиболее удачным вариантом считаются иконки GMD. Ранее было множество вариаций от пиксельных до flat-стиля с теневыми эффектами. Интенсивные иконки более заметны и понятны пользователю.

Карточки

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

 

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

Вход в систему

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

Спецификация

Чтобы получился сбалансированный и полноценный интерфейс, нужно придерживаться размерности, отступов. В зависимости от сетки, нужно выставлять отступы. Например, если сетка 10px, то и отступы должны быть 10.

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

Заключение

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