Aspekty kvality grafického návrhu
Externí grafický návrh musí splňovat všechny aspekty kvality, které se solidpixels zavazuje dodávat svým klientům:
-
Práce je dodaná včas
- Práce od externího dodavatele je dodaná podle očekávání v domluveném a akceptovaném termínu.
- Dodávka nijak neohrožuje naplánované kapacity pro klienta, ani finální termín spuštění projektu.
-
Kompletnost
- Grafický návrh kompletně pokrývá všechny prvky, scénáře i stavy, které jsou nezbytné pro kompletní realizaci webu.
- Všechny potřebné prvky jsou zahrnuté v design manuálu.
-
Škálovatelnost
- Grafický návrh funguje ve všech situacích nezávisle na množství dat, protože v následujícím kroku bude nasazený na redakční systém
- Design ošetřuje okrajové situace (prázdná data, žádné výsledky vyhledávání atp.)
-
Responsivita
- Design je připravený ve variantách pro celou škálu rozlišení, je třeba řešit i okrajové situace (tj. od 300px až do 1600px)
- Pokud součástí designu není kompletní responzivní verze pro celou škálu, budou použita standardní pravidla responzivity systému solidpixels
-
Administrovatelnost
-
Obsah grafického návrhu je navržený s ohledem na pohodlnou editovatelnost v CMS, maximálně využívá nastavení vzhledu a připravené obsahové bloky (Layout Builder)
-
Obsahové prvky, které nelze řešit v rámci připravených komponent v solidpixels je třeba dopředu zkomunikovat s projektovým manažerem i klientem.
-
Grafické formáty
Přijímáme externí grafické návrhy zpracované v moderních editorech pro tvorbu webdesignu jako sketch, figma, in-vision.
Soubor s grafickým návrhem musí být strukturovaný a musí obsahovat:
- obsah rozdělený do skupin podle logických vzorů na stránce, vrstvy jsou srozumitelně pojmenované (nikoli Layer 1, Layer 1 - kopie)
- styly pro základní a vedlejší barvy,
- styly pro základní text a 4 úrovně nadpisů
- styly tlačítek a odkazů ve všech stavech
Velikost jednoho zdrojového souboru by neměla přesáhnout 300 MB.
Výjimečně přijímáme zdrojové soubory vytvořené pomocí aplikací Adobe Photoshop nebo InDesign. V takovém případě požadujeme ještě podklady v PDF a připravit kompletní design manuál.
Požadavky na design manuál
Kvalitně zpracovaný design manuál obsahuje všechny potřebné prvky i jejich stavy nutné pro realizaci kvalitního webu:
Brand
V manuálu musí být definované základní brandové prvky jako je logo a základní barvy spojené se značkou.
- Logo je dodané ve všech povolených variantách: pozicování, ochranné zóny, barevné varianty (v křivkách ve formátu SVG)
Písma
Solidpixels využívá fonty Google Fonts. Vybírejte fonty s českou znakovou sadou (pokud bude mít web českou jazykovou mutaci)
- Je možné používat vlastní fonty, ke kterým má klient webovou licenci, v tomto případě je nutné dodat následující formáty: WOFF2, WOFF, TTF, EOT.
- Lze využívat i další služby jako Typekit nebo Typography.com. Při využití těchto služeb ideálně poskytněte přístupy přímo do účtu klienta, nebo upozorněte klienta na nutnost zakoupení licence k fontům, které byly použity.
Obrázky a ikony
Pro zobrazení obrázků v nejvyšší kvalitě dodejte obrázky v samostané složce v původním rozlišením.
- Fotografické obrázky ve formátu .JPEG
- Ikony ve vektorovém formátu .SVG
Poznámka
Zdrojová data musí být skutečně vektorová, nelze pouze vložit bitmapu či base64 do SVG.
Interakce
Interakce nemusíte vytvářet v grafickém provedení. Stačí jejich slovní popis, případně ilustrační ukázka.
- Animace: týká se jednotlivých prvků, ale i celých stránek, různé skrolovací animace apod.
- AJAX: různé načítání dalších položek, odeslání formuláře, apod.
Responzivní prvky
Solidpixels je od základu responzivní. Pokud design obsahuje specialní prvky (např. rozšířená navigace), musí návrh myslet na všechny zařízení a nastínit mobilní verzi pro celou škálu rozlišení (od 300px až po 1600px).
Layout
Solidpixels je postaven na kombinaci 12 a 20 (5 sloupců) sloupcového gridu, který je omezen na maximální šířku. Parametry gridu je možné měnit, výchozí nastavení:
- šířka obsahu webu (measure) je 1140 px,
- šířka mezer mezi sloupici (gutter) je 24 px,
- minimální odsazení obsahu (margin) je 12 px.
Sekce
V Solidpixels je sekce základní blok webu.
- Každá sekce se skládá z obsahového prvku (grid) a z pozadí, které může být barva, obrázek nebo video.
- Minimální vertikální odsazení sekce je 50 px (ochranná zóna pro interaktivní akce v CMS)
Patička
Patička je speciální sekce, která se zobrazuje na všech stránkách. Nemůže obsahovat bloky na plnou šířku.
Videa
- formát MP4
-
rozlišení minimálně 1920x1080px
-
bez zvuku
- datová velikost do 20MB, datově větší videa budeme muset optimalizovat za více náklady na naší straně
- kompozice na středu, v případě použití videa na pozadí sekce budou okraje automatické oříznuté v závislosti na rozlišení prohlížeče
- k video dodat i úvodní obrázek přímo z videa v rozlišení 1920x1080px, formát JPG
- Ideálně optimalizovat video pro rychlý streaming (funkce faststart)
- na mobilních zařízeních bude místo videa pouze zástupný obrázek