ݺߣ

ݺߣShare a Scribd company logo

Забравете Фотошоп! Съвременни процеси на дизайн и разработка за уеб

•
•
I
Ivelin Belchev
1 of 34
Downloaded 17 times
ЗАБРАВЕТЕ ФОТОШОП! Съвременни* процеси на дизайн и разработка за уеб
✴Получаваме неясни изисквания; ✴Старателно правим няколко варианта за дизайн; ✴Клиентът избира един от тях; ✴Променяме дизайна, според изискванията на клиента; ✴Получаваме съдържанието на сайта или списък с възможностите на приложението; ✴Променяме дизайна, за да го пригодим към съдържанието... КАК СМЕ РАБОТИЛИ ДОСКОРО ...И КАК ВСЕ ОЩЕ СЕ РАБОТИ
✴Концентрираме се първо върху детайлите; ✴Вземаме субективни решения; ✴Създаваме елементи, без да знаем какво ще съдържат; ✴Промените са трудоемки, когато имаме повече страници; ✴Дизайнът се прави, за да се хареса от пръв поглед на клиента, вместо да работи оптимално за нуждите му. НЕДОСТАТЪЦИ НА ПОДХОДА ...С КОИТО ВСИЧКИ СА СВИКНАЛИ
РЕШЕНИЕТО?
РЕШЕНИЕТО? Да знаем защо правим всичко
РЕШЕНИЕТО? Да знаем защо правим всичко Да знаем за кого го правим
РЕШЕНИЕТО? Да знаем защо правим всичко Да знаем за кого го правим Да знаем какво точно правим
‣ Стил - цветове, типография, декорация... ‣ Подредба - разположение и размери на елементите, количеството информация във всеки елемент ‣ Структура - разпределение на информацията по страници и елементи, подредба на навигацията ‣ Обхват - функционалността, която се предлага (или не) от сайта или приложението ‣ Цел - причината сайтът или приложението да съществува ЕЛЕМЕНТИТЕ НА ЕДИН УЕБСАЙТ ...ИЛИ УЕБ ПРИЛОЖЕНИЕ
Забравете Фотошоп! Съвременни процеси на дизайн и разработка за уеб
Забравете Фотошоп! Съвременни процеси на дизайн и разработка за уеб
СТРАТЕГИЯ
СТРАТЕГИЯ “Ако знаем, какво искаме продуктът да постигне за нашия бизнес и за нашите потребители, ще можем да вземаме по- информирани решения за всеки аспект от потребителското изживяване.” Джеси Джеймс Гарет
СТРАТЕГИЯ ✓Какви са целите на продукта? ✓Какви са ползите, които искаме да извлечем? ✓Как да разберем, че сме постигнали целта? ✓Какви са целите на потребителите? ✓Какви проблеми решава продуктът и на какво ниво? ✓Кои са потребителите и как разсъждават?
СПЕЦИФИКАЦИЯ
СПЕЦИФИКАЦИЯ “Стратегията се превръща в спецификация, когато пренесем нуждите и целите в конкретни изисквания към съдържанието и функционалността, които продуктът ще предлага.” Джеси Джеймс Гарет
СПЕЦИФИКАЦИЯ ✓Стратегия на съдържанието ✓Какво количество съдържание трябва се създаде, как и къде ще се използва? ✓Изисквания към функционалността ✓Какво ще може да прави продуктът и какво, не? ✓Какво остава за изпълнение на по-късен етап?
СТРУКТУРА
СТРУКТУРА “Спецификацията не обяснява, как частите работят заедно, за да образуват едно цяло. Това се случва на следващото ниво - разработка на концептуалната структура на продукта” Джеси Джеймс Гарет
СТРУКТУРА ✓Архитектура на съдържанието Как да се разделят логически страниците и секциите на сайта; как да се подреди и систематизира информацията. ✓Дизайн на интеракциите Каква поредност от десйтвия трябва да предприеме потребителят, за да постигне всяка от желаните цели.
СКЕЛЕТ
СКЕЛЕТ “На този етап, можем почти изцяло да се съсредоточим върху индивидуалните компоненти и техните взаимодействия.” Джеси Джеймс Гарет
СКЕЛЕТ ✓Дизайн на информацията Как ще бъде изложена информацията в сайта или приложението; Каква ще бъде подредбата и разпределението на елементите от страниците. ✓Дизайн на интерфейса Какви елементи ще се използват за да се предостави желната функционалност, как ще са подредени и как ще си взаимодействат. ✓Дизайн на навигацията Разположение и структура на елементите за навигация
СКЕЛЕТ КАК СЕ ПРАВИ? ‣ Скици / Wireframes ‣ На хартия: Pilot Hi-TecpointV5 + Moleskine Squared = ❤ ‣ Специализиран софтуер: Balsamiq, OmniGraffle, UXPin ‣ Софтуер за презентации: PowerPoint, Keynote ‣ Графични пакети: Photoshop, Illustrator, Fireworks ‣ Интерактивни HTML прототипи ‣ Twitter Bootstrap - getbootstrap.com ‣ Zurb Foundation - foundation.zurb.com
Забравете Фотошоп! Съвременни процеси на дизайн и разработка за уеб
Забравете Фотошоп! Съвременни процеси на дизайн и разработка за уеб
Забравете Фотошоп! Съвременни процеси на дизайн и разработка за уеб
СТИЛ
СТИЛ “ Съдържание, функционалност и естетика се събират, за да оформят един завършен дизайн, който радва сетивата, докато изпълнява задачите, за които е бил създаден.” Джеси Джеймс Гарет
СТИЛ ✓Естетика Избор на визуален стил, допълващ всичко останало - цветова схема, типографска скала, избор на шрифтове, декоративни елементи и др. ✓Последователност Обособяване на визуален “речник” - система от преизползваеми стилове, подсигуряващи постоянството на визуалния стил между отделните страници и елементи. ✓Използваемост Подсигуряване на добра четимост, без значение от размера на екрана, осветлението или зрението на потребителя.
Забравете Фотошоп! Съвременни процеси на дизайн и разработка за уеб
Забравете Фотошоп! Съвременни процеси на дизайн и разработка за уеб
✓Нуждите на потребителя и целите на клиента се поставят пред личните предпочитания; ✓Дизайнът е обективен, а решенията - обосновани; ✓Клиентът допринася повече за оформянето на дизайна; ✓По-малко и по-незначителни изисквания за корекции от страна на клиента; ✓Не се губи време в излишна работа по макети и варианти. ПРЕДИМСТВА
ВЪПРОСИ?
jjg.net/elements getbootstrap.com foundation.zurb.com balsamiq.com omnigroup.com/omnigraffle uxpin.com За контакти Ивелин Белчев info@webvox.eu

More Related Content

Забравете Фотошоп! Съвременни процеси на дизайн и разработка за уеб

  • 2. ✴Получаваме неясни изисквания; ✴Старателно правим няколко варианта за дизайн; ✴Клиентът избира един от тях; ✴Променяме дизайна, според изискванията на клиента; ✴Получаваме съдържанието на сайта или списък с възможностите на приложението; ✴Променяме дизайна, за да го пригодим към съдържанието... КАК СМЕ РАБОТИЛИ ДОСКОРО ...И КАК ВСЕ ОЩЕ СЕ РАБОТИ
  • 3. ✴Концентрираме се първо върху детайлите; ✴Вземаме субективни решения; ✴Създаваме елементи, без да знаем какво ще съдържат; ✴Промените са трудоемки, когато имаме повече страници; ✴Дизайнът се прави, за да се хареса от пръв поглед на клиента, вместо да работи оптимално за нуждите му. НЕДОСТАТЪЦИ НА ПОДХОДА ...С КОИТО ВСИЧКИ СА СВИКНАЛИ
  • 6. РЕШЕНИЕТО? Да знаем защо правим всичко Да знаем за кого го правим
  • 7. РЕШЕНИЕТО? Да знаем защо правим всичко Да знаем за кого го правим Да знаем какво точно правим
  • 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. СТИЛ ✓Естетика Избор на визуален стил, допълващ всичко останало - цветова схема, типографска скала, избор на шрифтове, декоративни елементи и др. ✓Последователност Обособяване на визуален “речник” - система от преизползваеми стилове, подсигуряващи постоянството на визуалния стил между отделните страници и елементи. ✓Използваемост Подсигуряване на добра четимост, без значение от размера на екрана, осветлението или зрението на потребителя.
  • 32. ✓Нуждите на потребителя и целите на клиента се поставят пред личните предпочитания; ✓Дизайнът е обективен, а решенията - обосновани; ✓Клиентът допринася повече за оформянето на дизайна; ✓По-малко и по-незначителни изисквания за корекции от страна на клиента; ✓Не се губи време в излишна работа по макети и варианти. ПРЕДИМСТВА