KODÉR.BLOG

Nejen kodér musí přemýšlet aneb grafikem to začíná

24 Aug 2011

Kóduji pro webProgress už vice než 4 roky, za “použitelného” kodéra se považuji tak maximálně dva roky a stale nejsem žádný profík, spíše pokročilejší kodér, který se má stale co učit a rád se učí. Kódoval jsem mnoho grafik od různých grafiků:

Výčet pár grafiků sem nedávám proto, abych zde hazel “machra”, ale proto, aby zase někdo neřekl, že se mi na stůl nedostala žádná pořádná grafika.
Místo zbytečných řečí tedy přejdu rovnou k jádru věci: Grafik nepřemýšlí a není na něj spolehnutí! Netýká se to určitě všech, nechci házet všechny do jednoho pytle, ale jsou určité základy, které by měl každý znát a přesně tomu se chci věnovat v tomto článku. Nečekejte nic nového, jen takový seznam nebo výčet věcí, se kterými jsem se setkal.

Grid je kámoš

Člověk by řekl, že v dnešní době už musí každý grafik znát grid, že web o šířce 1230px už přece nikdo nemůže udělat, ale opak je pravdou. Neulehčuje přece práci jen kodérům, ale i samotnému grafikovi, vše je stejně široké se stejnýma rozestupama / mezerama a pokud ho umí opravdu používat, tak je spokojenost na obou stranách a nemusíme si navzájem reklamovat práci: “že támhle je to o jeden pixel širší a támhle zase o dva pixely užší” a celkově je web všude stějně velký.
Nejznámější gridy:

Aktivní položka, hover a akce na elementech

Každý kódér není grafik a nemusí mít nutně ten správný cit a pokud chcete, aby vám “nemršil” grafiku tím, že si bude hover stavy na odkazech, tlačítcích, v menu… dělat sám, tak mu je navhrněte, není potřeba všude, ale pokud si s tím date opravdu práci, tak touto “malou“ úpravou posunete web o další level dál a všichni budou spokojeni! To stejné platí na aktivních položkách nejen v menu.

Ideály neexistují! Na celém webu nebudou pouze jednořádkové nadpisy

Jedna z typických věcí na kterou většina grafiků “kašle”, navrhnou krásný detail článku, zboží… ale už nepřemýšlí nad tím, že ten nadpis může být na dvou řádcích, mám rád detaily, proto rád odladim rozestupy v nadpisu, tak aby i dvouřádkový vypadal v pořádku, hlavně pokud se web bude nasazovat na nějaký CMS a poté bude v rukou božích (čti: uživatelových) a ten je schopen dát do nadpisu cokoliv, opravdu cokoliv. To stejné platí i o samotných textech, které na webu budou, nebojte se připravit “default” stránku s rozestupy textů, odrážkovým seznamem, tabulku a nadpisy alespoň od H1 po H4 a hlavně poté z těchto rozměrů / rozestupů vycházejte na všech ostatních stránkách.

Cufon, font-face a ti ostatní Vs. jazykové mutace

Je nádherné, když dostaneme grafiku s krásným fontem, který z webu udělá pastvu pro oči, ale k čemu, když web pojede navíc v Anglické, Německé a třeba Ruské mutaci, ale použitý font neumí přehlasované “ä” natož, aby uměl nějakou azbuku, proto pokud vím, že web pojede ve vice mutacích, tak zapřemýšlím, zda daný font umí i další speciální znaky a nejen českou diakritiku, ulehčí nám to všem práci. Pokud neumí, tak navrhněte ekvivalent nebo nějaký způsob, jak to v ostatních mutacích udělat. Navíc pokud použijete nějaký speciální font, zašlete ho s grafikou, díky ;)

“Cool trendy” pozadí

Né na každém webu stačí použít v pozadí nějakou barvu, přechod a nebo pattern, někde se hodí použít velkou fotku, obrázek, skicu… ale když už jí použijete, zkuste zapřemýšlet, zda jí dokážete dodat v dostatečném rozměru, tak aby I na rozlišení 1600x1200 vypadal web v pořádku a nebyl po stranách useknutý. Celkově by bylo fajn přidat nějaký komentář nejen k obrázkovému pozadí, ale I třeba pokud použijete nějaký opakující se pattern nebo nějaký gradient.

Kulaté rohy, stíny a ti ostatní z CSS3

Nic proti používání těchto technologií nemám, ale když už něco použijete, zkuste si na nějakém CSS3 generátoru (css3generator.com) zkusit, zda to jde docílit, teď si nevzpomenu kde jsem to viděl, ale šílenosti tvořit vy grafici umíte, vím že to je práce z vaší strany, tak říkajíc navíc, ale pak si nemusíme navzájem reklamovat práci: “ že je to jinak než v grafice”. V dnešní době už se opravdu snažím používat obrázky co nejméně, a proto jsem rád, pokud jde daná věc zastylovat jen pomocí CSS.

Success, error aneb formuláře a 404 v praxi

Tvoříte kontaktní formulář, přihlášení, registraci? Navrhněte mi chybovou stránku! A co když formulář úspěšně odešlu? Pak bude jako co? Zabere to většinou pár minutek a já potom nemusím přemýšlet nad tím, jaké mám použít barvy, tak aby to potom sedlo “jako prdel na hrnec”. To stejné u stránky 404, nebo-li co když jdu na odkaz, který už na webu není, nebo jsem ho zadal ručně a špatně? Navrhněte mi jak by mohla vypadat, třeba teď nám Jiří Tvrdek dělal sympatické 404 na Gumotexu a Znovínu. Určitě to má něco do sebe ;).
Je totiž jen pár věcí, které testují na nově spuštěných webech (nejen) naší konkurence, první hledám formulář a zkouším ho odeslat bez vyplněných dat a hned v zápětí koukám jak vypadá stránka 404.

Pár detailů na závěr

Co říct závěrem?

Doufám, že tohle alespoň pár lidí dočetlo do konce, je to opravdu jen seznam věcí, na které je určitě dobré myslet. Určitě to není vše, spoustu jsem toho sem nenapsal a pokud bude mít nějaký ohlas tento článek, tak rád sepíšu i další věci, které mám zapsané ;) Budu rád za jakékoliv sdílení popřípadě nějaký komentář už jen kvůli tomu, že bych rád věděl, zda se vám článek libil. Díky.

P.s:

nic z toho co zde popisuju se netýká ani jednoho grafika, který je zde uveden, bylo to cíleno hlavně na grafiky, kteří začínají nebo už dělají dlouho a i přesto opakují ty stejné školácké chyby a jelikož se mi za nějaký čas sešlo dost věcí, tak proto jsem sepsal tento článek. Všechny použíté náhledy ukazují správné zapracování grafiky, tak jak bych si to představoval ;)

Sdílet:

comments powered by Disqus