This document summarizes trends and best practices in web design in 2013. It discusses concepts like mobile-first design, responsive layouts, simplicity, and user experience-centered design. It also covers specific design elements like fixed header bars, infinite scrolling, CSS3 animations, and social media integration. The document provides examples of standard and the author's preferred workflows for wireframing, visual design, development, and integration with content management systems. It also discusses technologies like Bootstrap, LESS, jQuery, and techniques for responsive design, typography, common design patterns, and touch interfaces.

1. Web design v roku 2013
Ivan Potančok
@ivusko
2000 - 2010
freelance webdesigner
2010 +
CEO @ vibration.sk

3. Web design
• Kto z vás je web designer?
• Kto je z vás web developer?
• Kto z vás pozná HTML, CSS, jQuery?

4. Témy
• Webdesign trends
• GRID and responsive design
• Design patterns

5. Co pro tebe znamená umět
Photoshop?
• 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 a
musí hlavne o veciach premýšlať.

6. 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

7. Content
first

8. Mobile
first

9. Simplicity

10. UX centered design

11. App style
interfaces

12. Responsive Layouts

13. Retina Support
• SVG
• Font icons
• PNG x2

14. Fixed
Header
Bars

15. Infinite Scrolling

16. CSS3 Animations / No Flash

17. Social media icons, badges,
buttons

18. Single-
Page
Web
Design

19. Software
• Axure
• Photoshop
• Sublime 2
• Chrome

20. Štandardný postup
1. Wireframes – papier, axure
2. Dizajn – photoshop > PSD
3. Programovanie šablón = HTML + CSS
4. Ďalší vývoj, integrácia do CMS alebo
frameworku

21. Môj postup
1. Wireframes
1. Bootstrap + LESS
2. > klikateľný prototyp
2. Look and feel
1. Photoshop
2. > PSD
3. Podstránky
1. Bootstrap + LESS + jQuery
2. > front end

22. CSS 3
• Oblé rohy
• Gradienty
• Priehľadnosť - background-color:rgba(255,255,255,0.3);
• Transitions
• Animations
• Sprites
• Background-size

23. LESS
• Kompilované CSS
• Dynamický jazyk
• Vnorenie tried
• Mixins
• Variables
• Functions and operations
• ...

24. Bootstrap
• Compiled in LESS
• https://github.com/twitter/bootstrap
• Bootstrap 3 – mobile first, fuck IE

25. GRID

26. GRID
• gridColumns, gridColumnWidth,
gridGutterWidth
• Responsive GRID
1. Media queries
2. Bootstrap

27. Responsive design

28. Responsive design
• Problémové časti:
– Tabuľky
– Externé objekty – iframes
– Retina display
• http://retinajs.com/
• http://www.sitepoint.com/css-techniques-for-retina-
displays/

29. Typografia
• Google Web Fonts
• Typekit

30. Design patterns
Grouped buttons
Submenu
Tabs
bootstrap, jquery ui

31. Design patterns
Breadcrumbs
Navbar
Button dropdowns

32. Design patterns
Pagination
Modal window
Login form

33. Design patterns
Tooltip Popover
Alert

34. Design patterns
Accordeon

35. Design patterns
Carrousel

36. Design patterns
Autocomplete
Datepicker
Slider
Slider / price filter

37. Design patterns
Add to basket Basket

38. Design patterns
Steps

39. Design patterns
Category Tree

40. Design patterns
Modal window

41. Touch patterns
http://developer.android.com/design/index.html
http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/M
obileHIG/Introduction/Introduction.html

42. Junior webdesigner wanted
• Letná stáž?
• Art directovať ťa budem ja
• Email pošli na:
katarina.kruta@vibration.sk

43. Let‘s design
• Twitter > @ivusko
• Web: > vibration.sk