El Proceso del Diseño
Principios a considerar para el diseño
visual.
Formatos y resoluciones
El Color
Consideraciones generales
Uno de los aspecto importantes a considerar dentro del desarrollo de un recurso de contenido es el
diseño visual , puesto que a través de éste se manifiesta de una manera comunicacional lo que se
quiere transmitir. Un buen diseño visual representa el éxito en lo que se quiere comunicar. El
diseño debe atraer la atención del usuario, emitir un mensaje y conseguir que el usuario muestre
interés sobre lo que se publica, o se enseña.
El Proceso del Diseño:
El proceso del diseño tiene 7 pasos fundamentales, los cuales nos llevan a crear visualmente
recursos de contenidos de una manera sencilla pero efectiva.
1. Estudiar quién usará la interfaz y para hacer que cosa (estudiar las características de los
usuarios y la tecnología que manejan).
2. Elegir los elementos gráficos (logos, imágenes, botones o íconos, colores, tipo de letra, rótulos,
etc), que representará la imagen e identidad del recurso.
3. Bosquejar un diseño para la portada principal y sus páginas internas, integrando en éste tanto
los elementos gráficos, así como la arquitectura y estructura de información. (editar
correctamente el contenido).
4. Escoja y evalúe las herramientas a utilizar para la construcción gráfica del recurso.
5. Optimizar, mejorar y crear los elementos del diseño (imágenes, íconos, etc.)
6. Crear un prototipo del diseño visual con todos sus elementos, tanto gráficos como textuales.
Organizar la información visualmente en la interfaz o pantalla visual.
7. Evalúe junto al usuario y afine el diseño.
Principios a considerar para el diseño visual:
1. El diseño visual debe ser consistente, uniforme y coherente.
La consistencia en un diseño para web se refiere a que debe existir uniformidad entre el home
pag/inicio y módulos o páginas asociadas. El propósito básico de la consistencia es permitir al
usuario familiarizarse con el recurso, navegar sin perderse y visualizar el contexto global del
contenido. También involucra la utilización de simbología estándar como por ejemplo: ir al
home se representa con una casita, o flecha para adelante o hacia atrás, o un ícono de carta
para correo electrónico. Debe existir una compatibilidad visual o aproximación temática,
coherente y uniforme, es decir, agrupar elementos por homogeneidad y unidad temática, según
el mapa de contenido organizado.
2. Debe tener claridad visual, es decir debe ser simple.
La claridad involucra la forma simple en que se presentan los elementos, destacar títulos y
rótulos según su relevancia, elementos entendibles, es decir, libres de complicaciones, pocos
elementos, etc.
3. Debe considerar la distribución adecuada de elementos tomando en consideración el
equilibrio entre éstos.
Los elementos del diseño deben estar distribuidos considerando el centro visual o de gravedad
(centro de la pantalla), balance entre dos fuerzas (izquierda y derecha) (arriba y abajo).
4. Debe ser flexible para mantenerse en el tiempo.
La flexibilidad del diseño busca poder cambiar, renovar y mejorar el diseño sin complicaciones
técnicas o lógicas, es decir agregar un ícono más, agregar una opción adicional a un menú,
mejorar rápidamente un gráfico. Para esto ha de considerarse la tecnología que se utiliza y
prestar atención a lo complejo del diseño.
Formatos y resolución de las imágenes para web.
FORMATOS recomendados:
jpg: representa hasta 16 millones de colores, utiliza el modo RGB color (Rojo, Verde y Azul)
gif: 256 colores, utiliza el modo indexed color de la paleta de colores.
psd: formato para guardar las imágenes de photoshop en capas de construcción.
RESOLUCIÓN:
72 dpi/ppp: es resolución baja, ideal para web.
150 dpi/ppp: es resolución media.
300 dpi/ppp: resolución excelente, buena para impresión.
El Color
El color y su poderoso efecto en el diseño son vitales para comunicar el mensaje. El color tiene
que atraer la atención, emitir un mensaje específico acerca del recurso que se proyecta y
motivar al usuario a la lectura y revisión del recurso. Existe una especie de sistema de
codificación para atraer el uso del usuario y que va muy ligado al sistema global de marketing.
Los colores influyen sobre nuestro estado de ánimo, por ejemplo el verde transmite
tranquilidad y naturalidad y se considera ideal para la relajación. Los rojos y púrpuras pueden
exitar y hacer que se sienta más cálido; los azules son frescos y a veces hasta frios. El azul
representa el cielo y el mar, el amarillo, la naturaleza y el crecimiento; el marrón fuerte, la
tierra: el rojo la sangre. Los diseñadores gráficos han de considerar estas asociaciones para
su trabajo.
El rojo: captador natural de la atención. El rojo vivo para avisos, mensajes de
urgencia e importancia, notas o sugerencias. Los rojos rosas vivos son
adecuados para la el usuario juvenil e infantil. Los rojos oscuros ayudan a que
un diseño consiga un aspecto de alta calidad y lujo.
El azul: sugiere serenidad y pureza: se utiliza en resaltar vida al aire libre, los
azules oscuros denotan sobriedad; los azules pálidos se usan para dar un aire
de seguridad y confianza en lo que se expone.
El amarillo: atrae la atención y es amable. Se utiliza para representar luz,
alegría y energía. Hace un contraste excelente con el negro, ideal para
representar peligro o advertencia para que se preste mucha atención. El
diseñador deberá utilizarlo con cuidado.
El verde: limpieza fría y refrescante. Los verdes pueden ser vivos y naturales
o artificiales (mezclado con mucho azul) puede servir para denotar aspectos
de tecnología. Es el color para los contenidos ecológicos y afines. El verde con
un alto contenido de azul, ideal para los contenidos relacionados con deportes;
los verdes oliva o amarronados para camuflajes. Los verdes oscuros con tonos
oscuros de rojo dan aspectos de festividad y navidad. Los verdes son buenos
colores vivos de fondo para tipografía en negativo. El efecto sedante de los
verdes claros son usados para contenidos relacionados con salud.
El naranja: vibrante y vital, atrae siempre la mirada. Es un color cálido,
vibrante, vivo y claro. Simbolizan salud y vitalidad. Se complementa muy bien
con el azul. Los tonos oscuros de naranjados son naturales, campestres y
otoñales y puede dar al diseño un aspecto cálido provocando que el contenido
sea leído. Es un color que no se puede usar fácilmente en tipografía, pero
sirve de fondo para poner colores oscuros y opacos y hacerlos más vibrantes.
Los naranja vivos se pueden usar muy fácil en el los usuarios juveniles.
El marrón: vida sana y honestidad. Es un color cálido y tranquilizante y ofrece
una gran variedad de opciones desde los marrones cobrizos hasta los colores
café y beige. Se le asocia con la madera, la tierra, el otoño y el campo. El
diseñador puede crear un aire natural a su trabajo de forma directa utilizando
colores marrones , color trigos, colores de materiales naturales, la cerámica o
el ladrillo. El azul puede añadir riqueza al diseño con marrón. Ofrece
posibilidades para crear nostalgia o imágenes históricas y como color de
contenido histórico o viejo, está asociado a los temas de historia. El marrón
tiene connotaciones intelectuales, que sugieren librerías, estanterías de
madera o fina cualidades de instrumentos de madera.
Consideraciones:
1. Seguir las convenciones de diseño tales como íconos estándares (correo, inicio u home), ya que
los usuarios están acostumbrados a estos.
2. El diseño visual de un recurso de contenido no debe variar tan a menudo, ya que el usuario crea
familiaridad con los elementos gráficos.
3. La estructura de información debe ser estable y flexible, es decir considerar la facilidad para
mantenimiento, quitar o agregar íconos, tópicos, etc.
4. No recargar con imágenes o gráficos innecesarios a menos que se quiera explica el contendido.
5. Utilizar letras y elementos gráficos según su estilo y tipo de contenido. Las letras pueden ser
romanas, clásica, sencillas o modernas.
6. El texto debe ser legible, con tipografía adecuada (color y tamaño).
7. El texto o contenido debe llevar un mensaje comunicacional y debe ser significativo para el
usuario.
8. Ubicar información más estática a la izquierda (tópicos principales del contenido) y más
cambiante o dinámica a la derecha (noticia, anuncios, explicaciones adiconales, etc.)
9. Escanear imágenes en media o máxima resolución y luego optimizar según sea el caso.
10. No permita que el fondo compita con el contenido, es decir, que no debe sobresalir más que el
contenido y rótulos importantes.
11. Ponga íconos para los temas más importantes de la página. Utilice pequeñas imágenes con
balance de tonos y contrastes.
11. Utilizar jpg para imágenes con degradado y gif para imágenes con colores planos (bandera,
logos, etc.)
Comentario: Un área del problema de diseño de interfaz es el uso de colores y de fondos. Los
fondos oscuros con letras claras muchas veces son difíciles de leer si el contenido es muy largo.
Otras veces ambos colores son tonos que no conviven entre sí y hacen que el texto se vea
confuso. Evite utilizar marcas de agua, hacen muy confuso el sitio.
Ejemplo de Diseño de Interfaz
Uno de los Tutoriales de la Biblioteca de la Universidad de Cornell: "Digitalización de imágenes" ,
http://www.library.cornell.edu/preservation/tutorial-spanish/contents.html , este ejemplo muestra una
composición armoniosa entre los componentes de las páginas, y tipografía permite la lectura
correcta y los tonos no alteran la visión. Nos permite navegar sin problemas: usando menú textual
para la navegación y elementos como tabla de contenido como alternativa al menú contextual y
navegación de desplazamiento (adelante-atrás). Nos proporciona pistas de manera gráfica. A
pesar de que su estructura de primer nivel es amplia, siempre mantiene al usuario visualmente en
el contexto. Su diseño es flexible pues las opciones de navegación son verticales (tanto del
contexto como de cada uno de los módulos) de tal manera que se pueden adicionar tópicos a
dicho contenido sin alterar la estructura del sitio. Observe el diseño visual para el sistema de
navegación que se utiliza, es claro y siempre está a la vista del usuario.
___________________________________________________
Referencias sobre el tema:
María Jesús Lamarca Lapuente, Hipertexto: El nuevo concepto de documento en la cultura de
la imagen
http://www.hipertexto.info/documentos/interfaz.htm
Consultadas en julio/2013
Monografías.com, Color, arquitectura y estados de ánimo
http://www.monografias.com/trabajos5/colarq/colarq.shtml
Consultadas en julio/2013
Lois Rosenfeld & Peter Morville, Information Architecture: for the World Wide Web
O`Reilly, 2007.
Material preparado por: María Raquel de Guizado, MSc.
