3.6 KiB
Графический редактор Lunacy
- Источник (разметка):
src/pages/cases/lunacy.html→ после сборкиpublic/cases/lunacy.html - eyebrow: Icons8 · desktop
- meta description: Кейс: работа над интерфейсом Lunacy в Icons8 — сценарии, итерации UI и скриншоты процесса.
Заметка по путям к медиа: ниже пути от корня сгенерированного сайта (public/), папка assets/lunacy/. Картинки подгружаются последовательно (data-case-sequential-images + data-src); cover.webp на странице кейса не используется (только обложка карточки на главной).
Оглавление секций
- Ввод — роль в Icons8, ссылка на продукт.
- Обзор —
Lunacy_app_overview.webp. - Blob на холсте —
blob_settings_on_canvas.webp. - Компоненты и сравнение —
compare_components_modal_window,components_update_indicator_location_panel. - Прототип в панели —
modal_window_for_prototype_create_on_canvas,modal_window_for_prototype_panel_states. - Shadow Pro —
shadow_pro_settings_panel,shadow_pro_settings_ideas, модалки auto on/off. - Панель blob: версии v1–v9 — сетка 3 колонки по ширине контента, файлы
blob_settings_panel_v1…v9. - Слайдер: версии — сетка 4 колонки:
slider_v1…v13,slider_14,v15…v18. - Слайдеры: общий кадр —
sliders_all_set.webp.
Ввод
Работа над интерфейсом Lunacy: user flow, прототипы, доработка функциональности и визуальной логики. Продукт: icons8.com/lunacy.
Обзор
Экран-обзор приложения — отправная точка для материалов кейса.
Blob на холсте
Сценарий настроек blob в контексте холста; далее в HTML — серия версий панели v1–v9.
Компоненты и сравнение
Модальное сравнение компонентов и индикатор обновлений в панели.
Прототип в панели
Создание прототипа на холсте и состояния панели для режима прототипа.
Shadow Pro
Панель, идеи и модалки с вариантами авто-настройки.
Панель blob: версии v1–v9
Девять итераций в одной сетке (три колонки на широком экране); клик по ячейке открывает полноэкранный просмотр.
Слайдер: версии v1–v18 и кадр 14
Порядок по именам файлов; slider_14 без суффикса v стоит между v13 и v15. Сетка на странице — четыре колонки по ширине контента.
Слайдеры: общий кадр
Сводный экран sliders_all_set после ряда по версиям.
Блоки «Контакты» и футер на странице кейса совпадают с главной — см. texts/main.md.