Pátek, 23. 9. 2011

1. Začínáme kreslením návrhu loga - jak přednášející, tak posluchači

Logujeme víc

Kreativní stezka loga. Návrh za návrhem..

5 návrhů, vybrány 2, z toho 5 návrhů

Výsledné logo, které nikdy nebude zveřejněno bude k vidění na video záznamu z přednášky.. :)

Názory z twitteru:

• @stava: Design hall zatím zklamání. 30 minut s efektním koncem. Nicméně s nulovou náplní. #WebExpo
• @tomasbelohlav: Na kreativní stezce - dobrá procházka na začátek! #webexpo

Zápis by @sotik

Začínáme “historií ikon”.. Nástěnné malby a tak..

Dobrá ikona:

• má mít dobrou metaforu
• musí být povědomá

• je zřejmá (čitelná)
• je jednoduchá
• je jednotná
• je rozlišitelná

Použití ikon:

• Typy ikon:

• objekt
• vlastnost objektu
• akce
• status
• ikona aplikace

Ptejte se lidí na své ikony - jak je chápou, co z nich cítí..

Shrnutí:

Vyberte správnou metaforu

Řiďte se kontextem

Méně je vždy více

Buďte konzistentní

Twitter reakce:

• @durko Vtipna prednaska o ikonach v Design Hall #webexpo
• @vancura @matcheck @ #webexpo #weicons. Skvela prednaska o ikonach. @ Vysoká @r4ms3scz škola ekonomická instagr.am/p/N5ET0/
• r4ms3scz v Design Hall na zajímavé přednášce o ikonách :) #webexpohttp://picplz.com/N5Qt
• @pajasevi "Ikony vyleštěný jako psí koule" -Pavel Maček -Design Hall #webexpo
• @janrezac Pavel @matcheck — nepoužívejte ikonky v navigaci bez popisků, lidé nemají čas se je učit. #webexpo #WE11DSN090
• @janrezac Svěží vítr Design hall @matcheck (7/10) #webexpo #WE11DSN090
• @lnza @marek @jankuca My s @Janamou a @TomasLinhart taky ;-). Přednáška o ikonkách se mi moc líbila;) #webexpo

Editoři, podepište se. ;-)

Zápis by @sotik :)

Web fonty (online knihovna fontů - GOOGLE)

Druhy fontů

• pixelové (nevhodné pro zvětšování)
• vektorové (musí se rasterizovat)

Rasterizace 

• rasterizér (true type)

• bez vyhlazování
• šedý antialiasing
• využití subpixelu (3x víc - LCD) - vznikne barevnost

• hinting (pomocné instrukce)

• lepší “zarovnání” do pixelů
• také upravení mezer

písmo se kreslí na rastru 1000x1000

střední výška - velikost písmene ‘X’

rasterizace v prohlížeči

• true type x post script ???
• ovlivněno OS, prohlížečem atd...

• MAC dělá písmo tučnější - spoléhá se na rasterizér a hinty “zahazuje”
• Win je na hinty velmi citlivý (XP s vyplým cleartype - nejhorší možnost - KONTROLA!)

• Clear type
• Win Vista+ -> Direct write - nové knihovny

na webu nepoužívat písma bez hintingu

písma začínají být velká (podpora jazykových sad)

řešení

• používat méně písem
• požádat grafika o úpravu

v prohlížečích sposta věcí nejde :(

diakritika je problém

CSS 3 - lepší podpora písem

Doporučení na závěr

• nedívat se na veliké písmo
• kontrola v prohlížečích
• využití pomocníků

• fontdragr
• fontdropper
• whatfont

• kupujte ;)
• pozor na licence
• knihy

• the elements of typhography
• eseje o typografii
• …

• komunikace s autory a distributory

Slevový kód na www.rosettatype.com je e3cc9a08

Platí do 5.10.2011

Twitter reakce:

• @janrezac David @MrBrezina — Arial je taky písmo. #webexpo #WE11DSN092
• @lacertacz Březina už jede a slibuje, že nebude vtipný. #webexpohttp://yfrog.com/g0hxinj
• @lacertacz Březina už jede a je vtipný. #webexpo
• @banterCZ Písmo od @MrBrezina je moc pěkná přednáška i pro programátora, jen by se neměl otáčet k publiku #webexpo
• @stava: Když vybíráte písmo, koukejte se na "áčko". Kde je blbý "áčko", tam to prostě nejde. #WebExpo #DesignHall
• @tomaslucovic Nevěřil bych co vše se skrývá pod písmem na webu. #webexpodesign hall
• @marek Přednášla o písmu #WE11DSN092 v UX hall je fakt super! A David je vtipný, i když se tomu od začátku brání :)
• @vancura Pokud vás zajímají problémy ClearType, hintingu a web fontů, doporučuji blog @typekit: http://j.mp/nxzTTG /cc @mrbrezina #webexpo #wetypo
• @OzzyCzech David Březina - Písmo je na webu to nejduležitejší - je strašne moc zábavný! V development room se fakt nedalo dychat #webexpo
• @givison An amazing presentation from @MrBrezina about digital type at@webexpo.
• @ilijusin Netušil jsem, že písmo je taková věda. Zajímavá typografická prezentce v Design hall na #webexpo http://yfrog.com/kl80pdpj
• @klimeklada Když písmo vypadá obstojně na Win XP s vypnutým ClearType (to je ta nejhorší možnost), tak je to dobré. David Březina at #webexpo
• @ovanis Pri pouziti pisma na webu se na nej kouknete na Windows XP s vypnutym vyhlazenim. Pokud vypada dobre, neni co resit. #webexpo #we11dsn092
• @janrezac Písma velkých velikostí jsou typoporno #webexpo #WE11DSN092

Zápis by @sotik a tivvit

srovnání s klasickým obchodem

Titulní strana

• jasně poznat že je to eshop
• prehledné kategorie
• reklamy
• košík v hlavičče atd..

Produktové boxy

• co nejméně textu - stačí fotka, název, cena, skladová dostupnost

Filtrování

• používat základní formulářové prvky, pokud je chceme designovat, používat co nejstandardnější

Stránkování

• uživatel má jasně poznat, na jaké stránce se nachází, a snadno se dostat dál

Detail produktu

• na první pohled by měla být vidět cena a vložit do košíku

Pokladna (ukončení objednávky)

• uvést jasně i cenu za poštovné - nic se nesnažit skrývat a otevřeně o ceně informovat
• větší (výraznější) tlačítko dále než zpět
• není nutné shrnutí objednávky

Tipy

• pracovat při návrhu grafiky s reálnými daty
• zarovnávat produkty
• pozor na umístění textu blízko k fotce bez pozadí
• fotky jsou gro
• myslet dopředu (návrhy jednotlivých podstránek, barvy produktu -> bílé díry)
• provázet eshopem
• myslet na to, že je to eshop a jeho účelem je prodat

zápis by lindash a tivvit

1. Mýty - nemají peníze (závislé na grantech => peníze mít mohou)
2. “Chtěli jsme to jinak” - ukázat zadání, případně změnit :)
3. Uvést do objednávky, do kdy dodají podklady
4. Velká zakázka - rozfázovat i s termíny
5. Recap doporučeních:

1. Písemně - S klientem udržovat písemnou korespondenci
2. Termíny - Dodržovat termíny, donutit klienta také k jejich dodržování (předcházení časové tísně - při nedodání podkladů odsouvat také termíny naše)
3. Respekt - mluvit s klientem srozumitelně, česky, respektovat

Postřehy z přednášky

• Na začátku je třeba si sepsat, co přenést do nové verze
• Jediná rubrika Super.cz je bulvár - žádné jiné rubriky nepotřebuje
• “Reklama je fajn, ale neměla by být úplně otravná”
• Uživatel si reklamu vybírá
• “přiznat reklamu”
• Chybí uživatelům navigace? Na rubriky jsou lidi navyklí, ale je to jen návyk.

@janrezac: Super.cz by se mělo učit od @MrBrezina— jejich titulkové písmo nezvládá diakritiku. #WE11DSN176 // ale asi jen na macu

@seznam_cz: Přednáška k redesignu Super.cz: Důležité je vidět obsah, rubriky nejsou třeba, protože všechny mají jedno společné - jsou bulvár #webexpo

@tomasbelohlav: "Vygooglovat na Seznamu" je pojem. #WE11DSN17

@jantichy: "Kluci ze Super.cz" dělají bezvadnou show, skvěle si navzájem nahrávají na smeč a bezvadně využivají prostor na pódiu. #webexpo

Fotka od r4ms3scz 

zápis by tivvit a lindash

:) by @adamhruby

1. Lorem ipsum

Účel designu

• zprostředkovat obsah (prostředek -> cíl)

Design vs. webdesign

• rozdíly jsou, ale oba zprostředkovávají obsah

1. první dojem je velmi důležitý (několik sec.)

• celek ale i detaily, ale neřeší to rozumem ale emocemi

2. podat mu informace (ale zatím nečte, musíme ho zaumout)

• orientace a skenování

3. teprve teď začíná číst

Vznikají “vrstvy designu”

• design stylu
• design obsahu
• …

Design obsahu je nejdůležitější

obsah není pouze problém klienta, naopak

zápis by tivvit

xChannel experience is the experience of the client at all touch points the customer has with the service / brand.

This is not multichannel, this is not marketing, this is a service concept.

Simple example: online and offline sales channels combining their strengths, rather than competing in price.

To achieve true xChannel experience, we must tear down the functional silos in companies.  

Web products should be designed for the mobile experience first.

Trends supporting mobile

1. immense computing power available in mobile devices
2. always-on connectivity
3. data moving to cloud

Data

• Mobile web growth outpaced desktop web growth 8x
• Global mobile data traffic should grow 26x over the next 5Y

• Twitter: 40% tweets mobile, 16% new users start on mobile
• Google: mobile searches grew 130% in Q3/10
• Smartphones passed PC sales in Q4/10
• USA - home usage of PC minus 20% since 2008
• gMail: -7% desktop usage, +36% mobile use

Constraints of mobile devices

Screen resolution

• 80% of all stuff on the screen is crap
• focus on the core business in the app - fortunately the mobile environment forces it automatically as it is really small

Network

• necessity to use all the modern technologies (html 5 caching etc.) to cope with the not-all-perfect connectivity

Modes of use

Mobile requires simple design because of the partial attention we give to mobile apps (one hand - one eye)

The difference in the device can change the patter on usage, even if the core use-case remains the same.

Focus on touch

It is necessary to observe the commonly used gestures in iOS and Android.

Natural user interfaces - get rid of the iconic representations of stuff. Enable direct communication with the content.

www.lukew.com/touch

Augmented reality - emerging, has its problems, but exciting.

HTML5 apps are a little behind in the ability to use sensory capabilities of mobile phones.

We can recognize your face based on your 7 photos. So you don't think there are 7 photos of you on the internet? … Eric Schmidt

futurefriend.ly

@lukew

www.lukew.com

book comes out on October 18 - www.abookapart.com

Characteristics of Desktop

• big screen
• power supply
• consistent network
• keyboard
• mouse
• chair
• desk

Characteristics of Mobile

• small screen
• battery
• inconsistent network
• fingers
• sensors

Sobota, 24. 9. 2011

Konkretizují cílové skupiny.

Postup tvorby:

• data -> faktoidy -> clustry ->skeletony ->persony
• vytvářejí je pomocí rozhovorů s reálnými klienty
• je třeba naučit klienty / kolegy s personami pracovat (workshop?)
• ideálně po půlroce aktualizovat, revidovat.

Obvykle definují:

• 1 persona primární
• 1 až 2 persony sekundární
• může být 1 negativní persona

Co persony mohou obsahovat / používají při tvorbě person:

• fotografii (nejlepší jsou fotky skutečných lidí v reálných situacích)
• jméno, věk....atd
• citace
• osy (lepší přehled při srovnávání jedn. person)
• problémy a jejich řešení, ideální řešení
• motivace persony
• pracovní postupy

Co funguje:

• Použít spoustu vizuálních materiálů
• Ukázat persony na osách, srovnávací tabulky, grafika

Zápis by @Hannnci

Části

1. Členění služeb

• Uspořádání služeb podle toho co dostane (analýza
• Třídění jak ji to pomůže (řeší problémy)

2. Rozdělení do sekci
3. Vazby a přopojení

• jak to spolu souvisí
• návštěvník navštíví vždy více stránek
• např. odkazy na ohlasy, FAQ, články, případovky

4. Pojmenování položek

• na základě uživatelského výzkumu pojmenovat tak jak používají návštěvníci webu

5. Navigace

• “Vím co chci”
• “Zatím neví co chce  –  potřebuje něco jak vyřešit”

Chyby / problémy

• Příliš mnoho voleb  –  Když člověka zavalíte přímo mnoho variantami, tak si spíše nevyberem, případně
• Hluboká struktura  –  uživatel se může ztratit
• jednoduchost
• jednoznačnost
• vůně informací
• odpadkové koše - “další služby”, “informace” atp. - uživatelé tam vždycky půjdou

Testování

• testovat strukturu; otázky:

• “kde bys hledal...?”
• “co myslíš, že bude pod...?”

- Když má člověk na výběr z několika možností, vybere si to, co nějakým způsobem zná, ať už v jakékoli souvislosti, třeba i irelevantní. (Na otázku, které město je největší, vyberete to, o němž jste už slyšeli, i když třeba jen kvůli tomu, že mají dobrý fotbalový tým)

-  Nabídnutá varianta je kotvou. Lidé pak mají tendence odpovídat tak, aby byly blízko kotvy. Kotva je referenční hodnotou. (Na otázku, jestli je budova X vyšší než 100 m máte tendenci hádat údaje kolem stovky. Na otázku, jestli je budova X vyšší než 500 m  máte tendenci hádat údaje kolem kotvy 500)

- Hodnotu nabízené věci určujeme na základě srovnání s jinými podobnými věcmi.

- Lidé si obtížně vybírají, pokud mají velké množství variant.

-> Lepší konverze je u nabídek, které se mezi sebou snadno srovnávají a zároveň jich není moc.

Používání návnad: (viz nákres níže)

Kromě našeho cílového produktu nabídneme klientům ještě dvě nevýhodné návnady -> pokud by nebyly, klient by srovnával náš produkt pouze s konkurencí, nyní srovnává s návnadami -> srovnáním produktu a návnad klient rozpozná náš cíl jako nejvýhodnější -> odchází spokojen.

Zápis by @Hannnci

Postup prezentace, představení:

1. rozpoznat problém
2. prezentujte možnosti řešení
3. ukažte, jak jste zvažovali jednotlivá řešení
4. vysvětlete, jak jste vybírali nejlepší řešení
5. vysvětlete, PROČ je vámi navrhované řešení nejlepší
6. po “prodeji” zdokumentujte rozhodnutí
7. testujte

“Lepší než prezentace je kolaborativní meeting.”

Literatura:

• Visual Meetings: How Graphics, Sticky Notes and Idea Mapping Can Transform Group Productivity (Amazon)
• Gamestorming: A Playbook for Innovators, Rulebreakers, and Changemakers (Amazon)