Webdesign - inspirace, barvy

Obsah lekce:

Inspirace

Inspirujte se u jiných

• Koncepce - jak aktuálně různé druhy webových stránek vypadají.
• Možnosti - co lze aktuálně realizovat.
• Nápady - drobnosti, detaily, vylepšení.
• Kombinace barev.

Příklady kreativního webdesignu stránek

http://www.pojeta.cz - stránky kreativního grafika Tomáše Pojety

http://shoeguru.ca - obchod s obuví - minimalistický a zároveň velice pěkný design

http://www.meomi.com - design studio

Kde hledat inspiraci?

• Galerie webdesignu - internetové galerie webových stránek vytvořených pomocí CSS. Lze je vyhledat například vyhledávačem google a zadáním výrazu css gallery (případně české varianty css galerie). Níže uvádíme několik odkazů:
  • http://cssmania.com
  • http://cssdrive.com
  • http://www.csselite.com
  • http://www.bestcssgallery.com
  • http://www.divvoted.com - na této galerii můžete pro návrhy hlasovat a komentovat je pomocí služby Twitter (všimněte si v názvu stránky pěkně použitého HTML tagu DIV :).
  • http://cssgalerie.cz
  • http://css-galerie.tomcik.cz
• Internetový adresář Google's web directory (následující text převzat z http://www.google.com/intl/cs/dirhelp.html) - Internetový adresář Google slučuje důmyslnou vyhledávací technologii společnosti Google se stránkami Open Directory (Open Directory Project je rozsáhlý veřejný adresář spravovaný společností Netscape. Projekt ODP spravuje skupina dobrovolných redaktorů z celého světa, kteří hodnotí stránky zařazované do adresáře. Webové stránky vybrané těmito redaktory jsou roztříděny do řady širokých kategorií a množství dílčích kategorií. Společnost Google využívá tuto hierarchii jako základ pro svůj adresář.) a vytváří nejužitečnější nástroj pro vyhledávání informací na webu. Hlavní přednosti:
  • Hodnocení důležitosti. Jádrem internetového adresáře Google je soubor webových stránek vybraných lidmi, kteří dobrovolně pracují jako redaktoři Open Directory. Google poté pomocí své patentované technologie PageRank a dalších faktorů vyhodnotí stránky podle jejich důležitosti. Vodorovné pruhy, které jsou znázorněny vedle každé webové stránky, představují názor společnosti Google na důležitost stránky. Díky tomuto charakteristickému přístupu k hodnocení webových stránek se nejkvalitnější stránky zobrazují při prohledávání jednotlivých kategorií adresáře Google vždy na prvních místech seznamu výsledků vyhledávání.
  • Inteligentnější vyhledávání v kategoriích adresáře. Google využívá pokročilou technologii, která se užívá při standardním webovém vyhledávání a díky níž se lze dozvědět o každé stránce uvedené v jeho adresáři více informací. Tato schopnost umožňuje uživatelům prohledávat kategorie podrobněji a poskytuje relevantnější výsledky než jakékoli jiné adresářové vyhledávání.
  • Integrace webového vyhledávání. Inovační třídicí technologie společnosti Google propojuje výsledky standardního vyhledávání Google s informacemi uloženými v internetovém adresáři Google. Tato technologie umožňuje uživatelům přejít jediným kliknutím z výsledků standardního vyhledávání Google na nejdůležitější ručně vybrané webové stránky v adresáři Google.
  • Čisté a přehledné uživatelské rozhraní. Internetový adresář Google využívá stejné rozumné, komfortní rozhraní, jaké odlišuje portál google.cz od jiných vyhledávačů.
• Knihy o webdesignu.
  • http://knihy.cpress.cz/knihy/pocitacova-literatura/webdesign-tvorba-www-stranek/
  • http://www.zonerpress.cz/kniha/pro-webdesignery

Fotografie

Chceme-li na webu použít fotografie, pak si je buď musíme sami vyfotit (vyžaduje to však čas, drahou techniku,...) nebo si již hotové fotografie zakoupit.

Fotografie lze zakoupit například v internetových fotobankách (cena jedné fotografie se zpravidla pohybuje v rozpětí 100-1000 Kč). Fotografie, které lze stáhnout přímo z fotobanky, často obsahují vodoznak a jsou k dispozici pouze v malých rozlišeních. Pro potřeby našeho pokusného návrhu jsou postačující. Ve fotobankách lze komplexně vyhledávat podobně jako na google.

• http://www.dreamstime.com
• http://www.photos.com/en
• http://www.shutterstock.com
• http://www.gettyimages.cz
• http://www.jupiterimages.com
• http://www.istockphoto.com

Ukázka výsledků vyhledávání fotografií ve fotobance na dotaz "fast car".

Speciální pozornost si zaslouží server http://www.deviantart.com. Jedná se o stránky (webový server), které jsou určeny pro grafiky, fotografy, malíře a vůbec všechny, kteří chtějí vystavit svá díla.

Barvy

Barvy pro web si můžeme nemíchat sami nebo zkusíme některý z generatorů barevných kombinací.

• http://kuler.adobe.com - zde lze také vyhledávat barevné kombinace podle klíčových slov.
  
• http://www.colorcombos.com
  
• http://www.wellstyled.com/tools/colorscheme2/index.html - tyto stránky vytvořil Petr Staníček (pixy).
  
  Na tomto webu www.wellstyled.com lze nalézt také generátor pseudo-českých výplňových textů, které se používají právě při návrhu internetové stránky jako textová výplň. Pokud bychom se chtěli poohlédnout po jiném pseudo-textovém generátoru, pak je možno hledat na google výraz "pseudo text generator". Lze tak nalézt stránku http://www.lorem-ipsum.info, kde se můžeme dočíst o pojmu "Lorem ipsum" a použít generátor s mnoha nastaveními http://www.lorem-ipsum.info/generator3.
  
  
  Ukázka pseudo-náhodného výplňového textu
  Těmumaj děpro ňuchlo tkat o myštkrý bůč tisk. Mizrou z slu mléskos peh dřouniř lam s oneť. Tré šur ktákoul a tě. Vrouced di lypajtkůpo něvděh dlo v vrýfrouť žlesý v tkyn? žlíčlou tědi cluch jeviktot o dru plevě flifry v mědi febu o mlast. Prdit sličlýh mid o tibru nazremok. Toblý člachoj cryr. Nýbouk foť.

Lorem ipsum

Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém designu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických návrhů (např. fontů nebo rozvržení časopisů či HTML stránek). Lipsum tak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového návrhu vložen smysluplný obsah.

Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se pozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text (např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou strukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný text, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně atd.

Historie

Text připomíná klasickou latinu, avšak ve skutečnosti je nesmyslný, smyšlený. Je však odvozen z Ciceronovy De finibus bonorum et malorum (O koncích dobra a zla), kapitoly 1.10.32 a 33, kde se například objevuje věta Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. (Překlad: „Nikdo nemiluje bolest samu, nevyhledává ji, ani nechce získat, jednoduše proto, že je to bolest…“). Používá se již od 16. století.

Celý text Lorem ipsum byl převzat z Wikipedie (http://cs.wikipedia.org/wiki/Lorem_ipsum).

Praktická část

V následujících hodinách budeme vytvářet grafický návrh webových stránek. Vymyslete si konkrétní web, který budete realizovat a nalezněte na Internetu stránky, kterými byste se chtěli inspirovat a vhodou kombinaci barev. Pokuste se také v případě potřeby nalézt vhodné fotografie. Výsledkem vaší práce by mělo být následující:

• alespoň jeden grafický soubor s obrázkem webu, kterým se budete inspirovat (buď si obrázek webu stáhnete z Internetu nebo stránky zobrazíte v prohlížeči a "vyfotíte" obrazovku do schránky Windows klávesou PrintScreen (PrtScr) a následně vytvoříte ve Photoshopu nový soubor a do něj obraz ze schránky vložíte)
• textový soubor, který bude obsahovat informace o webu: tématické zaměření (např. ZOO, stránky nějakého umělce, hudební skupiny,...), případně další informace (název webu, co bude obsahem), url adresu stránky, která bude vaší inspirací
• případně fotografie, které na svém webu použijete

Další čtení

Otázky

1. Proč se inspirovat jinde?
2. Jak najít inspirativní webdesign na webu?
3. Pokuste se zjistit něco o technologii PageRank firmy google.
4. Nalezněte alespoň jednu českou a jednu zahraniční knihu o webdesignu včetně její ceny.
5. Jak obstarat fotografie pro design www stránky?
6. Pokuste se v některé fotobance nalézt vhodnou fotografii pro vaše potřeby a zjistit kolik stojí.
7. Jak namícháme vhodnou kombinaci barev pro web?
8. Co je to Twitter?
9. K čemu je generátor pseudo-náhodného textu? Jak takový najít na webu? Jak se takovému generátoru také říká?