Website wireframe или схематичен дизайн на уеб страница

На всеки програмист или дизайнер му се е случвало да обяснява на клиент как ще изглежда дадена част от сайт. Някои клиенти имат въображение, а други не, но дори и тези които имат доста добро такова вероятно не си мислят за същото нещо като теб, когато им кажеш “формата за контакт ще се показва в оувърлей обект с експоуз ефект”.

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

В един идеализиран свят веднага ще се сетиш за линк на някой друг подобен сайт и с повече обяснения и стрелки от тип “това тук отива там” клиентът може да те разбере. В много от ситуациите можеш да се опиташ да им го нарисуваш, но ако уменията ти в областта на изящните изкуства са като моите вероятно всичко, което клиентът ще види е едно голямо квадратче, едно малко квадратче и достатъчно мастило/графит за няколко теста на Роршах. А и хартията не е най-удобния материал за изпращане на мейл. Можеш да използваш и пейнт, като там разликата е, че линиите ще са по-прави. Алтернатива, разбира се, е да скалъпиш HTML и CSS код на една от страниците от сайта. Това е най-добрият вариант, но е времеемък, а и не е подходящ за всяка ситуация. Няма смисъл да губиш 3-4 часа да правиш примерен дизайн за проект, който не знаеш дали ще получиш.

След като изчерпахме идеализираните решения, чисто творческите такива и загубата на няколко ценни часа от деня – защо да не пробваме с wireframe?

Website Wireframe е груб схематичен дизайн на скелета на сайта. Набляга повече на структурата и на това какво има на дадена страница, отколкото на това как изглежда тя. Някои възможни употреби са:

  • Да укажеш разположението на елементите в сайта – кое къде е, колко е широк всеки елемент, какви са разстоянията между отделните елементи и т.н.
  • Да скицираш пътя на потребителя при дадени обстоятелства – клика на рекламен банер, попада на така наречената landing page, избира продукт и отива на страница с продукт, избира категория – отива на списък с продукти и т.н.
  • Да покажеш на клиент как ще изглежда сайта му – базова структура, скица на функционалността, базова цветова гама, иконки.
  • Да покажеш на изпълнителя как искаш да изглежда сайта ти.

Големият плюс на употребата на wireframes или схематични дизайни е, че почти напълно елиминира вероятността някой да си представи нещо различно от това, което си имал предвид. Ако си му показал с wireframe, че страничната лента е отляво, трябва клиентът/изпълнителят наистина да е много нахален или просто завеян, за да те попита после “тя защо не е в дясно?”. Освен това – wireframe се прави сравнително бързо. Ако имаш ясна идея как искаш да изглежда или да се държи нещо, ще ти отнеме не повече от 30 минути, за да получиш задоволителен краен резултат. В процеса на работа винаги изникват допълнителни идеи и въпроси и докато при paint и HTML + CSS е трудоемко да се правят големи промени на финала, то повечето инструменти (в това число и сайтове) за правене на wireframe са създадени с идеята, че ти ЩЕ направиш промени по почти завършения вече прототип.

За да не съм голословен ще дам три примера за wireframe – единият е приложение, а другите два – уеб базирани услуги.

  • Omnigraffle – приложението е за MAC OS. Изглежда лъскаво и струва $99. Има го и във версия за iPad. Изглежда удобно за употреба, има доста допълнителни библиотеки за него, които могат да бъдат свалени от graffletopia.com.
  • LucidChart – уеб базирано приложение за създаване на wireframes. Поддържа голяма гама от различни типове wireframes и диаграми. Позволява създаването на блок схеми, UML диаграми, wireframes за уебсайтове, mockup за приложения за iPhone и други. Има доста удобен за употреба интерфейс, но при първи сблъсъци с него идва малко претрупано. Създателите са се постарали и са сложили няколко урока за него както и полезни съвети, които се показват при отваряне на нов документ. Позволява уебчат и преглед на промените в реално време.  Демо на съответните функционалности на сайта може да видите на http://www.lucidchart.com/pages/examples/wireframe_software. Има безплатна версия, която включва 1 потребител, 2 “помощника”, 25 MB място и до 60 обекта на документ. Най-ниската цена на месец е $4.95, а най-високият план е $25, като платените версии имат доста повече възможности и по-малко ограничения.

    LucidCharts

    LucidCharts - Screen viewLucidChart - view left paneLucidCharts - tips and tricks
  • Mockingbird – Също уеб базирано приложение, което позволява правене на wireframes. За разлика от LucidChart няма толкова голяма гама от wireframes и диаграми, но за сметка на това е доста лесно за употреба. Функционалността, която съдържа е напълно достатъчна за да може да се постигне основната цел на wireframe-a – да се покаже идея, структура и функционалност. Авторите на Mockingbird са решили да не правят клипчета и примерни картинки с крайния резултат, а директно слагат стоката в ръцете на клиента – дават демо. Цените варират между $9 и $85 на месец, като има и безплатен акаунт – 1 проект, 10 страници, 2 потребителя, без архивиране. 

     

    Mockingbird

    mockingbird-jiappsmocking-jiapps-2mockingbird-jiapps-result

Като цяло LucidChart е по-доброто решение от чисто ценова гледна точка, когато става въпрос за повече wireframes, повече проекти и повече клиенти. Ако ти трябва за един проект или просто искаш да опиташ как вървят нещата с wireframes и дали това е твоят начин на работа – по-добре опитай с Mockingbird – имат далеч по-малко ограничения на безплатните си акаунти.