Purply Using Styles Guidlines

Návod jak pracovat se styly a pár bonusových informací

 

​1. Typografie

​

• Nadpisy

  • Nadpis 1 (H1): Toto je váš nejdůležitější nadpis. V případě Purply jde o nadpisy sekcí. Občas se používá ještě větší nadpis, který je nadřazený a slouží jako název celé stránky nebo na marketingové sdělení (někdo ho klasifikuje jako H0, pro jiné je tohle právě H1).

  • Nadpis 2 (H2): Používá se pro podsekce v rámci jedné sekci webu.

  • Nadpis 3 (H3): Občas je nutné rozdělit obsah ještě víc, k tomu slouží H3

  • Nadpis 4 (H4): Normálně by šlo o ještě drobnější členění obsahu a nemusí nutně být na každém webu. Bohužel Wix nezná jiné styly písma než je nadpis nebo text odstavce, tudíž jsem využila tyto styly trochu jinak. H4 v našem případě slouží jako tag sekce ("Naše kimona" atd.)

  • Nadpis 5 (H5): Tento styl je použitý v navigaci a footeru. Od H4 se liší jiným character spacingem.

  • Nadpis 6 (H6): Opět využité na text, který ve skutečnosti vůbec není nadpisem. Tento styl využijete na referenc

• Text odstavce

  • Pragraph 1: jedná se o větší verzi fontu. Tradičně se využívá např. na domovské stránce na jednoduchá sdělení, která většinou nepřesahují délku jednoho odstavce​

  • Paragraph 2: nejtradičnější velikost fontu, kterou využijete na delší texty - popisy produktu, akcí, blogové články aj.

  • Paragraph 3: nejmenší font, který můžete použít jako popisek, na odkazy ve footeru aj.

• Nejmenší velikost písma:

  • Tradičně se uvádí, že font textu by neměl být menší než 16 px, hlavně na mobilním zařízení. Na desktopu jsou snášeny dobře i menší velikosti fontu. Vždy se doporučuje svůj design otestovat než se nasadí. V rámci toho se kontroluje i čitelnost. Velikost 14 px bývá většinou snášena dobře, ale hodně záleží i na typu fontu a řezu (bolt, italic, light atd.)

​

2. Barevnost

​

U barev je nejdůležitější si hlídat dostatečný kontrast, aby váš web byl dobře přístupný a čitelný. V případě světlého webu, doporučuji všechny světlé odstíny (žlutá, zelená, světlonce fialová) používat na plochy, nikdy ne na obrysy. Platí pravidlo, že váš web je přístupnější, když je větší rozdíl ve světlosti než v barevnosti. Kromě textu, který je jasným příkladem nutnosti kontrastu, se jedná také o ikony nebo o buttony.

• Primární barvy

  • Wix za primární barvy nepovažuje barvy brandové, ale barvy, které se na webu vyskytují nejvíc - jde tedy o barvu pozadí a barvu textu (což pro nás také neplatí tak úplně)

  • Nejdůležitější je ve všech případech hlídat dostatečný barevný kontrast, tam, kde je potřeba dobrá čitelnost. Při tvorbě stylů Wix sám upozorňuje na nedostatečný kontrast, ale podle mého uvážení trochu přehání. Vždy je dobré se na svůj výtvor podívat očima uživatele a zamyslet se nad tím, jestli text ještě stále vidíte dobře a jestli se vám příjemně čte

  • Určitě musím zmínit, že na webech se obecně nedoporučuje používat čistě černou barvu (#000000), a to hlavně kvůli zobrazení na OLED displejích. Nemusíte se tím ale nijak trápit, koukala jsem, že vaše primární barva je tmavě fialová. Kdybyste ale potřebovala k něčemu černou, ve stylech máte uloženou její alternativu (vychází z brandových barev, které jsem převzala z vaší Canvy)

• Odstíny

  • Wix se chová trochu zvláštně a nedovolil mi naklikat vám do stylů všech 8 brandových barev. Povedlo se mi to přelstít a všechny světleji fialové jsem vám uložila do odstínů​

• Akcentové barvy

  • Zde najdete zbytek své barevné palety​

​

 

3. Seskupování objektů a jejich ukládání

 

Když máte několik položek, které k sobě vždy patří (například obrázek s popiskem a tlačítko), můžete je „seskupit“. To usnadňuje jejich přesouvání, aniž byste narušili rozvržení.

• Jak seskupovat objekty:

  1. Klikněte na jeden objekt (např. obrázek).

  2. Podržte klávesu Shift na klávesnici.

  3. Klikněte na další objekty, které chcete seskupit (např. textové pole, tlačítko).

  4. Jakmile jsou všechny požadované objekty vybrány, klikněte pravým tlačítkem myši (nebo Control-klik na Macu) na jeden z vybraných objektů.

  5. Z nabídky vyberte „Seskupit prvky“ nebo „Seskupit“.

• Ukládání do vašich návrhů (Wix „Moje návrhy“ nebo „Moje knihovna“):

  • Wix vám umožňuje ukládat sekce nebo skupiny prvků, abyste je mohli snadno použít znovu na jiných stránkách vašeho webu nebo dokonce na nových webech.

  • Jak uložit:

    1. Vyberte skupinu objektů nebo sekci, kterou chcete uložit.

    2. Klikněte pravým tlačítkem myši na vybranou položku.

    3. Hledejte možnost jako „Uložit do mých návrhů“, „Uložit sekci“ nebo „Přidat do mé knihovny“.

    4. Dejte svému uloženému návrhu jasný název, abyste ho později našli.

 

4. Osvědčené postupy pro fotografie a videa

 

Rychlost vašeho webu je velmi důležitá i pro uživatele, kterému se nikdy nechce na nic čekat. Pokud vaše fotografie a videa budou příliš velké, váš web se bude načítat pomalu a lidé mohou odejít.

• Formáty a velikosti obrázků a fotografií:

  • Nejlepší formáty pro web (účinné!):

    • WEBP: nejlepší formát pro weby, jedná se stále poměrně o novinku, která se sice nedočkala velké obliby u fanoušků kradení fotek pomocí google search, nicméně z hlediska webu je bezkonkurenčně nejefektivnější. Co je na tomto formátu tak dobré je, že zmenšuje velikost fotek (jde o velikost v bitech, nikoli o poměry stran), aniž by ubližoval kvalitě.

    • JPG/JPEG: starý a osvědčený formát, je zapotřebí si hlídat, aby fotografie nebyla nikdy větší než 1MB

    • PNG: skvělé pro vektorovou grafiku (logo/ilustrace)

    • SVG: nejlepší formát pro ikony

• Formáty a velikosti videí:

  • Nejlepší formát: MP4 (.mp4) je nejběžnější a nejrozšířenější formát pro webová videa.

  • Obecně doporučené velikosti a kvalita:

    • Rozlišení: nejběžnější je 1080p (1920x1080 pixelů) pro většinu videí. Pokud je vaše video prvkem pozadí a nepotřebuje super ostré detaily, 720p (1280x720 pixelů) je pro rychlost ještě lepší. Vyhněte se delším videím v rozlišení 4K, to už bude web příliš zatěžovat.

    • Velikost souboru: Udržujte soubory videí co nejmenší.

      • Krátká videa (pod 30 sekund): Snažte se je udržet pod 10-15 MB.

      • Delší videa: Zvažte jejich hostování na YouTube nebo Vimeo a následné vložení na váš Wix web. Tímto způsobem video není uloženo přímo na vašem webu, což výrazně zrychlí váš web. Wix má vestavěné způsoby, jak přidat videa z YouTube/Vimeo.

    • Před nahráním můžete použít nástroj pro kompresi videa (jako Handbrake – bezplatný desktopový program, nebo online nástroje jako FreeConvert.com) ke zmenšení velikosti souboru vašich videí.

 

5. Oddělovače sekcí: Aby vaše stránka plynula

 

Oddělovače sekcí jsou mezery mezi různými částmi vaší stránky. Dobré rozestupy usnadňují čtení vašeho obsahu a pomáhají vést oči návštěvníků.

• Optimální výška oddělovačů sekcí:

  • Neexistuje žádná „dokonalá“ výška, protože závisí na vašem designu. Dobrým výchozím bodem je však usilovat o velkorysý, ale ne přehnaný prostor.

  • Vizuálně se snažte mít kolem obsahu nějaký „bílý prostor“ (prázdné místo). Díky tomu se vaše stránka bude zdát méně přeplněná a snáze stravitelná.

  • Palcové pravidlo: Podívejte se na svůj design. Připadá vám stlačený? Přidejte více místa. Zdá se, že jsou tam obrovské, prázdné mezery? Zmenšete prostor.

  • Wix vám umožňuje přetahovat horní a dolní okraje sekcí a upravovat tak jejich výšku. Experimentujte, dokud to nebude vypadat správně

  • Pokud si nevíte rady a nechcete se spoléhat na odhady, můžete použít dividery, které jsme pro vás připravily s kolegou pod tímto textem. Stačí zkopírovat požadovanou velikost a odstranit pozadí.