Spacing a zaoblení

Nastavte základní krok mezer, hustotu a zaoblení. Hned uvidíte, jak působí na kartách, sekcích a řadách prvků, a stáhnete si hodnoty do CSS.

Základní krok

Systém 8 px je nejběžnější. 4 px se hodí pro hutná rozhraní a aplikace.

Hustota

Zaoblení karet 14 px

3xs 4 px
2xs 8 px
xs 12 px
sm 16 px
md 24 px
lg 32 px
xl 48 px
2xl 64 px

SEKCE · padding 64 px Co pro vás uděláme

Webdesign Návrh a stavba webu od první skici po spuštění.

Aplikace Rozhraní, která se snadno ovládají i na mobilu.

Tiskoviny Letáky, bannery a podklady připravené pro tiskárnu.

Poptat Web UX Tisk

Konzultacezdarma

Návrh webuod 2 týdnů

Spuštěnído 1 dne

Vnitřní prvek

Pravidlo vnořeného zaoblení

Vnitřní radius = vnější radius − odsazení. Když mají oba prvky stejné zaoblení, mezera v rozích vypadá nerovnoměrně a design působí neučesaně.

14 px − 12 px odsazení = 2 px uvnitř

Export do CSS

:root {
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;

  --radius-sm: 7px;
  --radius-md: 14px;
  --radius-lg: 21px;
  --radius-full: 999px;
}

Kulaté, nebo hranaté rohy?

Zaoblení mění charakter celého designu víc, než by se zdálo. Ostré rohy obvykle působí pevně, přesně a formálně. Kulaté rohy působí měkčeji, přátelštěji a oko po nich klouže plynuleji. Žádná varianta není správná, záleží na tom, co má značka vyjadřovat.

Tlačítko

Ostré 0–2 px

Pevné, přesné, seriózní. Působí technicky nebo luxusně a redakčně. Hodí se pro: právo a finance, architektura, módní a editorial weby, tabulky a data, tiskoviny.

Tlačítko

Jemně zaoblené 4–8 px

Neutrální a profesionální. Ubere ostrost, ale nepřidá hravost. Hodí se pro: firemní weby, administrace, SaaS aplikace, e-shopy, formuláře.

Tlačítko

Výrazně zaoblené 12–24 px

Přátelské, měkké a moderní. Karty působí jako samostatné „dlaždice“. Hodí se pro: mobilní aplikace, služby pro spotřebitele, landing pages, karty obsahu.

Tlačítko

Plně kulaté 999 px

Hravé a „dotykové“. Prvek vypadá jako pilulka, kterou chcete zmáčknout. Hodí se pro: tlačítka, štítky, filtry, avatary. Na velkých kartách spíš ne.

Držte se jednoho stylu

Míchání ostrých a výrazně kulatých prvků bez systému působí nahodile. Vyberte 2 až 3 hodnoty a ty používejte všude.

Větší prvek, větší radius

Sekce mají větší zaoblení než karty, karty větší než tlačítka. Stejný radius na malém tlačítku vypadá mnohem kulatěji než na velké kartě.

Myslete i na tisk

Velké zaoblení u tiskovin ladí s výsekem do tvaru. U visaček a karet počítejte s tím, že tiskárna zaoblení dělá výsekem a ne každý poloměr nabízí.