Web design v roku 2013

  • 1,008 views
Uploaded on

webdesign

webdesign

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,008
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
0
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 v roku 2013Ivan Potančok@ivusko2000 - 2010freelance webdesigner2010 +CEO @ vibration.sk
  • 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. Témy• Webdesign trends• GRID and responsive design• Design patterns
  • 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. 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. Contentfirst
  • 7. Mobilefirst
  • 8. Simplicity
  • 9. UX centered design
  • 10. App styleinterfaces
  • 11. Responsive Layouts
  • 12. Retina Support• SVG• Font icons• PNG x2
  • 13. FixedHeaderBars
  • 14. Infinite Scrolling
  • 15. CSS3 Animations / No Flash
  • 16. Social media icons, badges,buttons
  • 17. Single-PageWebDesign
  • 18. Software• Axure• Photoshop• Sublime 2• Chrome
  • 19. Štandardný postup1. Wireframes – papier, axure2. Dizajn – photoshop > PSD3. Programovanie šablón = HTML + CSS4. Ďalší vývoj, integrácia do CMS aleboframeworku
  • 20. Môj postup1. Wireframes1. Bootstrap + LESS2. > klikateľný prototyp2. Look and feel1. Photoshop2. > PSD3. Podstránky1. Bootstrap + LESS + jQuery2. > front end
  • 21. CSS 3• Oblé rohy• Gradienty• Priehľadnosť - background-color:rgba(255,255,255,0.3);• Transitions• Animations• Sprites• Background-size
  • 22. LESS• Kompilované CSS• Dynamický jazyk• Vnorenie tried• Mixins• Variables• Functions and operations• ...
  • 23. Bootstrap• Compiled in LESS• https://github.com/twitter/bootstrap• Bootstrap 3 – mobile first, fuck IE
  • 24. GRID
  • 25. GRID• gridColumns, gridColumnWidth,gridGutterWidth• Responsive GRID1. Media queries2. Bootstrap
  • 26. Responsive design
  • 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. Typografia• Google Web Fonts• Typekit
  • 29. Design patternsGrouped buttonsSubmenuTabsbootstrap, jquery ui
  • 30. Design patternsBreadcrumbsNavbarButton dropdowns
  • 31. Design patternsPaginationModal windowLogin form
  • 32. Design patternsTooltip PopoverAlert
  • 33. Design patternsAccordeon
  • 34. Design patternsCarrousel
  • 35. Design patternsAutocompleteDatepickerSliderSlider / price filter
  • 36. Design patternsAdd to basket Basket
  • 37. Design patternsSteps
  • 38. Design patternsCategory Tree
  • 39. Design patternsModal window
  • 40. Touch patternshttp://developer.android.com/design/index.htmlhttp://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html
  • 41. Junior webdesigner wanted• Letná stáž?• Art directovať ťa budem ja• Email pošli na:katarina.kruta@vibration.sk
  • 42. Let‘s design• Twitter > @ivusko• Web: > vibration.sk