Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual design

5,914 views

Published on

Presentación para Taller multitask sobre algunas recomendaciones de Diseño Visual

Published in: Education, Technology, Design
  • Be the first to comment

Visual design

  1. 1. Visual Design Clase
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 12. ¿Preguntas? Profesor Juan Paulo Madriaza mad@digilicious.cl Ayudante Jacob Bustamante infograf@uchile.cl

×