Што е Wireframe на веб-страницата?

Научете да користите едноставни Wireframes за да започнете со вашите дизајни

Веб-рамка е едноставен визуелен водич за да ви покаже како ќе изгледа веб-страница . Таа сугерира на структурата на страница , без користење на било која графика или текст. Рамката на веб-страницата ќе ја прикаже целата структура на страницата - вклучувајќи ги и страниците што ги поврзуваат со каде.

Веб wireframes се одличен начин да започнете вашата дизајн работа. И додека е можно да се создадат сложени жички рамки со големи количества детали, вашето планирање може да започне со салфетка и пенкало. Клучот за правење добри жичени рамки е да ги оставите сите визуелни елементи. Користете кутии и линии за да прикажете слики и текст.

Работи што треба да се вклучат во рамка за веб-страница:

Како да изградите едноставна веб-мрежа

Креирајте мрежна рамка за веб-страница користејќи некој остаток од хартија што имате корисна. Еве како го правам тоа:

  1. Нацртајте голем правоаголник - ова може да ја претставува целата страница или само видливиот дел. Јас обично почнувам со видливиот дел, а потоа проширувам за да ги вклучам елементите кои би биле под превиткување.
  2. Скица на изгледот - тоа е 2-колони, 3-колони?
  3. Додај во кутија за графички наслов - Нацртајте ги вашите колумни ако сакате да биде еден заглавие над колоните, или само да го додадете таму каде што го сакате.
  4. Напишете "Наслов" каде што сакате вашиот H1 наслов да биде.
  5. Напиши "Под-глава" каде што сакате H2 и пониски наслови да биде. Тоа ви помага ако ги направите пропорционални - h2 помали од h1, h3 помали од h2, итн.
  6. Додајте во кутии за други слики
  7. Додај во навигација. Ако планирате јазичиња, само цртајте кутии и напишете "навигација" преку врвот. Или стави колони листи во колоните каде што сакате навигацијата. Не ја пишувајте содржината. Само напишете "навигација" или користете линија за да го претставувате текстот.
  8. Додајте дополнителни елементи на страната - да ги идентификувате што се со текстот, но не го користете вистинскиот текст за содржина. На пример, ако сакате копчето за повик за акција во долниот десен, ставете кутија и означете го "повик за акција". Не пишувај "Купи сега!" во тоа поле.

Откако ќе ја напишете вашата едноставна wireframe напишана, и не треба да ве однесе повеќе од 15 минути за да го скицирате едно до друго, покажете го на некој друг. Прашајте ги дали има нешто што недостасува и за други повратни информации. Врз основа на она што тие велат дека можете да напишете друга рамка или да го задржите оној што го имате.

Зошто хартиените жици се најдобри за првите нацрти

Додека е возможно да се создадат жичени рамки со користење на програми како Visio, за вашите првични сесии за КОЛЕКТИВНО напад, треба да се држите до хартија. Хартијата не изгледа како трајна, и многу луѓе ќе претпостават дека го фрлиле заедно за 5 минути и затоа не двоумете се да ви дадете добри повратни информации. Но, кога користите програма за создавање фенси жичени рамки со совршени квадрати и бои, ризикувате да бидете фатени во самата програма и да трошите часови совршенство на нешто што никогаш не се случува во живо.

Хартички жичени рамки се лесни за правење. И ако не ви се допаѓа, едноставно ќе се распарчите хартијата, фрлете го во рециклирање и имате нов лист.