Návody

Jak připravit grafický návrh pro solidpixels

8 minut

Grafický návrh podle požadavků usnadní nasazení grafiky na solidpixels. Seznamte se se základními požadavky.

Obsah článku

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.

Pixel perfect grafika?

Optimální postup zahrnuje použití dodané grafiky jako vzorového návrhu, který se přenese do solidpixels s maximálním možným zachováním vizuální podoby. Přesto může dojít k drobným rozdílům, které však neovlivní funkčnost webu. Tento přístup zajišťuje vyvážení mezi kvalitou a efektivitou, což vede k úspěšné a cenově dostupné realizaci projektu.

Pokud bude potřeba dodržet maximální shodu s návrhem je potřeba počítat s navýšením rozpočtu.

Grafické formáty

Přijímáme externí grafické návrhy zpracované v moderních editorech pro tvorbu webdesignu jako Figma, Sketch.

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é (ideálně nikoli Vrstva, Vsrtva 1 - kopie) 

  2. styly pro základní a vedlejší barvy,

  3. styly pro základní text a 4 úrovně nadpisů, včetně velikostí pro telefony a tablety,

  4. styly tlačítek a odkazů a jiných interaktivních prvků ve všech stavech (aktivní, hover, focus,...),

  5. Přímo vložené (embedované) obrázky

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 Illustrator. V takovém případě požadujeme ještě podklady v PDF a připravit 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, ideálně ve formátu SVG)

Písma

Solidpixels využívá fonty Google. Vybírejte fonty s takovými znakovými sadami, které odpovídají mutacím webu.

  • Je možné používat vlastní písma, ke kterým má klient webovou licenci, v tomto případě je nutné dodat formáty WOFF2, WOFF.
     
  • Lze využívat i další služby jako Adobe Fonts, Typography.com, Suitcase Type Foundry. Při využití těchto služeb ideálně poskytněte přístupy přímo do účtu klienta, případně správně nastavený font kit.

Poznámka

Placená písma musí mít zakoupenou licenci pro použití na webu. Nestačí vlastnit licenci pouze pro desktop.

Styleguide

Pro lepší přehlednost je ideální mít v rámci designu styleguide všeobecných komponent, jako jsou tlačítka, nadpisy, odkazy vč. hover/focus/active stylů.

Obrázky a ikony

Pro zobrazení obrázků v nejvyšší kvalitě dodejte obrázky v samostané složce. Do grafického návrhu je třeba obrázky vložit přímo (embed).

  • Fotografické obrázky ve formátu .JPEG
  • Ikony ve vektorovém formátu .SVG
  • Poloprůhledné grafické prvky ve formátu .PNG ve vysokém rozlišení

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 bez znovunačtení celé stránky.

Responzivní prvky

Pokud design obsahuje specialní prvky (např. rozšířená navigace, sekce s přesahy atp.), musí návrh myslet na všechna zařízení a nastínit, jak budou prvky vypadat na žádoucích rozlišeních obrazovek. (např. od 320 px až po  1920 px).

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í (vertiklální) obsahu (margin) je 12 px.

Sekce

V solidpixels je sekce část stránky, která obsahuje další bloky.

  • Každá sekce se skládá z obsahového prvku (grid) a z pozadí, které může být barva, obrázek nebo video.
  • V sekci se nachází další bloky (text, obrázek, video, citace, atp.)

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

Pokud jsou videa použita jako pozadí sekce nebo dekorační prvek, měla by být optimalizovaná pro použití na webu:

  • formát MP4 (codec: H.264, frame rate: 25 fps),

  • rozlišení 1920 × 1080 px,

  • bez zvukové stopy,

  • délka videa ideálně kolem 20 s,

  • datová velikost do 20 MB, (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í 1920 × 1080 px,
  • ideálně optimalizovat video pro rychlý streaming (funkce faststart) ,
  • na mobilních zařízeních bude místo videa pouze zástupný obrázek, případně se video načte až po uživatelské interakci (např. klik play)

Poznámka

Pokud chcete nechat přípravu videa do správného formátu, objednejte si typ těchto prací u naší podpory.