Tip:
Highlight text to annotate it
X
Hola, bienvenido al vídeo “prototipos visuales de alta fidelidad”.
Mi nombre es Marina Gutiérrez, me dedico al diseño gráfico e imagen corporativa desde
el año 97.
Me puedes contactar en mi página web o en mi correo electrónico.
En este vídeo vas a ver cómo empezar a prototipar el diseño visual y estético de tu web, lo
que sería el paso siguiente al boceto o mockup, que viste en el video anterior.
El prototipo o diseño visual es la evolución del mockup, un documento mas elaborado y detallado,
donde darás 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 mas 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, donde 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 contienen.
También definir el espacio que ocuparán las imágenes, su forma, y su posición y
alineación, simulando el contenido cuando sea necesario.
Trabajar con las tipografías y su comportamiento, te ayudará a elegir la mejor opción, asi
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 menus de navegación, listas y enlaces.
Y diseñar y 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 software de edición de imágenes como por ejemplo, Adobe Photoshop ó GIMP,
que es una alternativa gratuita excelente.
También puedes usar software de dibujo vectorial, como Adobe Illustrator o Inkscape, que también
es una alternativa gratuita.
Puedes elegir para tu diseño, el software que prefieras, dependiendo de tus posibilidades
y habilidades.
Te recomiendo, sin embargo, que busques uno que como mínimo, tenga la capacidad de:
trabajar en capas, para poder asignar a cada objeto unas disemsiones y espacio propio;
también, que te permita medir, utilizando reglas e inspectores, y de esta manera, trabajar
tu documento con dimensiones reales; además, debería de permitirte editar imágenes,
para poder explorar de una forma adecuada todas las posibilidades del diseño.
En este listado, encontarás varios enlaces que te serán de utilidad para practicar con
el software de diseño, explorar las posibilidades creativas, inspirarte, o resolver tus dudas
técnicas.
Antes de empezar a trabajar con tu diseño, te voy a dar 5 consejos útiles para facilitarte
el primer paso del proceso.
Mi primer consejo, es que busques inspiración antes de 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 de 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.
Una idea, puede venir de cualquier parte, mi consejo es que te tomes un tiempo para
buscar la inspiración, y encontrar así el carácter y el mensaje que quieres 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 del mercado y tu público. Intenta beber de todas las fuentes posibles
sin prejuicios. Y potencia tu creatividad, para conseguir
los mejores resultados.
Mi segundo consejo, es que establezcas una paleta básica de colores para tu diseño.
Es importante para dar cosistencia y estilo al prototipo.
Te recomiendo usar una paleta básica de 3 colores y después crear gamas y combinaciones
a partir de ella, buscando la armonía y la cosistencia en tu diseño.
A continuación, verás algunos enlaces donde podrás encontrar mas información sobre el
color, su significado y sus propiedades, También verás referencias con herramientas específicas
para crear colores, combinaciones, gamas y paletas.
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 tu mismo.
Y además tendrás el material proporcionado por tu cliente.
Todos estos elementos, al igual que el 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 en los proveedores
que mejor se ajusten a tu presupuesto. Otra opcion es buscarlos en bancos de imagen con
licencias mas amplias o de uso gratuito. O puedes generarlos tu mismo, ya sea con una
cámara fotográfica o creándolos con ayuda de un software.
También contarás con el material gráfico de tu cliente.
Es importante, que tengas en cuenta cuando diseñes, las imposiciones creativas como
puyede 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 te serán de utilidad
para componer tus diseños.
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.
Cuando escojas un tipo de letra, toma siempre en cuenta su legibilidad y su capacidad de
adaptación, así como su significado, y la relacion que tiene con tu idea. 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.
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; y contarás también con los recursos y el 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 preferido.
Te doy 5 consejos para trabajar con tus diseños.
En primer lugar, 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 asi 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.
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 éstas áreas trabajarás las cajas principales, donde se
mostrará el contenido de tu web, ya sean imágenes o texto.
Podrás seguir trabajando en 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 aportarás una apariencia mas ordenada a todo tu diseño.
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; 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.
Mi consejo número cuatro, es que optimices tu tiempo adecuadamente cuando diseñes, centrándote
en las tareas prioritarias y dedicandoles el tiempo necesario a cada una de ellas.
Para optimizar el tiempo y tu flujo de trabajo, puedes seguir algunas pautas.
En primer lugar, define 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 adapte 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, pensando siempre
en las necesidades de tu cliente
En quinto, y último lugar, te aconsejo que mantengas la organización en todo el proceso
del diseño. Te recomiendo que prepares una carpeta organizada
con todos los documentos del diseño en 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 propia donde guardes todos tus prototipos
ordenados, intenta mantener original y copias de tu documento maestro, y registra 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.
En los siguientes enlaces encontrarás mucha información interesante sobre el diseño
en general y sus elementos: comunidades y blogs, donde puedes mantenerte actualizado,
y enlaces donde encontrarás inspiración y tendencias en diseño web.
Muchas gracias por tu atención, nos vemos pronto en el siguiente vídeo.