Web design in html editor
-
Upload
vibrationsk -
Category
Design
-
view
1.856 -
download
4
description
Transcript of Web design in html editor
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
Zhrnutie
• super na prototypovanie• rýchly, flexibilný vývoj• skúsite to?• diskusia
• Twitter > @ivusko • Web: > ivusko.sk, vibration.sk