Web design v roku 2013Ivan Potančok@ivusko2000 - 2010freelance webdesigner2010 +CEO @ vibration.sk
Web design• Kto z vás je web designer?• Kto je z vás web developer?• Kto z vás pozná HTML, CSS, jQuery?
Témy• Webdesign trends• GRID and responsive design• Design patterns
Co pro tebe znamená umětPhotoshop?• Pracovat ve fullscreenu a hrát na• klávesnici jako na piáno…Čo pre mňa znamená webdesi...
Webdesign trends• Content first• Mobile first• Simplicity• UX centered design• App style interfaces• Responsive Layouts• R...
Contentfirst
Mobilefirst
Simplicity
UX centered design
App styleinterfaces
Responsive Layouts
Retina Support• SVG• Font icons• PNG x2
FixedHeaderBars
Infinite Scrolling
CSS3 Animations / No Flash
Social media icons, badges,buttons
Single-PageWebDesign
Software• Axure• Photoshop• Sublime 2• Chrome
Štandardný postup1. Wireframes – papier, axure2. Dizajn – photoshop > PSD3. Programovanie šablón = HTML + CSS4. Ďalší vývo...
Môj postup1. Wireframes1. Bootstrap + LESS2. > klikateľný prototyp2. Look and feel1. Photoshop2. > PSD3. Podstránky1. Boot...
CSS 3• Oblé rohy• Gradienty• Priehľadnosť - background-color:rgba(255,255,255,0.3);• Transitions• Animations• Sprites• Bac...
LESS• Kompilované CSS• Dynamický jazyk• Vnorenie tried• Mixins• Variables• Functions and operations• ...
Bootstrap• Compiled in LESS• https://github.com/twitter/bootstrap• Bootstrap 3 – mobile first, fuck IE
GRID
GRID• gridColumns, gridColumnWidth,gridGutterWidth• Responsive GRID1. Media queries2. Bootstrap
Responsive design
Responsive design• Problémové časti:– Tabuľky– Externé objekty – iframes– Retina display• http://retinajs.com/• http://www...
Typografia• Google Web Fonts• Typekit
Design patternsGrouped buttonsSubmenuTabsbootstrap, jquery ui
Design patternsBreadcrumbsNavbarButton dropdowns
Design patternsPaginationModal windowLogin form
Design patternsTooltip PopoverAlert
Design patternsAccordeon
Design patternsCarrousel
Design patternsAutocompleteDatepickerSliderSlider / price filter
Design patternsAdd to basket Basket
Design patternsSteps
Design patternsCategory Tree
Design patternsModal window
Touch patternshttp://developer.android.com/design/index.htmlhttp://developer.apple.com/library/ios/#documentation/UserExpe...
Junior webdesigner wanted• Letná stáž?• Art directovať ťa budem ja• Email pošli na:katarina.kruta@vibration.sk
Let‘s design• Twitter > @ivusko• Web: > vibration.sk
Web design v roku 2013
Upcoming SlideShare
Loading in...5
×

Web design v roku 2013

1,104

Published on

webdesign

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,104
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Web design v roku 2013"

  1. 1. Web design v roku 2013Ivan Potančok@ivusko2000 - 2010freelance webdesigner2010 +CEO @ vibration.sk
  2. 2. Web design• Kto z vás je web designer?• Kto je z vás web developer?• Kto z vás pozná HTML, CSS, jQuery?
  3. 3. Témy• Webdesign trends• GRID and responsive design• Design patterns
  4. 4. Co pro tebe znamená umětPhotoshop?• Pracovat ve fullscreenu a hrát na• klávesnici jako na piáno…Čo pre mňa znamená webdesigner?• Dizajnér, ktorý kreslí a pripravuje webové stránky,musí poznať technológie používané na webe amusí hlavne o veciach premýšlať.
  5. 5. Webdesign trends• Content first• Mobile first• Simplicity• UX centered design• App style interfaces• Responsive Layouts• Retina Support• Fixed Header Bars• CSS Transparency• Infinite Scrolling• CSS3 Animations / No Flash• Social media icons, badges• Single-Page Web Design
  6. 6. Contentfirst
  7. 7. Mobilefirst
  8. 8. Simplicity
  9. 9. UX centered design
  10. 10. App styleinterfaces
  11. 11. Responsive Layouts
  12. 12. Retina Support• SVG• Font icons• PNG x2
  13. 13. FixedHeaderBars
  14. 14. Infinite Scrolling
  15. 15. CSS3 Animations / No Flash
  16. 16. Social media icons, badges,buttons
  17. 17. Single-PageWebDesign
  18. 18. Software• Axure• Photoshop• Sublime 2• Chrome
  19. 19. Štandardný postup1. Wireframes – papier, axure2. Dizajn – photoshop > PSD3. Programovanie šablón = HTML + CSS4. Ďalší vývoj, integrácia do CMS aleboframeworku
  20. 20. Môj postup1. Wireframes1. Bootstrap + LESS2. > klikateľný prototyp2. Look and feel1. Photoshop2. > PSD3. Podstránky1. Bootstrap + LESS + jQuery2. > front end
  21. 21. CSS 3• Oblé rohy• Gradienty• Priehľadnosť - background-color:rgba(255,255,255,0.3);• Transitions• Animations• Sprites• Background-size
  22. 22. LESS• Kompilované CSS• Dynamický jazyk• Vnorenie tried• Mixins• Variables• Functions and operations• ...
  23. 23. Bootstrap• Compiled in LESS• https://github.com/twitter/bootstrap• Bootstrap 3 – mobile first, fuck IE
  24. 24. GRID
  25. 25. GRID• gridColumns, gridColumnWidth,gridGutterWidth• Responsive GRID1. Media queries2. Bootstrap
  26. 26. Responsive design
  27. 27. Responsive design• Problémové časti:– Tabuľky– Externé objekty – iframes– Retina display• http://retinajs.com/• http://www.sitepoint.com/css-techniques-for-retina-displays/
  28. 28. Typografia• Google Web Fonts• Typekit
  29. 29. Design patternsGrouped buttonsSubmenuTabsbootstrap, jquery ui
  30. 30. Design patternsBreadcrumbsNavbarButton dropdowns
  31. 31. Design patternsPaginationModal windowLogin form
  32. 32. Design patternsTooltip PopoverAlert
  33. 33. Design patternsAccordeon
  34. 34. Design patternsCarrousel
  35. 35. Design patternsAutocompleteDatepickerSliderSlider / price filter
  36. 36. Design patternsAdd to basket Basket
  37. 37. Design patternsSteps
  38. 38. Design patternsCategory Tree
  39. 39. Design patternsModal window
  40. 40. Touch patternshttp://developer.android.com/design/index.htmlhttp://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html
  41. 41. Junior webdesigner wanted• Letná stáž?• Art directovať ťa budem ja• Email pošli na:katarina.kruta@vibration.sk
  42. 42. Let‘s design• Twitter > @ivusko• Web: > vibration.sk

×