Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web design in HTML editor            Ivan Potančok            @ivusko            2000 - 2010            freelance webdesig...
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...
Čo by mal vedieť web dizajnér?•   Software – Photoshop, Gimp, Illustrator, Flash, Axure•   Možnosti a úskalia prehliadačov...
Štandardný postup1. Wireframes – papier, axure, fireworks = PNG2. Dizajn – photoshop = PSD3. Programovanie šablón = HTML +...
Skúsme to inak?1. HTML - wireframes2. CSS - dizajnPrípadne1. Wireframes v HTML2. Úvodná stránka PSD, určíme look and feel3...
HTML 5 + CSS 3• Oblé rohy• Podpora gradientov• Čoraz lepšia podpora background• Písma - typekit, fontface, sifr, cufon, Go...
Software•   Dreamveawer•   PSPad, Sublime 2, Coda•   Eclipse•   Chrome – F12• Testovanie: Safari, Firefox, Opera, IE tester
Online nástroje• Css3generator  http://css3generator.com/• Ultimate gradient generator  http://www.colorzilla.com/gradient...
Online nástroje• Jquery mobile  http://jquerymobile.com/• Color scheme generator  http://colorschemedesigner.com/ http://k...
Frameworky• Css reset  http://meyerweb.com/eric/tools/css/reset/• Css grid framework  http://960.gs/• Bootstrap  http://tw...
Tipy• Color scheme generator http://colorschemedesigner.com/ http://kuler.adobe.com• Hotové šablóny, hotové UI prvky• CSS ...
Výhody• Rýchlosť• Reakcie na zmeny - jeden riadok vie ovplyvniť  všetky podstránky• Hneď mám hotové nasaditeľné riešenie• ...
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 c...
Ukážky•   rooomix•   zdravie.sk•   vibration.sk•   prodesign
Zhrnutie•   super na prototypovanie•   rýchly, flexibilný vývoj•   skúsite to?•   diskusia• Twitter > @ ivusko•   Web: > i...
Web design in html editor
Upcoming SlideShare
Loading in …5
×

Web design in html editor

2,336 views

Published on

webdesign in html editor, tools, tips, frameworks, prototyping

Published in: Design
  • Be the first to comment

  • Be the first to like this

Web design in html editor

  1. 1. Web design in HTML editor Ivan Potančok @ivusko 2000 - 2010 freelance webdesigner 2010 + CEO @ vibration.sk
  2. 2. 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?
  3. 3. 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
  4. 4. Č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
  5. 5. Štandardný postup1. Wireframes – papier, axure, fireworks = PNG2. Dizajn – photoshop = PSD3. Programovanie šablón = HTML + CSS
  6. 6. Skúsme to inak?1. HTML - wireframes2. CSS - dizajnPrípadne1. Wireframes v HTML2. Úvodná stránka PSD, určíme look and feel3. Podstránky HTML + CSS
  7. 7. 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
  8. 8. Software• Dreamveawer• PSPad, Sublime 2, Coda• Eclipse• Chrome – F12• Testovanie: Safari, Firefox, Opera, IE tester
  9. 9. Online nástroje• Css3generator http://css3generator.com/• Ultimate gradient generator http://www.colorzilla.com/gradient-editor/
  10. 10. Online nástroje• Jquery mobile http://jquerymobile.com/• Color scheme generator http://colorschemedesigner.com/ http://kuler.adobe.com
  11. 11. Frameworky• Css reset http://meyerweb.com/eric/tools/css/reset/• Css grid framework http://960.gs/• Bootstrap http://twitter.github.com/bootstrap/
  12. 12. Tipy• Color scheme generator http://colorschemedesigner.com/ http://kuler.adobe.com• Hotové šablóny, hotové UI prvky• CSS piffle http://piffle.abdoc.net/
  13. 13. 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
  14. 14. 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
  15. 15. Ukážky• rooomix• zdravie.sk• vibration.sk• prodesign
  16. 16. Zhrnutie• super na prototypovanie• rýchly, flexibilný vývoj• skúsite to?• diskusia• Twitter > @ ivusko• Web: > ivusko.sk, vibration.sk

×