Diseño para desarrolladores

Conferencia realizada en Octubre de 2012, en el 23 Encuentro de GeneXus. Montevideo, Uruguay.

Transcript

1. DISEÑO PARA DESARROLLADORES @luguedesde pasequeestaabierto.tumblr.com Lucía Guedes de Rezende
2. ¿QUÉ ES EL DISEÑO?
4. un proceso creativo, que combina estos elementos, para resolver la comunicación de un problema en un determinado contexto. EL DISEÑO ES:
5. Comunica Simple Intuitivo - Usable Atractivo - Innovador UN BUEN DISEÑO:
6. Profesionales Diferencia de marca Se ven los resultados NOS BENEFICIAMOS DE UN BUEN DISEÑO:
8. - SIMPLE - ESTRUCTURA - ESPACIO - IMAGEN - TIPOGRAFÍA - COLOR REGLAS BÁSICAS:
9. SIMPLE
10. Reglas básicas - SIMPLE
11. ESTRUCTURA
12. Reglas básicas - ESTRUCTURA
13. Reglas básicas - ESTRUCTURA
15. ESPACIO
19. Click Me! Reglas básicas - ESPACIO
20. IMAGEN
21. Reglas básicas - IMAGEN
22. Reglas básicas - IMAGEN
23. Reglas básicas - IMAGEN
24. TIPOGRAFÍA
25. R R Serif Sans serif Reglas básicas - TIPOGRAFÍA
26. Fantasía R R R R Reglas básicas - TIPOGRAFÍA
27. COMIC SANS Reglas básicas - TIPOGRAFÍA
28. Reglas básicas - TIPOGRAFÍA
29. R Serif - Aspecto clásico o tradicional - Buenas para lectura de bloques de texto Reglas básicas - TIPOGRAFÍA
31. R Sans Serif - Aspecto moderno - Buena opción para títulos - Buenas para lectura de textos a tamaño pequeño Reglas básicas - TIPOGRAFÍA
33. Título Museo Sans serif Museo Serif Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum. Reglas básicas - TIPOGRAFÍA
35. Interlínea de texto Reglas básicas - TIPOGRAFÍA
36. Reglas básicas - TIPOGRAFÍA
37. Bloques de texto
39. COLOR
40. AMOR, IRA, SANGRE, INTENSO, CALOR, DINAMISMO CÁLIDO, ENERGÍA, ENTRETENIMIENTO, ALEGRÍA, VITALIDAD ENERGÍA, BRILLANTE, ALEGRÍA, CÁLIDO FRESCO, SALUDABLE, BALANCE, ARMONÍA, DINERO CALMA, FRÍO, SERENO, PAZ, TRANQUILIDAD, FRESCO CREATIVIDAD, ELEGANCIA, AMOR, ALEGRÍA LIMPIO, PURO, TRANQUILIDAD PODER, ELEGANCIA, FORMALIDAD, TRADICIONAL NEUTROS FRÍOS CÁLIDOS
42. Reglas básicas - COLOR
43. - SIMPLE - ESTRUCTURA - ESPACIO - IMAGEN - TIPOGRAFÍA - COLOR REGLAS BÁSICAS:
44. COMUNICACIÓN
45. Manejo del espacio Mantener margenes
49. Manejo del espacio Mantener margenes
51. ELEGIR
52. Diseñador imprenta Diseñador digital Trabajos de imprenta (revistas, afiches, discos) Poco conocimiento de diseño web y programación front-end Por lo general no toman proyectos de índole digital Trabajos digitales (sitios o apps web, mobile) Bastante conocimiento de diseño web y programación front-end Por lo general no toman proyectos de índole imprenta
53. Entrevista Linkedin Porfolio Comunicación - ELEGIR
54. SER UN EQUIPO
55. Idea Boceto Diseño Desarrollo Comunicación - SER UN EQUIPO
56. CONTACTO
57. Comunicación - CONTACTO
58. APRENDER
59. Cambiar el “no se puede”
60. ¿Cómo podemos mejorarlo? ¿Podemos encontrar otra manera? Quizá si intentamos... POR:
61. HABLAR EL MISMO LENGUAJE
62. Boceto? Prototipo? Mockups? Build? F5?
63. PLANEAR
64. ¿Guías de diseño? ¿Recorte de imágenes? Etapas de chequeo
65. SEGUIR EL PLAN ACORDADO
66. Manejo del espacio Comunicación
67. @luguedesde pasequeestaabierto.tumblr.com Lucía Guedes de Rezende GRACIAS!
68. HERRAMIENTAS
69. 960.gs
70. myfonts.com fontsquirrel.com typekit.com
71. thenounproject.com iconmonstr.com
72. colourlovers.com kuler.adobe.com
73. behance.net dribbble.com
74. pttrns.com androidniceties.tumblr.com
75. Imagenes utilizadas Foto de tapa y slide 9: Denny Brechner (http://instagram.com/dennybre) Slide 2: Jiri Jerabek Slide 49: Mercedes Benz Magazine Ad Slides 45-50 y 66 ilustradas por Casey Edwards (@basicnoir) y Dennis Estanislao (@fwdpxl) Foto de contratapa: http://www.flickr.com/photos/npmeijer/ Slide 52: Adham Dannaway