Пользовательский интерфейс (на англ. user interface, UI) коротко говорят ЮИ - это среда взаимодействия пользователя с компьютером. Это кнопки, меню, радиокнопки, чек-боксы и многое другое. Сейчас не понятно, ниже все заумные словечки объясню. Если человек пользуется мобильным телефоном, то приложения или браузер - это пользовательский интерфейс.
Основные элементы пользовательского интерфейса
Сейчас буду пояснять те слова, которые написал выше. Должно все встать на свои места. Рассказываю про пользовательский интерфейс не просто так. Эта информация нужна для того, чтобы вы не забывали в макетах прорисовывать все эти элементы. Если верстальщик что-то из этого в макете не найдет он сделает это так, как ему это кажется правильным.
Тексты (заголовки)
Когда человек в вебе первое, с чем он сталкивается, это тексты и заголовки. Поэтому, нам как дизайнерам, важно прорабатывать сразу все заголовки в одном макете. Заголовки, обычно, называются H1, H2 … Hn, потому что так они называются в тегах html. 
В данном случае первый заголовок - это H1, далее H2 и так далее. Первый - это наиболее значимый заголовок. В лендинге это может быть на первом экране, дальше по низсходящей. В макетах нужно показывать все зголовки, чтобы верстальщик понимал, где какой тег ставить.
Ссылки
Здесь текст, заголовок и выделена ссылка. Ссылки имеют 4 состояния: обычное, при наведении (может менять цвет, подчеркиваться или что-то еще, эффект), нажатие и посещенное состояние (нажали и потом вернулись на сайт, откуда ушли).
Кнопки
Они похожи на физические кнопки, по крайней мере задумывались так, как кнопки на магнитофоне. Поэтому имеют состояния: наведение и нажатие. Это нужно все прорабатывать.
Радиобаттон и чек-боксы
Слева радиобаттон (по-русски радиокнопка, но буду называть ее радиобаттон поскольку у дизайнеров так принято), справа чек-бокс. В радиобаттоне можно выбрать только 1 вариант, у нас выбран енот. В чек-боксе возможность множественного выбора, у нас выбран тюлень и енот.
Формы
Формы нужно прорабатывать сразу в нескольких видах. Неактивная форма (наверху), активная (вторая сверху), форма с ошибкой (третья сверху), форма успешно заполненная (четвертая сверху). Иногда при ошибке в форме лучше справа сделать всплывающую выноску, где явно указать ошибку. Например, если в форме для ввода телефона посетитель ввел буквы, сделать на выноске надпись «в этом поле можно вводить только цифры». Это очень поможет людям заполнить форму и повысит ее конверсию.
Попап
Попапы или всплывающие окна авторизации (входа) на сайт нужно всегда прорисовывать. На этой картинке нет, но вообще принято делать крестик справа для выхода из формы.
Пагинация
Пагинация - постраничная навигация, которая позволяет быстро переключаться между большим количеством товара, листов или чего-либо. Сейчас распространена такая форма пагинации как лента новостей в вк, когда вы прокручиваете до низа и подгружаются еще новости. Так же можно сделать в интернет-магазине. В этом случае все равно нужно предусмотреть кнопку «показать больше товаров». Если их уже загружено очень много и показать какой-то прелоадер, то есть элемент, который показывает загрузку страницы.
Хлебные крошки
Часто можно встретить в интернет-магазине. Например, слева написано интернет-магазин, справа мужские вещи, еще правей спортивная верхняя одежда, далее куртки. Она позволяет перейти при клике на желаемый уровень вверх. По-другому называется навигационная цепочка.
Прелоадер
Штука, которая показывает, что что-то загружается. Они бывают очень разные. Можно нагуглить «прелоадер гиф» и посмотреть разнообразие и использовать понравившиеся. Есть специальный прелоад генератор , где можно выбрать как он будет выглядеть, какого цвета, в каком формате его сохранять и так далее. Советую использовать стандартные вещи, такие как кружки и полосочки, для особых проектов можно ипользовать что-то необычное, а можно нарисовать самому в фотошопе и сделать гиф анимацию. Не переусердствуй, это конечно важный элемент, но сильно много времени на него тратить все же не стоит.
Таблицы
Часто дизайнеры забывают рисовать таблицу. Например, если делаешь интернет-магазин производственного оборудования, то в описании и в карточке товара появляются сравнительные характеристики, веса и еще что-то. Удобно использовать таблицы, когда строчки чередуются цветом, это очень хорошо воспринимается зрителем. В данном случае изображена таблица с чек-боксами, это не обязательно. Не забывайте про таблицы.
Меню
Меню - это навигация по всему сайту. В данном случае показал, что есть всплывающее меню при наведении курсора. Это нужно прорисовывать. Обрати внимание как я показал наведение и интерактивность. Просто скачал курсор png и поставил его на место. Если у тебя большой макет, поставь много курсоров. Например, чтобы показать как работает меню, как выглядят кнопка и ссылка при наведении. При этом не забывай про обычное состояние. Таким образом в статичном макете можно легко показывать как ведут себя элементы юзер интерфейса в интерактивном состоянии.
Помни, что курсоры бывают разные: для PC и для мака.
Гуглятся легко «курсор png». Если показываешь сайт на маке (используешь mock-up c макбуком), то нужно использовать правый курсор, если в PC (например, mock-up с inernet explorer), то левый.
Вот основные вещи про элементы пользовательского интерфейса. Эта информация для того, чтобы узнать все термины, которые используются при проектировании сайтов. И чтобы не забывать прорисовывать такие вещи как всплывающие меню, интерактивность кнопок и так далее. Пусть твои сайты после верстки выглядят такими, как ты их отрисовал. Аминь 🙂
Обходится ни один современный сайт. Однако есть способ, который поможет значительно сэкономить время при верстке и дизайне в том числе UI сайта - это готовые библиотеки UI элементов . На сегодняшний день их существует так много, что получилось собрать в одном довольно большом посте только бесплатные наборы.
В чем плюсы использования готовых UI элементов сайта в проекте?
- Вся нудная работа выверстывания мелких элементов сделана уже за вас.
- Анимация форм , кнопок и прочих элементов уже внедрена и настроена в соответствии с современными тенденциями веб-дизайна.
- Каждый набор HTML UI компонентов - это, как правило, уже не первый релиз. Весь JS отдебажен и стабильно работает. При этом опытным путем выявлены наиболее юзабильные решения того или иного элемента из набора.
Где можно использовать наборы HTML UI элементов?
В первую очередь - это прототипы , так как там не требуется какая-то особая уникальность в дизайне. При разработке прототипа библиотеки применяются практически без косметических изменений. Главное, чтобы работало и отражало суть проекта.Несмотря на то, что UI имеет уже заранее продуманный дизайн, его можно использовать практически в любом проекте. Все элементы подогнаны под современные тенденции веб-дизайна и с большой вероятностью получится так, что хоть один набор из этой подборки будет именно в таком же стиле, как и ваш проект.
Итак. К вашему вниманию 20 бесплатных наборов HTML UI элементов для вашего сайта. Не забываем подписываться на соц. сети.
Element
Довольно приятный HTML тулкит для сайта . Содержит в себе практически все элементы пользовательского интерфейса, включая диалоговые окна , формы , собственные сетки для веб-дизайна, уведомления, меню и много чего другого. Все элементы и их анимация воспринимаются легко и не грузят страницу. Базируется на Vue.js 2.0
Design Blocks
170+ HTML блоков для создания качественного прототипа. Это некий конструктор веб-страниц , с которого можно слепить что угодно. Набор включает в себя полный сет всех элементов, сведенных в одно стилевое оформление.
Material Design for Bootstrap
Бесплатный для css-фреймворка Bootstrap 3 в оформлении Google Material Design . К сожалению, он не обладает такой динамикой как оригинальный Google Material Design на Angular, но пытается ее имитировать.
Flat UI
Достаточно качественный UI набор в плоском стиле , который основан на адаптивном CSS фреймворке Bootstrap 3 . Огромным плюсом является наличие PSD исходников.
Pure UI Kit
Если вам нужны сетки, формы, кнопки, таблицы или меню, то этот UI фреймворк может вам подойти. Он очень легкий. Вес всего 3.8KB.
Flat design UI – HTML5 + CSS3
Не отличающийся особым качеством минимальный набор UI элементов в исполнении HTML5 + CSS3 . Помимо этого имеет оригинальный дизайн.
Metro UI CSS
Метро-интерфейсы отошли в прошлое, но даже сегодня данная стилистика привлекает огромную аудиторию. Признаюсь, я один из них. Даже сегодня существуют задачи, где METRO UI может понадобиться. К вашему вниманию довольно большой и качественный UI Фреймворк на HTML в стиле METRO . Практически все элементы в своеобразном оформлении доступны бесплатно: это плиточные экраны, формы, чекбоксы, радиокнопки, кнопки, меню, пагинации и еще огромное количество всякого интересного. Всего фреймворк вмещает в себя 70+ компонентов UI. А еще это работа украинского разработчика.
Propeller
Бесплатный CSS-фреймворк в стиле Material Design на Bootstrap . Включает в себя около 25 компонентов, которые, как ни странно, имеют довольно большое сходство с оригинальной динамикой Material Design на Angular. Также есть премиум-версия.
Material Design Lite
Один из наиболее развитых Material Design UI фреймворков на HTML . В его арсенале есть огромнейшее количество компонентов. Это целый комбайн. Думаю, что это одна из лучших реализаций языка Material Design на HTML.
Semantic UI
Приятный, легкий и аккуратный фреймворк для создания пользовательского интерфейса и прототипирования. Содержит практически все необходимое. Например, кнопки, табы, типографию, переключатели и пр. Активно переводится на русский язык. Он строился с нуля и не имеет отношения к Bootstrap, в отличие от большинства аналогов из этой статьи.
В этом уроке мы расскажем и покажем наглядно, как можно использовать UI элементы из библиотеки, включенной в поставку решения, а также как пользоваться возможностями верстки, вставлять иконки, кнопки и элементы оформления на сайт.
Внимание! Для успешной работы с html-кодом понадобятся хотя бы минимальные знания тегов и принципов записи. Если возникают сомнения или нужно попрактиковаться, вы можете смело экспериментировать с версткой на тестовой странице. Изменение html-кода может испортить верстку отдельной страницы, но не сломает весь сайт.
Представленные на демо-сайте UI элементы являются html-кодом, который вы можете скопировать и вставить в нужное место на странице сайта. В качестве примера добавим на сайт элемент «Шестеренки» и заголовки разного размера.
Перейдите на нужную страницу сайта, где вы хотите разместить элементы, активируйте режим правки и откройте страницу для редактирования. Переключитесь на совмещенный режим отображения, чтобы было видно одновременно и html-код, и внешний вид содержимого.
Откройте на вашем сайте раздел с библиотекой UI-элементов, перейдите на страницу с нужным содержимым, войдите в режим редактирования и также переключитесь в нем на совмещенный режим отображения.
Скопируйте код интересующих вас элементов и вставьте на странице своего сайта.
В нашем примере скопирован код заголовка и код элемента «Шестеренки». Вы можете вносить изменения в код – например, убрать тестовый текст под заголовком или поменять подпись под шестеренками.
После сохранения изменений на странице отображаются нужные элементы:
Времена когда дизайнеры всех мастей, щеголяли друг перед другом, броскими, я бы даже сказал, слишком вычурными дизайн-проектами, с использованием всевозможных графических навортов, прошли безвозвратно, настаёт время новых дизайнерских решений, позволяющих сконцентрировать внимание пользователей на наиболее важных составляющих веб-проекта, нежели его красочная обёртка.
Использование плоских элементов интерфейса, незаметно, но уверенно так, перетекло в с выходом на сцену Windows 8 и её довольно минималистичным стилем «Metro». Плоский дизайн с его минималистическим подходом, сосредоточен прежде всего на удобстве использования на различных типа пользовательских устройств, как на настольных ПК, так и на смартфонах с сенсорным управлением. Отличительной особенностью плоских дизайнов, являются четкие линии, двумерные объекты, яркие цвета, четко выделенные ссылки и шрифт текста без засечек. Дабы не отвлекать внимание пользователей от важных элементов, вся декоративная мишура, полностью отсутствует.
Если вы следите за новыми тенденциями в веб-дизайне и уже успели заделаться сторонником дизайнерских решений в плоском стиле, предлагаю на ваше обозрение 10 абсолютно бесплатных наборов элементов пользовательского интерфейса с плоским дизайном, для ваших новых проектов. Все наборы содержат множество разнообразных компонентов, которые идеально подойдут любому веб-дизайнеру: кнопки, элементы ввода, меню, чекбоксы и радио-кнопки, теги, меню, строки прогресса и слайдеры, а также элементы навигации и многое другое.
Прокачайте ваш дизайн в новом привлекательном стиле при помощи этих замечательных наборов элементов интерфейса.
1. Featherweight UI
Привлекательный комплект бесплатных элементов интерфейса от Sarah Hunt, качественно разработан на базе вектора и разделен на слои, бережно упакованные в файл, все слои обозначены интуитивно-понятными названиями. Текст и цвета легко редактируются. В дизайне использовался шрифт , который можно использовать бесплатно из .
С помощью этого набора UI-элементов, вы можете затрачивать гораздо меньше времени на работу, и сосредоточиться на креативности. Набор является абсолютно бесплатным для использования в личных или коммерческих проектах. Вы можете скачать набор, и тут же приступать к работе.
2. Modern Touch UI Kit
Базовая бесплатная версия великолепного набора элементов пользовательского интерфейса в PSD формате, с помощью которого вы сможете создать функциональный сайт с безупречным оформлением.Баланс типографии, общего веса и позиционирования элементов, выверенные отступы, поля и цветовая палитра. Общий стиль с характерным акцентом на содержание. Полная HTML версия этого замечательного комплекта, доступна зарегистрированным пользователям по подписке на PixelKit.
3. Vertical Infinity
4. Square UI Free
Ещё один замечательный и упакованный набор от Designmodo
, представлен в свободном доступе, если не считать формальную подписку на новости, для получения ссылки на скачивание. Уверен, это маленькое препятствие никого не остановит, если нужен качественный продукт. А комплект действительно качественный и содержит многообразие, отлично прорисованных веб-компонентов для дизайна сайтов. Скачав бесплатную версию и в случае если вам понравился набор, вы можете прикупить при желании и расширенную премиум-версию комплекта. Хотя и free-версии предостаточно полезнейших дизайнерских плюшек, для создания полноценного сайта.
5. Flat Design UI Components
Легковесный (407 Kb) набор компонентов пользовательского интерфейса, выполненных в плоском стиле с преобладанием синеватых тонов в общей цветовой палитре. Все элементы в этом наборе доступны в одном, хорошо организованном PSD файле и их можно легко редактировать. Как видите, буйства красок нет, все строго и нацелено исключительно на удобство восприятия содержания.
6. Metro Tiles UI Kit
Бесплатный, довольно богатый и великолепно прорисованный набор UI-компонентов от PixelKit. Комплект включает в себя множество элементов пользовательского интерфейса, распределенные на слои и объединенные в PSD файле, его дизайн идеально подойдет для разработки веб-проектов и мобильных приложений. С первого взгляда на оформление компонентов, угадывается стиль графического интерфейса Wihdows 8, точно отчерченные края элементов, мягкие сине-голубые тона и отлично-читаемый шрифт.
7. Flat Rounded Square UI Kit
Впечатляющий пакет элементов веб-интерфейса, представленный в свободный доступ умельцами из , бесспорно заслуживает вашего внимания. Авторы в своей работе, немного отступили от линии стопроцентного плоского дизайна, добавив отдельным компонентам чуточку объемности, с помощью слегка скругленных углов, и легкой тени нижним границам элементов. Такое дизайнерское решение оправдано в переходный период сменяющихся приоритетов в веб-дизайне. Все необходимые, для продуктивной работы сайтостроителей элементы, в полном комплекте. Остается скачать, распаковать архив и начать творить, пусть не вечное, но хотя бы прекрасное и доброе)))
8. Flat Design UI Pack
Настоящий тяжеловес (125 МБ!) среди подобных PSD-комплектов элементов пользовательского интерфейса. Детально проработанный до мелочей, плоский дизайн компонентов набора, впечатляет и настраивает на творческую работу. Данный UI-комплект можно бесплатно использовать как в частных, так и в коммерческих проектах, лишь бы в радость, да на пользу дела.
10. Bootflat 1.0.1
В завершение обзора, предлагаю на ваше рассмотрение, своего рода коллекцию HTML, CSS, JS и компонентов, для быстрой разработки интерфейсов веб-сайтов — «Bootflat», построенную на широко-известной платформе Twitter Bootstrap 3. Интуитивно понятный инструмент, включающий в себя легкие плагины и компоненты, но с богатыми функциями Bootstrap. Поддержка HTML5 и CSS3, отличная цветовая схема и стиль основанный на улучшенном стиле Bootstrap 3. Bootflat полностью адаптивна, а значит не возникнет проблем с отображением элементов на экранах всех типов пользовательских устройств. Все компоненты платформы легко расширяются и редактируются. Bootflat является проектом с открытым исходным кодом, так что смело используйте все его возможности без ограничений и создавайте свой собственный стиль.
Плоский дизайн представляет собой особенный тренд, за которым будущее и важно не упустить момент, вовремя заскочить на несущийся поезд, так как у каждой новой тенденции есть свой жизненный цикл и ни один, даже самый популярный дизайн-тренд не может быть на гребне волны вечно. В настоящее время, по многим причинам, стоит использовать этот интересный дизайнерский стиль оформления при разработке новых проектов, не кидаться во все тяжкие в погоне за модой, а делать все с чувством, с толком и расстановкой. Можно с уверенностью сказать, что такие трендовые веб-сайты будут интуитивно-понятны, легки для восприятия и создадут положительное впечатление, и не менее положительные отзывы от сообщества интернет-пользователей.
В принципе, для профи нет ничего проще чем набросать от руки схематичный макет сайта. Процесс становится чуть сложнее, когда дело доходит до дизайна элементов пользовательского интерфейса (и их деталей). Здесь уже не обойтись без фантазии, опыта и вдохновения.
Если вы не знает от чего оттолкнуться (или у вас уже есть идея, но вы хотите сэкономить время, воспользовавшись шаблонами) вам могут прийти на выручку сервисы по типу UI Patterns с вариантами реализаций классических или уже готовые специальные наборы для скачивания. Поставляются последние, как правило, в формате PSD, поэтому всем кто умеет работать в Photoshop будет не сложно переделать их на свой лад.
Green WebUI Kit
Набор интерфейса Green WebUI Kit - включает в себя практически все элементы которые могут понадобится - верхнее меню навигации, кнопки (OK, Cancel, Buy Now, Download Now), стикер «распродажа», форму для логина, «болванку» слайдера и элементы подписки - RSS, E-mail и прочее.
Все элементы выполнены качественно, дизайн современный. Каждому элементу соответствует свой слой (файл PSD), поэтому работать с ними очень удобно. В принципе, из этого можно быстренько набросать дизайн такого себе блога — слайдер, подписки уже есть. Если бы пришлось сопоставлять , то этот бы подошел больше китайцам.
Yellow User элементы интерфейса
Yellow User Interface Elements - набор содержит 11 элементов интерфейса желтого цвета в их числе кнопки (Download, Submit, Buy Now, поиск), секции (Featured и дата), полосы прокрутки и прогресса. Все слои в PSD файле удобно сгруппированы, поэтому вы без труда можете вносить коррективы в тот или иной элемент UI. Цвет так же легко может быть изменен на тот что требуется вам (в наборе Green WebUI, разумеется, тоже).
К сожалению, Yellow UI Elements включает в себя меньшее количество элементов, нежели Green WebUI Kit, поэтому не исключаю что часть элементов вам придется позаимствовать из других наборов или дорисовывать самостоятельно.
Soft UI Kit
Приятный светлый набор элементов интерфейса для ваших веб-разработок. Можно применять как при создании какого-то сайта, так и для веб-приложения. Среди всех PSD исходников имеются наиболее часто встречаемые элементы для веба — + поиск, выпадающий список, чекбоксы и радиобоксы, текстовые подсказки и т.п., имеются даже звездочки для голосования. Тому, кто умеет работать в фотошопе, вообще не составит трудности подправить данный PSD под свои нужды. В целом, набор по количеству и качеству весьма хорош.
Transparent Glass UI
Как вы уже заметили из названия набора (Transparent Glass UI) и превью, отличительной его особенностью есть прозрачность элементов. Это, во-первых, достаточно эффектно выглядит и хорошо впишется в современный дизайн, а во-вторых, подойдет практически под любой цвет фона. PSD набор содержит все типовые элементы веб интерфейса — выпадающие списки, переключатели, кнопки, формы, ползунки и поля для ввода.
Думаю, из представленных наборов элементов интерфейса UI для фотошопа кое-что для себя найдете. Первый и последний комплекты особенно хороши. Желаю удачных экспериментов и красивого интерфейса!
P.S. Если вам нужно найти гибкую систему под интернет магазине — magento сommerce может приятно удивить по возможностям, функциональности и расширяемости проекта.