Úvod do html iii - masaryk universityxobsivac/wd4.pdf · uživatelské testování stačí 5...
Post on 29-Sep-2020
4 Views
Preview:
TRANSCRIPT
Webdesign IVSlužby počítačových sítí Tomáš Obšívač | 2009
11. 11. 2009 Tomáš Obšívač 2
Osnova Návrh
Informační architektura Obsah a vzhled webu Použitelnost
Realizace Přístupnost
Provoz Analýza návštěvnosti Marketing, SEO
Blízká budoucnost webu?
11. 11. 2009 Tomáš Obšívač 3
Uspořádání informací
Informační architekt – webdesigner s chutí na plat analytika? :-)
IA =– uživatelé (čtenáři) – jazyková forma, barevnost, user
centered design– obsah – struktura webu, kategorizace obsahu– kontext – marketingové cíle, návratnost investic
Hledáme rovnováhu mezi cíli zadavatele a potřebami uživatele.
11. 11. 2009 Tomáš Obšívač 4
Obsah je král 1/2
Přes 100 mil. webů, ~30 mld. stránek + 500x deep web (?!) 2/3 ve vyhledávačích
Jyxo indexuje 123 mil. dokumentů (166, 97), Morfeo 172 (144, 108)
Během této přednášky vzniknou tisíce dalších i od vás s notebooky?
2003 2004 2005 2006 2007 2008*0
100000
200000
300000
400000
500000
1600
1199
899
539449
249
Počet Cena [Kč]
.cz domény
11. 11. 2009 Tomáš Obšívač 5
Obsah je král 2/2
Začněte plánování (nejen) webu odpověd’mi na otázky typu:
Mám co říct/nabídnout? Bude mě to bavit i za rok? Uživím se tím?
Funguje jen to, co uživatelům přináší jasný užitek. – M. Prokop aneb stanovte cíle „v rovnováze“
11. 11. 2009 Tomáš Obšívač 6
Psaní textů pro web
Copywriter......vznešené označení jedničkáře z češtiny?
...je prodavač za psacím strojem. – Judith Charles
Zaujmout, udržet, přesvědčit a přimět k akci Jak? Kreativní psaní, působení na city Jsem slepý, prosím pomozte.
Čtení: seriál Píšeme pro web (Interval.cz)
11. 11. 2009 Tomáš Obšívač 7
Strukturování textu
Na webu lidé nečtou, ale „skenují“. Nečekají esej, román, vyprávění, vyplňování složenky.
Pro udržení pozornosti využijte Nadpisy (max. 8 slov) Seznamy, odstavce Střídmé zvýraznění Popisky k obrázkům Obrácená pyramida (anotace) Stručnost – škrtejte, zkracujte
11. 11. 2009 Tomáš Obšívač 8
Grafická úprava
Obsah je král. Nahý král? Obal prodává. Návštěvník rozhodne za 5 vteřin, jestli (ne)má web rád. Pokud se mu nelíbí, je těžké přesvědčit o čemkoliv dalším.
Ale pozor, nejhonosnější obal mívá nej*ší obsah. Proto: jednoduchost, přehlednost, konzistence. Cíl: identita (jedinečnost), důvěryhodnost.
You know you've achieved perfection in design,not when you have nothing more to add,but when you have nothing more to take away.
– Antoine de Saint Exupery
11. 11. 2009 Tomáš Obšívač 9
Prvky stránky, rozmístění
Sazební obrazec (Page grid)– „znám“ rozměry strany (fold)1. rozdělím na části – mřížka, zlatý řez2. design (rozmístím titulek, navigaci, vlastní text, …)
Navigace radí kam můžu?, ale taky kde jsem? umístěná mimo obsah (horizontální vs. vertikalní) konzistentní (na celém webu)
Prázdné místo, wireframes Splash screen
11. 11. 2009 Tomáš Obšívač 10
Od obsahu ke vzhledu
webstandards.org
11. 11. 2009 Tomáš Obšívač 11
(Moderní) grafické prvky
Barevné gradienty (monochromatické) Odlesky („vlhká podlaha“) Měkké stíny Velké písmo, inputy Zaoblené rohy
Barevnost: colorschemer.com/schemes/, Pixyho Generátor barevných
schémat 2, colourlovers.com
Fotografie: sxc.hu, yotophoto.com, mojefoto.net, ...
11. 11. 2009 Tomáš Obšívač 12
Použitelnost (Usability)
Čím se dosahuje? navigace, příjemná URL,
reakce na chyby, nápověda, …
Uživatelské testování stačí 5 uživatelů scénář (o čem je tahle
stránka?, obecné úkoly) sledovat problémy ptát se, ale neradit
Web design – Nenuťte uživatele přemýšlet, S. Krug, Cpress
top related