Данный конкурс рассчитан на развитие способностей к созданию простых и изящных элементов интерфейса. Мы ценим специалистов широкого профиля: дизайнеров, которые разбираются в продуктовой части и могут неплохо писать код, разработчиков, которые в состоянии самостоятельно и со вкусом оформить результаты своей работы — добавить новую кнопку на сайт, вывести красивое уведомление об ошибке или оформить целый раздел сайта. Демонстрации этой способности и посвящен конкурс — мы будем создавать стильные элементы интерефейса современного сайта.
Задание
Разработать UI Kit — набор основных элементов интерфейса современного веб-проекта. В наборе должны быть представлены базовые блоки: кнопки в различных состояниях, показано оформление ссылок, абзацов текста, заголовков и др. Подробный список обязательных элементов описан ниже. Рекомендуется работать в простом, легком и светлом стиле, не загромождая элементы всевозможными «дизайнерскими» изысками.
Полученные элементы представить на одном макете, красиво расположив их в виде модульной сетки.
Анимация — неотъемлемая часть современного дизайна. Результат вашей работы можно оценить только «в движении». Поэтому, все элементы необходимо сверстать, используя минимум стилей и тегов разметки. Верстка должна показывать задуманные анимации: кнопки и ссылки с hover и active эффектами, дропдауны, чекбоксы и другие динамичные элементы.
Обязательные элементы
- Кнопки во всех состояниях: default, hover, active, disabled
- Обычная кнопка
- Главная кнопка ( submit )
- Кнопка с иконкой и текстом
- Кнопка только с иконкой
- Кнопка со счетчиком (например, «Поделиться» с количеством шейров )
- Ссылки во всех состояниях
- 2 абзаца текста
- Заголовки 6 уровней
- Линия-разделитель (<hr>)
- Навигация вида «хлебные крошки»
- Форма
- Текстовые поля (<input> и <textarea>) — в состояниях default , focus, disabled, error
- Заголовок поля (<label>)
- checkbox — в состояниях default , hover, toggled (активированный флажок), disabled
- Поле вида <select> с выпадающими меню
- Строка поиска
- Сообщение об ошибке
- Информационное сообщение
- Сообщение об успешной операции (например, сохранении формы)
- Панель с запросом подтверждения действия и кнопками «Подтвердить» и «Отмена»
- Таблица с данными
- Заголовки столбцов
- 4–5 столбцов
- 5 строк данных
Дополнительные элементы
По желанию, вы можете добавить в UI Kit любые элементы интерфейса, которые покажутся вам интересными. Например:
- Аудио-плеер
- Видео-плеер
- Карта с отмеченным объектом
- Блок со ссылкой на пользователя
- Аватарка
- Имя пользователя
- Описание (Bio) пользователя
- Кнопки социальных сетей
- Графики
- Элементы навигации
- Календарь для выбора даты
- Анимация кнопок
Рекомендации
Как обычно, начать следует с изучения мирового опыта. На дизайнерских сайтах можно найти различные концепты по запросам «UI kit», «GUI» и др. Например:
- https://dribbble.com/search?q=flat+ui+kit
- https://ui8.net/categories/ui-kits
- https://www.behance.net/search?content=projects&sort=appreciations&time=week&search=ui%20kit
Рекомендуем ознакомиться с наиболее влиятельными гайдлайнами от компаний Apple и Google:
Иконки можно рисовать самостоятельно, либо использовать готовые из набора Font Awesome.
Приз
В качестве презента победитель получит фирменный блокнот от компании ВКонтакте, инвайт на ресурс для разработчиков «Habrahabr» и футболку клуба CodeX.
Референсы
Приводим несколько неплохих образцов различных дизайнерских концептов.
Дизайн-макеты и сверстанные страницы присылайте на почту [email protected] или отправляйте личным сообщением нашей группе ВКонтакте.
Желаем удачи!
