Što je žičani okvir? Pokazat će vam ovaj UX vodič za dizajn.

Prvi korak u dizajniranju web stranice: postavite ga u okvir.

Dobar žičani okvir može vam dati viziju cjelokupnog izgleda i funkcionalnosti vaše web stranice. Može poslužiti i kao prva faza dizajna.

Žičani okviri daju vam predodžbu o ukupnoj strukturi stranica i kako će teći navigacija.

Ako razmišljate o izradi web stranice, možete brzo i jednostavno napraviti žičani okvir. Da biste to učinili, ne morate biti ni grafički dizajner.

Za početak vam trebaju samo olovka i papir. (Ili ako želite dobiti fensi, iPad i iPencil kakve koristim u svom video vodiču iznad.)

Stvorit ćemo žičani okvir i pokazati kako to omogućuje brzi, iterativni postupak dizajniranja. To će stvoriti živi dokument koji možete koristiti za sebe i za klijenta. I to možete koristiti za rasuđivanje kroz svoje planiranje - sve prije nego što uložite bilo koje vrijeme u njegovo stvarno kodiranje.

Evo nekoliko koraka koje ćemo pokriti u ovom članku (i u pripadajućem video vodiču):

  1. Planiranje karte web stranice
  2. Stvaranje žičanog okvira početne stranice
  3. Korištenje oznaka u žičanim okvirima
  4. Komponente žičanog okvira (zaglavlje, izbornik, podnožje)
  5. Uokvirivanje stranice značajki i stranice kontakta
  6. Mobilni prilagodljivi žičani okviri

Korak # 1: Planiranje karte web lokacije

Početak rada s žičanim kadriranjem započinje dobrom kartom web stranice. Prije nego što stvorite žičani okvir stranice, karta web stranice pružit će vam određenu strukturu. Na taj ćete način razumjeti koje ćete stranice graditi i kako će se sve međusobno povezati.

Većina malih web mjesta možda neće trebati kartu web stranice. Obično imaju samo jednu odredišnu stranicu ili nekoliko uobičajenih stranica kao što su Značajke, O nama i Kontaktirajte nas.

To je reklo, čim vaše web mjesto ili aplikacija postane veća i složenija, poželjet ćete kartu web mjesta.

Sitemapovi vam pružaju kratki pregled mjesta gdje postoje i kako se međusobno povezuju.

U našem primjeru stvorit ćemo jednostavnu kartu web mjesta koja će sadržavati samo početnu stranicu, stranicu značajki i stranicu Kontaktirajte nas.

Ne morate trošiti previše vremena na ovo. Samo dodajte nekoliko okvira za prikaz svake stranice, retke odozdo za prikaz podstranica i to je to.

Korak # 2: Izrada mrežnog okvira za početnu stranicu

Stvorit ćemo našu prvu žičanu stranicu. Ako prije niste žičano uokvirili, postupak je vrlo jednostavan. Svaki aspekt web stranice predstavljen je oblikom ili jednostavnom grafikom, kao što su:

  • okviri s dijagonalnim linijama kroz koje predstavljaju slike
  • vodoravne crte za predstavljanje odlomaka teksta
  • i krug s slovom L koji predstavlja vaš logotip.

Za početnu stranicu izradit ćemo klizač, izbornik i logotip. Također ćemo mu dati nekoliko naljepnica da pokažu što je svaka stavka.

Ovo je također korisno za organiziranje svakog odjeljka u pravokutnike koje kasnije možemo kopirati i zalijepiti na druge stranice (posebno za zaglavlje i podnožje).

Stvorimo i drugi odjeljak za uvod u tvrtku (O nama) i odjeljak za sponzore (s logotipovima i slikama naših sponzora).

Kako napredujemo kroz dizajn, na početnu stranicu možemo implementirati i druge stavke, poput poziva na akciju u područjima koja bi bila prikladna.

Dizajn dovršavamo odjeljkom podnožja u koji dodajemo uobičajene elemente kao što su obrazac za kontakt, kontakt informacije i ponovo upotrebljavamo logotip.

Korak # 3: Korištenje označavanja u žičanim okvirima

Žičani okvir često ne gledaju samo dizajneri, već programeri, klijenti i uprava. Stoga je korisno dodati malo oznaka svakom dijelu sadržaja. To vam može pomoći da vodite ljude koji prvi put gledaju vaš žičani okvir. To obično radim na kraju popunjavanja stranice.

U našem primjeru označimo početnu stranicu i svaki dio sadržaja označimo crvenim tekstom.

Aspekti koje želite označiti uključuju stavke poput odjeljaka, naslova, obrazaca za kontakt i koje bi slike mogle biti.

Imajte na umu da Markup ne mora doslovno objašnjavati kakav će sadržaj na kraju biti - samo ono što predstavlja. Dakle, umjesto da unesete stvarni "Primjer uvodnog naslova", naslov možete označiti kao "Uvodni naslov".

Korak # 4: Dodajte ostale komponente žičanog okvira poput zaglavlja, izbornika i podnožja

Sad kad smo već stvorili zaglavlje i podnožje, možemo ih ponovno koristiti za dodatne stranice. Ako radite digitalno, možete kopirati zalijepiti zaglavlja, podnožja i druge ponavljajuće elemente u nove žičane okvire stranica. (A ako koristite samo papir i olovku, uvijek možete upotrijebiti brijač i fotokopirni uređaj da postignete isti učinak.)

To omogućuje da vaš dizajn žičanog okvira ostane dosljedan. Alati poput Figme omogućit će vam stvaranje komponenata imovine koje također možete kopirati i zalijepiti tijekom dizajna. Možete ih čak konfigurirati da dinamički ažuriraju druge dijelove vašeg žičanog okvira kada promijenite svoju korijensku komponentu.

U našem ćemo primjeru ponovno upotrijebiti komponente za izgradnju stranice značajki. Stvaranjem naše prve komponente odjeljka značajki, možemo je nekoliko puta kopirati i zalijepiti u nastavku kako bismo u samo nekoliko minuta izgradili cijelu stranicu značajki.

Korak # 5: Stranica sa značajkama i stranica s kontaktima

Jednostavnije je i jednostavnije izrađivati ​​dodatne stranice nakon što započnete s izrađivanjem žičanih okvira i izgradnjom nekih komponenata. Nakon završetka stranice sa značajkama možemo stvoriti stranicu za kontaktiranje. Sve što stvarno moramo učiniti je dodati nekoliko uobičajenih elemenata, kao što su Google karta, obrazac za kontaktiranje i neki osnovni detalji za kontakt, poput telefonskog broja i adrese e-pošte.

U ovom primjeru imam male logotipe za telefon i e-poštu i velike blokove koji predstavljaju mjesto gdje će se nalaziti na stranici.

Obrazac za kontakt nalazit će se ispod (bez obrisa okvira), kao i Google karta s desne strane.

Korak # 6: Napravite mobilni prilagodljivi okvir

Nijedan dobar žičani okvir danas ne može postojati bez mobilne verzije. To je zato što se većina weba danas gleda na mobilnim uređajima.

Dobro je znati kako se dizajn može srušiti na manje okvire prikaza. Ako imate više vremena na raspolaganju, također možete izraditi i tabletnu verziju responzivnog žičanog okvira.

U našem primjeru izrađujemo pojedine dijelove dizajna početne stranice. Većina redaka i stupaca sažeta je. A budući da se nalazimo na mobilnom prikazu, mnoštvo slika, tekstova i blokova smanjuje se u veličini.

Zbog toga je moguće da neki odjeljci i dalje imaju istu visinu kao njihove odgovarajuće verzije na radnoj površini. S druge strane, neki odjeljci s puno slika (poput odjeljka za sponzore) mogu na kraju imati puno veću visinu pomicanja.

Zbog toga često dodam i dodatne oznake kako bih pokazao koji odjeljci verzije radne površine odgovaraju kojim odgovarajućim odgovarajućim ekvivalentima za mobilnu verziju.

Zaključak

Ožičenje je brzi način da vizualno dobijete bolju ideju o svojoj web stranici ili aplikaciji. Preporučujem da ga isprobate za sljedeći projekt kako biste lakše planirali kako bi mogao funkcionirati i izgledati.

Žičasto kadriranje idealan je pristup za to, jer je potrebno puno manje vremena nego kad dizajner napravi potpuno prototip korisničkog sučelja.

Kao programer godinama sam gradio žičane okvire za svoje web stranice. Gotovo nikad ne izrađujem web stranicu bez skiciranja barem nekih svojih ideja kako će vizualno izgledati.

Sretna žičana obrada.

Nadam se da vam se svidio ovaj članak. Ako ne znate tko sam, ja sam Adrian iz Australije? Imam mali kanal na Twitteru i YouTubeu, pa ako želite znati više o meni ili uživati ​​u mom sadržaju, posjetite me kad-tad?

  • Youtube: //youtube.com/adriantwarog
  • Twitter: //twitter.com/adrian_twarog