Dizajn manuál / Štúdia 02
Prirodzený
poriadok.
Na webe.
Výrazná identita. Pokojné rozhranie. Spoločný jazyk pre každú stránku The Quiet Alchemyst.
Preskúmať systém01 / Identita
Charakter zostáva.
Pôvodné fonty, tri farebné páry a päť textúr. Pevný základ každého rozhrania.
02 / Hierarchia
Priestor má význam.
Veľkosť, rytmus a kontrast vedú čitateľa. Dekorácia dáva priestor obsahu.
03 / Použiteľnosť
Jasný ďalší krok.
Zrozumiteľné ovládanie, čitateľný text a viditeľná odozva na každú akciu.
Značka
Logo a odznaky
Slovné logo v kapitálkach. Monogram TQA a samotné Q slúžia ako favicon, avatar a pečiatka na obale.
Varianty
Alchemyst
Quiet
Alche
myst
QA
Q
A
Pravidlá
Ochranná zónaOkolo loga voľný priestor aspoň výšky písmena Q.
MinimumSlovné logo 120 px na šírku. Pod tým monogram Q.
PodkladPapier alebo Bridlica. Na textúre len vo vnútri kruhu alebo štvorca.
Farby
Papier, bridlica a tri páry
Dve základné farby nesú celý web. Páry z obalov (tmavý + svetlý tón) sa používajú vždy spolu: v textúrach, fotkách a štítkoch tém. Klik na farbu skopíruje HEX.
Základ
Páry
Spánok, stres, trávenie. Tradícia a pôvod.
Pamäť, sústredenie, longevita. Výskum a štúdie.
Imunita, energia. Jediný akcent pre odkazy a hover.
Tailwind: paper, slate, earth / earth-light, sage / sage-light, rust / rust-light.
Pomer na stránke
Kontrast (WCAG 2.2)
| Kombinácia | Pomer | Použitie |
|---|---|---|
| Bridlica na Papieri | 11.6 : 1 | AAA · všetko |
| Hrdza na Papieri | 5.1 : 1 | AA · odkazy, akcent |
| Papier na Hrdzi | 5.1 : 1 | AA · tlačidlo |
| Bridlica na Hrdzi sv. | 6.7 : 1 | AA · štítky |
| Bridlica na Šalvii | 5.4 : 1 | AA · štítky |
| Papier na Zemi | 4.0 : 1 | Len veľký text 24 px+ |
| Papier na Šalvii | 2.1 : 1 | Nepoužívať na text |
Typografia
Plantin pre hlas, Aspekta pre fakty
Serif nesie nadpisy, citáty a latinské názvy húb. Grotesk nesie text, UI a štítky v štýle etikety.
Škála
Textúry a foto
Halftón v dvoch tónoch
Textúry z obalov sú masky, takže sa prefarbia do ľubovoľného páru. Fotky húb dostanú rovnakú úpravu: duotón s rastrom. Celý web tak drží spolu aj s rôznorodými fotkami.
Knižnica textúr · <x-texture>
Fotky a tvary
Priestor
Rytmus, ktorý drží spolu.
Rozostupy vyjadrujú vzťahy. Súvisiace prvky sú blízko, samostatné témy oddeľuje priestor.
Základná škála / px
4–12 px
Ikona a text, štítok a nadpis, tesne súvisiace metadáta.
16–32 px
Vnútorný priestor kariet, odstupy polí a stĺpcov.
48–96 px
Oddelenie sekcií. Na mobile 48 px, na desktope 80–96 px.
Responzívna kompozícia
Do 639 px
Mobil
Jeden hlavný stĺpec, okraj 16–20 px. Ovládanie sa zalamuje; obsah nepotrebuje vodorovný posun.
640–1023 px
Tablet
Okraj 32 px. Karty v dvoch stĺpcoch, podľa dĺžky obsahu.
Od 1024 px
Desktop
Okraj 48 px, obsah webu najviac 1240 px. Karty v 3–4 stĺpcoch, text článku najviac 65 znakov na riadok.
Pravidlo kompozície
Jedna dominantná myšlienka. Jeden hlavný krok.
Veľký serif patrí nadpisu. Textúra vytvára charakter v obrazovej ploche. Bežný text a ovládanie zostávajú na pokojnom jednofarebnom podklade.
Základné prvky
Tlačidlá, polia, filtre
Pill tvar pre tlačidlá a filtre, jemné zaoblenie pre polia. Obsahové karty majú rovné hrany. Každý prvok má viditeľný focus a jasný stav.
Tlačidlá · <x-button>
Polia
Filtre, štítky, účinok
Komponenty
Z prvkov vzniká web
Sekcie z wireframu v cieľovom vizuáli. Každá huba má pevne priradený pár farieb a textúru.
Karta huby
Reishi
Ganoderma lucidum
Hericium
Hericium erinaceus
Čaga
Inonotus obliquus
Cordyceps
Cordyceps militaris
Témy
Karta článku
CTA pás
Nový v hubách
Všetko podstatné na jednom mieste, za 12 minút.
Čo sú medicinálne huby, ako vybrať kvalitný extrakt a kedy byť opatrný.
Začni tuManifest
Tradícia nás privedie k otázke. Veda k odpovedi. Obe si zaslúžia rešpekt.
Články nepredávajú. Žiadne affiliate odkazy ani produktové tlačidlá v edukačnom obsahu.
Kľúčové tvrdenia opierame o výskum a pri každom článku uvádzame zdroje.
Obsah kontroluje menovaný odborník. Pri každom článku vidíš, kto ho napísal a kto overil.
Newsletter
Jedna štúdia, jedna huba, raz za dva týždne.
Bez reklám a bez zázračných sľubov. Odhlásiš sa jedným klikom.
Štítok etikety (most medzi obalom a webom)
The Quiet
Alchemyst
Liquid extract 100 ml
33 dávok
Správanie
Dizajn aj medzi klikmi.
Stavy nie sú doplnok. Vysvetľujú, čo sa deje a ako pokračovať.
Hover
Krátka zmena farby na 150–200 ms. Rozmery prvku ani okolitý obsah sa nehýbu.
Focus
Viditeľný obrys pri ovládaní klávesnicou. Rovnaká dostupnosť funkcií ako pri použití myši.
Neaktívny stav
Použi skutočne neaktívne tlačidlo. Dôvod nedostupnosti vysvetli v sprievodnom texte.
Zatiaľ bez výsledkov.
Skús kratší výraz alebo odstráň niektorý filter.
Hľadáme v almanachu…
Počas načítavania zachovaj priestor pre výsledky.
Obsah sa nepodarilo načítať.
Pri skutočnej chybe ponúkni zopakovanie akcie a zachovaj zadané údaje.
Pravidlá používania
Čitateľnosť má prednosť
Bežný text používaj v bridlicovej na papieri. Na fotografii a textúre ho umiestni na plnú podkladovú plochu. Farba nikdy nie je jediným nositeľom stavu.
Ovládanie na mobile
Hlavné ovládacie prvky majú dotykovú plochu aspoň 44 × 44 px. Menšie štítky nie sú tlačidlá. Navigácia manuálu sa na úzkom displeji posúva vodorovne.
Pohyb a spätná väzba
Animácia vysvetľuje zmenu. Rešpektuj nastavenie obmedzeného pohybu. Úspech oznám až po dokončení operácie, chybu vysvetli pri príslušnom poli.
Pred odovzdaním stránky
Skontroluj úzky mobil, dlhé nadpisy, ovládanie klávesnicou, viditeľný focus, prázdny obsah a chybové stavy. Pri formulároch musia zostať viditeľné popisy aj po zadaní hodnoty.