Webdesign šablony a grafika

Aktuálně čtu knihu The Humane Interface, ve které Jef Raskin – návrhář prvního Macintoshe – rozebírá filosofii tvorby UI. Mimo jiné zavádí koncept takzvaných módů. Módy způsobují, že UI reaguje jinak, pokud je v jiném módu. Děláte to, co normálně, ale reakce je zcela jiná, díky tomu, že je mašina v jiném nastavení.

Třeba uspaný počítač reaguje jinak, než zapnutý (ideálně by se měl vzbudit klikem na libovolné tlačítko a měla by být vykonána akce, která přísluší danému tlačítku – protože pak se počítač chová konzistentně). Nebo personalizovaný program (který si přizpůsobil člověk před vámi) reaguje jinak, než nepersonalizovaný. Extrémem jsou např. měnící se popisky tlačítek – pozice je stejná, ale v závislosti na přepínači se zcela mění jejich funkce. Příkladů je mnoho a často se netýkají počítačů.

Jef je zcela proti módům a jejich aplikaci v UI (mohl bych to více teoreticky popsat, ale raději si přečtěte knihu), protože vytváří prostor pro chyby, matou uživatele, způsobují nekonzistenci a brání efektivnímu naučení se UI a automatizaci při jeho používání. Prostě jsou úplně špatně.

Módy ve webdesignu

Responsivní layout vytváří módy (přizpůsobuje se zařízení, mění se počet sloupců a umístění prvků). Váš web je jiný na iPhone, iPadu a desktopu (a také na počítači kamaráda s jiným rozlišením). Jako vlastník všech těchto zařízení máte jeden web v několika různých módech… a nevíte, co kde hledat. Tedy pokud hledáte něco konkrétního a tvůrce nepředpokládal, že právě TO budete hledat a nedal TO hned nahoru jako megavelké tlačítko. Což vás stejně zmate, protože na jiných zařízeních to megavelké tlačítko nahoře není.

Jef by z mého pohledu pravděpodobně zatleskal Jeffreymu Zeldmanovi a jeho Mobile Only. Jeden mód vládne všem.

"Kalibrace monitoru je asi ta nejdůležitější věc, kterou musí udělat každý, kdo to s úpravami a tiskem digitálních fotografií myslí vážně. Pro správné nastavení monitoru poskytuje japonský výrobce fotografických monitorů EIZO NANAO Corp. ke svým modelům dvě základní řešení hardwarové kalibrace podle potřeb a zkušeností uživatelů."

"Chcete si rozšířit své fotografické obzory? Zajímá vás konkrétní fotografická disciplína, ale chybí vám potřebné znalosti či zkušenosti? A nebo prostě jen hledáte inspiraci či příležitost setkat se s podobně "postiženými" - spřízněnými dušičkami? Neváhejte a navštivte některý z fotografických kurzů... "

"Od 23. dubna jsou v nabídce Adobe sady a jednotlivé programy Adobe Creative Suite 6 a také nová speciální služba Creative Cloud, umožňující snadný přístup k předplaceným programům, a to k různým sadám včetně Master Collection i k jednotlivým programům."

"Hewlett-Packard během výroční konference HP Fórum představil all-in-one pracovní stanici s úhlopříčkou 27 palců (68,6 cm). Má jedinečnou konstrukci a "beznástrojové" šasi, umožňující snadný upgrade nebo výměnu hardwaru. Je určena hlavně designérům a profesionálům pracujícím v oblasti digitálních médií a zábavy."

"Milí IDIFáci, nejen, že jsme pro vás otevřeli nové moderní prostory pro potřeby vzdělávání, ve kterých již úspěšně proběhly první fotografické i počítačové kurzy, ale přinášíme vám nyní i báječnou nabídku kurzů za příznivější cenu! Více informací se dozvíte v článku!"

"Epson představil několik nových projektorů: MG-850HD s dokem pro iPod, pět 3D modelů řady EH-TWxy s vysokým rozlišením obrazu a šest speciálů – interaktivní EB-4xyW/Wi s velmi krátkou projekční vzdáleností, které jsou ideální hlavně pro oblast školství."

"Lensbaby, výrobce kreativních efektových objektivů se selektivním zaostřováním, oznámil, že populární objektiv Composer Pro je nově dostupný i pro kompaktní fotoaparáty s výměnnými objektivy."

"Ještě do středy 11. dubna můžete navštívit výstavu fotografií Martina Stranky s názvem "Znovuzrození" v Nákupní galerii Myslbek."

"Po přemístění výstavy na Slovensko se výstava fotografií "Barvy Islandu" opět vrací do České republiky, konkrétně do Prahy. Autor, David Varga, působil na tomto ostrově delší dobu v rámci pracovní stáže Erasmus. To mu umožnilo procestovat celý ostrov a zachytit tak zajímavé záběry za nevšedných světelných podmínek."

"Společnost Western Digital v březnu uvedla na trh novou generaci své nejprodávanější řady externích přenosných disků My Passport. Uživatelům nabízí moderní stylový design vnějšího pouzdra a vylepšené prvky automatického zálohování a bezpečnosti. A jako první má kapacitu paměti 2 TB."

"Fotoklub Havířov srdečně zve všechny čtenáře serverů Fotografování.cz a Grafika.cz na výstavu fotografií svých členů, kterou připravil při příležitosti oslav deseti let své činnosti."

"Nejnovější výkonná multifunkční zařízení s inkoustovou tiskárnou, skenerem, kopírkou a vysokorychlostním faxem nabízejí uživatelům vylepšené funkce a snadnější tisk z tabletů a chytrých telefonů. Zaujmou vysokou rychlostí barevného tisku, 35stránkovým automatickým oboustranným podavačem dokumentů i stylovým designem. Jsou vhodné hlavně pro domácí kanceláře."

"Epson představil řadu nových produktů z oblasti inkoustového tisku, multifunkčních zařízení s integrovanou inkoustovou tiskárnou a také projekce, a to standardní, 3D i speciální, určené třeba pro školní a firemní využití. Nejprve se zaměříme na řadu důmyslně a precizně řešených stolních tiskáren s velkokapacitními inkoustovými nádržkami, které umožňují realizovat více výtisků za méně peněz."

"Co se pod tímto - tajemně zkratkovitým titulem skrývá? Společnost Fomei uspořádala dne 27. 3. v prostorách Národního technického muzea v Praze tiskovou konferenci na téma „moderního zpracování produkční zakázkové fotografie“, kde představila nové produkty a vize japonské společnosti DNP."

"V segmentu velkoformátového fototisku je v současné době k dispozici obrovská škála potisknutelných médií, která se od sebe liší složením, strukturou, gramáží, barvou ale především... kvalitou! Žádný fotograf by nebyl (tím správným) fotografem, kdyby nezakusil ono kouzlo velkoformátového tisku..."

Začínající webdesignere! Naše profese je úžasná. Zatímco jiní designeři (třeba oděvní) končí na úřadu práce, webdesign vzkvétá, roste a rozpíná se. Navíc je obrovský hlad po zkušených a kompetentních webdesignerech po celém světě, takže pokud budete dobří, tak máte šanci uchytit se skoro kdekoliv.

V minulosti bylo možné být špičkou i v několika jeho částech, dnes už se dostáváme do situace, kdy je webdesign tak rozsáhlý, že je obtížné být špičkou jen v jednom z jeho podoborů.

Jak ale nastoupit do takto rozjetého vlaku? Ideální by byl obor na vysoké škole, který ovšem u nás ani po 20 letech není – a myslím, že ještě dlouho nebude. Zbývá tedy sebevzdělávání.

Můj recept na start webdesignera je přibližně tento:

1. určete si, co chcete dělat
2. obsáhněte řemeslnou a myšlenkovou část daného podoboru
3. zjistěte si informace ze souvisejících oborů, abyste měli přehled
4. vrhněte se směrem, který vám bude skutečně vyhovovat

Určete si, co chcete dělat

Jako webdesigner (tedy to, co si lidé běžně pod pojmem webdesigner představují) pravděpodobně budete chtít řešit jednu z následujících činností nebo jejich kombinaci:

• návrh webu (vaším výstupem je dokumentace) → chcete být UX designer, interakční designer, informační architekt,…
• grafika (vaším výstupem jsou PSDčka) → chcete být webový grafik
• HTML (vaším výstupem webová stránka) → chcete být webový koder
• HTML + javascript (opět je výstupem webová stránka) → front-end developer

Nejjednodušší je začít jako koder nebo webový grafik, protože v takovém případě převládají řemeslné aspekty webdesignu. V případě front-end developera přidejte nutnost programovat, v případě UX designera více interakčního designu, informační architektury, strategie, komunikace,…

Moje pojetí webdesignera je UXák + webový grafik + webový koder + přehled o SEO, copywritingu, marketingu, brandingu, gamifikaci, strategii, business problematice, atd. – což je ovšem stav, do kterého se nedostanete za rok. Webdesigner je desetibojař.

Obsáhněte daný obor

Každý z prezentovaných přístupů má své prerekvizity, klady a výzvy a potřebujete u něj obsáhnout určité množství teorie.

UX designer

Jako UXák budete zjišťovat požadavky klienta, jeho zákazníků a převádět je do obsahové makety webu. K tomu potřebujete znalosti interakčního designu, informační architektury a strategie obsahu (čím větší weby navrhujete, tím více a lépe). Btw. termín UX designer používám proto, že je to u nás běžné – nikoliv přesné.

UXák musí přemýšlet a dávat web do souvislostí – potřebuje nejhlubší teoretické základy a nejvíce interaguje s klientem. Do řemeslné části pak patří tvorba dokumentace popisující web (tak, aby vypadala dobře a byla jednoduše konzumovatelná) a prototypů – ať už v grafickém editoru, nebo některém z programů, které jsou pro prototypování webů určeny. Nemusí mít nutně grafické cítění, ale je to určitě plus.

Webový grafik

Webový grafik vytváří náhledy webových stránek v grafickém programu – UXák mu dodá wireframy/prototyp a on je graficky interpretuje. Jeho práce tedy stojí tedy zejména na tradičním grafickém designu, typografii a na souvisejících teoretických znalostech (např. gestalt theory).

Webový grafik si nemusí lámat hlavu s návrhem obsahu, ale musí graficky interpretovat wireframy (tzn. ne pouze obarvovat pole, ale ohýbat wireframy s ohledem na jejich skutečný obsah a vizuální prvky – to, co bylo ve wireframu bílý proškrtnutý čtvereček může být v grafice kde co), aby měl výsledek smysl pro koncového uživatele a zapadal do vizuálního stylu klienta.

Řemeslnou částí práce webového grafika je ovládnutí grafického programu – standard je Adobe Photoshop či Fireworks. Na grafické programy existuje množství postupů a návodů na internetu (a samozřejmě knih), můžete s tím začít prakticky okamžitě.

Řemeslná schopnost interpretovat wireframy, cit pro leštění a grafický design z vás ale ještě nedělají webdesignera. Jste vždy závislí na kvalitě výstupů UXáka. Je proto potřeba před vstupem na volnou nohu doplnit minimálně teorii a praxi interakčního designu. Webový grafik potřebuje grafický cit.

Koder / front-end developer

Kodeřina má nejblíže k řemeslu – dostanete webovou stránku jako screen a přetvoříte ji do HTML+CSS tak, aby se web zobrazoval hezky v jednotlivých prohlížečích/za­řízeních/operač­ních systémech. HTML+CSS se lze naučit relativně rychle, takže je to nejjednodušší vstupní bod do webdesignu. Vyšší dívčí je pak přizpůsobování výstupů webového grafika vzhledem k rozlišení prohlížeče, tvorba mobilních verzí webu, apod.

Webový koder bude mít bez grafického citu velice těžkou práci, protože s ním bude muset grafik ladit každý pixel (nebo desítku pixelů – záleží na přístupu grafika – tak jako tak ho to brzy přestane bavit). Front-end developer si k HTML musí připočíst javascript a tudíž znalosti týkající se programování.

Zjistěte si, co je okolo

Webdesigner neuspěje ve vzduchoprázdnu a jestliže nechcete pouze vykonávat řemeslný aspekt naší práce (v nějaké větší reklamce / studiu), tak se musíte neustále sebevzdělávat.

Přehled potřebujete obzvláště ve chvíli, kdy chcete působit na volné noze, kde musíte mít hlubší představu o celkovém obrázku webdesignu, abyste mohli řešit to, co klienta skutečně pálí. A to jsou peníze. Zásadním přínosem webdesignu jsou, byly a budou prachy, lováče, papírky, bankovky, mince & cash. Kvůli nim si vás najal a pokud budete zvládat jen svůj výsek, tak nemůžete nikdy sami dodávat vydělávající projekty.

Vrhněte se jinam

Jen málokterý webdesigner dělá obor, se kterým ve webdesignu začal, takže se nenechte omezovat nějakým počátečním dělením. Z koderů se stávají grafici, z grafiků UXáci, z UXáků školitelé či projektoví manažeři. Stejně tak můžete přejít do týmu SEOistů, copywriterů či stratégů – záleží jen na vás. Webdesign je obor, ve kterém si můžete každý den zkoušet nové věci – a tak si je zkoušejte! Někdy vám je i klienti zaplatí .

Úvod do webdesignu

V bloku expertů Masarykovy univerzity jsem měl přednášku na téma webdesignu pro zadavatele projektů – mohla by být vhodná i pro vás, kteří s webdesignem začínáte.

Tip pro začínající webdesignery

V Brně proběhne Předletní škola grafického designu. V rámci 4 setkání ve středu večer získáte povědomí o základech grafického designu. Školu vede pan Štrouf a mohu ji jen doporučit.

Související

• Webdesign není řemeslo
• Jak se liší webdesigner a UX designer
• Trh webdesignu

Příště: knihy pro začínající webdesignery.

"Soutěžte se SkyDrive a vyhrajte designouvou bezdrátovou myš Wireless 3000! Stačí vyplnit krátký dotazník, který najdete na konci textu, a poslat nám e-mail s odpovědí na soutěžní otázku na adresu redakce. Každý, kdo vyplní dotazník a pošle nám správnou odpověď, bude do soutěže zařazen."

"Spolu s novými fotoaparáty a velkými stolními tiskárnami a multifunkcemi, kterými se postupně zabýváme, představil Canon také nejnovější model malé a snadno přenosné i použitelné termosublimační fotografické tiskárny. Má výklopnou LCD obrazovku, jednoduché uživatelské rozhraní a fotografii formátu pohlednice vytiskne do jedné minuty."

"Od 20. března je v prodeji nejnovější verze CorelDRAW Graphics Suite X6. Nová sada má zcela přepracované typografické jádro, nabízí rozšířenou podporu písem OpenType, nástroj pro tvorbu vlastních souladů barev, nové funkce pro stránkový zlom, nativní podporu 64bitové platformy a vylepšenou podporu vícejádrových procesorů."