Web design in HTML editor

Ivan Potančok@ivusko

2000 - 2010

freelance webdesigner

2010 +

CEO @ vibration.sk

Web design

• Kto z vás je web designer alebo si to o sebe myslí?• Kto je z vás web developer?• Kto z vás pozná HTML a CSS?

Prečo by mal web dizajnér vedieť CSS a HTML?

• Nekreslí niečo, čo sa nedá nastrihať– Nastrihať sa dá všetko

• Vie pripravovať podklady pre programátora– Napríklad - myslí na rozťahovanie bg– Naznačí hovery, dodržiava dedičné vlastnosti,

používa 72 dpi (žiadny dizajn v PDF)

• Dodržiava Grid• Dodržiava dizajn patterny – nevymýšľa vlastné

nezmyselné ovládacie prvky

Čo by mal vedieť web dizajnér?

• Software – Photoshop, Gimp, Illustrator, Flash, Axure

• Možnosti a úskalia prehliadačov• Rendrovanie písma• UX a použitelnosť• HTML a CSS• ...

• Na Slovensku musí byť ešte trochu copywriter, UX guy, informačný architekt, marketér

Štandardný postup

1. Wireframes – papier, axure, fireworks = PNG2. Dizajn – photoshop = PSD3. Programovanie šablón = HTML + CSS

Skúsme to inak?

1. HTML - wireframes2. CSS - dizajn

Prípadne3. Wireframes v HTML4. Úvodná stránka PSD, určíme look and feel5. Podstránky HTML + CSS

HTML 5 + CSS 3

• Oblé rohy• Podpora gradientov• Čoraz lepšia podpora background• Písma - typekit, fontface, sifr, cufon, Google

fonts• Priehľadnosť - background-color:rgba(255,255,255,0.3);

• Nové HTML elementy• Frameworky

Software

• Dreamveawer• PSPad, Sublime 2, Coda• Eclipse• Chrome – F12

• Testovanie: Safari, Firefox, Opera, IE tester

Online nástroje

• Css3generatorhttp://css3generator.com/

• Ultimate gradient generatorhttp://www.colorzilla.com/gradient-editor/

Online nástroje

• Jquery mobilehttp://jquerymobile.com/

• Color scheme generatorhttp://colorschemedesigner.com/http://kuler.adobe.com

Frameworky

• Css resethttp://meyerweb.com/eric/tools/css/reset/

• Css grid frameworkhttp://960.gs/

• Bootstraphttp://twitter.github.com/bootstrap/

Tipy

• Color scheme generatorhttp://colorschemedesigner.com/http://kuler.adobe.com

• Hotové šablóny, hotové UI prvky• CSS piffle

http://piffle.abdoc.net/

Výhody

• Rýchlosť• Reakcie na zmeny - jeden riadok vie ovplyvniť

všetky podstránky• Hneď mám hotové nasaditeľné riešenie• Obsah určí formu• Simplicity• Nemusíte kresliť obrázky vo Photoshope

Nevýhody

• zo začiatku to nie je také pekné ako v psd• skicovanie a skúšanie farieb nie je také rýchle

= musím vedieť čo chcem• práca s obrázkami a dekoračnými prvkami si

vyžaduje grafický editor

Ukážky

• rooomix• zdravie.sk• vibration.sk• prodesign

Zhrnutie

• super na prototypovanie• rýchly, flexibilný vývoj• skúsite to?• diskusia

• Twitter > @ivusko • Web: > ivusko.sk, vibration.sk