Kniha „Dobrý designér to všechno ví!“

Petr Staníček, UX analytik a designer

(též "Oficiální sebestředný páprda českého internetu")

Obsah:


Úvod

Dobrý den,

jmenuji se Petr Staníček a jsem profesionální analytik a návrhář UX/UI, informační architekt a konzultant. Specializuji se na použitelnost a efektivitu počítačových aplikací, především webových; zajímám se i o aspekty přístupnosti pro handicapované uživatele.

Dlouhá léta jsem aktivně pracoval také jako vývojář, grafik, webdesigner a programátor online aplikací, dnes se těmto oborům věnuji už jen okrajově a výjimečně.

Na těchto stránkách dále najdete:


Reference

Obsah kapitoly:

Webdesign

Tvorbou webů jsem se zabýval více než 12 let. Od přelomu tisíciletí byl pak webdesign mým hlavním oborem. Většinu mých prací tvořily rozsáhlé, dlouhodobé projekty i specializované zakázky, které nejsou uživatelům často přímo viditelné, případně často podléhají nějaké formě NDA. Takže např. pro jistou banku, známé rádio nebo několik velkých institucí jsem vlastně nikdy nepracoval. A vlastně je ani neznám. A ty částky taky nesouhlasí… Inu, a většina drobných prací zase nestojí za zařazení do portfolia. Takže zbývá jen několik málo ukázek, včetně nerealizovaných návrhů — snad někomu pomůžou udělat si představu o mé práci.

od r. 2009

  • Návrh webu Spir.cz

    Návrh redesignu webu (nepoužito) – screenshoty 1, 2

  • Návrh webu Skofin.cz

    Návrh redesignu webu pro výběrové řízení (nepoužito) – screenshot

  • Vizuální styl konference InForum 2010

    Design webu i celého vizuálního stylu konference vč. přípravy tištěných podkladů (koláž)

  • Comeback

    Návrh a kódování záhlaví fanouškovského webu seriálu Comeback.

  • Návrh webu Army.cz

    Grafický návrh společného webu Ministerstva obrany ČR, Armády ČR a stránek zahraničních vojenských misí.

    grafické návrhy z archivu

  • Návrh webu Firotour.cz

    Návrh struktury i vzhledu pro výběrové řízení CK Firo Tour (nepoužito) – screenshoty v archivu

  • Martin Malý

    Design domovské stránky (screenshot z archivu)

  • Planetárium Praha

    Redesign webu Planetária Praha (screenshot z archivu)

  • Avril Lavigne Black Star

    kódování webu (HTML/CSS/JS) (screenshot z archivu)

  • ColorSchemeDesigner.com, od r. 2014 jako Paletton.com

    online aplikace pro návrh barevných schémat, kompletní řešení (screenshot z archivu)

  • 2004–2008

    Většinu projektů v uplynulých letech jsem tvořil pro obchodní partnery v USA.

    2000–2004

    Od konce roku 2000 jsem pro vydavatelství Ringier kompletně vytvořil a spravoval vůbec první funkční weby jejich titulů. Prvním a hlavním byl Blesk.cz, který jsme během několika let dovedli mezi nejvýznamnější a nejnavštěvovanější tituly na českém trhu. Následovaly průběžně i weby dalších novin a časopisů, firemní web a řada účelových projektů.

    Další vybrané projekty

    Grafika

    Moje designy, grafický styl a rukopis lze posoudit na existujících realizacích webů. Pro úplnost doplňuji i několik vybraných grafických prací.

    Z poslední doby:

    Ostatní:

    Publikační činnost

    Podrobný seznam mých odborných článků, příspěvků a vydaných knih je v sekci Odkazy.

    Software

    Programuji převážně v Javascriptu, psal jsem i serverové aplikace v PHP. Příležitostně se zabývám i dalšími typy projektů.

    • Moje online aplikace v sekci Odkazy
    • JS/jQ: Pluginy pro jQuery

      JS knihovny a pluginy pro framework jQuery publikuji průběžně na svém webu Wellstyled.com

    • XUL+JS: Inbox toolbar

      doplněk pro Firefox, kompletní realizace

    • PHP: Blogovací systém Bloxxy

      Tento bezdatabázový publikační systém jsem napsal pro vlastní potřebu, běží na něm dodnes některé mé starší projekty (např. Pixylophone). Později jej převzali jiní vývojáři a pokračují v jeho dalším vývoji již zcela bez mé účasti.


    Obsah kapitoly:

    Za těch mnoho let na webu jsem si vytvořil postupně mnoho stránek, založil a později renovoval nebo odsunul stranou několik blogů a dodnes publikuji na několika místech současně. Čert aby se v tom vyznal.

    Blogy

    • Pixynergia – Aktuální soukromý blog, existuje od března 2007. Po delší odmlce nahradil můj předchozí blog Pixylophone, který jsem zavřel, ale pořád jsem měl chuť občas něco napsat, i když už jinak a méně často.
    • Pixylophone – můj někdejší zápisník, který mě provázel od října 2002 do srpna 2005. Příspěvky věnované převážně webdesignu a kaskádovým stylům, ale i čistě soukromé příspěvky. Uzavřen a zakonzervován.
    • Schrödingerova 13 – externí zápisník převážně pro lety mimo. Kopíruji sem tématicky příbuzné věci publikované jinde a snažím tak na jednom místě soustředit zábavnější a extravagantnější texty, které nikam nepasují, ale přijde mi škoda je založit do propadla dějin.
    • Pixy.blog.Respekt.cz – na blogu týdeníku Respekt jsem během r. 2006–2007 publikoval společensko-politické příspěvky. Ale ačkoli patřily na Respektu mezi ty lépe hodnocené, tamní společnost autorů a čtenářů nebyla nic pro mě a raději jsem zavčas z Respektu odešel.

    Webdesign

    • Wellstyled.com – Dílna webdesignu & CSS, JS, řešení a nástroje. Dnes zde publikuji převážně vlastní řešení pro odbornou veřejnost, primárně v angličtině.
    • Manifest Dogma W4 (W4D) – projekt na podporu tvorby přístupnějších webů

    Rozsáhlejší javascriptové aplikace i různé drobnosti v JS a PHP vytvořené převážně pro mou vlastní potřebu.

    • Paletton.com – Online editor barevných schémat. Jsou stále dostupné i starší verze (pod původním názvem Color Scheme Designer).

    Následující aplikace vznikly jednorázově v průběhu minulých let a i když mohou být stále použitelné, nejsou nadále udržované a za jejich funkčnost a korektnost neručím.

    • Javascriptové hry – napsané před mnoha lety pro Reflex.cz. Staré, leč stále funkční. Zkuste si zahrát piškvorky!
    • Favelety (bookmarlety) – poněkud zastaralý a již několik let neudržovaný seznam "bookmarkletů", tj. javascriptových miniaplikací uložených v HTML odkazech. Mnohé z nich jsou však stále funkční.
    • Webedit – pouhý proof-of-concept online CSS editoru
    • Finanční tabulky – výpočet vkladů, úroků, úspor, úvěrů atd.
    • Stupnice a akordy – zobrazení všech možných stupnic a akordů na kytaře i pianu. Vyhledání akordů podle zadaných tónů.
    • Dummy CZ – generátor pseudo-českých výplňových textů a z něj od odvozený generátor vogonské poezie.
    • Apel – generátor neutrálních výroků do manažerských projevů.
    • Timestamp – triviální přepočet unixového timestampu do data/času a zpět.

    Vybírám ze starších příspěvků na svém blogu ty, o kterých si myslím, že stojí za pozornost i po delším čase. Dávejte ale prosím vždy pozor na datum publikování, některé věci již dnes přece jen nemusejí platit!

    Hacky a finty CSS

    CSS – řešení

    CSS – obecné příspěvky

    Internet a web obecně

    Javascript, DHTML a programování

    Grafika, typografie a jazyk na webu

    Výběr z odborných článků, které jsem publikoval jinde.

    Zdroják

    Lupa.cz

    Webtip.cz

    Pozn.: Podotýkám, že tyto články jsou už dost staré a leccos, o čem pojednávají, už je často jinak – to hlavní by ale stále mohlo platit. Navíc musím upozornit, že Webtip.cz jeho provozovatel zanedbává; najdete tam především mnoho nefunkčních odkazů – v tom případě se prosím neobracejte na mě, ale na provozovatele. Já s tím nic neudělám.

    Další

    Kromě množství článků a příspěvků publikovaných na webu jsem napsal i nějaké knihy. Těší mě především ta první z nich, která se stala bestsellerem a – ač vyšla už před mnoha lety – stále se prodává. A co je hlavní: i já mám svou ohmatanou kopii neustále po ruce na poličce a používám ji jako základní referenci CSS.

    Dobrý designér to všechno ví!

    Vlastním nákladem 2016, ISBN: 978-80-260-9427-2

    Nová „učebnice designu“ představuje praktické postupy navrhování (nejen) webů. Ve třech obsáhlých kapitolách čtenáře seznámí s mnoha často přehlíženými, ale přitom nejdůležitějšími základy designérského řemesla. Podrobně představí všechny, s nimiž designér na každé zakázce pracuje — budoucí uživatele, zadavatele zakázky i vlastní vývojářským tým — a věnuje se jejich vzájemným vztahům a častým úskalím spolupráce. Detailně vás provede celým procesem vzniku nového webu či aplikace od poptávky po dokončení, upozorňuje na důležitá a kritická místa, kde designéři často chybují, a poskytuje mnohé praktické návody a cenné rady.

    Podrobné informace a objednání

    CSS – Hotová řešení

    Vydal CPress 2006, ISBN: 80-251-1031-1

    Spoluautoři:

    Kniha obsahuje více než 170 hotových a okomentovaných řešení se základní nutnou teorií fungování jazyka CSS. Přiložené CD obsahuje dokumenty s řešeními popisovanými v knize, editory, prohlížeče a nástroje.

    Podrobné informace a objednání

    CSS Kaskádové styly – kompletní průvodce

    Vydal CPress 2003, ISBN: 80-7226-872-4

    Průvodce používáním kaskádových stylů pro začátečníky i profesionály, kompletní reference CSS 2.1 s ukázkami, příklady a řešeními z praxe.

    Podrobné informace a objednání
    Příklady a reference online
    Příklady ke stažení [ZIP, 150 KB]
    Errata

    Kromě blogů a profesních informací tvoří část tohoto webu i ryze soukromé stránky. Najdete zde něco ku zábavě i archiv mé tvorby.

    Další odkazy

    • Články povětšinou na společensko-politická témata publikované na blogu časopisu Respekt
    • Další soukromé texty jsou k vidění i na mém externím blogu Schrödingerova 13
    • Zpěvníky ke stažení

      Zpěvníky s texty a akordy vybraných, převážně folkových písniček, které aspoň občas hraju, mám je rád, nebo které se prostě "sluší" ve zpěvníku mít. Několik set stránek A4 ve formátu PDF, připravené k vytištění. Podrobnosti v přiloženém textu.

    Následující stránky jsou již extrémně zastaralé, obsahují neaktuální informace a nikdo je neudržuje. Přesto stále existují: nerad mažu jednou vytvořené věci.

    • První blogy. Všechny příspěvky byly později přeneseny do novějšího blogu Pixylophone. Pokud máte nefukční adresu nějakého starého příspěvku, zkuste v URL zaměnit /blogg za /old/blogg. Může být, že ji najdete právě tam.
    • Kroužkový zápisník – bývalá homepage a někdejší soukromé stránky
    • Magický zámek – ještě bývalejší, ale velmi zvláštní homepage, manager unfriendly
    • Kuriozita: Jean-Michel Jarre – jeden z mých vůbec prvních webů, z roku 1997. Sice mocně oplácán reklamou provozovatele serveru, ale překvapivě stále funkční. Nelekněte se.

    O mně

    Obsah kapitoly:

    Petr Staníček (Pixy)

    foto

    Profesionální designer a vývojář, amatérský hudebník a veršotepec, zběhlý typograf, šťastný otec dvou krásných dcer, metodik máklý matfyzem a laický lingvista, bezmála profesionální kuchař a dvoumetrový sklerotik. Oficiální Sebestředný™ Páprda™ českého internetu. K vašim službám.

    Profesní životopis

    Pro usnadnění a širší přístupnost jsem svůj profesní životopis a profil umístil na komunitní server LinkedIn. Snáze se tam spravuje a udržuje neustále aktuální.

    Proč „Pixy”?

    Nějak se to vyvrbilo a už roky mám přišitou přezdívku Pixy. Sám už ani nevím proč a jak přesně vznikla.

    Je to hodně stará přezdívka, ještě z dob BBS první poloviny 90. let. Má, myslím, něco společného s pixely (tehdy jsem se živil takřka výhradně grafikou a DTP) – a ne s nějakými komiksovými hrdiny (tehdy asi ještě neexistoval a pochybuju, že se jmenuje po mně), ani s nějakými vílami (tehdy jsem anglicky neuměl prakticky ani slovo).

    Ale každopádně je to Pixy, nikoli Pixi. A taky je to maskulinum (Pixyho, Pixymu, o/s Pixym). Děkuji uctivě.

    Kontakty

    Chcete-li mě kontaktovat, použijte kterýkoli z níže uvedených kanálů. Pokud nevíte, který si vybrat, zvolte prosím e-mail – tomu dávám přednost i já. Děkuji za pochopení.

    Jméno:
    Petr Staníček ("Pixy")
    Adresa:
    Žiji a pracuji poblíž Kladna, ale profesně nemám žádná územní omezení. Pracuji pro klienty z celého světa.
    E-mail:
     =  petr@stanicek.com  =  pixycz@gmail.com
    Mobil:
    +420 775-749 999 (775-PIXYYY)
    Jabber, GTalk:
    pixycz@gmail.com
    AIM, ICQ:
    pixycz, 571675997
    Skype:
    petr_stanicek (neveřejný)
    Facebook:
    www.facebook.com/petr.stanicek
    Twitter:
    www.twitter.com/pixycz
    LinkedIn:
    www.linkedin.com/in/petrstanicek