Jak připravit grafický návrh pro solidpixels

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:

  1. 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. 
  2. 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.
  3. Š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.)
  4. 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
  5. 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:

  1. obsah rozdělený do skupin podle logických vzorů na stránce, vrstvy jsou srozumitelně pojmenované (nikoli Layer 1, Layer 1 - kopie
  2. styly pro základní a vedlejší barvy,
  3. styly pro základní text a 4 úrovně nadpisů
  4. 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

Vyzkoušejte si, co jste se právě naučili