Diseño gráfico de una aplicación web

Resumen

Prototipos de alta fidelidad, diseño gráfico. Software. Consejos.

Contenido

Debes ver el vídeo Prototipos visuales de alta fidelidad en el que se explica la evolución del mock up, los atributos estéticos de los elementos de una página web (colores, áreas, cajas de contenido, imágenes, tipografías, menús y enlaces, iconos y elementos decorativos), el software de diseño (trabajar en capas, medir, editar imágenes), 5 consejos antes de empezar a diseñar (busca inspiración, paleta básica de colores, busca recursos gráficos, define las tipografías, recopila el material necesario), y 5 consejos para empezar a diseñar (trabaja en capas, de general a particular, no abuses de ciertos elementos, optimiza el tiempo, organización).

Practicar con el software y conocer las posibilidades creativas

  1. http://psd.tutsplus.com/articles/web/50-great-photoshop-tutorials-for-clever-beginners/
  2. http://www.tutorialmagazine.com/
  3. http://www.smashingmagazine.com/2008/02/05/illustrator-tutorials-best-of/
  4. http://www.computerarts.co.uk/tutorials
  5. http://spyrestudios.com/30-adobe-photoshop-illustrator-tutorials-for-web-designers/
  6. http://designrfix.com/resources/60-adobe-photoshop-illustrator-tutorials
  7. http://blog.spoongraphics.co.uk/category/tutorials
  8. http://creativenerds.co.uk/tutorials/100-fresh-new-photoshop-and-illustrator-tutorials/
  9. http://vandelaydesign.com/blog/design/photoshop-illustrator-tutorials/

Inspiración: diseño web, fotografía, ilustración y tendencias

  1. http://www.webcreme.com/
  2. http://www.webdesign-inspiration.com/
  3. http://ffffound.com/
  4. http://designyoutrust.com/
  5. http://abduzeedo.com/

Más información sobre el color

Teoría del color

  1. http://www.desarrolloweb.com/articulos/1444.php
  2. http://www.kabytes.com/diseno/uso-de-los-colores-en-diseno-web/
  3. http://www.abcdisegno.com/teoria-del-color/

Inspiración

  1. http://pinterest.com/manekibeader/inspirational-colour-palettes/
  2. http://www.colourlovers.com/

Herramientas para crear paletas de color

  1. http://colorschemedesigner.com
  2. http://www.colorhexa.com/

Recursos gráficos gratuitos

  1. http://freelancefolder.com/25-sites-for-free-vector-files/
  2. http://www.vectorvalley.com/
  3. http://all-silhouettes.com/
  4. http://www.bestfreewebresources.com/
  5. http://www.bittbox.com/
  6. http://psd.fanextra.com/
  7. http://webdesignledger.com/
  8. http://designbeep.com/

Artículos sobre tipografía en diseño web

  1. http://sixrevisions.com/web_design/a-basic-look-at-typography-in-web-design/
  2. http://www.creativebloq.com/web-design-tips/10-rules-for-using-web-fonts-that-some-designers-forget-1233034
  3. http://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/

Tendencias e inspiración sobre tipografía

  1. http://www.creativebloq.com/typography/biggest-type-design-trends-2012-812539
  2. http://webdesignledger.com/inspiration/21-examples-of-inspiring-typography-in-web-design

Recursos sobre tipografía

  1. http://www.google.com/webfonts
  2. http://www.fontsquirrel.com/
  3. http://www.dafont.com/es/
  4. http://fontfabric.com/
  5. http://www.theleagueofmoveabletype.com/

Más información sobre organización y flujo de trabajo

  1. http://www.smashingmagazine.com/2009/05/26/20-time-saving-tips-to-improve-designers-workflow-part-1/
  2. http://boagworld.com/reviews/getting-things-done-in-web-design/

Proceso diseño web

  1. http://naldzgraphics.net/design-2/web-design-workflow-guide/
  2. http://spyrestudios.com/5-ways-to-streamline-your-web-design-workflow/

Más información sobre diseño web

Elementos del diseño

  1. http://www.johnlovett.com/test.htm
  2. http://www.slideshare.net/contactofaum/elementos-de-diseo
  3. http://www.ecured.cu/index.php/Elementos_básicos_del_Diseño_Gráfico
  4. http://www.cristalab.com/tutoriales/diseno-web-fundamentos-basicos-c63l/

Comunidades y blogs de diseño

  1. http://www.netmagazine.com/
  2. http://webdesignledger.com/
  3. http://www.creativebloq.com/

Tendencias 2012 e inspiración de diseño

  1. http://www.dzineblog360.com/2011/12/top-7-web-design-trends-in-2012/
  2. http://www.hongkiat.com/blog/web-design-trend-2012/
  3. http://webdesignledger.com/tips/web-design-trends-in-2012

Recursos

Vídeos

Imprescindible
  1. Prototipos visuales de alta fidelidad: Evolución del mock up, atributos estéticos de los elementos de una página web (colores, áreas, cajas de contenido, imágenes, tipografías, menús y enlaces, iconos y elementos decorativos), software de diseño (trabajar en capas, medir, editar imágenes), 5 consejos antes de empezar a diseñar (busca inspiración, paleta básica de colores, busca recursos gráficos, define las tipografías, recopila el material necesario), 5 consejos para empezar a diseñar (trabaja en capas, de general a particular, no abuses de ciertos elementos, optimiza el tiempo, organización).

Lecturas

Imprescindible
  1. Color schemes and mockups: After a web designer presents a site's architecture, or wireframe, to a client for approval, the next step is to determine the look and feel of the site through colour and graphics. In this Web Standards Curriculum article, I'll demonstrate how I keep this process as simple as possible, both for myself and for the client. I believe in the KISS philosophy—Keep It Simple, Sweetie. There are two reasons for the use of this tactic: First, life is complicated enough without adding more curves; secondly, a simple plan also helps to keep a site more accessible and usable for all concerned.