« 1 2 »
Autor Zpráva
Taurus
Profil
Ahojte,
mám nápad na realizaci vlákna podobného Nejčastější chyby na webu. Týkalo by se grafiky, estetiky a typografie. Sepsané to zatím nemám, možná by nakonec stačilo přidat pár bodů do zmíněného odkazu (zároveň bych ho trochu aktualizoval). Je zájem o něco takového?
Chamurappi
Profil
Reaguji na Taura:
Ano.
Taurus
Profil
Dobře, posílám první hrubý nástřel, ať je o čem se bavit. Bez češtinářského vyladění, odkazů, zvýraznění a obrázků. Příspěvek jsem si v mezičase doplňoval při návštěvách diskuze.

Layout a umístění do prostoru

1) Použijte osvědčený layout, např. 960px. Šířka webu se vejde do rozlišení 1024 x 768. Při dělení na sloupce se stejnou šířkou lze získat celá čísla.
2) Při návrhu webu si nakreslete linky, ke kterým se budou objekty zarovnávat. Např. logo, navigace, menu, nadpisy i odstavce by měly mít stejné odsazení zleva. Linky se hodí i pro dělení na sloupce. Pokud zarovnání nedodržíte, uživatel nabyde dojmu, že jste informace na stránce rozsypali. Čím menší detail, tím je více vidět.
3) Nezapomeňte na velké monitory i telefony s menším rozlišením. Řešením je responzivní design a dostatečně velký obrázek v pozadí.

Barvy a celkový vzhled

1) Nevynalézejte kolo, inspirujte se v galeriích. Zjistíte, co je vhodné pro dnešní dobu, konkrétní typ webu, včetně vhodných barev a jejich kombinací.
2) Barvy vyjadřují mj. nálady a pocity (např. modrá = chlad, voda, nebe; zelená = pozitivum, tráva, počátek, příroda; červená = agresivita, láska, chyba, teplo, …). V různých zeměpisných šířkách však mohou působit jinak či opačně (např. černá v Evropě vs. Japonsku).
3) Jedna hlavní a jedna doplňková barva. Více je často příliš.
4) Barevné kombinace napovídají zaměření webu. Např. ve vinařství se počítá s hnědou, červenou a zelenou barvou. Nevhodné kombinace mohou působit neesteticky a nedůvěryhodně.
5) Přes obrovské možnosti grafického vyjádření nezapomeňte, že lidé jsou na webu kvůli informacím. Pílišná fantazie není rovnítkem úspěchu
6) Neexperimentujte tam, kde to lidé nečekají. Ttlačítka, formulářové a navigační prvky mají svůj typický vzhled a místo. Podobně jako v nově zařízeném, hezkém obchodě naleznete dveře a pokladnu. Návštěvník nechce ztrácet čas zdlouhavou orientací. Zkrátka Nenuťte uživatele přemýšlet.
7) Důležitý je vhodný kontrast pozadí a textu. Vysoký (nad 85 %) i malý jsou příliš. Např. na bílém pozadí (#fff) by písmo nemělo být černé (#000), ale o trochu světlejší (alespoň #333). To nemusí vždy platit pro velké nadpisy, kde tloušťka písem je dostatečná na to, aby vysoký kontrast oči neunavoval. Využijte nástroj Kontrast barev.
8) Animace, popř. jiné stavy po najetí na tlačítka by neměly blikat / měnit výrazně barvu. Je to rušivé, nepříjemné a u některých může způsobit epileptický záchvat.
9) A vůbec 100 věcí, které by měl každý designér vědět o lidech.

Písmo, text a obsah

1) Nepoužívejte mnoho různých písem. Dvě bohatě stačí.
2) Patková písma jsou lépe čitelná na papíře, bezpatková na počítači. Myslete na to i při tiskové verzi webu.
3) Zákaz míchání patkového a bezpatkového písma je mýtus. Je však potřeba být opatrný. Nemáte-li cit, nemíchejte.
4) Čitelnosti napomůže dostatečná výška řádku (120–130 % a více), maximální počet 80 znaků na řádek (zhruba 600 px šířka při 11px Verdaně) a dostatečná velikost písma.
5) Písmo nezadávejte v absolutních jednotkách, např. pixelech. Nelze jej zvětšovat v IE.
6) Zarovnání do bloku používejte pro delší řádky, kde zaniknou řeky. V novinových sloupcích je vhodné levé zarovnání.
7) Všechny znaky na klávesnici mají své místo. Dodržujte základy typografie, aby i forma textů byla hezká. Nejčastější chyby vznikají při zápisu značky copyright (©), vtipně mnohdy vypadají výplňové texty „všechna práva vyhrazena“ apod. Přítomnost podobných úryvků autorská/vlastnická práva nijak neupravují, stále platí autorský zákon.
8) Mnohým pomůže také ÚJČ nebo pravidla.
9) Citujte výňatky cizích děl, ptejte se autorů na propůjčení médií (obrázky, audio, video, …). Je to slušnost.

Estetika

1) Buďte konzistentní. Vyberete-li si např. flat design, nepoužívejte složitou grafiku a 3D tlačítka. Používáte-li kulatá tlačítka, zapomeňte na hranatá a zohledněte i ostatní rohy objetků.
2) Použité prvky opakujte, nepřidávejte zbytečně další. Je-li např. logo v kolečku, bude vhodné s tímto tvarem počítat i dále. Odlehčený motiv loga nebo jeho obrysy lze použít v pozadí. V omezené míře a zeslabené viditelnosti.
3) Gumové/natahovací (neresponzivní) layouty nevypadají hezky, navíc se špatně čtou na velkém monitoru (viz písmo, bod 4)
4) Centrované nadpisy působí neohrabaně. Výjimkou je např. více úzkých sloupců u sebe, kde pod nadpisem je spíše obrázek s malým množstvím textu.
5) Velký border-radius působí neohrabaně. Většinou.
6) Tlačítka, která nevypadají z dálky jako obdélník/kolečko, mají blízko ke kýči. Samozřejmě záleží na grafickém kontextu.
7) Barevný přechod z bílé (#fff) do barvy většinou není hezký.
lionel messi
Profil
Taurus:
Vďaka za súhrn užitočných postrehov, niektoré body zaujali i mňa.
Jan Kozák
Profil
Dobrý hrubý nástřel, Taure. Byla by škoda, kdyby jen tak zapadl.
Dovolím si pár připomínek k obsahové části:

3) Gumové/natahovací (neresponzivní) layouty nevypadají hezky, navíc se špatně čtou na velkém monitoru (viz písmo, bod 4)
Předpokládám, že layout roztahující se jen v určitém rozmezí nevadí.

V různých zeměpisných šířkách však mohou působit jinak či opačně (např. černá v Evropě vs. Japonsku).
Myslím, že se obecně moc neví, jaký význam má v Japonsku černá barva. Zato je poměrně dobře známo, že zatímco v evropských (a odtamtud na západ) je barvou smutku černá, v jihovýchodní Asii má tento význam barva bílá.

Všechny znaky na klávesnici mají své místo.
Není mi jasné, co jsi touto větou chtěl říci.

Patková písma jsou lépe čitelná na papíře, bezpatková na počítači. Myslete na to i při tiskové verzi webu.
Toto nevím, ale myslím si, že je to spíše otázka zvyku než nějakého praktického významu. 20 % knih, které mám u sebe, jsou tisknuté bezpatkovým písmem, včetně té 100 věcí, které by měl každé designér vědět o lidech. (Je to velmi spolehlivá statistika, mám tu 10 svazků.) Domnívám se, že patky se do knih dostaly z estetických důvodů a udržely se v nich jen proto, že nebylo nutné tento zvyk měnit.
Podle dokumentu Which Are More Legible: Serif or Sans Serif Typefaces? to spíše vypadá, že se jedná o mýtus. Já sám ale písmu nerozumím.


Důležitý je vhodný kontrast pozadí a textu. Vysoký (nad 85 %) i malý jsou příliš. Např. na bílém pozadí (#fff) by písmo nemělo být černé (#000), ale o trochu světlejší (alespoň #333). To nemusí vždy platit pro velké nadpisy, kde tloušťka písem je dostatečná na to, aby vysoký kontrast oči neunavoval.
U tohoto bodu jsem byl přesvědčený, že jde o zkratku. Optika mě z fyziky bavila snad nejvíc, tak mi nedalo problém se do tohoto tématu „zažrat“. Věnoval jsem skoro dva týdny studiu materiálů o světle, zraku a barvách, ale přesto se mi nepovedlo tvůj závěr potvrdit, ani vyvrátit (o což jsem se upřímně řečeno původně snažil). Je mi jasné, proč by neměly být světlé prvky na velké tmavé ploše. Vím, že někteří vývojáři si pomýleně invertují barvy v editoru, a rozumím, proč si myslí, že je to dobré řešení. Chápal bych, proč se u černého textu na bílém pozadí má ztmavit podklad. Ale nedovedu si vysvětlit, proč by se měl zesvětlovat černý text.
Podivné ale je, že cca třetina dvaceti nejnavštěvovanějších webů světa se tvého doporučení skutečně drží. (Byť mi třeba není jasné, proč Yahoo v nápovědě používá #444, u podmínek #333, ale u zpráv, které se čtou nejvíce, mají #000.) Sice si myslím, že to tak weby mají spíše z důvodů estetický než praktických, ale to je pochopitelně nepodložené.
Nemohl bys vysvětlit, proč se na bílém pozadí má černý text zesvětlit, případně odkázat na materiál, kde je to uvedeno? I když jsem se tomu dost věnoval, možná jsem se na problematiku díval ze špatné strany.
anonymníí
Profil *
Jan Kozák:
Zaujala mě věta: Vím, že někteří vývojáři si pomýleně invertují barvy v editoru, a rozumím, proč si myslím, že je to dobré řešení.

Ač sám používám světle modré pozadí, znám spoustu těch, kteří mají invertováno. Téměř všichni kolegové, současní i minulí.

Můžeš, prosím, rozvést, jak chápeš, že mají invertováno? Z jakého důvodu? A proč je to špatně (tak totiž vyznívá tvůj text, že toto nastavení je špatné).

Já to chápu tak, že jde pouze o estetický prvek, je v tom něco víc? Asi ideální by bylo ve dne světlé pozadí, v noci tmavé. Ale asi bych se nechtěl podle denní doby přeorientovávat a zvykat si na jinak zvýrazněný kód.

Díky za objasnění.


Pak toto klidně smaž, ať taurusovi nelezeme do vlákna. U ledu si to najdu.
Taurus
Profil
Honzo, moc díky za reakce.

Ad 1) vágně napsáno, navazoval jsem tím hlavně na to, že dlouhé řádky se špatně čtou a roztahování nevypadá esteticky. Drobné roztažení určitě nevadí.

Ad 2) ano, v Japnosku berou bílou za smuteční, jen jsem to nechtěl rozepisovat.

Ad 3) zase vágně, mělo tam být vlastně něco jako „Také interpunkce má své přesné místo a význam v textu“.

Ad 4) Je to možné. Hluboké výzkumy jsem nedělal (díky za článek), asi jsem ovlivněný tím, že nová média beru jako moderní – sans, knihy jako tradiční – serif. Pasuje mi to tak podobně jako bych web o vinařství dělal v hnědočervené. Asi by se tento bod mohl změnit ve smyslu, že záleží na obsahu webu, jaký font se zvolí (podobně jako je to uvedené u barvy).

Stálo by i za to přidat příspěvek od Honzy Hučína, ten se mi líbí. Zmínka o malém serifovém písmu je podstatná, protože zatímco u knih se s opravdu malými písmy moc nesetkáme, na počítači je možné v podstatě cokoli. I proto jsem asi tíhl k mnou uvedenému rozlišení web/kniha.

Ad 5) Nemusíš zesvětlovat text z černé, důležitý je ale ten kontrastní poměr 85 %. Bílé pozadí byl příklad. Pokud chceš mít pozadí bílé, musíš hnout s barvou textu. Pokud chceš černý font, je potřeba hnout s bílým pozadím. Takže je jedno s čím pohneš, ale ať to není inverze. Ta způsobí velkou únavu očí, protože text, to jsou v podstatě 1–2pixelové linky, což je ostrý přechod. Velké písmo, kde už jde o desítky pixelů, tuto ostrost potlačuje, proto velký kontrast tak nevadí. I kvůli tomu existuje vyhlazování ve windows clear type. Změkčuje přechody barvami s nižším kontrastem (i když další dobrý důvod je estetika).

Materiál o 85 % procentech ti zkusím najít, rozhodně o něm psal např. Pavel Maček.
Petr ZZZ
Profil
Jan Kozák:
Domnívám se, že patky se do knih dostaly z estetických důvodů a udržely se v nich jen proto, že nebylo nutné tento zvyk měnit.
Mám pocit, že důvodem pro patkové písmo alespoň v dřívějších dobách byla technika tisku, protože díky těm svým ostrým zobáčkům je méně náchylné k rozpíjení tiskové barvy a vzniku nehezkých artefaktů. Je ale hůře čitelné než bezpatkové písmo, přičemž na papíře to snad vadí míň než na obrazovce. (Ale nevím už ani, kde jsem to pochytil, ani zda je to pravda.)
Taurus
Profil
Jan Kozák:
Tady to je, bohužel je to jen prezentace v bodech. Když tak mu napíšu, už jsem to dlouho neudělal :-)
www.fi.muni.cz/~xobsivac/PV219/prezentace09/typografienawebu.html
_es
Profil
Petr ZZZ:
Je ale hůře čitelné než bezpatkové písmo, přičemž na papíře to snad vadí míň než na obrazovce.
Ja som, už neviem kde, zase čítal, že práve pätkové písmo sa na papieri lepšie číta. A na monitoroch sa zase lepšie číta bezpätkové - no možno to platilo len pre CRT monitory, kde by boli pätky neostré a nemuselo by to platiť pre LCD monitory.
Jan Kozák
Profil
Odkázaný anglický dokument shrnuje asi 50 studií věnujících se problematice patkových a bezpatkových písem za posledních více než 100 let. Bere argumenty proč použít či nepoužít patky a odkazuje na studie, které se danou problematickou zabývaly. Jeho závěr budu parafrázovat:
Nelze vyloučit, že přítomnost či absence patek má vliv na čitelnost textu. V porovnání s jinými vlastnostmi písem (střední výška, šířka znaků, mezery a šířka čar) má však význam zanedbatelný. O patkách dává větší smysl uvažovat v otázce estetiky než čitelnosti.

Taurus:
Asi by se tento bod mohl změnit ve smyslu, že záleží na obsahu webu, jaký font se zvolí (podobně jako je to uvedené u barvy).
Případně by se z toho bodu mohla odstranit informace o lepší čitelnosti a uvést, že je zvykem na monitoru použít bezpatková písma, na papíře patková.

Díky tvé zmínce o vyhlazování písma zjistil, že vysoký kontrast nedělá problémy způsobené „hardwarem“ oka, ale „softwarem“ mozku. Ovšem neurověda a psychologie nejsou disciplíny, které by se daly naučit během pár týdnů samostudia, takže na to se vrhat nebudu.
Jako laik mám pocit, že dochází k duplikování cest vedoucích ke stejnému cíli. Když se pochopitelnost významu textu zvýší antialiasingem, proč se ještě snažit o snižování kontrastu, když nevím, zda text uživatel nečte třeba na lesklém panelu na přímém slunci?
Bod s kontrastem nechme být. Nemám takové znalosti, abych to mohl věrohodně vyvrátit.
Pokud ale zjistíš, jaké povídání patří k té zmínce o 85% kontrastu v prezentaci, jistě to tu bude spoustu lidí zajímat.

anonymníí:
Do místnosti s monitorem je nutné si sehnat další zdroj světla, který je potřeba dobře vybrat a vhodně umístit. Když to vývojář udělá, tmavé pozadí mu přijde jako hloupý nápad. Invertované barvy v editoru jsou znakem, že dotyčný nezvládl péči o sebe sama, a dá se mu doporučit, aby příležitostně naklusal k očnímu lékaři, jinak za pár let zapláče nad výdělkem.
anonymníí
Profil *
Jan Kozák:
Honzo, nějak tě pořád nechápu.

Mějme v místnosti dobré denní světlo, dostatečně velká okna. Občas svítíme i ve dne, ale osobně to umělé světlo navíc moc nevnímám. To jsou reálné podmínky, které jsem v práci pozoroval a které máme. Přesto mnoho kolegů má nastavené tmavé pozadí, už dlouhá léta, a nikdo brýle nenosí. Ani čočky (vnímání vidění je subjektivní).

Rád bych si početl něco více, neměl bys nějaký odkaz, které by tvé tvrzení podložil? Tato problematika mě docela zajímá, ač trochu odbočujeme od webu. Proč by tolik editorů mělo tmavé varianty, a třeba hojně rozšířený Sublime Text ji má jako výchozí, z nabízených vzhledů jsem měl co dělat, abych našel nějaký světlý. Nakonec jsem si vybral, měl jsem na výběr asi 3 z celkových +- 20. Zbytek jsou různě tmavé.

Zkoušel jsem hledat různé kombinace KW, ale ničeho kloudného jsem se nedobral. Klidně i anglicky, nějak se tím proberu.

Díky.
Taurus
Profil
Jan Kozák:
Případně by se z toho bodu mohla odstranit informace o lepší čitelnosti a uvést, že je zvykem na monitoru použít bezpatková písma, na papíře patková.

To se mi docela líbí.

Co se týče kontrastu, tak jsem Pavlovi napsal. Máš pravdu ohledně lesklého panelu na slunci, tam se kontrast hodí. Ale to už bych bral jako extrém, protože vyladit grafiku pro tolik různých situací je těžké (nicméně je to lepší jak opačný extrém, kdy návrhář nemyslí zevrubněji). Antialiasing dle mého není plně dostačující.

anonymníí:
Jen tip – přijde mi, že lidi od počítačů, a hlavně programátoři, jsou považováni za ty, co sedí u toho tmavého terminálu nebo ve tmavé místnosti. Bez ohledu na to jak je to otřepané klišé. Proto se jim dodávají tmavé varianty.

Že mají tví kolegové tmavé pozadí ve světlé místnosti je zajímavé. Nicméně např. u novějších televizí existuje tzv. ambient light nebo co, co umožní, aby se barvy z televize částečně rozprostřely v blízkém okolí na pozadí za obrazem. Působí to líp na oči. Zase, je to takový vzdálený antialiasing. Podobně jak v noci je lepší tmavý obraz, protože okolí je tmavé, ve dne je to obráceně. Oko není tolik namáhané. Ani k tomu není potřeba velká studie. To však neodporuje tomu, že někomu jsou tyhle věci fuk a rád si pustí tmavý obraz ve dne.
anonymníí
Profil *
Taurus:
Ty to bereš z pohledu osobních preferencí, což je jasné. Komu se líbí invertované barvy, nechť je používá.

Nicméně Jan Kozák na to šel odborněji a to, co napsal, na mě působilo tak, že je to podpořeno nějakým (zdravotnickým) výzkumem, či něco podobného. Nakonec, nemusíme chodit daleko. Ty jsi grafik, nejnovější Photoshop je defaultně tmavý (možnost nastavit 4 odstíny šedě jako "téma", ale vyloženě světlý design, jako u tuším CS2, moc novějších verzí jsem k dispozici neměl, tam na výběr není).
Joker
Profil
_es:
Ja som, už neviem kde, zase čítal, že práve pätkové písmo sa na papieri lepšie číta. A na monitoroch sa zase lepšie číta bezpätkové - no možno to platilo len pre CRT monitory, kde by boli pätky neostré a nemuselo by to platiť pre LCD monitory.
Teď nevím, proč by patky na CRT monitorech měly být neostré a na LCD ostré?

Podle mě za tím nejspíš je počet DPI. Patkové písmo potřebuje víc pixelů a má drobnější detaily, takže čím menší DPI, tím větší to je problém (protože se prostě nedostávají pixely).
To se netýká jen displejů, třeba při tisku jehličkovou tiskárnou se taky používá bezpatkové písmo.
První monitory osobních počítačů měly málo DPI, takže se logicky používalo bezpatkové písmo (navíc třeba v rozlišení 320x200 se hodí každý jeden ušetřený pixel, takže patky jsou dost luxus).
Do toho i zapadá používání patkových písem pro nadpisy, které se typicky zobrazují větším písmem.

Z toho by vyplývalo, že s rozvojem zařízení s více DPI se z toho stává spíš pověra.

Jan Kozák:
Do místnosti s monitorem je nutné si sehnat další zdroj světla, který je potřeba dobře vybrat a vhodně umístit. Když to vývojář udělá, tmavé pozadí mu přijde jako hloupý nápad. Invertované barvy v editoru jsou znakem, že dotyčný nezvládl péči o sebe sama, a dá se mu doporučit, aby příležitostně naklusal k očnímu lékaři, jinak za pár let zapláče nad výdělkem.

Tohle prohlášení bych mírnil, sice invertované barvy nepoužívám, ale podle toho popisu mám osvětlení špatné (resp. žádné), u monitorů trávím spoustu času a těch roků už je docela hodně.

Jinak do tmavého prostředí bez dodatečného osvětlení mi právě přijde lepší světlé pozadí než tmavé, protože pak alespoň monitor supluje právě to chybějící osvětlení :-)
Ale celkově bych v tom viděl spíš otázku zvyku.
V dobách CRT monitorů a příkazových řádků byl běžný bílý text na černém pozadí (dáno i technologicky, pro CRT monitory bylo lepší, když většina obrazovky byla tmavá).
Tehdy, a ostatně dodnes (hlavně v UNIX-/Linuxových systémech má dodnes spousta programů rozhraní přes příkazovou řádku) je v textovém režimu standard světlý text na tmavém pozadí.
A ostatně, jaké je výchozí barevné schéma plochy Windows? Světlejší text na tmavším pozadí.

Takže možná lidem zvyklým na příkazovou řádku přijde jako standardní světlý text na tmavém pozadí.
Naopak lidem zvyklým spíš na papír, Word a podobně přijde jako standardní tmavý text na světlém pozadí.

A pak jsou lidi jako já, kteří prostě používají výchozí nastavení dané aplikace a neřeší to :-)
Jan Kozák
Profil
Proč mírníš zrovna má prohlášení, Jokere?
_es
Profil
Joker:
Teď nevím, proč by patky na CRT monitorech měly být neostré a na LCD ostré?
Na LCD monitoroch sú predsa ostrejšie hrany, aj majú vyššiu "svetelnú zotrvačnosť" - nemajú taký „roztrasený obraz“. Preto boli aj doporučované, keď ešte neboli tak rozšírené, na zobrazovanie technických výkresov. Okrem toho existujú aj rôzne subpixelové vyhladzovania ako napríklad ClearType.

Jinak do tmavého prostředí bez dodatečného osvětlení mi právě přijde lepší světlé pozadí než tmavé, protože pak alespoň monitor supluje právě to chybějící osvětlení :-)
Asi nemáš dosť informácií o premenlivej citlivosti očí na svetlo. Napríklad pri návšteve rôznych planetárií a pod. sa robí postupné stmavovanie pre zobrazenie nočnej oblohy a potom postupné pridávanie svetla, aby sa „stihli oči prispôsobiť“. Takže ak by malo byť svetlé pozadie v tme bez dodatočného osvetlenia, tak by malo byť oveľa tmavšie než pri dennom svetle.

Jan Kozák:
Případně by se z toho bodu mohla odstranit informace o lepší čitelnosti a uvést, že je zvykem na monitoru použít bezpatková písma, na papíře patková.
Na papieri je „čitateľnosť“ rozhodne vyššia pri pätkovom písme. Skús si pozrieť tlačené knihy. Ja som nenašiel žiadnu, kde by bolo bezpätkové písmo na „normálny“ text. Ak je v knihách použité bezpätkové, tak na nejaký špeciálny typ písma - napríklad v počítačovej literatúre na kódy a pod. Tá vyššia čitateľnosť nie je len nejaká „povera“. Pri rýchlejšom čítaní pätky pomáhajú lepšej orientácii o hraniciach písmen, riadka a pod.
Joker
Profil
Jan Kozák:
Proč mírníš zrovna má prohlášení, Jokere?
To je dost zavádějící, viz už to, že do šířky 320 px se (od červené čáry) z prvního řádku vejde „navíc třeba v rozlišen“ - takže to nebude zrovna reprezentativní font a velikost pro nízké DPI.

Font DOSové* konzole vypadá takhle

A pro ilustraci, rozměry obrázku jsou 320x200. (Pozn.: Příkazový řádek takové rozlišení neměl, ten fungoval v textovém režimu, kde se rozlišení udávalo ve znacích a řádcích, obvykle 80x25, což bylo podstatně jemnější, než grafické 320x200. Ale programy pracující v grafickém režimu skutečně musely vypisovat i písmenka do 320x200).

Je snad zjevné, že když budu chtít písmo zabírající co nejméně pixelů, bude bezpatkové (protože patkové písmo lze dál zmenšit právě odstranění patek).

_es:
Tak je fakt, že u prvních monitorů mohlo u patkového písma hrát roli i tohle (pozdější CRT monitory uměly vyšší obnovovací frekvence, takže světelná setrvačnost, resp. blikání, obvykle nebyl problém).

Asi nemáš dosť informácií o premenlivej citlivosti očí na svetlo.
Ale ano, koneckonců lepší monitory mají automatickou regulaci jasu.
Na druhé straně i světle šedá barva je pořád daleko tmavší (co do pohlceného světla), než bílá.
Já prostě mám tendenci mít spíš méně okolního světla a zároveň výchozí nastavení editorů, což je většinou světlé pozadí a tmavý text.
Možná to nedělám teoreticky správně a asi nepochybně časem brýle mít budu (kdyby už jen stářím), nicméně už jsem takhle pár desítek tisíc hodin před monitorem zvládl.

Skús si pozrieť tlačené knihy. Ja som nenašiel žiadnu, kde by bolo bezpätkové písmo na ‚normálny‘ text.
Dá se ale argumentovat, že u knih je to „tradiční“ a je to tak zvykem.
Navíc dlouhou dobu se knihy tiskly z vysázených typů a používat různé fonty (nebo i velikosti písma) bylo problematické.


* Obrázek je z Windows 7, ale to písmo podle mě zůstalo stejné.
Chamurappi
Profil
K programátorům s invertovanými barvami mám teorii:
Při programování se sice pracuje s textem, ale je to úplně jiný druh práce, než je klasické čtení a psaní. Výrazně odlišný vzhled může člověku pomoci v tom, aby si tuto rozdílnost v účelu mnohem důrazněji uvědomil. Je to taková mentální zarážka, na první pohled už zdálky vidí „ano, jsou to sice slova, ale nejsou určená pro běžné lidi, platí pro ně zcela jiná pravidla“. Můžeme spekulovat, jaké budou dlouhodobé účinky na jejich oči, ale tohle vidím jako hlavní důvod, proč na svůj zvyk nedají dopustit. Víme také, že drtivá většina programátorů používá neproporcionální písmo, přestože v kódech netvoří ASCII art – v tom vidím podobnou příčinu.


Reaguji na Jokera:
V dobách CRT monitorů a příkazových řádků byl běžný bílý text na černém pozadí
Zajímavé je, že vzhled hardwaru prošel opačnou cestou než dění na monitoru. Před patnácti lety bylo normální mít bílou klávesnici s černými písmenky, bílý monitor i bílou bednu s černými nápisy, bílou myš… dnes bývá vše inverzní.
Str4wberry
Profil
Já mám takovou teorii, že je to prostě a jenom zvyk. Léta jsem používal v editorech bílé pozadí. Potom jsem přešel na Sublime Text, kde byla bílá témata ošklivá, tak jsem přešel na černé. Teď je mi to tak nějak jedno a používám dle editorů černé i bílé varianty.
aDAm
Profil
Chamurappi:
před patnácti lety bylo také možné mít vše v černém, pokud si za to zájemce samozřejmě připlatil. PC v černé barvě bylo tenkrát "luxusní" a ještě teď vzpomínám na letáky s hotovýma sestavama kde se na úvodní stránce občas objevil černý luxusní PC za rozumné peníze ;) tuším to byl Escom či tak nějak ;)

Str4wberry:
taky tak. Sice já používám PHPStorm ale je mě taky jedno jakou má barvu. Jedině co mě vadí když jsem na tmavé verzi a dělám na tom v noci po tmě, je okmažik přepnutí z editoru do prohlížeče a stránka je tam světlá, to pak oči dostávají zabrat.
Amunak
Profil
Chamurappi:
Víme také, že drtivá většina programátorů používá neproporcionální písmo, přestože v kódech netvoří ASCII art – v tom vidím podobnou příčinu.
Podle mě se neproporciální písmo používá hlavně proto, že v kódu se orientuješ především vertikálně. Písmo o fixní šířce této orientaci hodně pomáhá. Naopak u běžného textu by spíš působilo rušivě, kdyby některá slova náhodně byla na bod přesně zarovnaná pod sebe.

Kromě toho se v kódu často tvoří něco jako ASCII art. Když píšeš třeba dokumentaci, komentáře nebo definice pod sebe, chceš to mít pěkně zarovnané. U neproporciálního písma by bylo často naprosto nemožné zarovnat některé věci pod sebe.

Ukázka (oba řádky mají stejný počet písmen):

var cestaPrvni = "/home/latten/.ssh/";
var cestaDruha = "/home/amunak/.ssh/";

var cestaPrvni = "/home/latten/.ssh/";
var cestaDruha = "/home/amunak/.ssh/";
Taurus
Profil
Přemýšlím, jestli si vlákno nezaslouží nějaké roztříštění.
Taurus
Profil
Ad 85% kontrast od Pavla Mačka – zdroj dohledat nedokázal, ale zmínil se o tom, že v přírodě většinou nenajdeme něco s větším kontrastem. Asi zapomeňte na zebry... Odkázal mě na kognitivní psychologii a vnímání barev.
Petr ZZZ
Profil
Zebry jsou prý černobíle pruhované právě proto, aby je opticky nenašly mouchy tse-tse. Samotná existence zebry tedy nevyvrací tvrzení, že vysoký kontrast černé a bílé oku nelahodí.

Kromě toho, opustíme-li předpoklad, že jde o kontrast v rámci shodných světelných podmínek, najdeme i v přírodě světelný kontrast, který daleko převyšuje rozlišovací schopnosti oka — zkus někdy, stoje na louce zalité sluncem, rozlišit detaily pohledem do stínu blízkého lesa. :-)
Jan Kozák
Profil
Taurus:
Ad 85% kontrast od Pavla Mačka – zdroj dohledat nedokázal, ale zmínil se o tom, že v přírodě většinou nenajdeme něco s větším kontrastem.
Děkuji za pátrání. I když tento argument se mi moc nezdá. Podle stejné logiky by na webu nesmělo být nic pravidelného či zarovnaného. V přírodě nic takto dokonalého není, proto máme „nekonečno“ různých otisků prstů, zbarvení zeber, různých obličejů, listů rostlin, tvarů sněhových vloček…
Ten odkaz na psychologii mi ve vší úctě v tomto kontextu spíše navozuje dojem floskule.

Každopádně vyvracení tvrzení o vysokém kontrastu jsem vzdal. Odporování některým kolegům považuji za házení hrachu na zeď. Ostatní se k obsahu tvého nástřelu moc nevyjádřili, takže zřejmě k němu zatím nemají výhrady. Proto ho asi můžeš přeformulovat do konečné podoby, která pak bude přesunuta do vlákna Nejčastější chyby na webu, řekl bych.
Str4wberry
Profil
Tak ono je obecně hodně těžké stanovit nějakou arbitrární hranici, když různí lidé:

1) různě vidí,
2) mají různé monitory,
3) mají je jinak nastavené,
4) mají různé okolní světlo

Tj. 85% kontrast v jednom případě klidně bude vyšší než 100% v jiném.


Také jsem ohledně maximálního kontrastu zkusil trochu hledat a žádný přesvědčivý argument jsem bohužel nenašel.
Taurus
Profil
Jde, prosím, nějak zkopírovat s BB značkami má původní zpráva z [#3] do textarey s odpovědí? Zdrojový kód ani citování mi nepomůže, upravovat příspěvek nemůžu. Rád bych zprávu zkopíroval a upravil, aniž bych přišel o styly a odkazy.
Alphard
Profil
Nevím, jestli to můžeš nějak udělat ty, ale já ano :-) Tady to je pastebin.com/NQmK8T6b.
Taurus
Profil
Děkuju, Alpharde! Body jsem tedy aktualizoval a rozšířil.

Layout a umístění do prostoru

1) Použijte osvědčený layout, např. 960px. Šířka webu se vejde do rozlišení 1024 x 768. Při dělení na sloupce se stejnou šířkou lze získat celá čísla.
2) Při návrhu webu si nakreslete linky, ke kterým se budou objekty zarovnávat. Např. logo, navigace, menu, nadpisy i odstavce by měly mít stejné odsazení zleva. Linky se hodí i pro dělení na sloupce. Pokud zarovnání nedodržíte, uživatel nabyde dojmu, že jste informace na stránce rozsypali.
3) Nezapomeňte na velké monitory i telefony s menším rozlišením. Řešením je responzivní design a dostatečně velký obrázek v pozadí.
4) Gumové/natahovací neresponzivní layouty nevypadají hezky, navíc se špatně čtou na velkém monitoru (viz písmo, bod 4). Drobné natažení samozřejmě nevadí.

Barvy, grafika, estetika

1) Nevynalézejte kolo, inspirujte se v galeriích. Zjistíte, co je vhodné pro dnešní dobu, konkrétní typ webu, včetně vhodných barev a jejich kombinací. Pomůže Pinterest, Behance, Dribble, Deviantart, Shutterstock a další inspirativní weby.
2) Vycházejte z archetypu značky/produktu/společnosti, které se web věnuje. Např. je-li společnost archetypem – zosobněním vládce (je dominantní ve svém oboru), grafika by měla vyvolat dojem luxusu, cílevědomosti, formálnosti.
3) Buďte konzistentní. Jednotný vizuální styl je cestou k úspěchu značek a společností. Totéž platí v rámci webu, barev a písem (vycházejí z loga, grafického manuálu). Vyberete-li si např. flat design, nepoužívejte složitou grafiku a 3D tlačítka. Používáte-li kulatá tlačítka, zapomeňte na hranatá a zohledněte i ostatní rohy objetků.
4) Použité prvky opakujte, nepřidávejte zbytečně další. Lidé si podvědomě pamatují vzory. Je-li např. logo v kolečku, popř. se skládá z kulatých objektů, bude vhodné s těmito tvary počítat i dále. Odlehčený motiv loga nebo jeho obrysy lze použít v pozadí. V omezené míře a zeslabené viditelnosti.
5) Barvy vyjadřují mj. nálady a pocity (např. modrá = chlad, voda, nebe; zelená = pozitivum, tráva, počátek, příroda; červená = agresivita, láska, chyba, teplo, …). V různých zeměpisných šířkách však mohou působit jinak či opačně (např. v Evropě je smuteční barvou černá, zatímco v Japonsku je to bílá).
6) Barevné kombinace napovídají zaměření webu. Např. ve vinařství se počítá s hnědou, červenou a zelenou barvou. Nevhodné kombinace mohou působit neesteticky a nedůvěryhodně.
7) Jedna hlavní a jedna doplňková barva. Více je většinou příliš.
8) Přes obrovské možnosti grafického vyjádření nezapomeňte, že lidé jsou na webu kvůli informacím. Pílišná fantazie není rovnítkem úspěchu
9) Neexperimentujte tam, kde to lidé nečekají. Ttlačítka, formulářové a navigační prvky mají svůj typický vzhled a místo. Podobně jako v nově zařízeném, hezkém obchodě naleznete dveře a pokladnu. Návštěvník nebude ztrácet čas zdlouhavou orientací. Zkrátka Nenuťte uživatele přemýšlet.
10) Tlačítka, která nevypadají z dálky jako obdélník/kolečko, mají blízko ke kýči. Samozřejmě záleží na grafickém kontextu.
11) Důležitý je vhodný kontrast pozadí a textu. Vysoký (nad 85 %) může vypadat ostře. Např. na bílém pozadí (#fff) je dobré černou barvu (#000) lehce zesvětlit (na #333). To nemusí vždy platit pro velké nadpisy, kde tloušťka písem je dostatečná na to, aby vysoký kontrast oči neunavoval. Využijte nástroj Kontrast barev.
12) Animace, popř. jiné stavy po najetí na tlačítka by neměly blikat / měnit výrazně barvu. Je to rušivé, nepříjemné a může dokonce způsobit epileptický záchvat.
13) Mezi klasické estetické prohřešky patří velký border-radius nebo barevný přechod z bílé (#fff) do barvy.
14) A vůbec 100 věcí, které by měl každý designér vědět o lidech.

Písmo, text a obsah

1) Nepoužívejte mnoho různých písem. Dvě bohatě stačí.
2) Rozdělení patková písma pro papír a bezpatková pro počítač je spíše minulostí. Výběr typu písma by měl záviset na zaměření webu. Také lze vycházet z písma v logu a definice v grafickém manuálu.
3) Zákaz míchání patkového a bezpatkového písma je mýtus. Je však potřeba být opatrný. Nemáte-li cit, nemíchejte.
4) Čitelnosti napomůže dostatečná výška řádku (130 % a více), dostatečná velikost písma a maximální počet 60–80 znaků na řádek (zhruba 600 px šířka při 11px Verdaně).
5) Písmo nezadávejte v absolutních jednotkách, např. pixelech. Nelze jej zvětšovat v IE.
6) Zarovnání do bloku používejte pro delší řádky, kde zaniknou řeky. V novinových úzkých sloupcích je vhodné levé zarovnání.
7) Centrované nadpisy působí většinou neohrabaně. Výjimkou je např. více úzkých sloupců u sebe, kde pod nadpisem je např. obrázek s malým množstvím textu.
8) Pište s diakritikou a česky (jde-li o místní web). Nikdo nebude luštit hacky a carky a překládat cool English menu.
9) Také interpunkce má své přesné místo a význam v textu. Dodržujte základy typografie, aby i forma textů byla hezká. Nejčastější chyby vznikají při zápisu značky copyright (©) a pomlčka.
10) Vtipně mnohdy vypadají výplňové texty „všechna práva vyhrazena“ apod. Přítomnost podobných úryvků autorská/vlastnická práva nijak neupravuje, stále platí autorský zákon. Nezapomeňte na přísloví „Mlčeti zlato“. Víte, proč jednotlivé texty umísťujete, nebo jsou tam zkrátka proto, že „se to tak všude píše, tak to tam dám taky“?
11) Mnohým pomůže také ÚJČ nebo pravidla.
12) Citujte výňatky cizích děl, ptejte se autorů na propůjčení médií (obrázky, audio, video, …). Je to slušnost.
« 1 2 »

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0