Вебдизайн

доц., Скиба В. М.

1. Вступ

Принципи проектування
та збір інформації

Що розглянемо?

Основи дизайну.
       
Вебдизайнер.

Основні етапи роботи над вебпроєктами.

Принципи якісного вебпродукту.

Арсенал дизайнера.

Взаємодія дизайнер-замовник.

Основи дизайну  

Дизайн

вид проєктної діяльності, що поєднує  дослідницько-інженерну та предментно-творчу складову направлену на процес створення певного об'єкта. 

Невже дизайн не мистецтво?

Дизайн = проєктування

Дизайнер - проєктує,
а художник - створює...

Хто ж такий дизайнер
у цифровому середовищі?

Дизайнер

фахівець, що допомагає зрозуміти, переосмислити та представити складні процеси (взаємодії) в більш просту та головне зрозуміло для кінцевого користувача форму, при цьому вирішуючи їх потреби та потреби бізнесу (замовника). 

Детальніше

Детальніше

Варіативність дизайнерів:

- вебдизайнер;

- дизайнер інтерфейсів (UI дизайнер);

- Interactoin designer;

- UX дизайнер (UX/UI дизайнер);

- сервіс дизайнер;

- CX дизайнер.

Головні підходи:

- науковий;

- дизайн мислення.

Науковий підхід:

- спостереження;

- аналіз;

- гіпотеза;

- експеримент;

- висновки.

Дизайн мислення:

- дослідження + емпатія;

- визначення проблеми/
підтвердження проблеми;

- генерування ідей;

- ідеація/прототипування;

- тестування.

дивергентна

ковергентна

дивергентна

ковергентна

Вебдизайнер

Вебдизайн

сукупність процесів, що направлені на покращення досвіду взаємодії із певним вебпродуктом (сторінкою, сайтом, сервісом, системою). Створюючи при цьому цінність
як для користувачів, так і для бізнесу.

 

Детальніше

Зона відповідальності дизайнера

Дизайнер несе відовідальність не лише за якість результату чи за процес реалізації, а й дуже важливим є етична сторна його діяльності.


Темні патерни, залежність, вплив на користувача, соц.-культурний вплив, викревлення інформації, "прибуток-користь" тощо...

Основні етапи роботи над вебпроєктами

Основні стадії:


- ініціації;

- прототипування;

- перевірки;

- подальша підтримка.

На стадії ініціації:


- дослідження;

- збір вимог;

- аналіз результатів дослідження;

- ідеація і пріоретизація:

- формування завдання... 

На стадії прототипування:


- раннє прототипування;

- візуальний дизайн;

- створення анімації;

- документація;

- комунікація із тех. фахівціями... 

На стадії перевірки:


- тестування;

- аналіз/аудит;

- аналітичний аналіз...

На стадії підтримки:


- подальший аналіз;

- внесення ітеративних покращень...

Принципи якісного вебпродукту

Корисний, простий и зручний,
"приємний" в користуванні продукт...

Дизайнер створює цінність...

Якісний дизайн несе цінність для користувача, бізнесу, команди...

 

Потреба,
проблема
користувачів

Важливість
для бізнесу

Технологічна можливість
реалізації

Арсенал дизайнера

Google

якщо щось слід знайти - Google)

Office 365

хмарні можливості звичного Office, Skype
+ інтеграція із проєктами у Teams.
 

GSuite

хмарний офіс, відеозв'язок + аналітика .
 

Figma + відеозв'язок

аналогічно Miro, Whiteboard тощо.
 

Який би інструмент ви не вибрали, вивчіть ключові можливості і освойте всі гарячі клавіші,
а далі вже визначитеся)))

Тим паче, що інколи сам проєкт диктує інструмент🤔

Будь-який інструмент нам потрібен для прискорення роботи, тому нам не потрібно досконало опановувати весь функціонал, лише потрібно навчитися працювати швидко.

Найпопулярніші...

Найпопулярніша у 2024

Дизайнер ніколи не працює один, ніколи...

Основні сервіси командної роботи:


- Microsoft Teams.

Основні сервіси командної роботи:


- G Suite for Education.

Основні сервіси командної роботи:


- Figma + (Meet/Zoom, Slack).

Основні сервіси командної роботи:


- Notion.

Креатив, брейншторм, інші активності:


- Miro.

Креатив, брейншторм, інші активності:


- Microsoft Whiteboard.

Управління проєктом:


- Trello.

Управління проєктом:


- Teams + Tasks.

Управління проєктом:


- Asana.

Управління проєктом:


- Teams + Asana.

Управління проєктом:


- Basecamp ...

Time-tracker:


- Toggl, TMetric тощо

Взаємодія
дизайнер-замовник

Установча зустріч

перша зустріч учасників вебпроєкту та замовником, формує основні елементи майбутнього проекту та інші заходи із планування.

Також ця зустріч знайомить учасників проєкту
та дає можливість обговорити роль та зону відповідальності кожного.

Під час такої зустрічі маємо встановити:


- оснновні цілі та завдання;

- сформувати проблему та як план щодо її вирішення;

- учасники проєкту, команди, ЛПР тощо...

При підготовці до зустрічі варто зібрати всю наявну інформацію про майбутній проєкт (стан та статус проєкту, команда, цілі, принципи тощо...)

Дуже важливо дізнатися про попередні напрацювання по проєкту (наявні матеріали, проблеми, обмеження, ризики...)
 

Для вірного уявлення про вебпроєкт всіх його учасників слід з'ясувати/узгодити таке:

-  проблема, що буде вирішуватися;

- мета проєкту;

- яку користь проєкт буде приносити користувачам.
 

Також варто деталізувати користувачів (ЦА):


- їх приналежність, проблеми,

- як вони їх зараз вирішують,

- чим користуються,

- чи можливе їх залучення до досліджень...  
 

Далі акцентуємось на конкурентах:

- прямі/непрямі),

- які стратегії чи філософії конкурентів,

- які є тренди в індустрії, домені...
 

Далі з'ясовуємо що вже реалізовано:

- дослідження, аналіз, концепти, попередній досвід...

- також деталізуємо обмеження...  пристрої... контекст...

- згадуємо про ризики...


Що може закрити проєкт?

Далі про контент...

й інше)

Дуже важливо  визначити та узгодити процес затвердження дизайну:


- хто?

- як?

- коли?

- які очікування?

Варто занотувати всі домовленості, за можливості при погоджені записати зустріч, особливу увагу приділіть вашим обіцянкам та строкам реалізації.
 

Дизайн бриф (бриф проєкту)

письмовий документ опису проєкту, що визначає бажаний результат та особливості проєкту.


Основні блоки:

- опис проєкту (Project Description );
- проблема + дизайн-задача (Problem Statements)
- ідеальний результат (Picture of Success);

- вимоги по проєкту (Requirements);
- ЦА (Audience);
- дизайн принципи (Design Principles).

Список рекомендованої літератури:


1. Норман Д. Дизайн звичних речей / Дональд А. Норман. – Х.: Книжковий клуб «Клуб Сімейного Дозвілля», 2019. – 320 с.

2. Віктор Папанєк. Дизайн для реального світу / Папанєк В. - ArtHuss, 2020. - 420 с.

Дякую за увагу!