Obsah článku
Vytváření grafického návrhu
Při vytváření grafických návrhů dáváme přednost moderním editorům pro tvorbu webdesignu jako sketch, figma, in-vision.
Soubor s grafickým návrhem musí být strukturovaný a obsahovat:
- styly pro základní a vedlejší barvy,
- styly pro základní text a nadpisy, solidpixels využívá čtyři druhy nadpisů,
- styly tlačítek a odkazů,
- základní respozivní principy a naznačení mobilní verze.
Velikost jednoho zdrojového souboru by neměla přesáhnout 300 MB.
Pokud pracujete v jiném editoru (InDesign, Photoshop) pak je nutné dodat podklady v PDF a design manuál. Popis požadavků na manuál je uveden níže.
Požadavky na design manuál
Dodáváte-li podklady v PDF s design manuálem, je nutné do manuálu zahrnoutnásledující informace.
Písma
Solidpixels využívá fonty Google Fonts. Vybírejte primárně fonty s českou znakovou sadou.
- 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.
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.
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
- na mobilních zařízeních bude místo videa pouze zástupná obrázek