Шта је жичани оквир? Овај водич за УКС дизајн ће вам показати.

Први корак ка дизајнирању веб странице: поставите је у оквир.

Добар жичани оквир може вам дати визију целокупног изгледа и функционалности ваше веб странице. Такође може послужити као прва фаза дизајна.

Жичани оквири дају вам представу о укупној структури страница и како ће тећи навигација.

Ако размишљате о изградњи веб странице, можете брзо и једноставно да направите оквир. Да бисте то урадили, не морате бити ни графички дизајнер.

За почетак вам требају само оловка и папир. (Или ако желите да добијете фенси, иПад и иПенцил какве користим у свом видео упутству изнад.)

Направићемо жичани оквир и показати како то омогућава брзи, итеративни поступак дизајнирања. Ово ће створити живу документацију коју можете користити за себе и за клијента. И ово можете користити за расуђивање кроз своје планирање - све пре него што уложите било које време у његово стварно кодирање.

Ево неколико корака које ћемо обрадити у овом чланку (и у пратећем видео упутству):

  1. Планирање мапе сајта
  2. Креирање жичаног оквира за почетну страницу
  3. Коришћење ознака у жичаним оквирима
  4. Компоненте жичаног оквира (заглавље, мени, подножје)
  5. Уоквиривање странице са карактеристикама и странице са контактима
  6. Мобилни прилагодљиви жичани оквири

Корак # 1: Планирање мапе сајта

Почетак рада са жичаним кадрирањем започиње добром картом сајта. Пре него што креирате жичани оквир странице, карта сајта ће вам дати неку структуру. На овај начин ћете разумети које ћете странице градити и како ће се све међусобно повезати.

Већина малих веб локација можда неће требати карту веб странице. Обично имају само једну одредишну страницу или неколико уобичајених страница попут Карактеристике, О менију и Контактирајте нас.

Ово је рекло, чим ваша веб локација или апликација постану веће и сложеније, пожелећете карту веб странице.

Ситемапови вам пружају кратак преглед места где постоје и како се они међусобно повезују.

У нашем примеру ћемо створити једноставну мапу сајта која ће садржати само почетну страницу, страницу карактеристика и страницу Контактирајте нас.

Не морате трошити превише времена на ово. Само додајте неколико оквира за приказ сваке странице, редове одоздо за приказ подстраница и то је то.

Корак # 2: Креирање мрежног оквира за почетну страницу

Направићемо нашу прву жичану страницу. Ако раније нисте постављали жичане оквире, поступак је прилично једноставан. Сваки аспект веб странице представљен је обликом или једноставном графиком, као што су:

  • кутије са дијагоналним линијама кроз које представљају слике
  • водоравне линије које представљају пасусе текста
  • и круг са словом Л који представља ваш логотип.

За почетну страницу направићемо клизач, мени и логотип. Даћемо му и неколико налепница да покажемо шта је свака ставка.

Ово је такође корисно за организовање сваког одељка у правоугаонике које касније можемо копирати и лепити на друге странице (посебно за заглавље и подножје).

Креирајмо и други одељак за увод у компанију (О нама) и одељак за спонзоре (са логотиповима и сликама наших спонзора).

Како напредујемо кроз дизајн, на почетну страницу можемо применити и друге ставке, попут дугмади за позив на акцију у областима која би била прикладна.

Дизајн довршавамо у делу подножја где додајемо уобичајене елементе као што су образац за контакт, контакт информације и поново користимо логотип.

Корак # 3: Коришћење ознака у жичаним оквирима

Жичани оквир често виде не само дизајнери, већ програмери, клијенти и управа. Стога је корисно додати мало ознака у сваки део садржаја. Ово може помоћи људима да први пут гледају ваш жичани оквир. Обично то радим на крају попуњавања странице.

У нашем примеру, хајде да означимо почетну страницу и сваки део садржаја означимо црвеним текстом.

Аспекти које желите да означите укључују ставке као што су одељци, наслови, обрасци за контакт и које слике могу бити.

Имајте на уму да Маркуп не мора дословно објашњавати какав ће садржај на крају бити - само шта он представља. Дакле, уместо да унесете стварни „Пример уводног наслова“, наслов можете означити као „Уводни наслов“.

Корак # 4: Додајте друге компоненте жичаног оквира попут заглавља, менија и подножја

Сада када смо већ креирали заглавље и подножје, можемо их поново користити за додатне странице. Ако радите дигитално, можете да копирате заглавља, подножја и друге понављајуће елементе у нове жичане оквире страница. (А ако користите само папир и оловку, увек можете користити бријач и фотокопирни апарат да бисте постигли исти ефекат.)

То омогућава да ваш дизајн жичаних оквира остане доследан. Алати попут Фигме омогућиће вам да креирате компоненте имовине које такође можете копирати и лепити током целог дизајна. Можете их чак конфигурисати да динамички ажурирају друге делове вашег жичаног оквира када промените основну компоненту.

У нашем примеру ћемо поново користити компоненте за изградњу странице карактеристика. Стварањем наше прве компоненте одељка са карактеристикама, можемо је неколико пута копирати и залепити у наставку да бисмо у само неколико минута направили целу страницу са карактеристикама.

Корак # 5: Страница са карактеристикама и страница са контактима

Једноставније је и лакше израђивати додатне странице када започнете са израђивањем жичаних оквира и изградњом неких компоненти. Када је страница са карактеристикама завршена, можемо створити страницу за контакт. Све што заиста треба да урадимо је да додамо неколико уобичајених елемената, попут Гоогле мапе, обрасца за контакт и неке основне детаље за контакт, попут броја телефона и адресе е-поште.

У овом примеру имам мале логотипе за телефон и е-пошту и велике блокове који представљају где ће се налазити на страници.

Образац за контакт налазиће се испод (без оквира оквира), као и Гоогле мапа на десној страни.

Корак # 6: Направите мобилни прилагодљиви оквир

Ниједан добар жичани оквир данас не може постојати без мобилне верзије. То је зато што се већина Интернета данас гледа на мобилним уређајима.

Добро је знати како се дизајн може срушити на мање оквире приказа. Ако имате више времена на располагању, такође можете да направите верзију одзивног жичаног оквира за таблете.

У нашем примеру градимо дизајн секције по секција за дизајн почетне странице. Већина редова и ступаца је скупљена. А пошто се налазимо на мобилном приказу, многе слике, текстови и блокови се смањују.

Због тога је могуће да неки одељци и даље имају исту висину као њихове одговарајуће верзије на радној површини. С друге стране, неки одељци са пуно слика (попут одељка за спонзоре) могу на крају имати много већу висину помицања.

Због тога често додајем и додатне ознаке да бих показао који одељци верзије радне површине одговарају којим одговарајућим одговарајућим еквивалентима за мобилну верзију.

Закључак

Жичасто кадрирање је брз начин да визуелно добијете бољу представу о својој веб локацији или апликацији. Препоручујем да га испробате за следећи пројекат који ће вам помоћи да планирате како би могао функционисати и изгледати.

Жичасто кадрирање је идеалан приступ за ово, јер је потребно много мање времена него кад дизајнер уради прототип корисничког интерфејса.

Као програмер, годинама сам градио жичане оквире за своје веб локације. Готово никад не развијем веб страницу, а да не скицирам бар неке од својих идеја како ће то визуелно изгледати.

Срећно постављање жица.

Надам се да вам се свидео овај чланак. Ако не знате ко сам, ја сам Адриан из Аустралије? Имам мали канал на Твиттер-у и ИоуТубе-у, па ако желите да сазнате више о мени или уживате у мом садржају, посетите ме кад-тад?

  • Иоутубе: //иоутубе.цом/адриантварог
  • Твиттер: //твиттер.цом/адриан_тварог