Jste tu poprvé? - Skrýt (musíte být přihlášeni)

10 tipů jak svůj design připravit pro kódování

  • napsallefiath
  • sekceWebdesign
  • kategorieOstatní
  • znalostiAutor předpokládá, že máte pročteny minimálně základy v Photoshopu.

15. 6. 2011 v 17:35 21 10 tipů jak svůj design připravit pro kódování

Kodérům z vás padají vlasy, kdykoliv s vámi musí spolupracovat? Nacházíte před dveřmi obálky s kulkou s přiloženými css? Už po vás někdo někdy hodil tiskové styly? Buďte bez obav, nemusíte se sami učit jak kódovat (ačkoliv je to jen plus), přečtěte si následující tipy jak udělat váš design stravitelný pro kodéra.

Toto shrnutí píšu jako člověk, který sám kóduje, přestože se neodvažuji tvrdit, že jsou moje zkušenosti v oblasti html a css nějak zvlášť rozsáhlé. Ale umím toho dost na to, abych dokázal soucítit s našimi bratry ve zbrani, kodéry a programátory. Stejně jako existují flákači v jejich řadách, kteří váš design zprzní a pokazí nejen detaily, ale odpustí si některé důležitější doplňky (protože to přeci nejde pořádně nakódovat), můžete i vy připravit nejednomu z nich krušné chvilky. Tento článek by vás měl připravit na to, abyste něco takového nikdy neudělali neúmyslně. (A pokud něco takového uděláte úmyslně z lenosti, styďte se a bojte se - přijde si pro vás zlý požírač designérů PlavaCthultu a vytrhá vám všechny chlupy ze zadku. Když budete mít štěstí.)

Obecně platí že čím složitější design, tím větší šance, že v něm bude nějaký problém pro kodéra. Těchto 10 bodů by vám mělo pomoci podobné přešlapy minimalizovat. Mimochodem, stále používám pro webdesign Photoshop, ale rady by měly jít aplikovat prakticky na jakýkoliv program, většinou píšu obecně. Poslední připomínka, neberte všechno v článku smrtelně vážně.

1. Dodání zdrojových souborů

Šikovný kodér ve většině případů zvládne převést design do kódu i pokud nemá k dispozici zdrojové soubory (a někteří to tak dělají, protože ani Photoshop nebo jiný program nemají, ale ty už opravdu považuji za masochisty), výrazně mu ale ušetříte práci, pokud mu poskytnete soubory, se kterými jste pracovali. Tohle by měla být samozřejmost a první pravidlo dobrých vztahů mezi designérem a kodérem. Kdo se zdrojových souborů zbaví po odeslání ukázkového obrázku (JPG, PNG), nechť je pověšen na nejbližším stromě.

O tomto bodu se nediskutuje, a dá se prominout pouze v případě, že kodér bezvýhradně souhlasí (například nedostatek času na přípravu PSD, viz. dále) a PSD akutně nepotřebuje. I tak byste si měli u každého projektu schovávat zdrojové soubory, pokud to neděláte, přijměte to jako nový zvyk. Bude se to hodit i v případě, že někdy vás někdy v budoucnu klient osloví s úpravami - jak hloupě asi budete vypadat když řeknete, že jste si soubory nezarchivovali?

2. Pojmenované a seskupené vrstvy

A když už PSD předáváte, druhou věcí, která by měla být samozřejmá, je logické pojmenování a seskupení vrstev. Jedna věc je neseskupené PSD, se kterým pracujete a u kterého máte solidní přehled o tom kde co je, i když je to bordel. (Jak se říká, inteligent vládne chaosu.) A věc druhá je nešťastník, který váš soubor otevírá poprvé a má se v něm vyznat. Jedna ruka trhá vlasy, druhá sahá po archívní whiskey. To, jaký hampejz máte v souborech je vaše věc, ale ve chvíli, kdy do souboru bude zasahovat někdo jiný, měli byste udělat to málo co můžete, abyste mu práci zpříjemnili, nebo spíš aby pro něj procházení vašich dokumentů nebylo peklo. A malý tip i pro vás, nemusíte mít perfektně pojmenované a setříděné vrstvy, ale nějaké základní rozdělení dle regionů designu určitě dodržujte - nějaká přehlednost se vždy hodí.

Zde může situace, kdy předáváte ne úplně připravený a organizovaný soubor, nastat daleko častěji, ale i tak máte kodéra vždy informovat o stavu souboru. Pokud vám odkýve, že mu nemusíte vše dokonale připravit (spokojí se se základním rozdělením), ušetříte čas - jde o to abyste ho nešetřili na něčí úkor.

3. Pochopitelné a navazující pozadí

Vždy když děláte komplexnější pozadí, přemýšlejte nad tím, že váš design budou využívat lidé s různě velkými monitory. Nesmíte proto pozadí jen tak useknout, zvlášť když jde o komplexní kus, který se rozprostírá celým designem. Samozřejmě, jsou případy, kdy něco takového buď nejde, nebo jen ztěžka. Protože se zde nebavíme o konkrétních případech, budu spoléhat na váš úsudek, kdy může pozadí pokračovat a kdy ne. (V následující větě proto slovo vždy považujte za "vždy když můžete".)

Nezáleží na tom jak velké pozadí uděláte, unikátní část by vždy měla nějak přecházet do části, která se dá opakovat - tedy jedné barvy, případně jednoduchého přechodu, který jde jen z jedné strany. Vždy náročnější pozadí ukončujte plynulým přechodem do jednoduchého. To je to jediné, na čem tu záleží, mimo speciálních vyjímek, kdy si to diktuje styl grafiky.

Na obrázku vidíte, že klasická šířka obsahu je 960. Ale odlesk na pozadí jde až ke hranicím dokumentu, který má 1920. Kodér tak musí zabrat celé pozadí, aby přechod nebyl useklý a nekončil v polovině, a já mu ho musím celý poskytnout.

4. Jasně opakující se vzorky

Kdykoliv máte na pozadí složitý vzorek, který se opakuje, jasně vyznačte co má kodér vyřezat. (Jestli chcete být opravdu moc hodní, pošlete mu samostatný soubor s vzorkem.) U jednodušších vzorků to nemusí být těžké (proto to nemusíte dělat ve všech případech, u 10 pixelů velkých vzorků si kodér pravděpodobně poradí), ale čím složitější technika, tím těžší bývá odhadnout, kde ten zatracený kousek začíná a končí. Žádná věda, využijte vodící linky, nebo vzorek nějak izolujte.

5. Hover stavy

Musím se přiznat, že tohle bývá občas i můj zlozvyk. Ale když ho potom řeším, tak ve velkém stylu (like a pro). Spousta lidí totiž zapomíná na to, že každá klikatelná část webu by měla mít (dostatečně) výrazný hover stav (alias "při najetí kurzoru", nebo pro normální lidi, aktivní stav). U odkazů je to jednoduché, kodér změní barvu textu. Jak dojde na tlačítka, osobně si potrpím na to, aby se měnilo víc než jen barva textu (jenom web tutoriarts je toho důkazem). Je tu ale pochopitelný problém - dokud není design schválen a uzavřen, málokomu se chce dělat aktivní stavy tlačítek a další věci, když se může stát, že se zrovna to tlačítko, u kterého jste si dali dvojnásob záležet, bude měnit, a vy jste tak zbytečně vynaložili dvojnásobné úsilí.

Z toho důvodu se hovery obvykle dělají až těsně před uzavřením zakázky a předáním. Tohle není jedno z pravidel, jejichž porušení se nepromíjí, ale považuji za vhodné si z toho udělat osobní pravidlo, jak designu přidáte na hodnotě. Protože jemný hover rozhodně přidanou hodnotu (vyjímky existují) nedá. Nejlepší způsob jak hovery připravit je umístit je nad nebo pod klidový stav a skupinu skrýt. Potom jen kodérovi řekněte, že skrytá tlačítka najde umístěna hned vedle vrstev klasických tlačítek.

6. Místa s proměnlivou velikostí - jejich pozadí a tvar

S tímhle se také setkávám docela často - mnoho designérů dokáže propadnout představě, že design co vytváří bude z větší části beze změny. Problém je, že do toho často zamotají i místa s obsahem. I v dnešní době jsou designy s proměnlivou šířkou poměrně vzácné (protože toho musíte promyslet daleko víc, nebo se vzdát různých vymožeností), takže vás většinou zajímá výška objektů. Bavíme se čistě o blocích, které obsahují text - jen velmi vzácně se natahuje nebo mění velikost jiný kus než samotný obsah webu.

Určitě se mnou budete souhlasit, že pěkný přechod může ledacos vylepšit. Sterilní blok potom hned vypadá lépe, když není jednou barvou. Problém je v tom, že ten blok se bude libovolně zvětšovat, protože je v něm text. A kodér prostě nemůže rozumně natáhnout barevný přechod (pokud by šlo jen o přechod, tak to se udělat dá, ale většinou neděláte jen obyčejné hranaté bloky s přechodem), takže je vhodné natáhnout přechod do určité vzdálenosti, kde si myslíte že je bezpečné předpokládat, že minimálně tolik místa bude vždy zaplněno textem, a co bude navíc, dostane jen klasickou jednu barvu.

Další případ může nastat, pokud takovému bloku dáte tvar, který zabraňuje jeho natahování. V obrázku níže tak není možné měnit velikost. Protože to bylo tvořeno pro formulář, změna velikost by byla nutná až v případě, že by se samotný formulář nějak měnil - potom bohužel musí znovu nastoupit designér a vše předělat. Takže si rozmyslete, co je za jakých okolností vhodné - kodér to za vás spravovat nebude.

7. Webové fonty a poskytnutí doplňkových fontů

Přepokládám že zkušenosti a schopnosti čtenářů-designérů budou různé, takže si článek přečtou jak lidé, kteří ještě příliš zkušeností s fonty nemají, tak ti, kteří už za to dostali vynadáno. V dnešní době mají kodéři mnoho nástrojů, díky kterým mohou využívat doplňkové fonty lépe než kdy předtím. Stále ale platí pravidlo, že pro obsahový (a jakýkoliv, který se bude měnit) text by se měly používat základní fonty, které má většina operačních systémů. Pokud se budete držet této sbírky, kodér nebude mít žádný problém. U alternativních fontů, speciálně komerčních, nastává problém, protože návštěvník je pravděpodobně nebude mít nainstalované a proto by se mu v klasické formě nezobrazily.

Proto se používají různé alternativní metody, od klasického překrytí obrázkem (kdy se doplňkový font vyřízne jako obrázek a pod něj se vloží normální text, takže návštěvník vidí pěkný font a roboti, kteří procházejí stránky bez obrázků, uvidí text - jasnou nevýhodou potom je to, že text nejde upravovat, proto se toto řešen dnes postupně opouští), javascriptových a flashových metod nahrazování textů, nebo nejnověji přes CSS vlastnosti. Nemusíte nutně vědět jakou metodu kodér zvolí, ale pokud je to možné, informujte ho předem (a domluvte se s klientem) o tom, které fonty uděláte doplňkovými fonty a zda to pro něj nebude problém (neměl by být, ale lepší je domluvit se předem).

A pokud takový font použijete, měli byste ho poskytnout spolu se zdrojovými soubory, jinak nikdo kromě vás nebude mít možnost do fontu zasahovat. Říkám měli (místo musíte), protože pokud použijete placený font, měli byste mít licenci zakoupenou nejen vy, ale i zákazník (jen tak bokem - pokud zákazník písmo nebude používat například jako svoji firemní identitu, a půjde jen o použití v nadpisu webu, myslím že se to může přejít s tím, že licenci máte jen vy).

8. Mějte povědomí o tom, pro jakou technologii design připravujete

Celý článek je věnovaný lidem, kteří dělají pouze grafiku a její další zpracování už jde mimo ně - to ale neznamená že by vám uškodilo se něco přiučit o tom, jakým procesem design dál prochází.

Nasát důležité informace může být v tomto případě poměrně jednoduché - nepotřebujete vědět konkrétní informace, ale chcete mít nějaký základní přehled. Pokud tedy máte kodéra/programátora, který není nemožný ve výkladu a popisu věcí, neměl by být problém ho přemluvit (vždycky ho můžete pozvat na pivko nebo domluvit rande se sestrou, případně bratrem), aby vám dal menší lekci (nic násilného) a poučil vás, jak funguje technologie, kterou používá.

Určitě se nemusíte hned začít učit html a css. Ale vědomosti o tom, co daná technologie dokáže, vám dává víc prostoru při tvorbě. Víte na co si dát pozor (a nemusíte potom číst podobné články jako tento) a naopak co vám může pomoct a co můžete využít ve svůj prospěch. To, kolik se naučíte je na vás. Zkuste alespoň něco - dokud je to relevantní k vaší vlastní práci, stručné znalosti jsou jen přínos.

9. V případě změn jasně vyznačte aktuální verzi

Pokud pracujete na rozsáhlejším projektu, většinou v průběhu práce dochází k různým změnám. Pokud jste to někdy zažili (ať jako designér, nebo kodér), určitě mi dáte za pravdu, jak jednoduché je něco poplést nebo přehodit tak, že jedna strana nemá úplně jasno, co dělá druhá. Speciálně pokud se pracuje na jednom systému a stále přibývají nové kousky - cokoliv co se změní globálně je třeba řádně popsat a zdokumentovat, čímž předejdete chaosu.

Buďte v obraze, komunikujte s ostatními (za předpokladu, že vás zadavatel dobře platí, samozřejmě...) a snažte se, aby vaším přičiněním nevzniklo zmatení celého týmu. U tohoto bodu nemám žádnou konkrétní moudrou radu, snad až na to, že byste si neměli zapomenout dohodnout patřičné podmínky spolupráce. Pokud se toho, na čem jste se domluvili, budete držet, výrazně snížíte šanci, že něco poděláte.

10. Design má být přesný na pixel!

Naprostá většina kodérů (alespoň ti dobří) vezme to co vidí, a nakóduje to tak, jak jim to dodáte. Jejich práce není spravovat váš bídný, mizerně spíchnutý design jak z mateřské školky. Proto když se rozhodnete vypustit tu svoji zkázu do světa, dodržujte přesně dané rozměry a dbejte na to, ať vám něco neujíždí. Snažte se používat jednotné barvy písma, jednotné velikosti (když dodáte 3 různě velké nadpisy, kodér nebude vědět co si z toho vybrat) a hlavně jednotné odsazení.

Speciálně s odsazením bojuje i řada zkušených designérů (ijá, ijá), a v jejich případě to neváhám označit za lenost (i já, i já). Pokud něco odsadíte zleva o 20 pixelů, mělo by to být odsazeno přesně o 20 pixelů také zprava. (Zhora a zdola to může být jinak, záleží na situaci.) Pro tyto případy využívejte vodítka (nebo nějaký grid systém) a snažte se mít obecný přehled o tom, jaké prvky používáte. Čím náročnější a komplikovanější projekt, tím větší je šance, že vám to někde ujede - proto je na zvážení i vytvoření samostatného souboru/skupiny vrstev v dokumentu, který bude obsahovat jen informace o jednotném stylu.

Dodržujte rozumné rozměry a velikosti. Zaokrouhlujte rozměry - žádný kodér nebude nadšený, když mu dodáte design se sloupci 284, 119 a 121 pixelů na šířku. Pokud k tomu není rozumný důvod, náhodně brané rozměry svědčí o vaší lenosti a neuspořádanosti designu.

Závěr

Když jsem přemýšlel o jednotlivých bodech, původně jsem plánoval napsat 10 + 1 bod, ale nepodařilo se mi přijít na nic dalšího (pokud bych nechtěl nějaký bod dělit na 2), což je snad dobře, protože toho není tolik, na co byste měli dávat pozor. Jak se naučíte respektovat alespoň některé z těchto základních doporučení a pravidel (většina z nich je rozumná a měla by být standardem), stane se to pro vás automatikou, pokud nezlenivíte a nezačnete některé věci vědomně ignorovat. A potom byste se měli začít nenávidět... Dobrá, to je trochu temný konec článku, raději to nahradím tím, že se jistě najde dost lidí, kterým toto shrnutí pomůže a značně tak vylepší vztahy mezi nimi a kodérem. A pokud ne - nezapomeňte, že nejlepší bývá s vaším kamarádem ve zbrani komunikovat a prostě se ho zeptat, zda nemá s vaší prací nějaké problémy. (Jen se nenechte zneužívat, stejně jako mají designéři problémy s přípravnou pro kód, kodéři mohou mít problémy řádně interpretovat design, i když to nemusí být velký problém.)

Kodéři, zapoměl jsem na nějaký důležitý bod? Napište mi a já ho rád přidám, spojíme tak síly k společnému vítězství!

Fantastická ikonka Photoshop je od Antrepo.

Petr Široký Profil na fóru / Osobní stránky / Twitter Webdesignér povoláním, kritik přesvědčením, šašek duší, to vše zde najdete. Tutoriarts jsou poslední 3 roky můj největší osobní projekt. Kromě toho se zkouším věnovat jiným menším webovým projektům, živím se jako nezávislý webový designér a snažím se více hledět do budoucnosti, aby tyto stránky vzkvétaly.

Zdrojový soubor : Není k dispozici

Komentáře k článku

Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se přihlašte, nebo registrujte. Registrace nezabere déle než minutu.

  • :-D
  • 8-|
  • :-/
  • 8-)
  • :-(
  • :-O
  • =(
  • =D
  • :-)
  • <3
  • ;-)

* Povinné položky

  • #21
  • .J.P.
  • 2. October 2011 | 16:13
  • Skupina: Registrovaní Uživatelé

Musím se přiznat, že se zaokrouhlováním rozměrů mám velké problémy.:-( Hlavně proto, že mi ty prvky se zaokrouhlenými rozměry prostě vzhledově nesedí. Když totiž dám třeba 40 px výšku nějakého prvku, tak se mi zdá malý a když dám pak 50px, tak zase velký. Prostě to nemůžu zaokrouhlit, aby to i dobře vypadalo. Nevím, čím to.:-O Hlavně je to u menu, , tlačítek, vyhledávání a jiných políček (tedy vlastně ve výšce prvku). Je třeba špatně dělat vyhledávací políčko s výškou 38px (i s efekty jako stíny, vytažení atd.), když mi to takto vzhledově lépe sedí? Třeba tady se teď dívám u přidávání komentářů na ta políčka pro psaní emailu atd. a taky mají i s rámečkem 29px.

  • #20
  • Champion
  • 15. August 2011 | 22:35
  • Skupina: Registrovaní Uživatelé

Osobně mě potěšilo, že jsem na tato pravidla přišel během tvorby sám a že se jimi řídím i přesto, že práce ode mě často putuje zas jen ke mě... kodér a grafik v jedné osobě. I proto velmi souhlasím s bodem 8. HTML i CSS jsou opravdu základ a skoro bych řekl, že nutnost, i když se mnou jistě mnozí nebudou souhlasit :). Jejich znalost usnadňuje práci koderovi, jelikož si pak zodpovědný grafik nevymýšlí spoustu věcí, které by se složitě kodovali... samozřejmě se to dá nazvat jen leností, ale řekl bych, že ne vždy je nutné kvůli extra-hyper-super-cool efektu utratit spoustu hodin, které pak uživatel jen těžko ocení.

@Shinoda - co se týče mobilních verzí webů, tak plně souhlasím. Nejhorší je, když je někde odkaz na takový web. ten automaticky rozpozná, že se jedná o mobil, vybere mobilní verzi, ale už nepřesměruje odkaz na správný obsah.

Když už jsem u těch mobilů řekl bych, že než stažená data jsou větším problémem po-přejetí-vysouvací menu. Prstem hover efektu nedocílíte a není-li na webu jiná možnost jak se dostat na položku, která se ukrývá někde ve vysouvacím menu, pak je tato položka zcela ztracena. Začíná to být už trochu mimo téma "předávání práce", ale jelikož jsou smartphony na vzestupu bylo by možná dobré na to pamatovat. Jen nevím na čí hlavu pak takový problém hodit, jestli na grafikovu nebo kodérovu.

  • #19
  • mivadesign
  • 30. July 2011 | 18:51
  • Skupina: Neregistrovaní

Díky za opravdu povedený článek. Pěkně shrnuté základní standardy - jak na dlani :). Určitě by se to dalo víc rozvinout, ale to nebylo myslím záměrem. Článek pomůže začátečníkům, ale mohl by pomoci i lidem, kteří se tím živí. Bylo by super vzít to jako 10pravidel, ty si vytisknout, přilepit na nástěnku a denně před začátkem práce si je přeříkávat jako modlitbu :D

  • #18
  • Frostik_cze
  • 12. July 2011 | 18:00
  • Skupina: Neregistrovaní

Jelikož působím jako webdesignér a zároveň i kóder, můžu s čistou hlavou napsat, že je článek opravdu povedený a potencionálním či současným designerům pomáhá v plné síle. ;-)

  • #17
  • stope32
  • 27. June 2011 | 14:45
  • Skupina: Neregistrovaní

lefiath: [nejde jen o tvou lenost? 960 není dogma] ... chvíli jsem se rozhodoval, jestli dělat uraženého, nebo odpovědět. :-D ROHODNĚ nejde o lenost. Pokud 960px není dogma, je to přinejmenším slušnost vůči uživatelům s malými monitory. Klient, jehož potenciální zákazníci mají rozlišení 1024, bude určitě nadšený, když v jeho "moderním" širokém designu někdo neuvidí sidebar s bannerem lákajícím na akční nabídku. Speciálně uživatelé nad 45 let berou web tak, že to co je skryté za zlomem, prostě neexistuje.

Jak jsem psal, 1000px design není vhodné ani pro 960, ani pro 1140, což je nové pravidlo, které ale stejně musí umět degradovat na 960, aby pokrylo výše zmíněné malé monitory.

Dalších standardů bys určitě po kratší úvaze pár našel - třeba klíčové prvky jako flashové animace bez fallbacku, čitelnost a kontrast písma na pozadí atd. atd.

Ono to spíš vypadá jako rozvíjení bodu 8, ale webový grafik musí alespoň trochu rozumět HTML a CSS (navíc mu to otevře další možnosti výdělku)...

  • #16
  • lefiath
  • 27. June 2011 | 12:38
  • Skupina: Správci

Já v 1000 pixelech zrovna velký problém nevidím - v posledním bodu se zmiňuju o dodržování rozumných velikostí, a dokud jde o celá čísla, nemělo by to vadit - nejde jen o tvou lenost? 960 není dogma a spousta grafiků si to různě přizpůsobuje. Nejsem si jistý zda bych v tomto případě vymyslel nějaké další standardy, které by bylo vhodné u designu dodržet.

  • #15
  • stope32
  • 27. June 2011 | 08:55
  • Skupina: Neregistrovaní

Co čert nechtěl, krátce po přečtení článku se mi do rukou dostala zakázka - nakódování výtvoru jiného kolegy "grafika". Po dvou hodinách moření se se zdrojáky jsem přišel na jedenáctý bod ve Tvém seznamu:

"Naučte se a dodržujte webové standardy"

Např. v mém případě je návrh naprosto nesmyslně rozvržen na 1000px, což nevyhovuje ani klasice (960px) ani responsive trendu (1140px). A rozhodně to není vše...

  • #14
  • D(i)cson
  • 25. June 2011 | 21:06
  • Skupina: Registrovaní Uživatelé

mimochodem Antrepo .. dělá hodně dobrý věcičky, ty kontejnery jsou luxus =D
ale k článku, hodně naučný a myslím, že né jen pro začátečníky ale i profesionáli, třeba najdou chybky ve své práci ;-)

  • #13
  • stope32
  • 21. June 2011 | 23:32
  • Skupina: Neregistrovaní

Super článek pro začátečníky, mnoha kodérům určitě usnadní život...

@ Agarwaen - Co se týče fontů, pro určení používám už delší dobu tabulku na konci článku http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

@ TNi - můžeš se prosím rozepsat o tom, jak styluješ šipečku u selectboxu? Zatím jsem u radia, selectu i checku narazil jen na úpravy pomocí JS - rozhodně je nezavrhuju, ale čistý CSS přístup by se mi určitě líbil víc...

  • #12
  • jonny
  • 17. June 2011 | 17:45
  • Skupina: Neregistrovaní

A jo..., rad jsem si precetl, dobra prace.

  • #11
  • Shinoda
  • 17. June 2011 | 11:29
  • Skupina: Registrovaní Uživatelé

TNi:
souhlasím se slučováním vrstev, je to nesmysl, grafik by měl dodat více souborů, jeden jako preview komplet s textem a další rozstřihané a logicky poslučované a nezapomínat na průhledné vrstvy, které pujdou do .png (hlavně např. když je okolo těla webu např. stín a pozadí má být fixní)

U toho pozadí nesouhlasim. Pokud chce někdo lozit po netu z mobilu, pak je to jeho boj.. Navíc to s vytvořením mobilní verze, např. já osobně jsem si vypl zobrazování mobilní verze webu, protože je většinou úplně jiná než klasický web a pak se v tom nedá orientovat, když je člověk zvyklý z PC, takže pro mě jsou mobilní verze k ničemu. Další plus je, že např. Opera na mobilu celý web zmenší a pak si člověk jen klikne kde to chce přiblížit, naprosto jednoduché a neochuzuje to web o grafiku..

PS: Ono to že se začalo chodit na weby z mobilů a netbooků je pro grafiku krok zpět.. Představte si, že by výrobci her museli myslet na pomalé a staré PC, to bysme se daleko nedostali a s tímto je to trochu podobné..

  • #10
  • TNi
  • 16. June 2011 | 20:25
  • Skupina: Neregistrovaní

lefiath:
:o) to ze oponujes je jen dobre.. tak vznika diskuze.. je mi jasne ze nekdo je zvykly na nejake postupy a nekdo na jine..

- Alternativni programy: to ze nekdo nepouziva Photoshop je samozrejme vec jeho, at se s PSD pote popere sam.. chtel jsem tim jen upozornit na to, ze by v PSD nemely byt vrstvy, ktere tam jsou zbytecne.. S temi skupinami me to napadlo spis proto, ze zhruba pred mesicem za mnou prisel kolega at mu v PS otevru jednu grafiku ze se v ni nemuze zorientovat :)

- Efekty: Bud rad ze si to nevidel :) ja dostal i PSD, kde byl text sloucen do vrstvy pozadi. Neslo tak pozadi vyriznou (bylo transparentni a jeste k tomu to melo gradient a na tom ten text.. vse v jedne vrstve) :)


- Kreslit vse: souhlasim s tebou. Tady uz to zase zavisi na nejake dokumentaci k projektu a nebo nejake komunikaci.. kdyz grafik neni informovan je pak tezke neco kreslit. Zase jsem to asi zminil proto, ze jsem zvykly na nejake specifikace a dokumentacek de je vse jasne popsano a i tak nekdy grafik nenakresli to, co by bylo potreba..

- Delsi obsah: jo jo, tohle by stalo zminit i kdyz je pravda ze pod 6ku by to spadalo. Co si budem povidat, tohle je podle me nejcastejsi chyba (slovo chyba je mozna az moc prehnane)

- Formulare: Na jednu stranu take souhlasim. Checkbox a radio nestyluji vubec. Inputy a buttony ano abych pravdu rekl.. tam to je dost jednoduche. Tezsi to je zase u selectu (konkretne ta sipecka, ale i to jde). Asi jsem to spatne popsal, jsou takove hardcore pripady, kdy grafik navrhne input, selectbox, checkbox atd uplne nesmyslne a je nutne vyuzivat javascript, ktery vztvori novz element, ktery se bude tvarit napr jako selectbox s danou grafikou. Toto se mi nelibi, takze vlastne s tebou souhlasim :-)

- Texty: Asi mas pravdu.. zas takovy problem to pro kodera neni, hold kdyz se to pote klientovi libit nebude, tak to jde na hlavu grafikovi, ktery to doda.. ale porad si budu stat za nazorem ze by to melo byt soucasti projektu :o) jelikoz grafik ma nejakou vizi, jak by web mel vypadat a kdyz nedoda obsahovou cast, tak mu ji koder muze hodne rychle zpackat :)

- Pozadi: Zde si dovolim zas tak nesouhlasit. Posledni dobou jsou hodne in smartphony... ja bezne surfuju po internetu a dokaze me vytocit, kdyz web ma neuveritelne moc obrazku. BOhuzel nebyva casto pravidlem to, ze si klient necha vytvorit wbe pro PC a zaroven jeho mobilni verzi. Kdyz jsou 2 verze, tak at si ta na PC ma pozadi klidne 2MB velke a ta mobilni at ma jen barvu na pozadi, ale pokud vime, ze na web muzou a budou chodit i lide z mobilu (napr poskytujeme dopravni informace z dalnic nebo mest) tak je nesmysl davat na pozadi nejake auto pres celou obrazovku, ktere se na mobilu zaprve nezobrazi a za druhe se uzivateli rychle vycerpa datovy limit (coz se mi stava kazdy mesic a to jen ctu maily a surfuji). Za to bych vrazdil, ale zase je otazka, do jake miry to spada na hlavu grafikovi, ktery nemusi vedet, ze web bude navstevovan i z mobilu. S css sprity naprosto souhlasim.. ono to neulehci jen uzivateli, ktery stahne jeden obrazek a ma v nekterych pripadech stazenou celou grafiku webu, ale ulehci to hlavne serveru, na ktery jde jen zlomek requestu. Mrknete napr na annonce.cz (homepage). Z drivejsich 50ti requestu je jich jen 14 :) toto je ale spise uz na kodera nez na grafika ;)

  • #9
  • Shinoda
  • 16. June 2011 | 20:22
  • Skupina: Registrovaní Uživatelé

Dobře že jsi to tak sepsal i když si to kóduješ sám, to pak člověk nad polovinou věcí nepřemýšlí..
U těch vzorků pro pozadí bych doporučoval dodáva extra soubor, poslední dobou jsem našel hodně patternů u kterých jde hodně těžko poznat kde se opakují..

Jinak menší problém může být s těma fontama, protože pokud font není vyloženě free, tak ho nesmíte nikomu posílat (a to např. ani Arial) a už vůbec takový font nemůžete dávat na server a pak ho nějak volně poskytnout přes css (přes src, často to potkávám). Ten font pak jde stáhnout.. Mělo by se to pak řešit nějakou funkcí na straně serveru (jestli to jde), aby se návštěvník k fontu vůbec nedostal..

PS: ono to html a css není zas tak hrozné, nepřijde mi to moc jako "programování", to spíš až php.. Určitě to jde naučit i bez nějakých programátorských buněk.

Dotaz na závěr viz odkazy od Agarwaen, nikde není Century Gothic, je to celkem hezký font (např. pro menu), máte někdo nějaké poznatky s podporu?

  • #8
  • Agarwaen
  • 16. June 2011 | 09:19
  • Skupina: Neregistrovaní

Článek hezký, ukládám do oblíbených :).

Jen jeden tip co se týče používaných fontů - uvedený odkaz na Pixyho je už staršího data a seznam fontů pak ještě dopracoval David Grundl - doporučuju tedy spíše odkaz na něj (je rozpracovanější a použitelnější) > http://www.dgx.cz/tools/fonts/ + http://www.dgx.cz/tools/fonts/vista.php

Krásně napsáno, a jsem rád že většinu těchto postupů také používám :)=D

  • #6
  • lefiath
  • 16. June 2011 | 01:59
  • Skupina: Správci

Tak předně díky za opravdu rozsáhlý a věcný komentář s hromadou informací. Nicméně s částí nebudu souhlasit a budu oponovat. Chtěl jsem říct že některé připomínky bych nazval až nuzné, ale nechci nikoho urážet (tím spíš někoho, kdo si dal práci s hodnotným komentářem) - takže to řeknu tak, že mi něco přijde hodně přísné (zas trochu jako opačný extrém) a zdůvodním proč.

- Alternativní programy: Dokážu pochopit že někdo nechce dávat tolik peněz za něco, s čím bude jen rozřezávat grafiku. Nicméně pokud někdo používá něco, co nepodporuje skupiny, pak je spíš dinosaurus a jde o jeho osobní problém, na který bych rozhodně nebral ohledy - máme jednak Fireworks, který je výrazně levnější než Photoshop a je na práci s webem přímo dělaný, a jednak Gimp, který je úplně zdarma. Pokud někdo používá něco jiného, co mu znesnadňuje práci, protože to nepodporuje naprosto základní funkce grafických programů, musí se přizpůsobit on. Nepoužité vrstvy by do finálního psd určitě přijít neměly, ale kvůli připomínce výše spíš kvůli velikosti souboru.

- Efekty: Sloučení jsem popravdě už dlouho neviděl, tak jsem na to zapoměl. Na druhou stranu, nevím jak si efekty z Photoshopu interpretují jiné programy, takže může jít o nutnost v zájmu zachování kompatibility. Tohle by asi patřilo do jasně rozeznatelného pozadí, grafik by měl navrhnout efekty a grafiku designu tak, aby vše šlo jasně rozpoznat, případně to vhodně okomentovat.

- Kreslit vše: Tady bych jen dodal, že grafik také nemusí vědět, co všechno se dá použít (viz bod 8) a proto bych u toho byl opatrný. Tak když se jedná o menu, pokud se položky liší jen textem, tak určitě není třeba kreslit další záložky.

- Delší obsah: Tohle by spadalo pod bod 6, ale pořádně jsem to asi nezmínil. Uvažuji tedy o bodu 11 :)

- Formuláře: Protože sám optimalizuji pro IE7 a vyšší a jinak pouze novější verze dalších prohlížečů, v tomto případě částečně nebudu souhlasit. Drtivá většina stránka méně nebo více stylované formuláře používá. Rozhodně souhlasím že stylovat checkbox, radio a další je prasárna a ani nevím, jestli to všechny moderní prohlížeče podporují, ale například takový input je podle mě naprosto bezpečné ostylovat, jak se člověku zachce. Button má problémy s position:relative u firefoxu a starších IE, a select také nestyluji kvůli dalším problémům. Ale inputy pro tlačítka jsou už pár let naprosto normální úkaz - pokud necílíš na to, aby se vše zobrazilo perfektně každému, je takové nestylované tlačítko dnes už raritou.

- Texty: Tohle se obvykle řeší čistě obsahovou stránkou a v mém případě na to klient obvykle myslí. Pokud to nepožaduje, tak bych do toho grafika zase nehonil, to už je na zodpovědnosti zadavatele (pokud si toho je samozřejmě vědom). Beru to jako regulérní práci navíc a nakreslení většiny obsahových prvků pro klasickou obsahovou stránku nepovažuji za standard při tvorbě jakéhokoliv designu - i když by asi bylo fajn, kdyby to standardem bylo.

- Pozadí: Zmínil jsi konkrétně tuhle věc, tak řeknu ano - pokud je to vhodné, v případě nějakého většího obrázku, který se obhájí, tak není problém. V dnešní době má modem naprosté minimum lidí a pokud grafika a kód nepřekročí nějakou rozumnou hranici (řekl bych takový 1 Mb pro klasický web, ale osobně se snažím držet i graficky bohatý web na co nejnižší hodnotě), nevidím problém. Tím neříkám že se to má brát na lehkou váhu, ale už se nemusíme tak strachovat jako před pěti lety. Co se hodně ignoruje jsou css sprity, které jsem si oblíbil, protože zabírají mnohem víc času na tvorbu, ale výrazné snížení počtu http dotazů dokáže takový 500 Kb velký obrázek vyvážit.

  • #5
  • TNi
  • 16. June 2011 | 00:44
  • Skupina: Neregistrovaní

V prvni rade chci pochvalit clanek, moc se mi libi a zadny podobny jsem jeste necetl. Je fajn ze se pise clanek i o takovychto vecech. Jako clovek, ktery se zivi pouze jako koder dam par postrehu:
- s drtivou vetsinou grafiku neprichazim vubec do kontaktu. Proto je zakladem dobra projektova dokumentace a popsani veskerych funkci
- za tlacitka a jejich hover efekty se musim podepsat. Je to prace grafika, koder na tom jen stravi zbytecny cas a nedostane za to zaplaceno.
- popisovani vrstev neni tak dulezite. Hodne koderu pouziva alternativni graficke programy (ne Photoshop, jelikoz je drahy) a ne vsechny programy podporuji seskupovani vrstev do skupin. Tady bych spise videl jako dulezite sloucit vrstvy do jedne pokud to dava logiku a hlavne po sobe udelat poradek. Nejednou se mi stalo, ze jsem otevrel PSD a pulka vrstev byla skrytych, jelikoz to byly "pracovni verze". Pred odeslanim PSD souboru se vzdy ujistete, ze v nem mate jen ty vrstvy, ktere tam maji skutecne byt.
- s tim souvisi i dasli bod. Nekolikrat jsem take vide, ze grafik vytvori napr nejaky box, da mu vrzeny stin a jine efekty a pote to vse slouci do jedne vrstvy. Koder pote jen tezko reze potrebne obrazky a hlavne jen tezko poznava pruhlednost vrzeneho stinu (jelikoz je vse slouceno ve vrstve a vse se tvari jako jeden obrazek). Pozor na to, kdyz pouzivate nejake efekty, nikdy neslucujte tyto vrstvy do sebe
- kreslete vzdy vse co na webu muze byt. Kdyz mame nejak preklikavaci zalozky pomoci javascriptu, stava se, ze grafik graficky znazorni jen jednu zalozku (napr parametry produktu u eshopu) ale zalozku "komentare" jiz nenakresli.. Rekl bych ze obecne by grafik mel myslet ze kdyz na danem prvku bude pouzit javascript a ten prvek bude neco dynamicky delat, mel by znazornit stav A (zacatek akce) a stav B (konec akce) (ne moc dobry priklad ale nic jineho me ted nenapadlo: napr stav A je tlacitko a stav B je tlacitko po najeti mysi)
- a co povazuji ze velmi dulezite a nevidel jsem to zmineno je to, ze grafici si velmi casto usnadnuji praci tim, ze nechteji premyslet nad tim, jak by grafika vypadala, kdyby text byl delsi nez se predpoklada. Napr vypis produktu na eshopu a v grafice je pocitano s tim, ze nazev produktu bude vzdy max. na jeden radek. V praxi se ovsem dost casto stava, ze tomu tak neni a text pretece. Co potom? Na to by mel grafik myslet taky.
- zde se nazory hodne rozchazi, ale i tak to zminim. Prvky, ktere kazdy prohlizec vykresluji po svem (klasicky formularove prvky) nekreslit! max. lehoulinke upravy ve stylu ramecek atd.. ale pro kodery byva peklo kdyz je v grafice nestandartni selectbox, ktery pote musi resit slozite javascriptem. Jsem toho nazoru, ze kazdy uzivatel vyuziva prohlizec takovy, kteru mu vyhovuje. Tim padem je uz zvykly na nejaky vzhled formularu a inputu.. proc mu tedy podstrkavat neco jineho?
- jako dalsi dulezity postreh bych uvedl to, ze je dobre udelat jedno extra PSD jen s texty. To znamena, PSD, na kterem by byly znazornene nadpisy H1-H5, odstavce, seznamy, cislovane seznamy, tabulky, atd atd.. Setkavam se bohuzel s tim, ze grafika je excelentni, ale kdyz pozdeji klient chce udelat tabulku, tak uz je to na koderovi jak ji nastyluje, pac grafik na to zapomnel
- a jako posledni bych uvedl aby grafici mysleli jako normalni uzivatele. Opravdu chcete stahovat pozadi stranky, ktere bude mit 500kb? Z toho vypliva, ze by grafik mel mit alespon nejake zaklady HTML a CSS

  • #4
  • .J.P.
  • 15. June 2011 | 23:04
  • Skupina: Registrovaní Uživatelé

Óóó, díky. :-D Přímo něco takového jsem potřeboval.

@Flay: Díky za odkaz. Tu stránku neznám a vypadá užitečně. I když angličtina mi moc nejde, tak toto díky obrázkům nějak přelouskám.

  • #3
  • Flay
  • 15. June 2011 | 21:07
  • Skupina: Registrovaní Uživatelé

Pěkné :). Dalších několik tipů na toto téma: http://photoshopetiquette.com/

  • #2
  • Peppy
  • 15. June 2011 | 19:29
  • Skupina: Registrovaní Uživatelé

Len tak ďalej, Lef...teším sa na ďalší webdesignérsky článok...

  • #1
  • bender
  • 15. June 2011 | 19:16
  • Skupina: Registrovaní Uživatelé

tak naštěstí jsem se přistihl že tyto pravidla už nějakou dobu dodržuji, jinak moc pěkný článek a pro začátečníky bezpochyby přínosný :-D

Nahoru

Autoři: Jakub Houdek, Jakub Šimůnek, Petr Široký a příležitostní sebevrazi