Bloomly_zadanie

1.

ПРАКТИЧЕСКОЕ ЗАДАНИЕ · UI-ДИЗАЙН
Bloomly
Мобильное приложение
магазина цветов
Техническое задание для студентов по компьютерной графике и
UI-дизайну: холст, палитра, типографика и 5 экранов
приложения

2.

✿
Цель работы
Не просто скопировать картинку, а
научиться самостоятельно собрать
современный мобильный UI
Сетка
Палитра
Типографика
Карточки
Кнопки
Изображения
используя заданную систему дизайна магазина цветов Bloomly
Навигация
Результат: 5 экранов приложения на одном презентационном холсте

3.

1
Размер холста
Горизонтальный презентационный макет с пятью экранами в один ряд
1536 ×
1024
RGB
px — размер холста
72–144 PPI
390 × 844
28–32
px — один экран
px — скругление углов
20–24
5
px — между экранами
экранов в один ряд
#B8B8B8 · фон холста

4.

2
Фон презентационного холста
Нейтральный серый фон
Допускается очень лёгкий серый градиент между
двумя соседними оттенками.
Фон не должен отвлекать
внимание от интерфейса
#C8C8C8
#B8B8B8
#AFAFAF
Градиент — светлый
Основной цвет
RGB 184, 184, 184
Градиент — тёмный

5.

3
Основная палитра
Яркие тёплые оттенки, связанные с цветами и букетами
#FF5A45
#FF8A3D
#FFB38A
#FFE0CF
#FFF7EF
#FFFCF8
#F5B6B6
Основной
коралловый
Яркий оранжевый
Персиковый
Светло-персиковый
Кремовый
Тёплый белый
Розовый
#FCE1DF
#FFC857
#6F9B5B
#252525
#777777
#E8DED7
Светло-розовый
Жёлтый
Зелёный
Тёмный текст
Вторичный текст
Разделители
Главный акцент интерфейса — коралловый #FF5A45

6.

4
Соотношение цветов
60%
кремовый / белый
20%
персиковый и светло-розовый
15%
коралловый и оранжевый
5%
зелёный и акценты
Основа экрана и фон карточек
Подложки, баннеры, выделение блоков
Кнопки, цены, активные элементы
Листья, статусы, мелкие детали

7.

5
Фотографии букетов
Студент выбирает фотографии самостоятельно — копировать образец не требуется
Разрешается использовать
Букеты
Розы
Композиции
Требования к фотографиям
Отдельные цветы
✓
Соответствуют тематике магазина цветов
✓
Хорошее качество изображения
✓
Сочетаются с цветовой палитрой интерфейса
✓
Без лишних надписей и водяных знаков
✓
Желательно нейтральный или светлый фон
Тюльпаны
Подарочные
наборы
Любые подходящие изображения цветов
Композиция и структура дизайна сохраняются

8.

6
Шрифты
Современные шрифты без засечек + декоративный шрифт для названия
ОСНОВНОЙ
АЛЬТЕРНАТИВЫ
ДЕКОРАТИВНЫЙ
Inter
Playfair Display
Аа Бб Вв 123
Montserrat
Manrope
Roboto
Nunito Sans
Интерфейсный гротеск для всех
текстов приложения: заголовков,
цен, описаний и кнопок.
Допустимы вместо Inter — важно
выдержать единый шрифт во всех
пяти экранах.
Для более выразительного названия
магазина и логотипа.
Bloomly

9.

7
Размеры текста
Элемент
Пример
Размер
Начертание
Цвет
Название магазина
Bloomly
32–40 px
Bold / SemiBold
#FF5A45
Заголовки экранов
Каталог · Корзина · Избранное
22–24 px
600–700
#252525
Рекламный заголовок
Свежие цветы каждый день
24–28 px
700
#FFFFFF
Названия товаров
Нежность
16–18 px
600
#252525
Цена
15 990 ₸
16–20 px
700
#252525 / #FF5A45
Описание
Нежный букет из пионовидных роз
13–14 px
интерлиньяж 18–21
400
#777777
Текст кнопок
Добавить в корзину
14–16 px
600–700
#FFFFFF

10.

Пять экранов приложения
Схема расположения на презентационном холсте
Bloomly
Каталог
Корзина
⌕ Поиск букетов
Букеты
Свежие цветы
каждый день
Короткое описание
Нежность
›
✕
15 990 ₸
− 1 +
Розы
Короткое описание
Солнце
›
✕
12 490 ₸
− 1 +
Тюльпаны
Короткое описание
›
Нежность
15 990 ₸
Коралл
★★★★★ 4.9
18 900 ₸
Популярные букеты
− 1 +
Композиции
Bloomly
Короткое описание
›
Состав
Свежие цветы для любого повода
Начать
Солнце
Нежность
12 490 ₸
15 990 ₸
Подарки
Короткое описание
Размер
Доставка
Товары
47 380 ₸
Доставка
1 500 ₸
Итого
48 880 ₸
›
Добавить в корзину
Оформить заказ
4 · Карточка товара
5 · Корзина
Уже есть аккаунт? Войти
1 · Приветствие
2 · Главная
✕
3 · Каталог

11.

Экраны 1–2
8
Обязательные элементы
1
Приветствие
2
Главная
Логотип
Логотип
Категории
Название магазина
Поиск
Популярные букеты
Большая фотография цветов
Корзина
Карточки товаров
Короткий слоган
Рекламный баннер
Нижняя навигация
Кнопка «Начать»
Ссылка «Войти»

12.

9
Экран 3 — Каталог
Каждая категория: фотография, название, короткое описание, стрелка перехода
Букеты
Розы
Тюльпаны
Композиции
Подарки
Короткое описание
категории
Короткое описание
категории
Короткое описание
категории
Короткое описание
категории
Короткое описание
категории
→
→
Фотография
Название
→
→
Короткое описание
Стрелка перехода
→

13.

Экраны 4–5
10
Обязательные элементы
4
Карточка товара
5
Корзина
Большая фотография
букета
Состав
Список букетов
Удаление товара
Название
Размер
Фотография
Стоимость товаров
Цена
Доставка
Название
Доставка
Рейтинг
Кнопка «Добавить в
корзину»
Цена
Итоговая сумма
Количество
Кнопка «Оформить
заказ»
Описание
Кнопки − / +

14.

11
Требования к стилю
Интерфейс должен быть
современным
лёгким
минималистичным
ярким
тёплым
аккуратным
16–20 px
14–18 px
12–20 px
Скругление карточек
Скругление кнопок
Основные элементы
удобным для мобильного
Мягкие тени
Не перегружать экран большим количеством цветов,
декоративных элементов и текста
Небольшая прозрачность и размытие —
карточка словно парит над фоном

15.

ГЛАВНОЕ УСЛОВИЕ
Фотографии букетов, цветов и
композиций студент выбирает
самостоятельно
Копировать фотографии из образца не требуется. Необходимо сохранить:
структуру интерфейса
цветовую концепцию
типографику
размеры элементов
современный стиль