spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

František Čaník 12.8.2011
Hodnoť článok:
0 0

Osvedčené grafické "bludy"

Nie je grafika ako grafika a zároveň nie je dizajnér ako dizajnér. To sú základné pravidlá, ktoré platia a s ktorými sa stretávam každý deň. Že o čom? V jednoduchosti a v skratke o DTP & WEB grafike.

Pamätáte si časy, kedy ste do rúk vzali ranné noviny a pozerali ste si novinky v pekne úhľadne spracovanom formáte, ktorý bol fixný a nikomu nikdy ani nenapadlo, posunúť to, či ono o 3 pixely vpravo či vľavo. Doba, kedy sa všetko tzv. sadzalo sú tě tam a my dnes všetko (aj tie noviny) "zalamujeme" na počítačoch a na Mac-koch. Krásna to doba, keď ste vyskladávali text písmenko po písmenku do formy...

Dnes, keď je svet viacmenej o technike, stretávame sa s tým, že sa nám presúvajú prvky z novín do našich počítačov v podobe elektronických verzií novín, prípadne v ich odľahčenej (po obsahovej stránke článku) verzii. Často sa však snažia práve tu (a nielen tu) udržať formát, aký má tlačená verzia, pričom dochádza dosť často k úplnému "zničeniu" kvality celého webu.

Prečo som sa rozhodol písať práve na túto tému? Ja osobne som živnostník a tvorím weby, takže som skôr orientovaný na webdesign, ako na klasickú printovú (DTP) formu designu. Z toho sa mi odvádzajú aj moje náviky v rámci tvorby grafického návrhu webstránky či nejakej printovej veci. Skôr sa zaoberám tým, či to, čo chcem zobraziť sa mi zmestí do nejakých nepísaných pravidiel webdesignu, alebo či mám dať navigáciu hore alebo vľavo a tak podobne.

Denne sa však stretávam s ľuďmi, čo sa k webdesignu dostali ako slepé kurence k žitu a nevedia tak celkom správne a optimálne rozvrhnúť polohu toho či onoho prvku na webe. Veľmi často si my - webdesignéri - dávame pozor na každý jeden pixel, pričom bežný DTP grafik tento rozmer akosi vypúšťa zo zretele, prípadne mu nevenuje dostatok pozornosti, čím sa mi potom dostávajú do rúk grafické návrhy, ktoré by boli pekné, no z bežného formátu (napríklad 960) mi príde šírka stránky na 883, prípadne iné čísla, ktoré nemajú s presnou štruktúrou nič spoločné.

Veľmi veľa grafikov - webdesignérov - mi dá za pravdu, že práve na týchto pixeloch záleží, pretože samotná šírka stránky je rozhodujúca pre zobrazenie hlavných prvkov, ich správne umiestňovanie a tak podobne. Nepíšem o tom, že by sa nedal naprogramovať web aj tak, aby mal tých pomyselných 883 pixelov, alebo 967 pixelov... Je to jedno z pohľadu programovania, no ak by ste sa chceli riadiť veľmi populárnou formou - GRID SYSTÉMOM (pomyselná mriežka určujúca počet stĺpcov na danom webe) - moc by Vám to nevydalo.

Dajme ale tomuto článku aj nejakú tú šťavu a povedzme si o najčastejších problémoch, s ktorými sa stretávame, keď dostaneme návrh grafiky webu od DTP grafika a nie od webdesignéra:

Hlavné prehrešky voči webdesignu od DTP grafikov

  • nedodržiavanie formátov - 72 PPI, pixely, rozmery pre webky
  • nedodržiavanie bežných typografických pravidiel a fontov
    Áno, dajú sa dať aj iné fonty ako štandardné, ale často nemajú SK diakritiku! Áno, vieme, že font má mať 12.864 pt, ale u nás je to proste 13 pixelov, teda väčšie ako u Vás... Tak nám dávajte normálne veľkosti...
  • Zarovnávanie textu? Justify vieme spraviť aj na webe, ale... Prečo? Aby bol zbytočný voľný biely priestor? (tzv. rivers - Ako predísť riekam v zalomenom texte? [EN])
  • Pozadia s prechodmi sú pekné, ale majú koniec a začiatok?
    Každé pozadie na monitore vyzerá inak. Pri rozlíšení 800x600 sa tam toho zmestí menej ako pri 1600x1200, kde už Vám možno pozadie začne aj chýbať,že? Čo potom? Myslite na problémy s prechodmi!
  • veľa štýlov pre jeden prvok
    tak by sa dal nazvať problém, keď napríklad jeden box má v sebe veľmi veľa odlišných prvkov. Napríklad také prihlásenie užívateľa. Jednoduchý formulárik, ktorý by mal mať len názvy políčok, tlačítko prihlásiť a nejaký nadpis. Čo ak však obsahuje ešte nejaké zbytočné pozadie ilustrijúce nebodaj gýčový vysiaci zámok, prípadne nejaký kľúčik? OMG! O počte 4 fontoch nehovoriac! Web by mal obsahovať jednotný font, maximálne 2 fonty, inak to už všetko pôsobí rušivo!
  • Dodržiavanie štandardov pre tzv. BLIND FRIENDLY
    Ide o štandard, ktorý určuje správny pomer dvoch farieb na jednej ploche. To znamená, že biely text na čiernom je viditeľnejší ako napríklad sivý text na čiernom, či bledosivý na bielom. Existuje aj kalkulačka, ktorá Vám dokáže vypočítať, či by s čítaním textu boli problémy.

Ak si myslíte, že by sa ešte malo niečo doplniť medzi prehrešky voči webdesignu od DTP grafikov, kľudne vyjadrite svoj názor v komentároch k článku.

Článok bol aktualizovaný a nahradený správnymi výrazmi. Za upozornenie samozrejme ďakujem komentárom pod článkom

František Čaník František Čaník

Programátor, webdesigner a webdeveloper niekoľkých webových projektov. Má za sebou prácu v reklamnej agentúre, médiách a na rôznych pozíciách v oblasti IT.


Hodnoť článok:
0 0

23 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

0 0 Jozko Mrkvicka 19.8.2011 04:46:04
@Tomas Sedlak: Google ma tiez svoj produkt, Google Web Fonts - http://www.google.com/webfonts a aj ked je to uzavrete, je to paradne. Maju aj rozsirenie pre Chrome http://goo.gl/iaKWF cez ktore mozes hned na stranke pomocou CSS Selectora hned aplikovat font.
Cufon som pouzival aj ja, ale moc sa mi do toho nechce(lo).
0 0 František Čaník 15.8.2011 23:54:06
Btw. pre všetkých čitateľov článku... V mojom portfóliu je referencia na redesign stránok Panox.sk. Je to webdesign z mojej dieľne, pričom niektoré prvky dorábal printový grafik, tak ak chcete, skúste si tipnúť, ktoré prvky to sú...
0 0 František Čaník 15.8.2011 23:50:44
@Andrej: :) tha šak na rýchlo mi nenapadlo a už tu tie whitespaces boli spomenuté a aj som sa patrične začervenal :) DPI (print) PPI (WEB) svätá pravda... Pixels per Inch ;) jou, aj majster tesár sa utne ale kým nie do ruky, tak je v pohode, či? Ale aj tebe ďakujem za poopravenie, rovnako ako uviedol už pred tebou Martin Dulák...
0 0 Andrej Badin 15.8.2011 23:02:52
@František „SNiPI“ Čaník: "nedodržiavanie formátov - 72dpi, pixely, rozmery pre webky" Keď už, tak 72ppi? I keď koniec koncov na tom nezáleží.
"Zarovnávanie textu? Justify vieme spraviť aj na webe, ale... Prečo? Aby bol zbytočný voľný biely priestor? (tzv. whitespace)" Whitespace? Ty asi myslíš "rivers", že? Toľko mylných slov, čo potom s tých, ktorí na teba dajú, vyrastie? :)
0 0 František Čaník 15.8.2011 21:20:37
@Zoltán: No, kľudne sem hoď niektoré zo starších referencií. Škoda, že už nemám jeden design, ktorý mi dokonca dodal nejaký akademický maliar, ktorý určite nemá ani páru ani šajn o tom, čo to vôbec ten web je... ale dosť som sa pobavil. Škoda že si teraz nespomeniem na ktorej "škole" to malo byť použité, ale viem, že išlo o školu, kde sa dali získať aj MBA tituly, tak... asi toľko.
0 0 Zoltán Mitlík 15.8.2011 20:39:53
dneska som bol prave svedkom ako dokaze printovi grafik dokalicit dost dolezity SK web...ked to bude hotove a zverejnitelne pridam to sem :D :D :D bohuzial mam tiez len zle skusenosti, kedy web na kodenie mi dodal printovy grafik....cest vynimkam :) par ich bolo..vlastne za mojich 5 rokov v profi brandzi len jeden :D
0 0 František Čaník 15.8.2011 09:28:16
@Tomas Sedlak: Cufon pouzivam napr. aj ja, ked mam klientov, co si proste nedaju povedat, ze je to uplna zbytocnost... Aj ked skor sa snazim pouzivat nove css3 a HTML5 ako taketo nahrady, ale zial este stale mame pouzivatelov s IE6tkami, 7micka a tak podobne, takze...
0 0 František Čaník 15.8.2011 09:26:44
@Janci: mozno si si vsimol trend typu fotopozadia, pekne pozadia typu morske dno a tak podobne. pri rozslisku 1024x768 v pohode, bo ti ho oreze, ale malokedy sa mi stalo, ze by grafik myslel na dnesne vysoke rozliska, kde mas potom nutnost ist do pozadia aspon s 2500px cim urcite moc prehliadac ani net nepotesis (aj ked je to uz tiez pri fibernete zanedbatelne)...
0 0 Tomáš Sedlák 15.8.2011 00:22:27
používa niekto z Vás na stánkach ako náhradu fontu "cufon", alebo sa radšej držíte štandardných fontov ?
0 0 Janci Gryllus 14.8.2011 21:59:04
@František „SNiPI“ Čaník: prosím vysvetli mi túto vetu "len aby boli na fullscreen pekne prechodove farbicky"
0 0 František Čaník 13.8.2011 21:43:14
@Radomir Laucik: dakujem, velmi pekny a trefny koment. Volba typu cierne pozadie biely text bola hlavne koli mobilnym zariadeniam typu iphone, ipad a pod, pri ktorych (pri citani vonku) si mozes rovno najst strom, maslu a ist visiet, alebo jednoducho opustit danu stranku a ist citat nieco ine. Ked niekde vylovim web, ktory som davno pradavno nasiel, tak sem dohodim linku. Bolo tam krasne vidiet, ako sa da urobit velmi elegantny web s pouzitim kreativca ale i s pouzitim technika. Hlavnou volbou bolo samozrejme len CSS, ktore sa natiahlo, no web si mal sancu vidiet tak, ako to chcel kreativec a aj tak, ako to bolo viac "pristupnejsie" pre technicky pohlad (tak napr. mac, cisto textove prehliadace a pod.).

Co sa tyka custom fontov... Google fonts ma mozno len do desat fontov s nasou diakritikou, takze vyber nulovy. Platba klienta za font a jeho pouzitie na webe - mizerna az ziadna uspesnost. Riesenie typu "image replace" - otravna praca pre grafika pri kazdom novom clanku (ak pocitame s tym, ze sa maju napr. nahradzat vsetky HX headingy. A ak uz aj mas cez @font-face moznost, kym si sam nespravis (napr) v google chrome nastavenie, ze sa mozu natahovat ext.fonty, ani si tym fontom neskrtnes... Zistovat aky OS ma ake fonty defaultne nainstalovane a podla toho robit selekciu s klientom a hladat priesecnik fontu, ktory maju vsetky OS? Pocitam, nulova sanca mimo systemove fonty, ktore vsak nie su pekne "handwritten" a pod? Je to zbytocne riesit. Skor sa snazim klientovi povedat nie ako ano a ukazat mu, ze je to krasne, ale za aku cenu...

Ad pozadia. Tu mi skor islo o to, ze je sice pekne ked je pozadie na fullscreen, ale u koho je aky ten fullscreen? U mna na 4:3 je to 1024x768, na nbooku ine a v robote pri pripojeni 27" monitoru zasa ine. Co bude v dobe, ked to bude vsetko rapidne velke? Budeme robim 12000x7000px pozadia, len aby boli na fullscreen pekne prechodove farbicky? A toto nie je ani vecou printu a ani vecou webdesignu, proste je to o tom, ze aspon zatial by mali (a su) urcite (ne)pisane pravidla, ktore platia rovnako pre print ako pre architekturu a ako aj pre web... Je to zle, ze chcem, aby proste boli striktne dodrzane pravidla? Preco v zahranici nie je problem, ked niekto povie, ze je blbost mat web 993 px ale ze je lepsi 960, pretoze tam vie dat 12 stlpcov pre lepsiu typografiu a na Slovensku ked niekomu povies, ze tam ti ubehli 2px, oprav to, tak mu idu drat gule, ze sak ich tam daj, nemoze to byt problem, ze to vybehlo o 2px. To sme akoze kde?
0 0 Radomír Laučík 13.8.2011 20:40:47
ja len zopar upresneni k clanku:
- pri fontoch nie je ani tak problem s diakritikou ako s faktom, ze klienti nie su ochotni dany font kupit kvoli pouzitiu na web. preto designerov odkazujem napr. na google fonts kde vedia vybrat vzdy nejaku schopnu alternativu. okrem toho, nie vsetky prehliadace podporuju nesystemove fonty, alternativy su krkolomne a tiez nie uplne funkcne, a preto ak sa to da, je lepsie sa im vyhnut.
- slovo whitespace sa skor pouziva na odsadenia medzi jednotlivymi prvkami, to co ma autor v clanku na mysli sa po anglicky nazyva skor word spacing alebo jednoducho po slovensky medzery medzi slovami :)
(ide mi o to aby si zaciatocnici nemiesali jablka s hruskami lebo ma bude zas triafat slak ak mi niekto bude vykladat o whitespaci v inom vyzname a nebudeme sa chapat [a teraz uz aj viem kde vznikaju tieto dezinterpretacie])
- pri pozadiach tiez nie je ani tak problem s tym, ze by sa nezmestilo pri mensom rozliseni (vacsinou pozadie nie je dolezite pre pouzitie stranky, takze na mensich monitoroch jednoducho cast z neho nebude vidno) ale skor v tom, ze ak ma giganticke rozmery tak aj pri hnusne vyzerajucej kompresii sa dostane najmenej na 500kb. pritom sa daju robit pekne weby aj s pozadiami do 100kb tak naco zbytocne pretahovat cas nacitania webu?
- trochu vas rozsudim s tymi kontrastmi pozadia a popredia (textu) o ktorych sa tu hadate a nikto to nevie spravne pomenovat :)) samozrejme ze napriklad ja na svojom monitore nemam problem precitat aj texty ktore maju podla danej kalkulacky slaby kontrastny pomer, lenze na starsich monitoroch pripadne pri horsich svetelnych podmienkach (napr. pri citani vonku na dennom svetle) je to uz problem.
- posledna vec: z clanku vyznieva, ze blind friendly je len o kontrastoch, pritom to je iba jedno/niekolko z mnozstva pravidiel ktore sa tykaju nielen dizajnu ale aj kodu. zo zvoleneho odkazu to tiez nie je jasne, podstatne informacie (samotny standard) su trochu schovane, konkretne tu: http://blindfriendly.cz/wcag20
0 0 - 13.8.2011 09:14:00
Zhodujem sa s názorom Jančiho Gryllusa. Tento článok je písaný vyslovene proti printovým grafikom, pričom si myslím, že je úplne jedno či je niekto zameraný viac na DTP, alebo viac na web grafiku, podstatné je či to chce robiť dobre a riadiť sa konvenciami, akých autor aj pár vypísal. Tu je to o znalostiach grafika a s jeho orientáciou na také či oné médium to nemá nič spoločného.

Proti článku ako takému nemám nič, len nevidím dôvod prečo zaujímať postoj proti prinťákom. A ešte poznámka k prvému bodu: 72dpi by som neuvádzal ako požadovaný formát, ten je o písmenko iný.
0 0 Jozef Sukovský 13.8.2011 01:40:01
čo sa článku týka, nespomenul si CMYK a rozboxovanie dizajnu. neviem či sú to prehrešky voči webdizajnu, ale minimálne to vyzerá nemilo.

čo sa týka tvojho posledného bodu, tak tiež nemôžem súhlasiť ako ado. to, že biely text na čiernom pozadí je kontrastnejší síce je pravda, ale to neznamená, že je to čitateľnejšie a blind friendly. tá kombinácia je očný overkill a ja ako aj množstvo ľudí ten text nie sme schopní dočítať. ado píše o nahradení bielej bledo sivou nie o bledo sivom pozadí a čiernom texte. tak isto WCAG nehovorí o tom, že má byť všetko čo najviac kontrastné ale o tom, aký kontrast je minimálne potrebný.
0 0 Peter Druska 12.8.2011 20:18:39
Pridám svoje články do diskusie. Presne tomuto som sa venoval v minulých článkoch na zajtra.sk:
1) Prvky tlačového dizajnu nepatria na web: http://www.zajtra.sk/programovanie/108/webovy-dizajn-vs-tlac-prvky-tlacoveho-dizajnu-nepatria-na-web,
2) Modelovanie webového sídla v prehliadači: http://www.zajtra.sk/programovanie/3/modelovanie-weboveho-sidla (venujem sa tam tomu, že sa dá grafik obísť).
0 0 František Čaník 12.8.2011 18:05:27
@ado: tak si hod tu tvoju sivu farbu do kalkulacky na zistenie toho, aka kontrastna je pri pouziti napr. sivej {pozadie} a ciernej {text} a potom mozno pochopis o tom, kto ake bludy pise... Tvoju poznámku o programátorovi a designérovi berem s rezervou aj keď úprimne, viem, prečo je to tak napísané a viem aj to, že to nemá s kvalitou nič spoločné! Ale to je zasa o inej kvalite človeka, čo píše komentár ;). Rád si však pozriem nejaké tvoje práce. Teším sa na tvoje portfólio (ak sa vôbec odvážiš ho pridať). Aby som nezabudol, skontroluj si ako výjde v kalkulačke napríklad samotný box o autorovi (pozadie: cfcfcf, farba textu: ffffff) oba výsledky FAIL!

@janci: neber to ako zaujatost voci printakom, ber to len ako nazor jedneho z tych, co maju pokrk toho, ze vysvetluje klientovi, preco to v grafickom navrhu vypada uplne inak ako vo finalnom webe a ktory ma pokrk toho, ze sa robia prave taketo rozdiely medzi DTP a WEB-om. Každý má robiť to v čom je dobrý.
0 0 Janci Gryllus 12.8.2011 15:47:27
Ok v poriadku. Ale skuste postavit nabuduce clanok na tom ake pravidla treba dodrziavat vo webdizajne a nie na tom ake chyby vo webdizajne robia printovi grafici...
0 0 ado 12.8.2011 15:46:12
nahodou som narazil na tento clanok, tak som si precital. problem je, ze autor si len mysli, ze je webdizajner (alebo akykolvek dizajner).
mam pocit, ze nevie co znamena DPI, lebo v digitale nie je podstatne DPI, podstatne su rozmery v pixeloch.
a ten posledny bod je cisty blud. biely text na ciernom pozadi taha oci a zle sa cita. mala by sa pouzivat svetla siva. dalsie veci sa mi nechce rozoberat, ale predsa len - ak si niekto pise, ze je programator a dizajner dokopy, tak to hovori dost o kvalite.
0 0 František Čaník 12.8.2011 15:23:11
@Janči: To nie je o tom, že sme niečo viac, nie sme niečo viac... To je o tom, že máme iný pohľad na vec ako prinťáci. V skratke... Mňa napr. vôbec pri webdesigne nezaujíma pretekanie strany, orezové značky ani podobné srandy, ktore sú zasa čisto vecou printu... Tak väčšinu dnešných prinťákov nezaujímajú rozmery fontov, šíriek obrazoviek a pod. Žiaľ, stretol som sa s tým priamo na našej polygrafickej, z čoho ma išlo potrhať a temer ma to rozplakalo...
0 0 Janci Gryllus 12.8.2011 15:10:28
Neviem prečo píšete konkrétne o printových grafikoch. Myslím, že väčšina "webdizajnérov" na Slovensku nemá o týchto pravidlách ani len potuchy. Ja osobne som printový grafik, ale v poslednej dobe pracujem aj na web stránkach. Všetky pravidlá, ktoré boli popísané v článku dodržiavam a prišiel som na ne sám. Chcem tým povedať, že kvalitný printový grafik nemá žiadne problémy ani s webdizajnom. Prosím netvárte sa, že ste niečo viac...
Zajtra.sk > Dizajn > Grafika > Osvedčené grafické "bludy"


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama