2. ✴Получаваме неясни изисквания;
✴Старателно правим няколко варианта за дизайн;
✴Клиентът избира един от тях;
✴Променяме дизайна, според изискванията на клиента;
✴Получаваме съдържанието на сайта или списък с
възможностите на приложението;
✴Променяме дизайна, за да го пригодим към съдържанието...
КАК СМЕ РАБОТИЛИ ДОСКОРО
...И КАК ВСЕ ОЩЕ СЕ РАБОТИ
3. ✴Концентрираме се първо върху детайлите;
✴Вземаме субективни решения;
✴Създаваме елементи, без да знаем какво ще съдържат;
✴Промените са трудоемки, когато имаме повече страници;
✴Дизайнът се прави, за да се хареса от пръв поглед на клиента,
вместо да работи оптимално за нуждите му.
НЕДОСТАТЪЦИ НА ПОДХОДА
...С КОИТО ВСИЧКИ СА СВИКНАЛИ
8. ‣ Стил - цветове, типография, декорация...
‣ Подредба - разположение и размери на елементите,
количеството информация във всеки елемент
‣ Структура - разпределение на информацията по страници
и елементи, подредба на навигацията
‣ Обхват - функционалността, която се предлага (или не) от
сайта или приложението
‣ Цел - причината сайтът или приложението да съществува
ЕЛЕМЕНТИТЕ НА ЕДИН УЕБСАЙТ
...ИЛИ УЕБ ПРИЛОЖЕНИЕ
12. СТРАТЕГИЯ
“Ако знаем, какво искаме продуктът да
постигне за нашия бизнес и за нашите
потребители, ще можем да вземаме по-
информирани решения за всеки аспект от
потребителското изживяване.”
Джеси Джеймс Гарет
13. СТРАТЕГИЯ
✓Какви са целите на продукта?
✓Какви са ползите, които искаме да извлечем?
✓Как да разберем, че сме постигнали целта?
✓Какви са целите на потребителите?
✓Какви проблеми решава продуктът и на какво ниво?
✓Кои са потребителите и как разсъждават?
15. СПЕЦИФИКАЦИЯ
“Стратегията се превръща в
спецификация, когато пренесем нуждите и
целите в конкретни изисквания към
съдържанието и функционалността, които
продуктът ще предлага.”
Джеси Джеймс Гарет
16. СПЕЦИФИКАЦИЯ
✓Стратегия на съдържанието
✓Какво количество съдържание трябва се създаде, как и къде
ще се използва?
✓Изисквания към функционалността
✓Какво ще може да прави продуктът и какво, не?
✓Какво остава за изпълнение на по-късен етап?
18. СТРУКТУРА
“Спецификацията не обяснява, как частите
работят заедно, за да образуват едно
цяло. Това се случва на следващото ниво -
разработка на концептуалната структура
на продукта”
Джеси Джеймс Гарет
19. СТРУКТУРА
✓Архитектура на съдържанието
Как да се разделят логически страниците и секциите на сайта;
как да се подреди и систематизира информацията.
✓Дизайн на интеракциите
Каква поредност от десйтвия трябва да предприеме
потребителят, за да постигне всяка от желаните цели.
21. СКЕЛЕТ
“На този етап, можем почти изцяло да се
съсредоточим върху индивидуалните
компоненти и техните взаимодействия.”
Джеси Джеймс Гарет
22. СКЕЛЕТ
✓Дизайн на информацията
Как ще бъде изложена информацията в сайта или
приложението; Каква ще бъде подредбата и разпределението
на елементите от страниците.
✓Дизайн на интерфейса
Какви елементи ще се използват за да се предостави желната
функционалност, как ще са подредени и как ще си
взаимодействат.
✓Дизайн на навигацията
Разположение и структура на елементите за навигация
23. СКЕЛЕТ
КАК СЕ ПРАВИ?
‣ Скици / Wireframes
‣ На хартия: Pilot Hi-TecpointV5 + Moleskine Squared = ❤
‣ Специализиран софтуер: Balsamiq, OmniGraffle, UXPin
‣ Софтуер за презентации: PowerPoint, Keynote
‣ Графични пакети: Photoshop, Illustrator, Fireworks
‣ Интерактивни HTML прототипи
‣ Twitter Bootstrap - getbootstrap.com
‣ Zurb Foundation - foundation.zurb.com
28. СТИЛ
“ Съдържание, функционалност и естетика
се събират, за да оформят един завършен
дизайн, който радва сетивата, докато
изпълнява задачите, за които е бил
създаден.”
Джеси Джеймс Гарет
29. СТИЛ
✓Естетика
Избор на визуален стил, допълващ всичко останало - цветова
схема, типографска скала, избор на шрифтове, декоративни
елементи и др.
✓Последователност
Обособяване на визуален “речник” - система от
преизползваеми стилове, подсигуряващи постоянството на
визуалния стил между отделните страници и елементи.
✓Използваемост
Подсигуряване на добра четимост, без значение от размера
на екрана, осветлението или зрението на потребителя.
30.
31.
32. ✓Нуждите на потребителя и целите на клиента се поставят
пред личните предпочитания;
✓Дизайнът е обективен, а решенията - обосновани;
✓Клиентът допринася повече за оформянето на дизайна;
✓По-малко и по-незначителни изисквания за корекции от
страна на клиента;
✓Не се губи време в излишна работа по макети и варианти.
ПРЕДИМСТВА
