En el vídeo El desarrollo web se
han mostrado las principales fases del desarrollo de un sitio web. En la
segunda fase, "Planificación", aparecían los hitos "Wireframes" y
"Revisión Wireframes".
En diseño web, un wireframe (en español se puede traducir por esquema de la página o plano de la pantalla, aunque no se suelen usar estos términos), es un dibujo o esquema que representa el esqueleto o estructura visual de un sitio web (un conjunto de páginas web) o de una página web concreta. El wireframe suele carecer de aspectos visuales como estilo tipográfico, colores e imágenes, ya que su propósito es servir de apoyo para discutir el contenido, funcionalidad y comportamiento de un sitio web o de una página web.
En el siguiente vídeo se explican las diferencias que existen entre los wireframes, los mockups y los prototipos, se explica la importancia de prototipar una aplicación o sitio web antes de implementarla y se muestran los diferentes tipos de diagramas que se emplean para representar la navegación, la estructura y el funcionamiento de una aplicación o sitio web.
En diseño web, un wireframe (en español se puede traducir por esquema de la página o plano de la pantalla, aunque no se suelen usar estos términos), es un dibujo o esquema que representa el esqueleto o estructura visual de un sitio web (un conjunto de páginas web) o de una página web concreta. El wireframe suele carecer de aspectos visuales como estilo tipográfico, colores e imágenes, ya que su propósito es servir de apoyo para discutir el contenido, funcionalidad y comportamiento de un sitio web o de una página web.
En el siguiente vídeo se explican las diferencias que existen entre los wireframes, los mockups y los prototipos, se explica la importancia de prototipar una aplicación o sitio web antes de implementarla y se muestran los diferentes tipos de diagramas que se emplean para representar la navegación, la estructura y el funcionamiento de una aplicación o sitio web.
Los prototipos puedes ser de baja y alta fidelidad. Los de baja se denominan "sketching", es
el comienzo del prototipo, sobre el papel se representan los primeros trazos de lo que será la aplicación web.
Luego le sigue el wireframe se detalla mucho más con la estructura de la aplicación, una secuencia de wireframa se denomina storyboard.
Los prototipos de alta fidelidad son más dinámicos se desarrollan comportamientos de la aplicación, generalmente se utilizan archivos html, también se llaman a estas maquetas mockups.
Antes
de crear la primera página web de un sitio web deberías tener claro a
dónde quieres llegar, lo que quieres construir. El primer paso es que
desarrolles los prototipos de tu sitio web y de tus páginas web.
Los prototipos los puedes hacer a mano, con lápiz y papel. O también puedes usar un programa específico para crear prototipos.
Existen
multitud de herramientas en la Web que puedes emplear para crear todo
tipo de diagramas, incluidos los diferentes tipos de prototipos que se
te han explicado (wireframes, mockups).
Algunas son gratuitas, como Pencil Project:
Otras son de pago, como Balsamiq:
http://balsamiq.com/
o Gliffy:
http://www.gliffy.com/
En el vídeo Prototipado: wireframes, mockups y prototipos se te ha explicado que existen diferentes tipos de prototipos, de baja y alta fidelidad.
En el siguiente vídeo se explica la evolución de los prototipos de baja a alta fidelidad, se muestran los principales 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), se comentan algunos aspectos sobre el software de diseño visual (trabajar en capas, medir, editar imágenes), se ofrecen cinco 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 cinco consejos para empezar a diseñar (trabaja en capas, de general a particular, no abuses de ciertos elementos, optimiza el tiempo, organización).
En el siguiente vídeo se explica la evolución de los prototipos de baja a alta fidelidad, se muestran los principales 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), se comentan algunos aspectos sobre el software de diseño visual (trabajar en capas, medir, editar imágenes), se ofrecen cinco 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 cinco consejos para empezar a diseñar (trabaja en capas, de general a particular, no abuses de ciertos elementos, optimiza el tiempo, organización).
Editores gráficos:
- Photoshop.
- Gimp (gratuito).
- Adobe Illustrator.
- INKSCAPE
Enlaces para practicar con el software y conocer posibilidades creativas:
- http://design.tutsplus.com/articles/50-great-photoshop-tutorials-for-clever-beginners--psd-785
- http://www.smashingmagazine.com/2008/02/illustrator-tutorials-best-of/
- http://spyrestudios.com/30-adobe-photoshop-illustrator-tutorials-for-web-designers/
- http://designrfix.com/resources/60-adobe-photoshop-illustrator-tutorials
- blog.spoongraphics.co.uk/category/tutorials
- http://creativenerds.co.uk/tutorials/100-fresh-new-photoshop-and-illustrator-tutorials/
- http://www.vandelaydesign.com/photoshop-illustrator-tutorials/
Inspiración: diseño web, fotografía, ilustración y tendencias.
- http://www.webcreme.com/
- www.webdesign-inspiration.com
- http://ffffound.com
- http://designyoutrust.com
- http://abduzeedo.com
Teoría del color:
- www.desarrolloweb.com/articulos/1444.php
- www.kabytes.com/diseno/uso-de-los-colores-en-diseno-web/
- www.abcdisegno.com/teoria-del-color/
Inspiración:
Herramientas para crear paletas de color:
Recursos gráficos gratuitos:
- http://freelancefolder.com/25-sites-for-free-vector-files
- www.vectorvalley.com
- http://all-silhouettes.com
- www.bestfreewebresources.com
- www.bittbox.com
- http://psd.fanextra.com
- http://webdesignledger.com
- http://designbeep.com
Elegir la tipografía:
Artículos de tipografía en diseño web:
- http://sixrevisions.com/web_design/a-basic-look-at-typography-in-web-design/
- www.creativeblog.com/web-design-tips/10-rules-for-using-web-fonts-that-some-designers-forget-1233034
- www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2
Tendencias e inspiración tipografía:
- www.creativeblog.com/typography/biggest-type-design-trends-2012-812539
- http://webdesignledger.com/inspiration/21-examples-of-inspiring-typography-in-web-design
Recursos de tipografía:
- www.google.com/webfonts
- www.fontsquirrel.com
- www.dafont.com/es
- http://fontfabric.com
- www.theleagueofmoveabletype.com
