Проєктування і дизайн
Сайт аранжувальника Олексія Таланова
Завдання: розповісти про роботу скрипаля та аранжувальника доступною мовою і зручно представити роботи у нотному та аудіоформатах.
Дослідження
Користувачі
Дослідження користувачів допомагає глибше зрозуміти їхні потреби та побудувати гіпотези щодо структури, функцій та вмісту нового сайту.
Основні групи користувачів:
- Диригенти
- Музиканти-виконавці
- Композитори-аматори
- Продюсери
- Саунд-продюсери
![needs](img/at_needs-7.png)
Думки, потреби та цільові дії користувачів
Також враховуються такі базові для кожної людини потреби, як: довіра, безпека, поінформованість, доступність, творча реалізація тощо.
Аналіз конкурентів
Вивчення сайтів конкурентів надає можливість виявити актуальні тенденції у галузі, а також здобути цінні інсайти та нові корисні ідеї.
![refs](img/at_refs-1.png)
![refs](img/at_refs-2.png)
![refs](img/at_refs-3.png)
![refs](img/at_refs-4.png)
Приклади сайтів авторів та аранжувальників
Проєктування
Сценарії взаємодії
Сценарії взаємодії описують шляхи, якими користувачі досягають певних цілей на сайті. Вони можуть бути лінійними, у форматі воронки тощо.
Наприклад, відвідування магазину нот:
- Увійти на сайт
- Перейти до розділу робіт
- Вивчити список нот
- Обрати ноти за складом або жанром
- Перейти в магазин для купівлі
Весь процес наочно представлено у вигляді схеми, що значно полегшує його сприйняття.
![user flow](img/at_flow.png)
Приклад схеми переходів по сайту
Структура
Структура організує увесь вміст логічно та інтуїтивно, забезпечуючи користувачам зручний доступ до потрібної інформації.
Детальна схема відображає ієрархію, потреби та цільові дії користувачів.
![sitemap](img/at_sitemap_extended.png)
Приклад карти сайту
Прототип
Використання інтерактивного прототипу дозволяє швидко тестувати рішення, виявляючи потенційні недоліки на ранніх етапах.
У прототипі схематично показано:
- Аудіо, відео
- Фото
- Файли, документи
- Інтерактивні елементи
- Інфографіка
- Текстові елементи
![prototype](img/at_proto_flow.png)
Відкрити інтерактивний прототип в браузері
Дизайн інтерфейсу
Загальні вимоги
Основним побажанням автора було уникнути застарілих візуальних образів та підкреслити сучасний характер роботи аранжувальника.
![refs](img/at_antirefs-1.png)
![refs](img/at_antirefs-2.png)
Типові приклади тематичних сайтів із застарілою стилістикою
Рішення
З урахуванням цих побажань запропоновано нову дизайн-концепцію, яка відзначається легкістю та чистотою, акцентуючи увагу на максимально зручному сприйнятті вмісту.
![swatch](img/at_swatch-01.png)
![swatch](img/at_swatch-02.png)
![swatch](img/at_swatch-03.png)
![swatch](img/at_swatch-04.png)
![swatch](img/at_swatch-05.png)
![swatch](img/at_swatch-06.png)
Фірмова колірна палітра
![grid](img/at_design_grid6.png)
![grid](img/at_design_grid8.png)
Організація вмісту за допомогою сіток.
Для підтримки та розвитку проєкту всі елементи інтерфейсу зібрані у систему.
![typography](img/at_library-1.png)
Шрифт і типографія
![elements](img/at_library-2.png)
Піктограми та інтерактивні елементи
Реалізація
Розробка і наповнення
Сайт реалізовано на платформі для створення інтерактивних продуктів без потреби в програмуванні. Це дозволило втілити всі необхідні функції та запустити проєкт в обумовлені терміни.
![work](img/at_screen-01.png)
![work](img/at_screen-02.png)
![work](img/at_screen-03.png)
![work](img/at_screen-04.png)
Сторінки доповнено якісними фото та обкладинками.
Результат
Продуманий зміст і акуратний дизайн зробили сайт простим і приємним у користуванні. Сьогодні він працює двома мовами, допомагаючи автору отримувати нові замовлення.
![devices](img/at_devices.png)
Сайт, адаптований під мобільні пристрої
© 2017 · Підтримати