Your SlideShare is downloading. ×
Web design in html editor
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web design in html editor

1,471
views

Published on

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

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

Published in: Design

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,471
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Web design in HTML editor Ivan Potančok @ivusko 2000 - 2010 freelance webdesigner 2010 + CEO @ vibration.sk
  • 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. 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. Č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. Štandardný postup1. Wireframes – papier, axure, fireworks = PNG2. Dizajn – photoshop = PSD3. Programovanie šablón = HTML + CSS
  • 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. 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. Software• Dreamveawer• PSPad, Sublime 2, Coda• Eclipse• Chrome – F12• Testovanie: Safari, Firefox, Opera, IE tester
  • 9. Online nástroje• Css3generator http://css3generator.com/• Ultimate gradient generator http://www.colorzilla.com/gradient-editor/
  • 10. Online nástroje• Jquery mobile http://jquerymobile.com/• Color scheme generator http://colorschemedesigner.com/ http://kuler.adobe.com
  • 11. Frameworky• Css reset http://meyerweb.com/eric/tools/css/reset/• Css grid framework http://960.gs/• Bootstrap http://twitter.github.com/bootstrap/
  • 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. 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. 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. Ukážky• rooomix• zdravie.sk• vibration.sk• prodesign
  • 16. Zhrnutie• super na prototypovanie• rýchly, flexibilný vývoj• skúsite to?• diskusia• Twitter > @ ivusko• Web: > ivusko.sk, vibration.sk