Visual design
Descargar como PPTX, PDF3 recomendaciones5,464 vistas
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.
Visual design
- 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