Daily UI

Проект — Daily UI

Роль в проекте

UI-дизайн, веб-дизайн

Описание

Ежедневный челлендж на 100 дней, где на почту приходит задание — создать тот или иной элемент интерфейса.

#001 — Sign Up / Регистрация

Подсказка: Это может быть страница регистрации на сайте, модальное окно, форма, экран в мобильном приложении и так далее. (Вы сами выбираете, как выполнить задание!)

В итоге получился концепт страницы регистрации на примере банковского приложения. #001 — Sign Up

#002 — Credit Card Checkout / Оплата кредитной картой

Подсказка: Разработайте форму или страницу с оплатой по кредитной карте. Не забудьте такие важные элементы как номер карты, дату, код безопасности и так далее.

#002 — Credit Card Checkout

#003 — Landing Page / Посадочная страница

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

Решил сделать конепт лендинга для игры S.T.A.L.K.E.R. 2.
Здесь сделан акцент на атмосферу игры. Цветом расставлены акценты на кнопки призыва действий. #003 — Landing Page / STALKER 2

#004 — Calculator / Калькулятор

Подсказка: Разработайте дизайн калькулятора. Это будет стандартный, научный, или специальный калькулятор расчета задолженности? Он будет для смартфона, планшета или для веба?

Так как, помимо веб-дизайна, увлекаюсь пиксель-артом, то мне было интересно сделать калькулятор для виртуальной консоли Pico-8. Задача становится интереснее из-за технических ограничений консоли: 16 цветов и размер экрана 128х128. #004 — Calculator / Pico-8

#005 — App Icon / Иконка приложения

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

Иконка для приложения поиска баров. #005 — App Icon

#006 — User Profile / Профиль пользователя

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

Решил сделать концепт страницы игрока для сайта футбольного клуба. На странице пусть располагается важная статистика и общие данные игрока. #006 — User Profile / Локомотив

#007 — Settings / Настройки

Подсказка: Разработайте настройки для чего-нибудь. Это будут настройки безопасности или приватности? Игровые настройки? Подумайте о том для чего это будет и что для этого важно?

Страница настроек для приложения чтения электронных книг. #007 — Settings

#008 — 404 / Страница 404

Подсказка: Спроектируйте страницу с 404 ошибкой. Будет ли она вписываться в стиль бренда? Будет ли она дружелюбна к пользователю.

Дизайн страницы с 404 ошибкой решил выполнить в виде синего экрана, т.к. образ понятен практически каждому человеку.
Для удобства навигации размещена ссылка на главную страницу. #008 — 404 / Страница 404

#009 — Музыкальный плеер / Music Player

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

#009 — Музыкальный плеер

#010 — Social Share / Поделиться в соцсетях

Подсказка: Нарисуйте кнопку или иконку «Поделиться», учитывая размер, вид, расположение и цель.

Мокап функции «Поделиться» для мобильного приложения. #010 — Social Share

#011 — Flash Message (Error/Success) / Всплывающее сообщение (Ошибка/Успех)

Подсказка: Разработайте всплывающее сообщение для ошибки и для успеха. Это будет сообщение для формы? Для загрузки?

Решил сделать простые сообщения для модной нынче технологии сканирования отпечатка. #011 — Flash Message (Error/Success)

#012 — E-Commerce Shop (Single Item) / Интернет-магазин (один товар)

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

Немного развлёкся и представил как бы выглядел сайт Кореллианской Инженерной Корпорации из мира Звездных Войн в нашем мире. Не кидайте камнями за несоответствия канону :smile: #012 — E-Commerce Shop (Single Item) / Звездные войны