Your SlideShare is downloading. ×
0
Visual design
Visual design
Visual design
Visual design
Visual design
Visual design
Visual design
Visual design
Visual design
Visual design
Visual design
Visual design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Visual design

5,393

Published on

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

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,393
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×