Jak připravit grafický návrh pro solidpixels

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,
  • styky pro základní textnadpisy, solidpixels využívá čtyři druhy nadpisů,
  • styky tlačítek a odkazů,
  • základní respozivní principy a naznačení mobilní verze.

Velikost jednoho zdrojového souboru by neměla přesáhnout 300MB.

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 1140px,
  • šířka mezer mezi sloupici (gutter) je 24px, 
  • minimální odsazení obsahu (margin) je 12px.

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 50px (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.

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