Design spletnih strani za lokalizacijo
Pri načrtovanju, projektiranju in izdelavi spletnih strani, se dnevno srečujem z zanimivi izzivi.
Ker poslujemo v 19 državah, imamo spletne trgovine tudi v toliko različnih jezikih. To pomeni, da imamo nekaj sto različnih spletnih strani. Seveda pa ne delamo vsake spletne strani posebej, temveč pripravimo generične templejte.
Določili smo nekaj osnovnih smernic, ki so nam v pomoč pri načrtovanju in oblikovanju takšnih spletnih strani. Klikaj na slike za povečavo.
Zelo je pomembno, da že pred načrtovanjem vnaprej dobro razmislimo, kako bodo postavljeni posamezni elementi. Ne samo funcionalnostni elementi, temveč tudi sam dizajn. Dnevno sklepamo kompromise med dizjanom in uporabnostjo strani. Pa ne samo to: stran mora seveda tudi pravilno in dobro speljati nakupni proces.
Pri načrtovanju spletne strani v projektni dokumentaciji, najprej določimo:
1. Osnovne specifikacije:
- določena širina strani
- kaj stran vsebuje (grafiko, HTML besedila, Ajax, Flash)
- namen strani
- kreativne restrikcije v smeri maksimiranje prodaje, zgodbe in cgpja branda ter obvezno v podporo lokalizaciji.
2. Predpisani elementi strani
Nabor elementov, katerih postavitev in/ali oblikovanje sta predpisana z wireframes. Wireframes so obveza, ne samo usmeritev.
3. Celoten nabor elementov
Specifikacija celotnega nabora elementov (npr. logotip, video, Key Visual, boxi za e-novice, korpo menu, navigacijski elementi, itd…)
4. Vsebinska obrazložitev
Ciljna publika, ciljni namen, zgodba.
5. Primeri že obstoječih všečnih designov
Podani predlogi dizajnov in rešitev posameznih elementov, ki so primerni za stran.
Potem pa, še posebej, če bodo strani lokalizirane, osnovna navodila za dizajn in razrez:
6. Navodila za design/razrez, primerno za lokalizacijo:
- V navodilih predvideti, koliko se bo moral design posameznih elementov še morebiti še širiti levo/desno ali navzdol/navzgor.
- Če je tekst ena poved v eni vrsti, vedno poskusimo nujno predvidet v dizajnu širitev na dve vrstici, za jezike, ki imajo daljše besede (še posebej npr. madžarščino in ruščino):
- Gumbi naj bodo dinamični za širitev ali naj imajo vedno predviden dodaten prostor za širitev teksta že znotraj gumba:
- Gradienti in sence na posameznem elementu ali pri križanju elementov ne gredo hkrati skupaj, posamezen box mora biti dinamičen v širino in dolžino.
- Določeni elementi, ki grafično prispevajo k podobi, vseeno ostanejo imagei, ki jih izvedbeni dizajnerji popravljajo sproti, a se natančno definirajo vnaprej:
- Omejitve: sence na fontih, strokei.
- Headerji naj bodo do take mere edit-able, da predvidimo dovolj prostora za vse jezike:
- Design naj podpira 10+ velikost črk. Velikost posameznih črk je fiksna določenemu stilu.
- Širina dizajna je fiksna ter prilagojena headerju in strani, kjer gostuje, vedno se jo prej predpiše.
- Boksi posameznih elementov naj se ne (ali čim manj) prekrivajo, da se pri razrezu dajo ločit. Problem je pri lokalizaciji zaradi dinamičnih višin in vsebin:
- Večinoma prav zaradi lokalizacije, ki je urejena tako, da lahko po državah sami vpisujejo tekste (na t.i. Tn funkcijo) kar direktno na strani (on-site editing) uporabljamo sistemske fonte, za mini strani pa včasih tudi zapečene fonte kot slike ali sIFR za krajše tekste (glavne naslove v Key Visualih).
- Pri tabih predvidimo prostor za možno širitev, zapis v dve vrstici in vnaprej skušamo predvideti največje število tabov:
- Pred izdelavo dizajna je dobro prej pridobiti napise na tabih vseh predvidenih držav.
- Pri dizajniranju čimmanj uporabljamo krogce s teksti, razen če niso dovolj veliki, da imajo dodaten prostor za možno lokalizacijo.
- Določimo, da imajo Key Visuals vedno predvideno možnost širjenja za cca vsaj 30px navzdol. To velja tudi za vse tekstovne elemente v dizajnu:
- Navigacijski elementi, cene in/ali obroki so nujno HTML tekst:
- Navaden tekst naj nima antialiasinga.
- Merske enote naj bodo v pixlih.
- Če so (pravi) pop-upi na več-verzijskih splitanih dizajnih*, naredimo univerzalni dizajn za vse pop-upe.
- Ko se eksterni dizajn naredi, naj bodo enaki načini formatov: obvezno *.psd.
- Končne datoteke naj bodo narejene na resoluciji 72dpi.
- Thank you page – > vedno v dizajnu določimo še generično content stran (prazno) ali v dizajnu predvidimo prazno stran za landing karkoli drugega.
- Vse kar je vezano na nakup izdelka, se mora obvezno vleči iz baze: cene, obroki, …, stran mora biti že razrezana tako.
- Vedno vnaprej določimo Pop-Upe, zdizajnirane na določene širine in vizualno.
- Specificiramo točno katera vsebina kam paše.
- Ko je HTML razrez narejen, naj bodo posamezni elementi repeatable.
Pri vodenju takšnih projektov je medsebojno sodelovanje, komunikacija in usklajevanje celotne ekipe izredno pomembno. Tako projektnega vodje, kot načrtovalca spletne strani, piscev besedil, dizajnerjev, koderjev in programerjev, da je končni izdelek kar najboljši. Vedno znova se sklepajo kompromisi med oblikovanjem izgleda, pripravo le tega za razrez ter končno programiranje.
—–
Opozorilo: v članku so angleški izrazi. Rada uporabljam pravilno slovenščino, vendar nekaterih izrazov, še posebej tistih ki zajemajo večopisne pojme (npr. Key Visual, Landing Page) ni možno takoj jasno umljivo opisati s slovenskimi besedami, glede na naše vsakodnevno izrazoslovje.
* tema naslednjega članka.
Tags: Ajax, box, brand, cgp, design, dizajn, editable, element, Flash, font, gradient, header, HTML, HTML razrez, image, key visual, kreativa, logotip, lokalizacija, navigacijski element, Photoshop, pixel, projektna dokumentacija, senca, sIFR, spletna stran, spletna trgovina, stroke, tab, Tn funkcija, video, wireframe
februar 18th, 2009 at 15:05
Go Karmen :) Precej koristno.
Tisto shemo z elementi strani bom pa lepo skopiral in preizkusil v praksi.
februar 18th, 2009 at 15:14
Sašo,
takele članke pa z velikim veseljem pišem.
Vidim, da tudi ti produciraš mini strani zadnje čase. Tale sajt je online sicer v 4 različicah, ampak shema ni čisto enaka tejle. Potem, v končni izvedbi je med dizajniranjem napredovala v še bolj lokalizaciji primerno verzijo.
februar 18th, 2009 at 15:25
Ja, imam kar nekaj strani, pa še precej več bi jih bilo, če nebi bil omejen z lenobo :) Samo je malo drugačen koncept samih strani, bolj usmerjen v tekste. Bom pa definitivno skopiral (ups. mislim stestiral) tudi to varjanto.
februar 18th, 2009 at 15:35
Sašo, ampak ti verjetno delaš SLO pejdže, torej ti ni potrebno tako zelo paziti na elemente dizajnov in so ti lahko zapečeni, prav tako kakšne lepše pisave.
Pri lokalizaciji se namreč pojavijo res specifični problemi zaradi različnih tekstov, ki podirajo izgled strani, če niso narejeni prilagojeno in elementi narejeni dinamično.
Ali tekstovne verzije tudi testiraš? Dolge, kratke verzije? Vikanje, tikanje, ipd?
p.s. če ti bo pejdž dobro prodajal, bom zahtevala % :-)
februar 18th, 2009 at 15:44
Tole z različnimi jeziki povsem razumem. Sem že delal recimo lokalizacijo angleškega pejdža pa sem naletel na podobne težave. Gumbi so naprimer prilagojeni za “Buy now” tako, da težko stlačiš gor “Naročite zdaj” in podobne fore :)
Vem, da je v tole vloženega veliko dela in precej natančnega planiranja.
“Ali tekstovne verzije tudi testiraš? Dolge, kratke verzije? Vikanje, tikanje, ipd?”
Seveda :) Google Optimizer rox.
februar 19th, 2009 at 13:50
Zelo lepa hvala za ta zapis :) . Zelo poučno in uporabno za mojo diplomo, če ni prepovedi :). Več takih zapisov :).
februar 19th, 2009 at 14:28
Anita, hvala. Kakšne prepovedi? V About piše lepo kakšni so pogoji uporabe mojih zapisov :-)
februar 24th, 2009 at 20:39
Odličen post. Ogromno dragocenih informacij, se vidi da veš kaj govoriš/pišeš. :)
februar 24th, 2009 at 20:45
Netja, hvala. Dobrodošla na blogu!
februar 26th, 2009 at 1:36
[...] vsaj Hirkani me je malo spodbudila z njenim fantastičnim zapisom Design spletnih strani za lokalizacijo, ki je bil predran na dšek in “bookmarkan”. Nato sem malo začela raziskovat spletne [...]
november 27th, 2009 at 19:40
Pozdravljeni. Bi lahko iz konkretnih izkušenj, ki jih imate s svojih projektov, nekaj besed namenili tudi pomenu planiranja in definiranja naročnikovih zahtev oziroma vodenja projekta za vašo uspešnost? Kako imate to rešeno? In kako rešujete vprašanja naknadnih naročnikovih sprememb… Sam se ukvarjam z ekspeditivnostjo izvedbe tudi zelo kreativnih rešitev in me ob prebiranju tega posta seveda zanima, kakšen odnos gojite do projektnega vodenja. Uspešno delo še naprej!
november 28th, 2009 at 22:30
Primož, ne delamo direktno z naročniki ampak delamo za svoj team. Občasno delamo kaj za naše druge kanale, bi lahko rekli, da so kot naročniki, le da je zadeva vseeno malo drugačna, ker med seboj nimamo pogodb ali kakšnih posebnih ali zavezujočih projektnih dokumentacij.
Seveda je pomembno načrtovanje projektov, to pa je pri nas odvisno od načrtovanih aktivnosti, kampanj, vzponu nekega izdelka ali spodbujanju prodaje nekega drugega, itd… Delamo hkrati na večih različnih projektih, tako da zadeve predvsem tudi nujno prioritetiziramo.
Zahteve definiramo sami, vedno pa so – tudi že po končani produkciji – popravki.
november 28th, 2009 at 22:43
Čutim, da uživate. Super!
november 28th, 2009 at 23:14
Primož, to pa zelo :-)