Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tendencias de Diseño Web con WordPress. SiloCreativo

6d22f37140f6460f5b806d2148d33085?s=47 SiloCreativo
December 14, 2013

Tendencias de Diseño Web con WordPress. SiloCreativo

Ponencia para la WordCamp Sevilla 2013. Diseño de la presentación por Verónica Valenzuela.
Analizamos 4 tendencias de diseño web basadas en WordPress: Diseño “Mobile First”, Web Fonts e Icon Fonts (pensando en retina), Flat Design (menos es más) y Parallax, cómo usarlo y su utilidad en el campo de la usabilidad y experiencia del usuario.

6d22f37140f6460f5b806d2148d33085?s=128

SiloCreativo

December 14, 2013
Tweet

More Decks by SiloCreativo

Other Decks in Design

Transcript

  1. DISEÑO WEB con WordPress Ricardo Prieto @ricardpriet silocreativo.com TENDENCIAS de

  2. NUBLA TU MENTE para que lluevan

  3. tendencias x diseño RELATIVIDAD2 +WordPress

  4. MOBILE FIRST diseñando FUTURO 1

  5. None
  6. STYLE.CSS @media (min-width: ***px) { }

  7. IE respond.js

  8. .bye-bye { font-family:’Comic Sans MS’; } WEB FONTS 2

  9. None
  10. presidentforaday .com

  11. function wcsev() { wp_register_style( 'webfonts', 'http://***' ); wp_enqueue_style( 'webfonts' );}

    add_action('wp_enqueue_scripts', 'wcsev'); FUNCTIONS.PHP
  12. menos es 3FLAT DESIGN

  13. skeuomorphism flat

  14. designmodo. com/flat

  15. background: linear-gradient(top, #1e5799 0%, #1e5799 21%, #2989d8 50%, #1e5799 59%,

    #207cca 85%, #7db9e8 100%); border: 2px solid #ddd; box-shadow: 5px 5px 5px rg- ba(68,68,68,0.6); background: #1e5799; STYLE.CSS
  16. 4 PARALLAX PARALLAX PARALLAX PARALLAX PARALLAX

  17. JS > HTML > CSS skrollr.js stellar.js

  18. ganau.com

  19. HEADER.PHP wp_enqueue_script( 'skrollr', 'http://***' ); data-0="***" data-200="***" FUNCTIONS.PHP

  20. Cuando SOPLAN VIENTOS unos construyen MUROS otros MOLINOS

  21. Ricardo Prieto @ricardpriet silocreativo.com GRACIAS!! ricardo@silocreativo.com