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

Вы точно уладили все проблемы и готовы передать проект клиентам?

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

2. Font Awesome

Font Awesome предлагает масштабируемые векторные иконки, которые вы сразу же сможете персонализировать, а именно, изменить размер, цвет, тень и все, на что еще способна CSS.

3. Perfect Icons

Perfect Icons – это простой инструмент для создания иконок социальных сетей независимо от разрешения экрана.

4. Freebiesbug

На Freebiesbug собрано огромное количество полезных ресурсов по веб-дизайну, в том числе и различные ресурсы, посвященные шаблонам, UI и подключаемым модулям.

5. Pttrns

На сайте Pttrns дизайнеры найдут шаблоны сайтов для мобильных устройств, ресурсы по UIKit и UI элементам.

6. Flat UI Color Picker

Flat UI Color Picker – это отличный выбор, если вам нужна цветовая схема и вы хотите создать совершенно уникальный плоский дизайн интерфейса.

7. Tech&All

Tech&All собрал все, что нужно знать о веб-дизайне, коде, шаблонах, визуальном дизайне, UIKits, UI элементах и разработке хорошей навигации по сайту.

8. Site Inspire

Ищите вдохновение? Не знаете, как использовать сайты? Site Inspire станет вашим помощником в решении этих проблем. Материал на сайте можно фильтровать по категориям, платформам и стилям.

Какой UI дизайн вы бы назвали хорошим? На сайте GoodUI вы найдете массу полезной информации и советы.

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

Сегодня рассмотрим похожий сервис UI Patterns , что является своего рода библиотекой типовых паттернов дизайна и может пригодиться для UI проектировании.

Автор ресурса — датский веб-разработчик Anders Toxboe, запустил его в далеком 2007 году. Основная идея проекта — собрать в одном месте все решения классических проблем и задач построения интерфейсов. Это реализуется через подборки примеров + детальное описание разных методов с пояснениями как лучше и почему нужно использовать тот или иной подход.

Проект UI Patterns содержит несколько функций/разделов:

• Design patterns — непосредственно библиотека паттернов интерфейса.
• Screenshots — архив всех скриншотов UI (почти 16 тысяч).
• Блог (к сожалению, там очень мало публикаций и они выходят редко).
• UI Patterns Weekly — подборка ссылок на полезные статьи по теме (регулярно обновляется).
• Рассылка с бесплатными уроками.
• Возможность добавлять свои скриншоты интефрейсов.
• Платные обучающие фишки — разработчики ведут онлайн курс по созданию эффективного дизайна с точки зрения психологии и разных инструментов влияния на действия пользователей. В дополнение к этому на сайте продается колода карточек с разными паттернами поведения, что могут пригодиться в проектировании.

Нас больше интересуют первые два пункта, поэтому рассмотрим именно их.

UI паттерны дизайна

Как правило, для решения одних и тех же задач применяются похожие варианты реализации. Если глянуть на подборку , то увидите, что практически все традиционные «функции» в дизайне (поиск, кнопки, чекбоксы) имеют одинаковый принцип работы. Точно также и в более сложных решениях используется стандартизированный подход. В сервисе UI Patterns собраны наиболее актуальные паттерны дизайна.

Они разделены на несколько категорий:

• табы;
• меню;
• контент;
• формы (кстати, советуем почитать про улучшение );
• таблицы;
• картинки;
• форматирование данных;
• социальные;
• магазины;
• поиск и др.

Выбираем, допустим, меню хлебные крошки (Breadcrumbs), и на соответствующей странице увидите детальное обсуждение проблемы:

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

Persuasive Design Patterns

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

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

Библиотека скриншотов интерфейсов

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

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

Итого. В целом сервис UI Patterns будет отличным помощником всем проектировщикам: как новичкам, так и профессиональным специалистам. Подборка паттернов дизайнов интерфейсов действительно хорошая — кроме 16 тысяч иллюстраций, имеется детальный разбор разных UX/UI задач с советами, вариантами реализаций и т.п.

Если знаете похожие проекты, сбрасывайте линки в комментариях.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ШАБЛОНЫ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА: ВВЕДЕНИЕ

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

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

РАЗРАБАТЫВАЙТЕ СВОЙ СОБСТВЕННЫЙ UI ШАБЛОН

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

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

Вот основные преимущества использования шаблонов пользовательского интерфейса:

ТРИ УРОВНЯ ШАБЛОНОВ ПОЛЬЗОВАТЕЛЬСКОГО ИНТЕРФЕЙСА

1. Имплементация

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

2. Потоки

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

3. Контекст

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

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

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

Определите задачи, которые приложение пытается решить

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

Найдите шаблоны, которые могут решить ваши задачи

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

Следуйте выдающимся примерам

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

Проанализируйте понравившийся шаблон и выберите элементы, относящиеся к вашему приложению

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

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

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

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

НАБОРЫ UI

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

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

ЗАКЛЮЧИТЕЛЬНЫЕ МЫСЛИ

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

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

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

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

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

Сегодня я поделюсь опытом разработки графической документации по гайдлайнам. Это оказалось мое второе задание для Viline. И как Вы не помните из первой части , я делал редизайн страницы видео-курса. В данной статье я опишу процесс разработки стилистики всех элементов и различных состояний. Придумаю и сформулирую некоторые правила, чтобы интерфейс получился сбалансированным и доступным с учётом аудитории…

Кстати, если вы используете Figma , я рекомендую обратить внимания на наши готовые дизайн-системы . Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.

А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken

В первой главе я забыл упомянуть, что нужно было действовать исходя из утвержденной цветовой схемы. Задача придумать и предложить новые цвета не стояла. Для выбора цвета иногда использую Adobe Color CC (потребуется (!) авторизация) или ColorScheme.ru . Вставляю код основного цвета, а дальше подбираю к нему оттенки в разных режимах: аналоговый, монохромный, триада и т.д. Очень сильные и гармоничные контрасты можно подобрать, например, в режиме триады. Это я к тому, что мне было откуда почерпнуть гамму оптимальнее, но не было таких пожеланий.

К шрифту Open Sans, который использовался в текущей версии сайта, у меня тоже возникали вопросы. Кажется, он всё реже встречается в повседневном мире. Сейчас актуальны: Helvetica, Lato, Source Sans Pro, Roboto и т.п… Но это вопрос, оказывается, был в стадии переосмысления маркетологами.

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

Гайдлайны

Гайдлайны - это свод правил и/или рекомендаций для формирования внешнего вида продукта. Их формирует дизайнер и в понятном виде описывает для разработчиков. С одной стороны это приговор для первого, т.к. в будущем новые разделы продукта можно визуализировать и без дизайнера, опираясь на графический документ. С другой стороны, в наши дни дополнение работы дизайнера интерфейсов такой документации уже - is a must, сейчас планка находится достаточно высоко. Итак гайдлайны - это рекомендации по: цветам, шрифтам, элементам, состояниям, иконографике, размерам и отступам.

Напомню, что основная аудитория web-продукта в моему случае - молодые или будущие мамы. Мне нужно придерживаться: утвержденных клиентом цветов; шрифта, который он считает оптимальным для своей аудитории; радиуса скруглений углов элементов. Последнее нужно для того, чтобы элементы в глазах прекрасного пола не выглядели слишком “острыми” или “угловатыми”.

1/15: Шрифт Circe

Важная новость от команды маркетологов на старте: уходим от Open Sans и берём в качестве основного шрифт Circe.

Описание шрифта

Circe - геометрический гротеск с человеческим лицом и многочисленными приятными дополнениями. Гарнитура состоит из 6 начертаний разной насыщенности, от тонкого до сверхжирного. Своим именем шрифт обязан как геометричности форм и процессу создания, превращённому в массовое развлечение, так и своеобразному, несколько опасному характеру. В то время как базовые формы Circe представляют собой достаточно спокойный геометрический гротеск с некоторыми гуманистическими чертами, альтернативные формы и знаки с росчерками могут полностью изменить характер шрифта. С одной стороны, дизайнер может наслаждаться невиданным до этого в кириллице разнообразием форм, но, с другой стороны, единственным ограничением для всего этого разнообразия служит только вкус и здравый смысл пользователя, так что в какой-то мере шрифт становится для него опасным, как колдунья Цирцея для Одиссеевых матросов. Сверхрасширенный знаковый состав Circe, включающий в себя как знаки для большинства европейских языков на основе латиницы и кириллицы, так и огромное количество альтернативных вариантов и вариантов с росчерками, организован в стилистические сеты, позволяющие быстро, удобно и гибко менять характер набора. Шрифт хорош как в достаточно мелком текстовом наборе, так и в крупных кеглях, например, в журнальных заголовках, плакатах и т.п. Дизайнер - Александра Королькова. Шрифт выпущен компанией ПараТайп в 2011 году.

Если говорить своими словами: шрифт нетрадиционный для веба, по начертанию ближе к типографскому, имеет в себе “литературное звучание”. Это чисто мои ассоциации. Если сравнивать Open Sans и Circe, то последний немного выигрывает по плотности


Окей, новый шрифт утверждён. Пожелания по скруглению углов от маркетологов: использовать 6px радиус. Договорились, учту! (кстати, достаточно редкое в моей практике пожелание). Можно начинать проработку всех элементов.

2/15: Цвета

Палитра в центре - это поступившая схема от клиента. Цветовая схема слева: я чуть осветлил зелёный (он пригодится нам для онховеров) и разместил его рядом с белым. Так можно приблизительно представить как будет смотреться типовая карточка в дизайне. Оттенки справа - это пример визуализации зеленого рядом с контрастным чёрным. Острой необходимости в таком использовании не предвиделось, это скорее сделано для разнообразия. Общий фон как сайта, так и данного ui kit’a остаётся #EFEFEF (светло-серый), это позволит избежать сильной контрастности на мобильных устройствах.

3/15: Типографика

Это рекомендации по использованию размерности текста. Я отрисовал абзац текста, внедрил в него цитату. Сделал несколько типов заголовков. И добавил обычный и пронумерованный списки. Пример scroll bar’a тоже тут, он был добавлен позднее. На самом деле, данные правила текста не обязательно должны быть жёсткими. Если нужно нанести абзац текста мелким 14px шрифтом - да пожалуйста. Главное - соблюдать пропорциональность текста. Например абзац текста мелким шрифтом смотрелся бы странно с крупным заголовком “Оглавление”.

4/15: Ссылки

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

5/15: Кнопки

В данном разделе надо учесть все возможные состояния кнопок и проработать их. Я разделяю типы кнопок на основную “primary” и вторичную “secondary” (или как еще их называют ghost button). По логике основная кнопка ведёт к приоритетному действию, а вторичная кнопка ведёт на экшн, который мы меньше хотим от пользователя. Снова дизайн-манипуляция. Вот пример такого использования:

Сейчас теории Google Material Design активно используются в дизайне, поэтому в наши дни многие кнопки вновь стали выглядеть как кнопки. К дизайну интерфейсов стали применять некоторую физику из реального мира. Кнопка в обычном состоянии имеет небольшую тень; при наведении мыши тень становится больше и более размытая - кнопка “приподнимается” выше; при клике эта тень исчезает, имитируя “нажатость” кнопки. Вот такая псевдотрёхмерность, которая чуть больше связывает дизайн с реальным миром. Насколько я помню, это пришло из гайдлайнов приложений для smart tv, где пользователи сидят в определенном диапазоне удалённости от телевизора и там жизненно важно использование заметных теней с большим коэффициентом размытия. Это заметно облегчает восприятие происходящего.

6/15: Ввод текста

Если референсировать опять-таки на GMD, то можно заметить, что тенденция использования таких инпутов:

Всё чаще встречается и в web-продуктах. Если Вы предпочитаете Android, разбираетесь или работаете в сфере IT, то с такими инпутами Вы как “рыба в воде”. Но для женской аудитории, которая в основном предпочитает iPhone, такая аскетичная стилистика для элементов ввода текста - скорее боль. Я попытался найти золотую середину и предложил дизайн, когда инпут всё-таки остаётся инпутом, но и имеет некторые корни GMD:

Любая форма ввода снизу имеет тень-подчёркивание 1px без размытия. При наведении мыши она зеленеет; при клике она утолщается и зеленеет, демонстрируя состояние in action. Иконка карандаша справа - это экспериментальные попытки добавить “излишней понятности”. В некоторых случаях эта иконка может усиливать смысл: обычный инпут - карандаш; поисковый инпут - лупа; инпут ввода пароля - иконка замка, например; и так далее. Пример будет ближе к концу этой статьи.

7/15: Выпадающие списки

Их принципы отклика выполняются в том же ключе, что и инпуты. При наведении мыши меняется цвет иконки и нижнее подчёркивание. При развороте выпадающего списка появляется более объемная тень всё так же “приподнимая” выше элемент в плоскости. Если подходить к делу с должным вниманием, то стоит подумать и о развёрнутом состоянии. Иконка переворачивается, активная строка выделяется bold’ом, а при onhover’e подкрашиваем фон светлым оттенком основного зеленого цвета.

8/15: Слайдеры

С ними всё предельно прозрачно. Ничего нового тут не изобретаю, стандартный компонент по аналогии оформляется в соответствии с гайдами: шрифты, цвета и размерности. Ползунок можно переместить как drag’ом мыши, так и кликнув в числовое значение, например, когда предлагается указать возраст ребёнка “от” и “до”.

9/15: Табы / вкладки

“- Да всё понятно, дальше давай!”

10/15: Элементы выбора

Тут я сгруппировал все оставшиеся элементы: выбор состояний (доп.фильтрация), переключатели, чекбоксы и radio-buttons. Для последних двух - это просто напоминание разработчикам, что заметность выборки усиливаем интенсивным начертанием текста. Ну а с остальным, мне кажется всё очевидно.

11/15: Таблица

Я дополнил kit и примером таблицы тоже. Всё стандартно, использую лишь общую аналогичную стилистику. Безусловно от таблицы больше толка, если приведены спецификации отступов. Подробнее о них, кстати, в конце главы.

12/15: Иконографика

Рекомендации и примеры использования иконок. Я считаю, что интенсивные и заметные иконки GMD поставили эволюцию иконографики в тупик. Когда-то были пиксельные, потом выпуклые, где-то между ними в тренд вошли ios-овские обведенные (outline), рядом ненадолго мелькнул цветной flat-стиль (помните, когда бесконечная псевдо-тень тянулась под углом от объекта?). А потом пришёл Google и заявил как надо делать. И если не уходить глубоко в лирику, то я использую только иконки GMD последнее время за свою многофункциональность и производительность. Много метафор от независимых дизайнеров иконок можете брать (free, отдают все размеры, png/svg/zip, hint: удобно кликнуть правой кнопкой мыши и скачать нужный размер). Считаю, что интенсивные иконки более понятны и заметны (и тут должен быть референс на знаки ПДД).

13/15: Карточки

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

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

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

14/15: Вход в систему

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

15/15: Спецификации

Они находятся в отдельной группе в исходнике. Группу можно сделать видимой и спексы отрисуются. Без них данный user interface kit был бы неполноценным. Соблюдения пропорций размерности и отступов ведёт к сбалансированному интерфейсу. Если я не дам инструкций на этот счёт, то появляется риск, что это будет сделано иначе. И тогда я не смогу гарантировать качественную реализацию.

Если Вы предпочитаете 8px сетку, то стоит учитывать, что все отступы кратные 8; если используете 10px сетку, как в моём случае, то Вы не найдёте в этом дизайне расстояний между элементами в 13 или 27px, все отступы будут кратны 10-ти.

Правила существуют и для количества цветов и их оттенков: я не использовал слишком много оттенков серого, например - их вышло не более трёх в данном наборе. Я уверен, с такими собственными правилами интерфейса проще и дизайнерам, и разработчикам. Хотя тут бывают исключения, если система выдаёт обратную связь разными состояниями, то могут потребоваться и красный, и голубой, и т.п. для усиления смыслового различия (например для попап-уведомлений).

Заключение главы

• Графическая документация по гайдлайнам - это визуальный язык для разработчиков, чтобы продолжать развитие продукта и не привлекать дизайнера лишний раз.
• Набор гайдлайнов может разрабатываться с учётом целей будущего продукта. Шрифты, цвета и общая стилистика могут учитывать специфику будущих пользователей ресурса/приложения.
• Для оптимизации взаимодействия гайдлайны должны содержать рекомендации по размерностям элементов и отступам.
• Желательно, но не обязательно, чтобы набор также включал в себя примеры готовых решений. Это может быть корзина покупателя, страница товара, френдлента, карточки, лендинг и т.п.
• Современный подход - это возвращать клиенту не sketch/psd файл, а отдавать html/css код. Я некоторое время назад полностью перешёл в Axure, и он справляется с этой задачей достаточно эффективно.

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

1. Jan Losert очень крутой, его