Este documento describe los aspectos clave del diseño visual, incluyendo la adición de color, tipografía, imágenes, íconos y detalles a los wireframes. Explica que el diseño visual es la etapa donde se agregan estos elementos para darle vida al diseño. También incluye enlaces a recursos sobre cada uno de estos temas y muestra ejemplos de diseños bien ejecutados que pueden servir como referencia.

1. Visual Design
Clase

2. ¿Qué es el diseño visual?
• Es la etapa donde con los wireframes ya
solucionados se procede a agregar:
– Color
– Tipografías
– Imágenes
– Íconos
– Detalles
– Texturas
– Patrones
– Etc…

3. Color
Tener en cuenta:
• Accesibilidad
• Connotación
• Contraste
• Armonía
• Consistencia
• http://Kuler.adobe.com
• http://www.Colourlovers.com
• http://www.smashingmagazine.com/2010/01/28/color-
theory-for-designers-part-1-the-meaning-of-color/
• http://www.smashingapps.com/2009/12/17/50-best-free-
tools-to-create-perfect-color-combinations.html
• http://www.worqx.com/color/index.htm
• http://www.princetonol.com/groups/iad/lessons/middle/col
or2.htm

4. Tipografía
Tener en cuenta:
• Tipografías de sistema
• sIFR
• SEO
• Connotación
• Legibilidad
• Derechos de autor
Links
• http://www.fontsquirrel.com/
• http://creativenerds.co.uk/freebies/40-
beautiful-free-fonts-for-creating-attractive-
typography-headlines/
• http://slodive.com/freebies/top-30-free-
very-professional-fonts-for-2010/

5. Imágenes
Tener en cuenta:
• Connotación
• Repetición/profundización
• Calidad
• Propias/compradas
• Derechos de autor
Links
• http://www.sxc.hu/
• http://www.flickr.com/creativecommons/
• http://www.shutterstock.com/
• http://www.gettyimages.com/
• http://www.ap.org/espanol/

6. Íconos
Tener en cuenta:
• Consistencia
• Claridad
• Tamaños
• Labels
• Bullets
Links
• http://www.iconfinder.com/
• http://webdesignledger.com/freebies/the-
best-icon-sets-for-minimal-style-web-design
• http://www.hongkiat.com/blog/27-must-
have-starter-kits-for-web-designers/
• http://iconlibrary.iconshock.com/icons/100-
free-web-elements-sets/
• http://www.smashingmagazine.com/2009/1
2/14/50-beautiful-free-icon-sets-for-your-
next-design/

7. Detalles
Tener en cuenta:
• Bordes
• Sombras
• Contornos
• Recuadros
• Gradientes
• Dobleces
• Efectos
Links
• http://webdesignledger.com/inspiration/sub
tle-details-taking-web-designs-to-another-
level
• http://webdesignledger.com/tips/adding-
depth-with-pixel-perfect-line-work

8. Texturas
Tener en cuenta:
• Pesos
• Contrastes
• Connotaciones
• Color
• Jerarquías
Links
• http://bashcorpo.dk/textures.php?lang=2
• http://webdesignledger.com/freebies/the-
best-free-texture-packs-of-2009
• http://www.designfreebies.org/free-
images/500-free-exquisite-vintage-textures-
and-backgrounds/
• http://www.texturewarehouse.com/gallery/

9. Patrones
Tener en cuenta:
• Facilidad de uso
• Claridad
• Consistencia
• Pertinencia
Links
• http://patterntap.com/
• http://www.welie.com/index.php
• http://developer.yahoo.com/ypatterns/
• http://ui-patterns.com/

10. Design Kits
Tener en cuenta:
• Usar como fuente de patrones
• Aumentan la velocidad
• Pueden significar una perdida de
identidad o creatividad
• Descargas en PSD
Links
• http://www.maxkiesler.com/2010/03/18/sm
artphone-design-templates-for-android-
iphone-and-palm-pre/
• http://speckyboy.com/2010/02/17/40-
detailed-and-high-quality-mobile-phone-psd-
source-files/
• http://www.smashinghub.com/free-
professional-psd-web-templates.htm
• http://www.smashingmagazine.com/2010/0
8/27/free-wireframing-kits-ui-design-kits-
pdfs-and-resources/

11. Showcases
Tener en cuenta:
• Sirven de referentes
• Para aprender a armonizar los elementos
• Buscar buenas ideas
• Abren la mente
• Permiten empezar
• Se pueden buscar específicos por rubro
Links
• http://www.thecssawards.com/
• http://webdesignledger.com/inspiration/40-of-the-best-
horizontal-scrolling-websites
• http://www.designshard.com/inspiration/25-examples-of-
clean-and-well-designed-web-sites/
• http://www.smashingmagazine.com/tag/showcases/
• http://www.csselite.com/
• http://creamycss.com/
• http://cssmania.com/
• http://cssremix.com/
• http://www.css-showcase.com/

12. ¿Preguntas?
Profesor
Juan Paulo Madriaza
mad@digilicious.cl
Ayudante
Jacob Bustamante
infograf@uchile.cl