visual design
DESCRIPTION
Presentación para Taller multitask sobre algunas recomendaciones de Diseño VisualTRANSCRIPT
Visual DesignClase
¿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…
ColorTener 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/color2.htm
TipografíaTener 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/
ImágenesTener 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/
ÍconosTener en cuenta:• Consistencia• Claridad• Tamaños• Labels• Bullets
Links• http://www.iconfinder.com/• http://webdesignledger.com/freebies/the-b
est-icon-sets-for-minimal-style-web-design• http://www.hongkiat.com/blog/27-must-hav
e-starter-kits-for-web-designers/• http://iconlibrary.iconshock.com/icons/100-f
ree-web-elements-sets/• http://www.smashingmagazine.com/2009/1
2/14/50-beautiful-free-icon-sets-for-your-next-design/
DetallesTener 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
TexturasTener en cuenta:• Pesos• Contrastes• Connotaciones• Color• Jerarquías
Links• http://bashcorpo.dk/textures.php?lang=2• http://webdesignledger.com/freebies/the-b
est-free-texture-packs-of-2009• http://www.designfreebies.org/free-images/
500-free-exquisite-vintage-textures-and-backgrounds/
• http://www.texturewarehouse.com/gallery/
PatronesTener 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/
Design KitsTener 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/08/27/free-wireframing-kits-ui-design-kits-pdfs-and-resources/
ShowcasesTener 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-h
orizontal-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/
