Prototipado

Prototipado: wireframes, mockups y prototipos

Arquitecto de información:

• Identifica los objetivos del proyecto
• Identifica las necesidades de los usuarios
• Especifica las funcionalidades y requerimientos de la aplicación web
• Define y diseña los sistemas de navegación, organización, etiquetado y busqueda
• Prototipa la aplicación web

Planos:
Blueprint, diagramas de contenido o flujo o mapa web

Maquetas:
Prototipado de baja fidelidad y de alta fidelidad
Sketching, wireframes, storyboard, prototipos funcionales

Arquitectura de informacion

1)

• El equipo y el cliente se centran en el diseño de contenidos e interacción y no en el diseño visual.
• El cliente ve y comprende cómo será la aplicación, mucho mejor que si se ofrece descrita en un documento.
• Evita malentendidos entre el proveedor y el cliente e incluso entre los propios miembros del equipo.
• Ayuda a especificar los requerimientos y a detectar inconsistencias y falta de funcionalidad.
• Es un complemento de gran valor en el análisis.

2)

• El prototipo se modifica con facilidad y rapidez.
• Se evitan midificaciones posteriores mucho más costosas cuando la aplicación ya se está implementando.
• Se reducen costes y tiempos.

3)

• Permite realizar pruebas de usabilidad, como test con usuarios, en etapas tempranas del proyecto.
• Se detectan y solucionan los problemas antes de comenzar su implementación.
• El resultado son aplicación web más fáciles de entender, de usar y que se ajustan mejor a las necesidades de los  usuarios.

Beneficios de prototipar una aplicación web:

• Menor tiempo de desarrollo posterior
• Mayor calidad del resultado final
• Mayor satisfación del cliente y el usuario final

Otras referencias de interés:

- Artículo "Wireframes" de Olga Carreras

- Artículo "Prototipado" de fundación Sidar

- Blog "Wireframes"

- Glosario de usabilidad y accesibilidad

- Presentación "Wireframes for the witcked"

Herramientas de prototipado:

Pencil Project - gratuito
Balsamiq - de pago
Gliffy - de pago

PROTOTIPADO Y DISEÑO DE ALTA FIDELIDAD

• color
• áreas
• cajas contenido
• imágenes
• textos
• menús y enlaces
• iconos

Evolución del mockup  |  Google/ativate

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

 1. Busca inspiración
http://www.webcreme.com/
http://www.webdesign-inspiration.com/
http://ffffound.com/
http://designyoutrust.com/
http://abduzeedo.com/

 2. Establece una paleta básica de colores
   para dar consistencia y estilo al prototipo.
   Se recomienda tres colores y despues crear gamas y combinaciones a partir de ella
   buscando la armonía y la consistencia en el diseño. 
   Mas información sobre el color:

Teoría del color:

http://www.desarrolloweb.com/articulos/1444.php
http://www.kabytes.com/diseño/uso-se-los-colores-en-diseno-web/
http://www.abcdisegno.com/teoria-del-color/

Inspiración:

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

Herramientas para crear paletas de color:

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

 3. Busca recursos gráficos

•     Imágenes y elementos gráficos
•     Tipografías 
•     Iconos
•     Material del cliente

           - Comprar en bancos de imagen
           - Utilizar los de licencia libre / gratuitos
           - Generar tus propios recursos
           - Utilizar el material del cliente
           *ten en cuenta las imposiciones creativas como la imagen corporativa

Recursos gráficos gratuitos:

http://freelancefolder.com/25-sites-for-free-vector-files/
http://www.vectorvalley.com/
http://all-silhouettes.com/
http://bestfreewebresources.com/
http://bittbox.com/
http://psd.fanextra.com/
http://webdesignledger.com/
http://designbeep.com/
https://wallpaperscraft.com/

 4. Define las tipografías

    Cuando escojas un tipo de letra ten en cuenta la legibilidad y capacidad de adaptación.
    Un tipo de letra con carácter enriquecerá tu diseño.

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

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

Tendencias e inspiración tipográfica:

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

Recursos tipografía:

http://www.google.com/webfonts
http://www.fontsquirrel.com/
http://www.dafont.com/es/
http://fontfabric.com/
http://www.theleagueofmoveabletype.com/

 5. Recopila el material necesario

• mockup
• información cliente
• recursos
• logos

Practicar con el software y conocer las posibilidades creativas:

http://psd.tutsplus.com/articles/web/50-great-photoshop-tutorials-for-clever-beginners/
http://tutorialmagazine.com/
http://smashingmagazine.com/2008/02/05/illustrator-tutorials-best-of/
http://computerarts.co.uk/tutorials
http://spyrestudios.com/30-adobe-photoshop-illustrator-tutorials-for-web-deigners/
http://designfix.com/resources/60-adobe-photoshop-illustrator-tutorials
http://blog.spoongraphics.co.uk/category/tutorials
http://creativenerds.com.uk/tutorials/100-fresh-new-photoshop-and-illustrator-tutorials/
http://vandelaydesign.com/blog/design/photoshop-illustrator-tutorials/

• Investiga en corrientes creativas.
• Desarrolla tu idea y conceptualiza.
• Toma en cuenta la temática de tu web, las tendencias y tu público.
• Bebe de todas las fuentes posibles.
• Potencia tu creatividad.

 5 CONSEJOS

1. Trabaja en capas

• facilitará el trabajo y la organización
• facilitará el proceso de diseño
• facilitará editar cada elemento

         - cada elemento en una capa
         - agrupa en carpetas de capas
         - guarda un documento maestro siempre

2. De general a particular

• comienza por lo mas general
• define las áreas de la escritura
• las cajas de contenido
• trabaja el diseño dentro de las áreas y cajas que hayas definido

3. No abuses de...

• espacio
• color
• tipografía
• decoración excesiva
• efectos complejos
• muchos elementos

4. Optimiza el tiempo

• define las prioridades de tu proyecto
• no pierdas tiempo diseñando elementos irrelevantes
• diseña según tus posibilidades
• ten en cuenta siempre la visión de conjunto y la coherencia en el estilo
• ten siempre en cuenta las necesidades de tu cliente

5. Organiza

• carpeta de trabajo
• prototipos
• documento maestro
• registra los cambios
• finales

Mas información sobre diseño:

Elementos de diseño:

http://www.johnlovett.com/test.htm
http://www.slideshare.net/contactofaum/elementos-de-diseo
http://www.ecured.cu/index.php/Elementos_b%C3%A1sicos_del_Dise%C3%B1o_Gr%C3%A1fico
http://www.cristalab.com/tutoriales/diseno-web-fundamentos-basicos-c631/

Comunidades y blogs de diseño:

http://www.netmagazine.com/
http://webdesignledger.com/
http://www.creativeblog.com/

Tendencias 2012 e inspiración diseño:

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

Créditos de las imágenes y fotografías:

http://pixabay.com/es/fractal-arte-resumen-de-fondo-348348/