Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Kill the PowerPointSábado, 17 de Marzo de 2012                                                  ☠(el día que el mundo se d...
¿Qué es diseño?            Lentejas
¿Qué es diseño?     Diseño ≠ Animación
¿Qué es diseño?
COLORESTIPOGRAFÍAIMÁGENESICONOSEJEMPLOS
COLORESTIPOGRAFÍAIMÁGENESICONOSEJEMPLOS
COLORES          Pantallas o          Proyección (Luz)          Impresión (Tinta)
COLORES            El Contraste si importa!            El Contraste si importa!            El Contraste si importa!       ...
COLORESEvitar ROJO y VERDE a la vez.                   Daltonismo
COLORES          http://kuler.adobe.com
COLORESTIPOGRAFÍAIMÁGENESICONOSEJEMPLOS
TIPOGRAFÍACuando alguien pone mucho texto en unadiapositiva, no sabe que quiere decir.
TIPOGRAFÍALa regla del 10-20-30    10 secciones       20 slides max.            30pt Tipografía                        Est...
TIPOGRAFÍAOrganización de elementos
AlineaciónTIPOGRAFÍA                               EspacioOrganización de elementos                               Espacio
TIPOGRAFÍAOrganización de elementos                                                   Shift⇧ Utilizar    Agrupar       ALT...
TIPOGRAFÍARevisar la ortografía.
COLORESTIPOGRAFÍAIMÁGENESICONOSEJEMPLOS
IMÁGENES“Una imagen dice más que mil palabras.”...y una imagen mala,? da una mala imagen.
IMÁGENESAlta calidad y SÓLO alta calidad.Google, Flickr, etc.
IMÁGENESAlinear las fotos ala estructura queya habéis definido.
IMÁGENESAlinear las fotos ala estructura queya habéis definido....y jugar con latransparencia delfondo del texto.
IMÁGENESTampoco ospaséis con latransparencia!
IMÁGENES           Alinear imágenes a la           estructura que ya           habéis definido.           Es más fácil :)
IMÁGENESPantallazos... y las cosas que no interesan.
IMÁGENESNo
IMÁGENESSi, añadiendo borde de 1px
IMÁGENESSi la información que quieresdestacar es la de la zona central,¿A quién le interesa ver esto o esto?
IMÁGENESPantallazos... y las cosas que no interesan.1. Recortar (bien)2. Desactivar barras “personales”3. Pantallazo de la...
IMÁGENESAlineación de imagenes.Posicionar los pantallazos siempre en la mismaposición.
IMÁGENESAlineación de imagenes I
IMÁGENESAlineación de imagenes II
IMÁGENESAlineación de imagenes III
IMÁGENESNo distorsionar imágenes.
IMÁGENESVídeo también es imagen.Descargar sólo HD o mejor calidad disponible.  1080p   720p    :)   480p  320p     :(     ...
IMÁGENES
IMÁGENESDescarga de vídeos (YouTube, vimeo, ...) conFirefox + Extension “Download Helper”No: *.flv - Si: *.mp4
COLORESTIPOGRAFÍAIMÁGENESICONOSEJEMPLOS
ICONOSIconos.JPGs	 sin fondo transparentePNGs	 con fondo transparente
ICONOSMejor integración visual.              JPG           PNG
ICONOS¿Cambio de fondo? Funciona igual.             JPG              PNG
ICONOSBuscar iconos,logotipos enformato PNG ycomprobar (!)que realmente estransparente.Y verificartamaño.
ICONOSIconos.JPGs	 sin fondo transparentePNGs	 con fondo transparenteMejor aún:Iconos en formato vectorial.
ICONOSPíxel versus Vector.Vectores = curvas matemáticas.
ICONOS         Mejor escalabilidad con         gráficos vectoriales.                        userCloud
ICONOSEjemplo: vectorial + color    Un fajo de        Una tarta         Yo con y sin     dólares          muy rica        ...
ICONOS¿Dónde buscar?http://images.google.comhttp://www.iconfinder.comhttp://thenounproject.com(sólo vectorial + requiere Il...
COLORESTIPOGRAFÍAIMÁGENESICONOSEJEMPLOS
EJEMPLOS
Nuestro target
Adultos y mayores que                         Jóvenes que conocen                                                    naveg...
Distribución del target           por número                                     “Padres“Frikis”          “Navegantes”    ...
Distribución del target porinfluencia                                           “Padres           “Frikis”           “Naveg...
Herencia socialFrikis       Navegantes    Padres y Madres
Tenemos 3 cosas muy claras...
Los frikis son los frikis y siempre serán los frikis.
FuncionalidadVelocidad         -   +   +Seguridad         +   -   =Privacidad        +   =   =Complementos      -   +   =R...
EJEMPLOShttp://www.slideshare.net/popular/all-time?category=design
Kill the PowerPoint   ☠         Less is More!   ¡A cambiar el mundo PPT!
Upcoming SlideShare
Loading in …5
×

Kill the PowerPoint

PowerPoint has created so much pain in the world of design... this document is aimed to teach anyone the most basic and principal design concepts to make your presentation visually attractive.

  • Login to see the comments

Kill the PowerPoint

  1. 1. Kill the PowerPointSábado, 17 de Marzo de 2012 ☠(el día que el mundo se dividirá en dos partes)
  2. 2. ¿Qué es diseño? Lentejas
  3. 3. ¿Qué es diseño? Diseño ≠ Animación
  4. 4. ¿Qué es diseño?
  5. 5. COLORESTIPOGRAFÍAIMÁGENESICONOSEJEMPLOS
  6. 6. COLORESTIPOGRAFÍAIMÁGENESICONOSEJEMPLOS
  7. 7. COLORES Pantallas o Proyección (Luz) Impresión (Tinta)
  8. 8. COLORES El Contraste si importa! El Contraste si importa! El Contraste si importa! El Contraste si importa! Utilizar colores con mucho contraste para la mejor legibilidad. Los proyectores varían en calidad y se “comen” los colores.
  9. 9. COLORESEvitar ROJO y VERDE a la vez. Daltonismo
  10. 10. COLORES http://kuler.adobe.com
  11. 11. COLORESTIPOGRAFÍAIMÁGENESICONOSEJEMPLOS
  12. 12. TIPOGRAFÍACuando alguien pone mucho texto en unadiapositiva, no sabe que quiere decir.
  13. 13. TIPOGRAFÍALa regla del 10-20-30 10 secciones 20 slides max. 30pt Tipografía Estos son 30 puntos
  14. 14. TIPOGRAFÍAOrganización de elementos
  15. 15. AlineaciónTIPOGRAFÍA EspacioOrganización de elementos Espacio
  16. 16. TIPOGRAFÍAOrganización de elementos Shift⇧ Utilizar Agrupar ALT + SHIFT Bloq mayúslas reglas objetos “Copiar y pegar en 90°” para mover objetos
  17. 17. TIPOGRAFÍARevisar la ortografía.
  18. 18. COLORESTIPOGRAFÍAIMÁGENESICONOSEJEMPLOS
  19. 19. IMÁGENES“Una imagen dice más que mil palabras.”...y una imagen mala,? da una mala imagen.
  20. 20. IMÁGENESAlta calidad y SÓLO alta calidad.Google, Flickr, etc.
  21. 21. IMÁGENESAlinear las fotos ala estructura queya habéis definido.
  22. 22. IMÁGENESAlinear las fotos ala estructura queya habéis definido....y jugar con latransparencia delfondo del texto.
  23. 23. IMÁGENESTampoco ospaséis con latransparencia!
  24. 24. IMÁGENES Alinear imágenes a la estructura que ya habéis definido. Es más fácil :)
  25. 25. IMÁGENESPantallazos... y las cosas que no interesan.
  26. 26. IMÁGENESNo
  27. 27. IMÁGENESSi, añadiendo borde de 1px
  28. 28. IMÁGENESSi la información que quieresdestacar es la de la zona central,¿A quién le interesa ver esto o esto?
  29. 29. IMÁGENESPantallazos... y las cosas que no interesan.1. Recortar (bien)2. Desactivar barras “personales”3. Pantallazo de la ventana ACTIVA Impr Alt Gr + Pant
  30. 30. IMÁGENESAlineación de imagenes.Posicionar los pantallazos siempre en la mismaposición.
  31. 31. IMÁGENESAlineación de imagenes I
  32. 32. IMÁGENESAlineación de imagenes II
  33. 33. IMÁGENESAlineación de imagenes III
  34. 34. IMÁGENESNo distorsionar imágenes.
  35. 35. IMÁGENESVídeo también es imagen.Descargar sólo HD o mejor calidad disponible. 1080p 720p :) 480p 320p :( ...
  36. 36. IMÁGENES
  37. 37. IMÁGENESDescarga de vídeos (YouTube, vimeo, ...) conFirefox + Extension “Download Helper”No: *.flv - Si: *.mp4
  38. 38. COLORESTIPOGRAFÍAIMÁGENESICONOSEJEMPLOS
  39. 39. ICONOSIconos.JPGs sin fondo transparentePNGs con fondo transparente
  40. 40. ICONOSMejor integración visual. JPG PNG
  41. 41. ICONOS¿Cambio de fondo? Funciona igual. JPG PNG
  42. 42. ICONOSBuscar iconos,logotipos enformato PNG ycomprobar (!)que realmente estransparente.Y verificartamaño.
  43. 43. ICONOSIconos.JPGs sin fondo transparentePNGs con fondo transparenteMejor aún:Iconos en formato vectorial.
  44. 44. ICONOSPíxel versus Vector.Vectores = curvas matemáticas.
  45. 45. ICONOS Mejor escalabilidad con gráficos vectoriales. userCloud
  46. 46. ICONOSEjemplo: vectorial + color Un fajo de Una tarta Yo con y sin dólares muy rica zoom Regresemos al futuro
  47. 47. ICONOS¿Dónde buscar?http://images.google.comhttp://www.iconfinder.comhttp://thenounproject.com(sólo vectorial + requiere Illustrator)
  48. 48. COLORESTIPOGRAFÍAIMÁGENESICONOSEJEMPLOS
  49. 49. EJEMPLOS
  50. 50. Nuestro target
  51. 51. Adultos y mayores que Jóvenes que conocen navegan un poco y Los “heavy users” el medio y saben dependen de lo que les instalar aplicaciones diga otra persona “Padres “Frikis” “Navegantes” y Madres” Conocen todos los Navegan, pero no Navegan, pero no detalles técnicos y saben mucho de saben distinguir entresiguen evolución en la tecnología. Confían en navegador y buscador, web y pueden sus amigos p.ej.influenciar/convencer
  52. 52. Distribución del target por número “Padres“Frikis” “Navegantes” y Madres”
  53. 53. Distribución del target porinfluencia “Padres “Frikis” “Navegantes” y Madres”
  54. 54. Herencia socialFrikis Navegantes Padres y Madres
  55. 55. Tenemos 3 cosas muy claras...
  56. 56. Los frikis son los frikis y siempre serán los frikis.
  57. 57. FuncionalidadVelocidad - + +Seguridad + - =Privacidad + = =Complementos - + =Rendimiento - = +Compatibilidad = = =Personalización = + +
  58. 58. EJEMPLOShttp://www.slideshare.net/popular/all-time?category=design
  59. 59. Kill the PowerPoint ☠ Less is More! ¡A cambiar el mundo PPT!

×