ONLINE KLUB - Ivan Potančok - Webdesign

578 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
578
On SlideShare
0
From Embeds
0
Number of Embeds
167
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

ONLINE KLUB - Ivan Potančok - Webdesign

  1. 1. WebdesignIng.Ivan Potančok
  2. 2. IntroductionIvan Potančok@ivusko•2000 - 2010freelance webdesigner2010 +•CEO @ vibration.sk
  3. 3. Vibration.sk
  4. 4. Grafické programyhttp://www.adobe.com/products/photoshop.htmlhttp://www.gimp.org/http://www.adobe.com/products/illustrator.htmlhttp://www.adobe.com/products/fireworks.htmlPrototypovaniehttp://www.balsamiq.com/products/mockupshttp://www.axure.com/
  5. 5. Editory CSS+HTML+(PHP)http://www.pspad.com/sk/http://www.eclipse.org/http://www.adobe.com/products/dreamweaver.html
  6. 6. Ďalšie nástrojeGoogle chrome + F12Testovanie:Firefox + firebugOperaSafariIE tester
  7. 7. Online nástrojehttp://css3generator.com/
  8. 8. Vytvorenie logaNápad – hlava, vychádza z názvuKoncepty – brainstormingskica – papier + perovektor – tvarvýber typografie - písmo http://www.google.com/webfonts/ - použiteľné na webe http://www.dafont.com/farbičky – rôzne verzieaplikácia loga – rozmer, odsadenie, logo manuál,vizitky, fb, web, banner
  9. 9. Hľadanie color schémyhttp://colorschemedesigner.com/http://kuler.adobe.comFarby na webe v RGB hexa kóde:#FF0000 – červenáFF – pomer červenej00 – pomer zelenej00 pomer modrej#000 – skrátený zápis čiernejwhite – slovný zápis farby
  10. 10. Grid systém
  11. 11. Prototypovanie - wireframes
  12. 12. Prototypovanie - wireframes
  13. 13. Základy typografie na webeH1-H6StrongPULOLEmVšetko ako text !
  14. 14. Základy typografie na webeCSS vlastnostiFont-sizeColorFont-weightPaddingMarginText-decorationText-align:hoverLine-height
  15. 15. Výber šablóny1. Free šablóny -http://wordpress.org/extend/themes/2. Vlastná šablóna3. Premium šablóny
  16. 16. Call to action prvkyDostatočne veľkéDostatočne výraznéFarebné, vyzerá ako tlačítko, má stav po nájdení myšou
  17. 17. Kde hľadať/kúpiť obrázkyhttp://sxc.hu/http://www.flickr.com/creativecommons/http://www.istockphoto.com/
  18. 18. Kde hľadať ikonyhttp://www.iconfinder.com/http://glyphicons.com/http://www.glyphish.com/
  19. 19. Mobilná verziaPriamo šablóna je responsiveAlebo pluginhttp://wordpress.org/extend/plugins/wordpress-mobile-pack/screenshots/Alebo dorobím responsive CSS
  20. 20. WorkshopSupport email:info@vibration.skPredmet napríklad:onlineklub – design problem – neviem exportovatlogo do šablóny

×