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

Web design v roku 2013

on

  • 1,267 views

webdesign

webdesign

Statistics

Views

Total Views
1,267
Views on SlideShare
789
Embed Views
478

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 478

http://blog.vibration.sk 478

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

  • 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á webdesigner?• Dizajnér, ktorý kreslí a pripravuje webové stránky,musí poznať technológie používané na webe amusí hlavne o veciach premýšlať.
  • 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
  • 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ývoj, integrácia do CMS aleboframeworku
  • Môj postup1. Wireframes1. Bootstrap + LESS2. > klikateľný prototyp2. Look and feel1. Photoshop2. > PSD3. Podstránky1. Bootstrap + LESS + jQuery2. > front end
  • CSS 3• Oblé rohy• Gradienty• Priehľadnosť - background-color:rgba(255,255,255,0.3);• Transitions• Animations• Sprites• Background-size
  • 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.sitepoint.com/css-techniques-for-retina-displays/
  • 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/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html
  • 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