Grafické podklady pro výrobu webu
Tato obecná specifikace popisuje minimální požadavky na grafické podklady pro výrobu standardní www prezentace. Dokument je primárně určen pro zadavatele grafických návrhů www stránek a měl by jim zejména posloužit jako srozumitelné a přitom jednoznačné vodítko v komunikaci s grafikem – zejména při přesném formulování technických parametrů objednávky. Při předávání hotového grafického návrhu lze tuto specifikace využít naopak jako jakýsi checklist pro jednoznačné posouzení jeho úplnosti a kvality.
1. Layout – mřížka (defaultně 5px x 5px)
- horizontální rozměry pro všechny elementy dělitelné pěti – šířky, odsazení, mezery, atd.
- platí také pro fixní vertikální rozměry – náhled obrázku, grafika v záhlaví, atd.
- výjimky a specifické případy nutno zdokumentovat (např. ikony u odkazů)
2. Písmo
- referenční rodina písma: sans-serif (pro jiné rodiny analogicky)
- standardní velikost: 12px
- limit pro minimální velikost: 11px
- povolená písma pro texty v prostředí Windows / MacOS:
- Arial / Arial
- Courier / Courier
- Georgia / New York CE
- Lucida Console / Monaco CE
- Palatino Linotype / New York CE
- Tahoma / Lucida Grande CE
- Times / Times
- Trebuchet MS / Geneva CE
- Verdana / Geneva CE
- použítí TrueType fontů nutno zdokumentovat (jen pro krátké texty bez zalomení řádku)
3. Texty
- výchozí odsazení odstavce od levého i pravého okraje elementu: 5px
- výchozí vnější odsazení za odstavcem: 8px (66.7% z aktuální výšky řádku)
- výchozí výška řádku textu: 17px
- výchozí zarovnání řádků: hlavní sloupec do bloku, ostatní vlevo
- všechny texty (včetně popisků grafických prvků) v plně editovatelné formě (nerastrovat)
- všechny jinak formátované textové bloky nutno zdokumentovat (popis | lorem ipsum)
- zdokumentovat parametry přístupnosti textů (barvy, kontrast k pozadí, atd.)
4. Odkazy
- všechny textové odkazy musí být podtržené
- výjimka je povolena pouze pokud je text v roli popisku grafického ovládacího prvky
- zdokumentovat barvy textových odkazů ve všech možných stavech (hover, visited, …)
- u grafických odkazů pro každý povolený stav samostatnou vrstvu|skupinu (lze jej vypnout)
5. Formuláře
- pokud má vstupní pole kulaté rohy, musí jeho výška počítat s dostatečnou rezervou minimálně pro dvojité zvětšení velikosti písma uživatelem!
- zdokumentovat barvy, rozměry, případně další specifické parametry formulářových prvků
- zdokumentovat chování formuláře a rozpracovat kromě výchozího zobrazení také všechny dynamické stavy, lišící se graficky, nebo formátováním
6. Ikony a loga
- hlavní logo webu ve dvou verzích – základní pro web a černobílé pro tisk
- zpracovat v samostatných vrstvách všechny použité ikony včetně jejich dynamických stavů, které mohou nastat
- nesmí chybět:
- favicon.ico
- ikona za textem externího odkazu
- ikona odkazu v mapě stránek
- odkaz Nahoru (na začátek stránky)
- error (chyba – většinou symbol ‘x’, červeně)
- notice (informace – většinou písmeno ‘i’, modře)
- warning (většinou symbol ‘!’, nesmi být červeně – uživatel neudělal žádnou chybu!)
7. Složitost grafického návrhu
Složitost grafiky musí především reálně odpovídat dohodnuté ceně webu
(raději vše nové a ne zcela standardní pořádně zkonzultovat, než se pak zbytečně stresovat. I zdánlivě triviání grafický návrh totiž ve výrobě může narazit na aktuální technologické limity a tím celý projekt značně prodraží!)
8. Grafické podklady nezbytné pro schvalování a výrobu
Náhledy grafického návrhu pro potřeby jejich prezentace u klienta a následného schvalování musí být předány v jednoduché HTML obálce (viz vzorový kód). Obrázek náhledu vždy ukádat ve formátu 24bit. PNG! (Návrhy se klientovi prezentují výhradně v prohlížeči WWW)
Kód HTML stránky nahled.php
<html>
<head>
<title>Nahled grafiky</title>
</head>
<body style=„margin:0″>
<img src=„<?php echo htmlSpecialChars($_SERVER['QUERY_STRING']) ?>„>
</body>
</html>
URL stránky s náhledem grafiky
http://example.com/nahled.php?pohled.png
Návrhy (z hlediska designu a formátování návrhu) není nutné kompletně verzovat do samostatných souborů.
Jednotlivé verze zobrazení celých stránek nebo jen dílčích bloků se ale vždy musejí dát operativně vypínat a zapínat tak, aby bylo možné pracovat s ucelenými náhledy všech grafických sestav, které se mohou v ostrém provozu objevit.
Typické verze stránek a bloků v grafickém návrhu prezentačního webu
- Úvodní stránka
- Základní obsahová stránka
- Stránka Kontakty
- Stránka Výsledky vyhledávání
- Mapa stránek (chybové stránky, …)
- stránka Archív článků (novinek)
- stránka Celý článek (novinka)
- stránka Galerie obrázků
Další příklady
- rozcestník Kategorie (sekce)
- Katalog produktů
- Detail produktu
- Registrace (editace) uživatelského účtu
- Tiskové středisko
- …
Příklady aktivních obsahových bloků
- panely Hlavní nabídka, kontextová nabídka (+ hover, selected)
- rozcestník (productbar) (+ hover)
- panel vyhledávání s našeptávačem (+ hover)
- komunikační formulář (+ výsledné stavy po odeslání: OK, ERROR, nesprávně vplněno)
8. Shrnutí
seznam dílčích částí grafického návrhu prezentačního webu
-
Dokumentace (grafický manuál webu)
- prostorová definice struktury webu, rozvržení obsahu, … (schemata, grafy)
- grafický manuál definice použitých barev
- popis obecného použití barev v prezentaci (smysl, logika, sémantika)
- definice písma a popis použití (odstavce, nadpisy, odkazy, popisky, sémantické formáty, typografické konvence, atd.)
- Popis výjimek a specifických grafických zobrazení, stavů nebo interakcí
- Seznam zdrojových souborů včetně popisu logiky či struktury vrstev a skupin
- Seznam grafických náhledů a jejich konfigurace ve zdrojových
souborech které skupiny a vrstvy zapnout nebo vypnout) + jejich
náhledy v JPG (velikost 800×600) - Seznam ostatních příloh (instalační balíčky TrueType fontů, sady ikon a obrázků, …)
-
Zdrojové soubory s návrhy (PSD, režim RGB 16bitů/kanál)
- grafický návrh je organizován do logické struktury pojmenovaných skupin tak, aby bylo možné postupně vypínat a zapínat všechny dílčí objekty stránky. Nejvyšší úroveň struktury obsahuje celkové náhledy konkrétních stavů zobrazení stránky.
- samotné vrstvy nesmí nikdy integrovat obsahový element, který je z hlediska kódování webu ještě dále dělitelný.
Příklad: V jedné vrstvě se nesmí současně nacházet objekt (např. ikona, text, atd) i jeho pozadí. - všechny texty musí být editovatelné a nezrastrované.
- grafické objekty musí mít přístupné a editovatelné všechny efekty a masky, které se podílejí na výsledném vzhledu.
- podtržení odkazů je nutné řešit v samostatné vrstvě (ne podtrženým fontem)
- všechny obsahové texty (lorem ipsum) budou v návrhu použity bez vyhlazování a bez jakékoliv neproporcionální deformace písma oproti standardu.
- vektorovou masku aplikovanou na importovanou fotografii je nutné umístit v samostatné vrstvě tak, aby bylo možné ilustrační obrázek pod maskou rychle a pohodlně měnit.
Velmi zajímavé a poučné… u některých bodů jsem se musel pozastavit a u některých se zamyslet, protože všude se praxe trochu liší. Ale vysledný efekt kvalitní práce by měl být vždy vidět na první pohled.
ciekawe dobry tekst
Super artykul, dzieki!