AG media - Web dizajn studio

Blog

Izrada web stranica: sinergija web predloška i wireframea

Izrada web stranica: sinergija web predloška i wireframea

Postoji mnogo metoda kako izraditi web stranice. Naravno, ona najbolja je i najzahtjevnija. Od skupljanja informacija od klijenta, stvaranje users personas, mudrog planiranjapa do wireframeova i kodiranja web projekt bi trebao biti uspješno prezentiran i korišten na internetu. Najvažnija stvar u bilo kojemweb projektu je da dobro služi upravo onima za koje se i prvotno krenuo izrađivati, a to su korisnici (kupci proizvoda ili usluga). Mnogi klijenti to i žele, ali na kraju ispadne da stranice izgledaju samo po njihovim željama i zahtjevima. Ne kažem da treba zanemariti klijentove zahtjeve, nego da ih treba pametno ubaciti u web projekt, ako je to uopće moguće i potrebno, kako bi krajnji korisnici imali benefite, bilo u korištenju web sučelja ili određenih mogućnosti koje web stranica nudi. Ono što je svrha svakog web projekta, da klijentovu viziju (ako ju ima) prenese (prevede) na mudar i praktičan način za same korisnike.

U ovom tekstu ću se osvrnuti na jedan drugačiji način i to samo jednog dijela procesa izrade. Vjerojatno nekima to nije ništa novo. Radi se o kombinaciji web predložaka i skica ( wireframe). Iako web predložak ( web template) ima sve potrebne elemente za funkcionalnu web stranicu, to ne znači da se može, kao takav, uspješno koristiti za bilo koji web projekt. Uvijek su potrebne modifikacije, kako bi se uklopio u određeni projekt.

Ono što je dobro kod nekih web predložaka je da možete skratiti vrijeme pisanja HTML-a, CSS-a te Javascript kôda. Bilo bi zaista glupo to sve raditi za svaki web projekt, od nule. To osim što produljuje izradu, shodno time povećava i troškove. To ne znači da ćete prestati planirati ili kreirati users pesonas. Ali realnost ipak određuje što će se sve odraditi, a realnost je budžet. Web projekt izrađen za 900 kn, 7500 kn ili 35000 kn, pa i puno puno više, postavlja različite uvjete i na kraju određuje različite finalne proizvode.

Na slijedećem linku možete u grubo vidjeti od kojih koraka se može sastoji izrada web stranice. How to Start a Web Design Project .

Web predložak i wireframe

Prvo ću u kratkim crtama reći nešto o wireframeu i mockupu koji se mogu smatratisinonimima, ali to nisu. O web predlošcima računam da je sve jasno.

I wireframe i mockup, iako na drugačiji način prezentiraju budućifinalni proizvod,dio su procesa izrade finalnog proizvoda. Nećete imati wireframe i mockup na istom projektu, to nema nikakvog smisla, osim ako vam je budžet neograničen, što je samo lijepa zamisao.

Wireframe (žičani okvir/skica)

Wireframe je slaba vjernost prikaza dizajna web stranice i trebao bi jasno prikazivati:

  • Glavne grupe sadržaja (što?)
  • Strukturu podataka sadržaja (gdje?)
  • Opis i osnovnu vizualizaciju korisničkog interaktivnog sučelja (kako?)

Wireframe nije samo besmislen skup sivih (crno bijelih) blokova, iako oni mogu izgledati upravo tako. Uzmimo ga kao osovinu dizajna i zapamtite da treba sadržavati prikaz za svaki važan dio konačnog proizvoda.

Wireframe

Prikaz je ključan pojam. Nećete izrađivati sa svim detaljima, niti zapostavljati bitne dijelove finalnog dizajna. Vi u biti postavljate smjer za cijeli projekt, odnosno za ostale suučesnike na njemu (programeri, vizualni dizajneri, copywriteri…). To je kao da skicirate mapu za grad. Možete osjetiti arhitekturu grada, ali ne i njegovu ljepotu (finalni proizvod).

Wireframeovi se koriste kao dio dokumentacije ili kao dokumentacija projekta. S obzirom da predstavljaju statične i fiksne interakcije korisničkog sučelja, trebale bi sadržavati i pisanu riječ (od kratkih bilješki objašnjavajući interakciju do kompleksnih tehničkih opisa).

Teško da ih je moguće koristiti kao testni materijal, no mogu doprinijeti u skupljanju inicijalnih povratnih informacija tokom istraživanja ako se koriste kao neslužbene skice unutar razvojnog tima.

Možemo ih koristiti za uključivanje klijenta u proces izrade. Što je dobro, jer klijent neće dobiti krajnji proizvod kao iznenađenje, već će imati osjećaj da sudjeluje u procesu izrade. Ako je klijent motiviran ili zainteresiran, može čak dati povratne informacije bitne za daljnji razvoj projekta.

Mockup (skica koja imitira ili oponaša)

Mockup srednje ili jako dobro prikazuje vjernost statičnog dizajna. On ponekad može biti skoro pa završni dizajn web stranice ili vrlo vjerni nacrt.

  • Predstavlja strukturu podataka, vizualizira sadržaj i demonstrira osnovne funkcionalnosti na statičan način
  • Potiče ljude da zapravo pregledaju, ocjenjuju ili prosuđuju vizualni dio projekta

Mockup je vrlo koristan ili može biti koristan kada želite ubrzati prodaju svog proizvoda. Kao i wireframe koristi se za prikupljanje povratnih informacija imože biti dio dokumentacije. No troškovi izrade su veći nego kod wireframea.

Mockup

Ovisno o budžetu ili poslovnom planu, možete birati između wireframea i mockupa. Nismo spomenuli i prototip. To je također jedna od opcija, no ona je vrlo skupa opcija.

Ako želite saznati više o svrsi i izradi wireframea pogledajte slijedeći link - Wireframing, Prototyping, Mockuping – What’s the Difference?To je u biti serijačlanaka o izradi wireframea.

Sinergija

Pretpostavimo sada da radimo web projekt uključujući wireframe i web predložak. Nakon dobivenih podataka ili istraživanja, izrađujemo wireframe. Pokazujemo ostalim suučesnicima (ako ih ima) te klijentu. Dorađujemo u skladu povratnih informacija. Tražimo potvrdu od klijenta za izradu finalnog proizvoda. I u tom trenutku će biti vrlo koristan web predložak.

Korištenje web predloška zahtjeva upoznavanje sa samim kôdom, od HTML-a, CSS-a do JS-a. Ovisno o predlošku, ovisi i brzina upoznavanja, tako i korištenje. Osim tehničkih rješenja koja sadrže web predlošci, oni uključuju dizajnersko rješenje. Naravno, možete ih zadržati, ali onda morate biti spremni da će finalni proizvod biti sličan sa svim ostalim rješenjima mnogih autora koji su jednako postupili, ne mijenjajući dizajn. To će svakako smanjiti rok izrade te bi trebalo i same troškove.

Ali uzmimo da nećete koristiti vizual web predloška već ćete kreirati vlastiti na temelju zahtjeva klijenta i/ili specifičnosti projekta. Tako ćeteizraditi nešto što još nitko nije izradio. Ono će ipak po nečemu biti slično ostalim web stranicama. Npr. kada bi se automobili izgrađivali tako da budu potpuno drugačiji, imali bi stotine različitih pojmova za auto. Vizual je važan, ali praktičnost bi stavio na prvo mjesto. Najveći izazov je napraviti web stranicu koja je vrlo dobro vizualno dizajnirana, koja je lagana (kB), jednostavna i praktična za korištenje.

Ok, sada ste krenuli mijenjati web predložak. Tokom izrade, pazite da ne koristite sve JS skripte i sav CSS kôd koji nije potreban za učinkovit prikaz i korištenje web stranice. To će smanjiti težinu (kB, MB), atime i brzinu učitavanja i lakše će se održavati u budućnosti.

Vjerojatno ćete dodavati nove JS skripte i mnogo CSS kôda. Možete naići na konflikte između defaultnih skriptii novo-ubačenih. To je jedan od nedostataka, ali to se može dogoditi i da radite projekt from scratch.

Najveći nedostatak kod ove kombinacije pri izradi web stranica je da ne možete znati kakav kôd vas čeka u web predlošku. Vi možete vidjeti vizual i određene mogućnosti koje on nudi. Ali sami kôd ne, osim ako preuzmete s nekih shareanih servisa ilegalnu verziju. No to nije toliko zlobno ako ćete na kraju i kupiti određeni predložak, nakon što ste se uvjerili da je prihvatljiv za izmjene i dorade.

Na vama je da prosudite u kojim slučajevima ćete koristiti ovu kombinaciju, te koliko će vam i da li će vam doprinijeti u brzini izrade. Ovisno o veličiniprojekta, ovisiti će potreba korištenja web predloška.

Gdje ćete naći web predloške? Upisom web template uinternet pretraživačnaći ćete na desetke stranica koje nude komercijalne i besplatne web predloške. Jedan od njih je themeforest.net.

A gdje naći gotove programe ili alatke za izradu wireframeova? Ista stvar kao i sweb predlošcima, naći ćete mnogo različitih izvora resursa. Npr. web pločice tj. Web tiles možete pogledati ovdje: Tiles for Wireframes & Flowcharts V1, i drugi dio Tiles for Wireframes & Flowcharts V2. Jedan od online programa pogledajte ovdje, UXPin.

Osim predložaka mogu se koristiti razni gotovi CSS/HTML frameworksi koji nemaju nešto osobito predivan predefiniran vizual, ali imaju gotova tehnička rješenja što se tiče HTML-a, CSS-a, i JS-a. Slijedeći link samo dotiče neke druge sinergije kod izrade web stranica: Boilerplate or Bootstrap? Ne zaboravimo i Foundation.

Poanta

Mislim da je jasna. Ako želite, probajte koristiti web predloške s vlastito izrađenim wireframom. Ili izrađujte sav kôd od nule, kod svakog web projekta, s naravno, vlastito izrađenim wireframeom :).

Nisu mi jasni engleski pojmovi ili nisu mi jasni hrvatski pojmovi.

Inače imam problem s korištenjem tehničkih pojmova na hrvatskom. Draže mi je koristiti engleske riječi tehničkih pojmova, pogotovo ako su po mojem mišljenju nezgrapno prevedene ili nisu praktične za korištenje. Na slijedećem linku su prevedeni neki pojmovi u web dizajnu - Izrazi i pojmovi u web dizajnu. Pokušavam koristiti neke riječi na hrvatskom, ali problem je što uglavnom čitam na engleskom, pa tako i ne znam kako prevesti mnogo toga, a da bude praktično za korištenje. Vjerojatno nisam jedini u klubu jezičnih dilema. I nešto možda naučite iz ovog bloga: O displejima, apdejtanju i sličnom...

Comments

comments powered by Disqus