Web design v roku 2013

1,425 views
1,226 views

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,425
On SlideShare
0
From Embeds
0
Number of Embeds
548
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×