Що е wireframe? Добри практики

При подготовката на даден проект, след като са уточнени спецификациите, следва подготвянето на wireframe-и. Те показват основната структура, която тепърва следва да се изгради. С тях предоставяте достатъчно информация, така че:

  • да бъдат разбрани от всички замесени лица в проекта
  • съсредоточавате се върху самата функционалност
  • изчиствате възможно повече детайли и възможни проблеми, които възникват
  • на тази база се направят и самите дизайни

Как най-лесно да започнете това?

  • можете да разчитате на хималка и лист и да „нахвърляте“ своите идеи
  • следва обаче да изберете софтуер, на който да визуализирате по-нагледно нещата. По този начин ще споделяте по всяко време и по-лесно фазата, до която сте стигнали и още на това ниво ще можете да получите обратна връзка.

Не се впускайте в детайли. Целта тук не е да изглеждат приветливо за окото (оставете това на дизайн фазата).

Добри практики

  • използвайте прости елементи (като квадрати, кръгове) и символи. Чрез тях представете графики, снимки и т.н., за да окажете разположението им. За видеа например е достатъчно да поставете видео бутон в правоъгълник.
  • не наблягайте на цветната палитра, а само на прости цветове като бял, черен и максимум 2 сиви
  • не задълбавайте в шрифтовете (добре е да бъдат не повече от 2)
  • определете йерархията между самите шрифтове – големина, дебелина и наклонен (където е необходимо)
  • на база на това за какво ще се използват – определете и размера на екрана (какви устройства ще поддържате)
  • ако ще се прави responsive на по-късен етап – определете и ориентацията на екрана (портретен или пейзажен режим). Съответно може да ви се наложи да преоразмерите някои от елементите.

Защо са необходими?

По този начин можете да бъдете сигурни, че ще извлечете максимума от себе си. Ще съкратите времето за преразглеждане, понеже корекциите на този етап са сравнително по-лесни. Както и ще се насочите само към най-важното съдържание, отсявайки ненужното.

Важно – не забравяйте след това да направите и usability testing. Тествайки потребителската използваемост на този етап, вие всъщност тествате самата идея без да навлизате в детайли. Като краен резултат ще имате една добра основа. Върху нея вече можете да продължите със същинския дизайн.


Тук можете да видите и пример от Figmа.

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *