0
Visual Design
Clase
¿Qué es el diseño visual?
• Es la etapa donde con los wireframes ya
solucionados se procede a agregar:
– Color
– Tipografí...
Color
Tener en cuenta:
• Accesibilidad
• Connotación
• Contraste
• Armonía
• Consistencia
• http://Kuler.adobe.com
• http:...
Tipografía
Tener en cuenta:
• Tipografías de sistema
• sIFR
• SEO
• Connotación
• Legibilidad
• Derechos de autor
Links
• ...
Imágenes
Tener en cuenta:
• Connotación
• Repetición/profundización
• Calidad
• Propias/compradas
• Derechos de autor
Link...
Íconos
Tener en cuenta:
• Consistencia
• Claridad
• Tamaños
• Labels
• Bullets
Links
• http://www.iconfinder.com/
• http:/...
Detalles
Tener en cuenta:
• Bordes
• Sombras
• Contornos
• Recuadros
• Gradientes
• Dobleces
• Efectos
Links
• http://webd...
Texturas
Tener en cuenta:
• Pesos
• Contrastes
• Connotaciones
• Color
• Jerarquías
Links
• http://bashcorpo.dk/textures.p...
Patrones
Tener en cuenta:
• Facilidad de uso
• Claridad
• Consistencia
• Pertinencia
Links
• http://patterntap.com/
• http...
Design Kits
Tener en cuenta:
• Usar como fuente de patrones
• Aumentan la velocidad
• Pueden significar una perdida de
ide...
Showcases
Tener en cuenta:
• Sirven de referentes
• Para aprender a armonizar los elementos
• Buscar buenas ideas
• Abren ...
¿Preguntas?
Profesor
Juan Paulo Madriaza
mad@digilicious.cl
Ayudante
Jacob Bustamante
infograf@uchile.cl
Upcoming SlideShare
Loading in...5
×

Visual design

5,399

Published on

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

Published in: Education, Technology, Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,399
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×