1. Webdesign
Ing.Ivan Potančok

2. Introduction
Ivan Potančok
@ivusko
•2000 - 2010
freelance webdesigner
2010 +
•CEO @ vibration.sk

3. Vibration.sk

4. Grafické programy
http://www.adobe.com/products/photoshop.html
http://www.gimp.org/
http://www.adobe.com/products/illustrator.html
http://www.adobe.com/products/fireworks.html
Prototypovanie
http://www.balsamiq.com/products/mockups
http://www.axure.com/

5. Editory CSS+HTML+(PHP)
http://www.pspad.com/sk/
http://www.eclipse.org/
http://www.adobe.com/products/dreamweaver.html

6. Ďalšie nástroje
Google chrome + F12
Testovanie:
Firefox + firebug
Opera
Safari
IE tester

7. Online nástroje
http://css3generator.com/

8. Vytvorenie loga
Nápad – hlava, vychádza z názvu
Koncepty – brainstorming
skica – papier + pero
vektor – tvar
výber typografie - písmo
http://www.google.com/webfonts/ - použiteľné na webe
http://www.dafont.com/
farbičky – rôzne verzie
aplikácia loga – rozmer, odsadenie, logo manuál,
vizitky, fb, web, banner

9. Hľadanie color schémy
http://colorschemedesigner.com/
http://kuler.adobe.com
Farby na webe v RGB hexa kóde:
#FF0000 – červená
FF – pomer červenej
00 – pomer zelenej
00 pomer modrej
#000 – skrátený zápis čiernej
white – slovný zápis farby

10. Grid systém

11. Prototypovanie - wireframes

12. Prototypovanie - wireframes

13. Základy typografie na webe
H1-H6
Strong
P
UL
OL
Em
Všetko ako text !

14. Základy typografie na webe
CSS vlastnosti
Font-size
Color
Font-weight
Padding
Margin
Text-decoration
Text-align
:hover
Line-height

15. Výber šablóny
1. Free šablóny -
http://wordpress.org/extend/themes/
2. Vlastná šablóna
3. Premium šablóny

16. Call to action prvky
Dostatočne veľké
Dostatočne výrazné
Farebné, vyzerá ako tlačítko, má stav po nájdení myšou

17. Kde hľadať/kúpiť obrázky
http://sxc.hu/
http://www.flickr.com/creativecommons/
http://www.istockphoto.com/

18. Kde hľadať ikony
http://www.iconfinder.com/
http://glyphicons.com/
http://www.glyphish.com/

19. Mobilná verzia
Priamo šablóna je responsive
Alebo plugin
http://wordpress.org/extend/plugins/wordpress-
mobile-pack/screenshots/
Alebo dorobím responsive CSS

20. Workshop
Support email:
info@vibration.sk
Predmet napríklad:
onlineklub – design problem – neviem exportovat
logo do šablóny