Grafické podklady pro výrobu webu

článek v kategorii Design , autor článku je minik , článek přidán dne 07.4.2011


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 posloužit hlavně 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)

 

9. Shrnutí - seznam dílčích částí grafického návrhu prezentačního webu

Dokumentace (grafický manuál webu)

  1. prostorová definice struktury webu, rozvržení obsahu, ... (schemata, grafy)
  2. grafický manuál definice použitých barev
  3. popis obecného použití barev v prezentaci (smysl, logika, sémantika)
  4. definice písma a popis použití (odstavce, nadpisy, odkazy, popisky, sémantické formáty, typografické konvence, atd.)
  5. Popis výjimek a specifických grafických zobrazení, stavů nebo interakcí
  6. Seznam zdrojových souborů včetně popisu logiky či struktury vrstev a skupin
  7. 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 800x600)
  8. 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)

  1. 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.
  2. 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í.
  3. všechny texty musí být editovatelné a nezrastrované.
  4. grafické objekty musí mít přístupné a editovatelné všechny efekty a masky, které se podílejí na výsledném vzhledu.
  5. podtržení odkazů je nutné řešit v samostatné vrstvě (ne podtrženým fontem)
  6. 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.
  7. 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.

Zpět