Manual de supervivencia en diseño para programadores. Unas nociones básicas de los principios fundamentales del diseño.

1. Diseño para programadores
manual de supervivencia
POR Texto FECHA
Mamen Pradel @pensieve 2
@aaromnido Noviembre
Fernando Val
2011
Pablo Gimeno | Mamen Pradel | Fernando Val

2. Todos somos
CREATIVOS...

3. AI & UX
Mockups, Wireframes, etc.

4. Diseño para programadores daltónicos
manual de supervivencia
AI & UX, mockups, wireframes,
• Usa las convenciones, no re-inventes la rueda
• Ponte siempre en la piel del usuario
• Haz mockups o wireframes
• No me hagas pensar
Pablo Gimeno | Mamen Pradel | Fernando Val

5. Diseño para programadores daltónicos
manual de supervivencia
Composición / Cada cosa en su sitio
• Balance
Se refiere a la manera de combinar los
elementos para añadir la sensación
equilibrio y estabilidad.
Pablo Gimeno | Mamen Pradel | Fernando Val

6. Diseño para programadores daltónicos
manual de supervivencia
Composición / Cada cosa en su sitio
• Contraste
Pablo Gimeno | Mamen Pradel | Fernando Val

7. Diseño para programadores daltónicos
manual de supervivencia
Composición / Cada cosa en su sitio
• Armonía
Se refiere a la manera de combinar los
elementos para crear similitudes;
tamaño, forma, color, texturas, etc.
Pablo Gimeno | Mamen Pradel | Fernando Val

8. Diseño para programadores daltónicos
manual de supervivencia
Composición / Cada cosa en su sitio
• Ritmo, movimiento
Pablo Gimeno | Mamen Pradel | Fernando Val

9. Diseño para programadores daltónicos
manual de supervivencia
Composición / Cada cosa en su sitio
• Ritmo, movimiento
Pablo Gimeno | Mamen Pradel | Fernando Val

10. Diseño para programadores daltónicos
manual de supervivencia
Composición / Cada cosa en su sitio
• Proporciones
Pablo Gimeno | Mamen Pradel | Fernando Val

11. Diseño para programadores daltónicos
manual de supervivencia
Composición / Cada cosa en su sitio
• Proporciones
Pablo Gimeno | Mamen Pradel | Fernando Val

12. Diseño para programadores daltónicos
manual de supervivencia
Composición / Cada cosa en su sitio
• Geometrización. Orden dentro del caos
Pablo Gimeno | Mamen Pradel | Fernando Val

13. Diseño para programadores daltónicos
manual de supervivencia
Composición / Cada cosa en su sitio
• Geometrización. Orden dentro del caos
Pablo Gimeno | Mamen Pradel | Fernando Val

14. Diseño para programadores daltónicos
manual de supervivencia
Composición / Cada cosa en su sitio
• Espacio
El espacio es importante. Los
elementos deben “respirar”
Pablo Gimeno | Mamen Pradel | Fernando Val

15. Diseño para programadores daltónicos
manual de supervivencia
Composición / Cada cosa en su sitio
•El número áureo o de Fibonacci
Pablo Gimeno | Mamen Pradel | Fernando Val

16. Color
$color = luz;

17. Diseño para programadores daltónicos
manual de supervivencia
Color / $color = luz;
• Colores luz
Pablo Gimeno | Mamen Pradel | Fernando Val

18. Diseño para programadores daltónicos
manual de supervivencia
Color / $color = luz;
• Color o gama vs tono
Pablo Gimeno | Mamen Pradel | Fernando Val

19. Diseño para programadores daltónicos
manual de supervivencia
Color / $color = luz;
• Rueda cromática, armonías y contrastes
Pablo Gimeno | Mamen Pradel | Fernando Val

20. Diseño para programadores daltónicos
manual de supervivencia
Color / $color = luz;
• Paleta y consistencia
Pablo Gimeno | Mamen Pradel | Fernando Val

21. manual de supervivencia
Tipografía
Unos tipos interesantes
Pablo Gimeno | Mamen Pradel | Fernando Val

22. Diseño para programadores daltónicos
manual de supervivencia
Tipografía / Unos tipos interesantes
• Familias. Serif, sans serif, script, display...
Pablo Gimeno | Mamen Pradel | Fernando Val

23. Diseño para programadores daltónicos
manual de supervivencia
Tipografía / Unos tipos interesantes
• Tipografías “Websafe”
Pablo Gimeno | Mamen Pradel | Fernando Val

24. Diseño para programadores daltónicos
manual de supervivencia
Tipografía / Unos tipos interesantes
• Google fonts al rescate
Pablo Gimeno | Mamen Pradel | Fernando Val

25. Diseño para programadores daltónicos
manual de supervivencia
Tipografía / Unos tipos interesantes
• Consistencia. Y no abusar
Pablo Gimeno | Mamen Pradel | Fernando Val

26. manual de supervivencia
CSS
¡Esto ya va pareciendo código!
Pablo Gimeno | Mamen Pradel | Fernando Val

27. Diseño para programadores daltónicos
manual de supervivencia
CSS / ¡Esto ya va pareciendo código!
• CSS. CSS2, nociones básicas
Pablo Gimeno | Mamen Pradel | Fernando Val

28. Diseño para programadores daltónicos
manual de supervivencia
CSS / ¡Esto ya va pareciendo código!
• CSS. CSS3, un mundo de posibilidades
Pablo Gimeno | Mamen Pradel | Fernando Val

29. Diseño para programadores daltónicos
manual de supervivencia
CSS / ¡Esto ya va pareciendo código!
• Se ordenado
• DRY (¿LESS, SASS?)
• Utiliza frameworks
• 1º Estandars, 2ª IE
Pablo Gimeno | Mamen Pradel | Fernando Val

30. manual de supervivencia
Enlaces
Herramientas útiles
Pablo Gimeno | Mamen Pradel | Fernando Val

31. Diseño para programadores daltónicos
manual de supervivencia
Enlaces / Herramientas útiles
CSS Frameworks: ‣ http://lorempixum.com/
‣ http://www.blueprintcss.org/
‣ http://960.gs/ Color:
‣ http://www.52framework.com/ ‣ http://www.colourlovers.com/
‣ http://www.wittysparks.com ‣ http://wearepandr.com/labs/
‣ http://lessframework.com/ colour_bookmark
‣ http://p.erkins.com/
‣ http://foundation.zurb.com/
‣ http://twitter.github.com/bootstrap/ Tipografía
‣ http://www.typetester.org/
CSS: ‣ http://www.google.com/webfonts
‣ http://www.librosweb.es/css/index.html ‣ http://www.fontsquirrel.com/
‣ http://www.librosweb.es/referencia/css/ ‣ https://typekit.com/
index.html ‣ http://www.chengyinliu.com/
‣ http://www.librosweb.es/css_avanzado/ whatfont.html
Herramientas diversas:: Inspiración:
‣ http://www.lipsum.com/ ‣ http://cssremix.com/
Pablo Gimeno | Mamen Pradel | Fernando Val

32. manual de supervivencia
FIN
Y eso es todo amiguitos
Pablo Gimeno | Mamen Pradel | Fernando Val