Zo stovák stránok, ktoré vznikajú každý mesiac, vyberieme niekoľko príkladov, ktoré poslúžia ako ilustrácia konkrétnych trendov. Čerpať budeme z voľne dostupných zdrojov, hlavne CSS galérií (CSS Mania).
Marcové trendy
Webdizajn je dynamické odvetvie, v ktorom možno pozorovať dlhodobé a krátkodobé trendy. Niektorí webdizajnéri sa snažia o originalitu, iní dávajú prednosť osvedčeným, avšak stále moderným postupom. Diela všetkých profesionálnych tvorcov webových stránok majú jeden spoločný, charakteristický znak: snahu zaujať.
Každý dizajnér sa o to pokúša svojim, špecifickým spôsobom, ktorý viac alebo menej vytŕča z radu. Zároveň sa však všetci navzájom ovplyvňujú, dopĺňajú, inšpirujú prácami iných. Takýmto spôsobom vznikajú a zanikajú trendy. Aké trendy tvorby stránok prevládali na internete v marci?
- Využitie produktov značky Apple
- Vektorová grafika
- Typografia
- Whitespace
- Vizuálne odlíšenie na základe farieb
Využitie produktov značky Apple
Tento trend je možné pozorovať už dlhšiu dobu a to z prostého dôvodu – osvieži to stránku. V niektorých prípadoch je dokonca web tvorený len jednofarebným pozadím, obrázkom Apple produktu a textom. V jednoduchosti je krása a Apple sa snaží vo svojich produktoch jednoduchosť zachovať, čo z nich robí skvelých adeptov na kľúčový dizajnový prvok webu.
Ide o štyri produkty:
iMac – elegantný „all-in-one“ počítač, sa využíva prevažne v portfóliách – na obrazovke iMacu sú zobrazené práce ako dizajnérov, tak aj celých štúdií. Ide buď o fotografiu iMacu alebo o jeho vektorové prekreslenie. Väčšinou je logo zo spodnej časti displeja odstránené.
MacBook (Pro) – využívaný takisto v portfóliách, nápis zo spodnej časti displeja takmer vždy odstránený.
iPhone – mobilný telefón od Applu je kategória sama o sebe. Používa sa na weboch ako „orámovanie“ videa, používa sa v portfóliách, na osobných weboch. Oveľa dôležitejšie je ale jeho využitie na weboch, ktoré priamo súvisia s iPhonom. Väčšinou ide o oficiálne stránky iPhone aplikácií, ktoré boli v posledných mesiacoch veľkým trendom, avšak v marci sa ich zrodilo minimálne množstvo. Nemyslím si ale, že je tento trend úplne preč a s najväčšou pravdepodobnosťou sa v najbližších mesiacoch vráti, preto sa „iPhone mánii“ v tomto článku bližšie venovať nebudem.
iPad – tablet od Applu predstavený koncom januára sa už stihol niekoľkokrát objaviť ako dizajnový prvok na webových stránkach. Pravdepodobne ho v tomto smere čaká podobný osud ako iPhone – stane sa kráľom dizajnov stránok aplikácií určených pre iPad.
Osobné portfólio Marca Mendella zobrazuje drevenú plochu, na ktorej je položených niekoľko produktov značky Apple: Macbook, iPhone a MagicMouse. Kým mobil a myš slúžia len ako estetický doplnok, Macbook plní funkciu „rámu“ pre náhľad vybraných referencií.
Pre plynulý prechod medzi náhľadmi referencií (slider) bez nutnosti obnovovať stránku využíva Marc populárnu javascriptovú knižnicu jQuery.
Veľmi podobné ako v prvom príklade, tento krát ako orámovanie slidera vybraných referencií slúži iMac. Všimnite si absenciu Apple loga.
Prezentácia aplikácie určenej pre iPad, ktorej dizajn na tomto zariadení samozrejme zakladá. Obrázky so screenshotmi sú podložené nerušivým, prakticky jednofarebným pozadím.
Vektorová grafika
Využitie vektorovej grafiky je dlhodobý trend, ktorý sa osvedčil pre svoje čaro jedinečnosti. Môže byť nenápadným doplnkom alebo kľúčovým prvkom grafiky, zakaždým vdýchne stránke určitú unikátnosť a hlavne zapamätateľnosť. U firemných prezentácií naruší rutinu, bežnosť, tradíciu. U zábavných a detských stránok podtrhne zameranie. Svoje miesto si samozrejme nájde v portfóliách, na osobných stránkach a stránkach webových štúdií ako možnosť sebarealizácie, prezentácie vlastných schopností, grafického cítenia a talentu.
Veľmi hravý a veselý dizajn, prakticky celý stvorený vektorovými krivkami.
David Hellmann vo svojom portfóliu využíva vektorový autoportrét pre osobnejší pocit z webu.
http://www.teamfannypack.com/sillypoems/
Veľké množstvo vektorovej grafiky profesionálne pospájané do pekného celku.
Typografia
Kvalitná typografia je pri tvorbe použiteľného dizajnu samozrejmosťou. Grafik musí zvážiť najvhodnejší font, farbu písma, medzery medzi znakmi, riadkovanie, veľkosť nadpisov, vhodný výzor odkazov a mnoho ďalšieho.
Webdizajnéri čoraz častejšie zakladajú dizajny stránok na typografii ako takej, na kráse písma, na vhodnom využití whitespace (ku ktorému sa dostaneme). Vo väčšine prípadov ide o veľké nápisy v hlavičke, pričom zvyšok stránky je nerušivý, aby bola pozornosť užívateľa sústredená na nápis (ktorý obsahuje hlavnú myšlienku prezentácie). Nie je to však pravidlom, nájdeme aj typograficky ladené weby, ktoré netvoria krásu pomocou „WOW efektu“, ale unikátnym rozložením textu. Marec trend tvorenia webov so zreteľom na typografiu potvrdil.
Typický príklad „big typo“ stránky s veľkým nápisom v hlavičke. Perfektná voľba fontu a layoutu, stránka pôsobí elegantným dojmom.
Opäť výrazné typo v hlavičke, nie však ako obrázok, ale nápis „naštýlovaný“ pomocou CSS.
Veľmi elegantné riešenie – dve vety v strede stránky a následne výstižný nápis s logom. To všetko na jednoduchom grunge pozadí.
Whitespace
Práca s whitespace, teda s prázdnym priestorom je vo webdizajne dôležitá. Necháva vyniknúť obsah stránky a dodáva mu čistotu. V grafike (a v internetovej grafike to platí dvojnásobne) je prázdny, nevyužitý priestor rovnako dôležitý ako viditeľné grafické prvky. Ak sú tieto dva protipóly v rovnováhe, web je prehľadný a na pohľad príjemný. V opačnom prípade pôsobí nevyrovnaným, preplneným, rušivým, niekedy až amatérskym dojmom.
Je trendom tvoriť stránky, ktoré na dôležitosť whitespace poukazujú veľmi priamo. Málo textu, minimum grafiky a to všetko elegantne rozložené – to sú typické znaky takýchto webov, tiež známych ako minimalistické. V posledných mesiacoch sa im venovalo niekoľko magazínov o webovom dizajne a grafike, napr. http://www.youthedesigner.com/2010/03/30/examples-minimalist-web-designs/.
Minimalistické portfólio pôsobí dojmom ľahkosti.
Osobné portfólio, využíva plynulý posun medzi sekciami pomocou knižnice jQuery.
Veľké logo, jednoduchý nadpis a množstvo prázdneho priestoru.
Vizuálne odlíšenie na základe farieb
Ide o trend, ktorý sa opakovane objavuje už niekoľko rokov. Dôvod môžeme hľadať v relatívne pomalom pribúdaní stránok, ktoré vizuálne farebné rozlíšenie (jednotlivých sekcií) využívajú a pochopiteľne v praktickom hľadisku – stránka sa stáva prehľadnejšou, pochopiteľnejšou, použiteľnejšou.
V praxi ide najčastejšie o farebné rozlíšenie jednotlivých položiek menu (každá inou farbou), prípadne o celú farebnú škálu konkrétnej sekcie, podstránky.
Tri marcové príklady využívajúce farebné rozlíšenie:
http://www.lagaleraencantada.com.ar/
Odkaz na záver
Na záver článku prichádza odkaz na stránku, ktorá vytŕča z davu svojou originalitou. Link mesiaca je web so zaujímavým spracovaním a ovládaním: appear.dk
