Scroll Marker Logo Scroll Marker Kontaktujte Nás
Kontaktujte Nás

Autor & Specialista

Petr Svoboda

Senior Web Design Expert zaměřený na marquee tickery a horizontální animace textu

Scroll Marker s.r.o.

Petr Svoboda, senior web design expert specialista na marquee tickery a textové animace

Co je mojí specialitou

Marquee Tickery

Vytváření plynulých horizontálních textových bannerů s důrazem na čitelnost a vizuální integraci do webového designu.

Animační Řízení

Kontrola rychlosti, časování a hladkosti animací tak, aby text zůstal čitelný bez únavy z pohledu uživatele.

Přístupnost Prvního Řádu

Implementace pauzy při najetí myši a klávesnicové navigace pro plnou kompatibilitu s WCAG standardy.

Typografická Integrace

Styling tickerů s ohledem na celkový design webu, barvy, fonty a vizuální hierarchii.

Výkonnostní Optimalizace

Efektivní CSS a JavaScript animace s minimálním dopadem na výkonnost webu a dobu načítání.

Responzivní Design

Tickery fungují bezproblémově na všech zařízeních — od mobilních telefonů až po velké monitory.

Moje cesta v webdesignu

Do webdesignu jsem se dostal v polovině 2000. let, kdy jsem začal experimentovat s CSS animacemi a dynamickými prvky. Byl to čas, kdy se HTML5 a CSS3 teprve rodily a jejich potenciál byl skoro neomezený. Studium na Fakultě informačních technologií VUT v Brně mi dalo solidní teoretické základy, ale opravdu jsem se začal učit v praxi.

Důležitý zlom přišel v roce 2012. Pracoval jsem jako součást týmu pro e-commerce společnost Alza.cz a měli jsme za úkol implementovat komplexní ticker systém pro real-time zobrazování skladových zásob a cen. To bylo poprvé, kdy jsem si uvědomil, jak obtížné je dělat animace, které jsou nejen pěkné, ale zároveň funkční a přístupné. Od té doby se neustále věnuji zdokonalování technik marquee animací s ohledem na WCAG standardy a výkonnost.

Co mě v tomto oboru stále pohání, je snaha najít dokonalou rovnováhu mezi vizuální atraktivitou a praktickou použitelností. Chci, aby se text pohyboval elegantně, ale zároveň aby nenarušoval uživatelský komfort. Věřím, že dobrý ticker design není jen technickou záležitostí — je to také umělecká disciplína, která vyžaduje hlubokého porozumění typografii, barvám a tomu, jak se uživatelé s webem interagují.

V současné době vedu tým webových designérů v Scroll Marker s.r.o., kde propagujeme principy udržitelného a uživatelsky orientovaného designu. Za těch 14 let, co pracuji v tomto oboru, jsem se podílel na desítkách projektů pro středně velké a velké firmy. Každý projekt mě učí něco nového.

Kvalifikace a zkušenosti

Vysoké učení technické v Brně

2006–2010

Fakulta informačních technologií, obor Webové aplikace a služby

WCAG 2.1 Accessibility Specialist

2018

Certifikace v oblasti přístupnosti webu a standardů dostupnosti

Advanced CSS & Web Animation

2019

Certifikace od CSS-Tricks a Web Animation Institute

Senior Web Designer

Od roku 2015

Vedoucí projektu a mentor pro mladší designéry v Scroll Marker

Vedení týmu designérů

Od roku 2020

Vedení týmu 8 webových designérů a vývojářů v Scroll Marker s.r.o.

Spolupráce se klíčovými klienty

2010–2026

Alza.cz, Mall.cz, Datart a desítky dalších středně velkých a velkých firem

Filosofie designu a animací

Přístupnost není volitelná

Když navrhuju marquee ticker, vždycky si kladu otázku: co se stane, když uživatel použije klávesnici? Co když má epilepsii a pohybující se prvky mu mohou uškodit? Přístupnost není přidaný bonus — je to základní předpoklad dobrého designu. Každý ticker, který vytvářím, má funkci pauzy při najetí myší a lze jej ovládat z klávesnice.

Čitelnost je na prvním místě

Není důvodu mít ticker, který se pohybuje tak rychle, že jej nikdo nemůže přečíst. Experimentoval jsem s mnoha rychlostmi animací a zjistil jsem, že ideální je kolem 40–60 pixelů za sekundu. To dovoluje čtení bez nutnosti „pronásledovat” oči pohybem. Contrasts, font size, letter spacing — všechno to hraje roli.

Výkonnost znamená respekt

Pomalý web frustruje lidi. Když tvořím animace, vždy mysli na to, že se budou spouštět na slabších zařízeních a pomalých připojeních. Používám GPU-accelerované CSS transforms, minimalizuji reflows a snažím se animace optimalizovat. Dobrý design neznamená jen, jak to vypadá — znamená to, jak to funguje.

Integrace s celkovým designem

Ticker by neměl být náhodný prvek, který někdo přidal na poslední chvíli. Měl by být organickou součástí designu webu. Barvy, fonty, spacing — všechno musí být v souladu s ostatním obsahem. Když se to dělá správně, uživatel to ani nevnímá jako něco cizího.

Máte otázky?

Pojďme si promluvit

Pokud máte projekt, na kterém byste chtěli pracovat, nebo se chcete ptát na marquee tickery a webový design, jsem tady pro vás. Napište mi nebo se podívejte na naši práci.