• Save
Web design v roku 2013
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Web design v roku 2013

on

  • 1,392 views

webdesign

webdesign

Statistics

Views

Total Views
1,392
Views on SlideShare
890
Embed Views
502

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 502

http://blog.vibration.sk 501
http://vibration.sk 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web design v roku 2013 Presentation 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