[A+] Prototipos visuales de alta fidelidad
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).
El
prototipo o diseño visual es la
evolución del mockups, un documento más
elaborado y detallado donde dará estilo a los elementos generales y
particulares del diseño con elementos como el color, la composición, la tipografía y una buena dosis de creatividad para obtener un prototipo más ajustado a tu
diseño final.
Así
que en este prototipo definirás las
dimensiones en píxeles y los atributos estéticos de la mayoría de los elementos visibles de tu web como pueden
ser asignar el color de fondo y algunas zonas concretas de tu diseño y probar
combinaciones, también delimitar y definir las áreas principales de la
estructura general dónde irán colocadas las cajas contenedoras y los
principales elementos de tu diseño.
Definir
y dimensionar las cajas de contenido así como el espacio entre ellas, alineación y los
elementos que contiene. También definir el espacio que ocuparán las imágenes,
su forma y su alineación simulando el contenido cuando sea necesario.
Trabaja
con las tipografías y su comportamiento te ayudará a elegir la mejor opción así
como delimitar el espacio a las áreas de texto, el color, el tamaño de letra o aplicar
efectos,
Definir
atributos, dimensión y posición a menús de navegación, listas y enlaces.
Diseñar, posicionar iconos, botones, logotipos y elementos decorativos dentro
de tu diseño.
Te
darás cuenta que a diferencia de los mockups
donde trabajaste con escala de grises y sin detallar medidas ni atributos, en esta clase de prototipos los elementos
como el color, la posición, la alineación y la composición son muy importantes.
Para
empezar a diseñar tus prototipos visuales de la mejor manera puedes empezar
usando cualquier soporte de edición imágenes como por ejemplo adobe Photoshop o
Gimp que es una alternativa gratuita excelente.
También
puedes usar un soporte de dibujo vectorial como adobe ilustrator o Inkscape que
también es una alternativa gratuita.
Puedes
elegir para su diseño el software que prefieras dependiendo de tus posibilidades
y habilidades, te recomiendo sin embargo que busque uno que tenga como mínimo
la capacidad de trabajar en capas para
poder asignar a cada objeto unas dimensiones y espacios propios, también que te
permita medir utilizando reglas e inspectores y de esta manera trabajar tu documentó
con dimensiones reales.
Además
debería de permitirte editar imágenes para poder explorar de una forma adecuada
todas las posibilidades el diseño.
Antes
empezar a trabajar con tu diseño te voy a dar cinco consejos útiles para
facilitarte el primer paso del proceso:
1
Buscar inspiración antes empezar, esto forma parte de la investigación y además es muy
importante para preparar un diseño conceptualizarlo y después marcar las pautas
estilo de todos sus elementos. A continuación verás algunos enlaces donde
podrás empezar a buscar inspiración, encontrar ideas o explorar tendencias:
- http://www.webcreme.com
- http://www.webdesign-inspiration.com
- http://ffffound.com
- http://designyoutrust.com
- http://abduzeedo.com
Una
idea puede venir de cualquier parte y mi
consejo es que te tomes tu tiempo para buscar la inspiración y encontrar así el
carácter y el mensaje que quiere dar a tu diseño, te daré a continuación algunas
pautas que te pueden servir:
- Procura investigar en distintas corrientes creativas buscando así referencias diferentes a las habituales
- Desarrolla tu idea y conceptualízala probando todas las opciones y eligiendo la más adecuada.
- Toma siempre en cuenta la temática de tu web, las tendencias de mercado y tu público
- Intenta beber de todas las fuentes posibles sin perjuicios y potenciar tu creatividad para conseguir los mejores resultados.
2
Establece una paleta básica de colores para tu diseño, es importante para dar consistencia y estilo
al prototipo.
Te
recomiendo usar una paleta básica de tres colores y después crear gamas y
combinaciones a partir de ella buscando la armonía y la consistencia a tu
diseño, a continuación verás algunos enlaces donde podrás encontrar más
información sobre el color, su significado y sus propiedades.
Teoría
del color
- http://desarrolloweb.com/articulos/1444.php
- http://www.kabytes.com/diseno/uso-de-los-coloees.en-diseno-web
- http://www.abcdisegno.com/teoria-del-color/
Herramientas
para crear paletas de colores
Inspiración
También
verás referencias con herramientas específicas para crear colores,
combinaciones, gamas y paletas
3
Para tu diseño vas a necesitar también una serie de elementos que serán tu
principal material de trabajo: imágenes
y elementos gráficos, tipografías
para el contenido, también iconos que puedes crear tú mismo. y además tendrá el
material proporcionado por tu cliente. Todos estos elementos al igual que
establecer una gama de color son tus herramientas creativas para dar forma y
concepto a tu diseño.
Para
obtener los recursos necesarios en tu diseño puedes comprarlos a los proveedores
que mejor se ajusten a tu presupuesto, otra opción es buscarlos en bancos de
imágenes con licencias más amplias o de uso gratuito o puede generarlos tú mismo
ya sea con una cámara fotográfica o creándolos con la ayuda de un software, también
contará con el material gráfico de tu cliente.
Es
importante que tengas en cuenta cuando diseñes las imposiciones creativas como
puede ser la imagen corporativa de tu cliente.
Los
siguientes enlaces listan algunas webs donde encontrar recursos gráficos de
todo tipo y con distintas licencias de uso, la mayoría son gratuitos y que te serán
de utilidad para componer tus diseños.
- http://www.vectorvalley.com
- http://all-silhouettes.com
- http://www.bestfreewebresources.com
- http://www.bittbox.com
- http://psd.fanextra.com
- http://webdesignledger.com
- http://designbeep.com
4
Al igual que el color o los elementos gráficos, la tipografía o tipo de letra aportará carácter e identidad a tu
diseño, mi cuarto consejo es que definas las tipografías cuidadosamente.
Cuándo
escojas un tipo de letra toma en cuenta siempre la legibilidad y su capacidad
de adaptación, así como su significado y la relación que tiene con tu Id, escoger
un tipo de letra con carácter enriquecerá tu diseño.
En
los siguientes enlaces encontrarás información más detallada sobre el uso de la
tipografía y sus características así como referencias para encontrar tipos de
letra para tus diseños.
Artículos
tipografía en diseño web
- http://sixrevisions.com/web_design/a-basic-look-at-typography-in-web-design/
- http://www.creativebloq.com/web-design/choose-web-fonts-1233034
- http://www.webdesignerdepot.com/2009/02/10-web-typography-rules-every-designer-should-know-2/
Tendencias
e inspiración tipografía
- http://www.creativebloq.com/typography/biggest-type-design-trends-2012-812539
- http://webdesignledger.com/21-inspiring-examples-of-typography-in-web-design
Recursos
tipografía
- https://www.google.com/fonts/
- http://www.fontsquirrel.com
- http://www.dafont.com/es/
- http://www.fontfabric.com
- https://www.theleagueofmoveabletype.com
5
Mi último consejo es que recopiles y organices adecuadamente todo tu material
de trabajo para empezar a diseñar, este material de trabajo puede ser por
ejemplo:
- Los mockups, los cuales te servirán de base para iniciar tu diseño.
- También tendrás la información de tu cliente que tendrás organizada y clasificada.
- Contarás también con los recursos y material gráfico recopilados previamente.
- Tendrás también elementos específicos de imagen como pueden ser los logos.
Para
empezar a diseñar el aspecto visual de tu web es mucho más fácil si tienes
parte del camino recorrido con éxito, si
has trabajado el mockup, tienes una idea conceptualizada y tienes los recursos necesarios
para desarrollar esa idea puedes empezar a diseñar libremente con tu software de
edición preferida.
Te
doy 5 consejos para trabajar con tus diseños:
1
Te aconsejo que trabajes tus documentos
utilizando capas, en un diseño es muy importante la organización ya que se
trabaja con muchos objetos y áreas distintas, para poder trabajar cada elemento
de tu diseño adecuadamente debes organizarlo en capas que te permitirán editarlos
o sustituirlos con facilidad. Trabajar en capas te facilitará el trabajo de
organización dentro de tu diseño permitiendo darle a cada elemento un espacio y
dimensiones propias y te facilitará la futura exportación al entorno html,
además te permitirá probar varias opciones de una misma idea.
Al
trabajar en tu documento te recomiendo que le asignes una capa a cada elemento
de tu diseño dándole así un espacio propio.
También
te recomiendo que agrupes en carpetas los diferentes objetos comunes a una misma
zona para poder facilitar futuros cambios. Recuerda guardar siempre una copia
de tu documento maestro para futuras ediciones.
1 Mi segunda recomendación es que trabajes en tu documento diseñando de general a particular esto te
facilitará el proceso creativo y de edición, con ayuda de las capas podrás
trabajar por niveles de jerarquía comenzando así con elementos generales como
el fondo y a continuación definiendo y delimitando las áreas de la estructura
del prototipo, en estas áreas trabajarás las cajas principales donde se
mostrará el contenido de tu web, ya sean, imágenes o texto. Podrá seguir
trabajando los elementos que estén dentro de las cajas contenedoras y de esta
manera, y trabajando el diseño dentro de las áreas y cajas que ya has definido
le aportaras una apariencia más ordenada a todo tu diseño.
2 En tercer lugar te
recomiendo que vigiles el abuso de
ciertos recursos y herramientas estos abusos pueden ser por ejemplo:
- No vigilar el espacio entre elementos.
- Utilizar demasiados colores en tu diseño.
- Abusar del uso de la tipografía.
- También debes intentar no utilizar una decoración excesiva.
- No abusar de efectos complejos que no aporten nada a tu diseño.
- Y evitar colocar demasiados elementos en un mismo espacio.
4 Optimiza tu tiempo adecuadamente cuando
diseñes centrándote en las tareas prioritarias y dedicándoles el tiempo
necesario a cada una de ellas.
- Para optimizar el tiempo y tu flujo de trabajo puede seguir algunas pautas:
- Definir las prioridades de tu diseño estableciendo los plazos según las necesidades del proyecto.
- No pierdas tiempo diseñando elementos irrelevantes o innecesarios
- Elige un diseño que se adapta a tus posibilidades y a tus habilidades con las herramientas de diseño.
- Ten siempre en cuenta la visión de conjunto y la coherencia en tu diseño
- Y pensar siempre en las necesidades de tus clientes.
5 Mantén la organización en todo el proceso
de diseño, te recomiendo que prepares una carpeta organizada con todos los
documentos del diseño con el que estás trabajando, así como el material gráfico
que vayas a utilizar para diseñar.
Es
importante que tu trabajo tenga una carpeta apropiada donde guardes todos tus prototipos
ordenadas, intenta mantener original y copias de tu documento maestro y
registrar los cambios relevantes en tus diseños en un documento. Trabaja siempre
con las versiones editables de tus documentos y reserva una carpeta para
documentos finales listos para exportar a tu web.
0 comentarios
Publicar un comentario en la entrada.