• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Web design v roku 2013
 

Web design v roku 2013

on

  • 1,162 views

webdesign

webdesign

Statistics

Views

Total Views
1,162
Views on SlideShare
704
Embed Views
458

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 458

http://blog.vibration.sk 458

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