18 Abr
Diferencias entre el diseño para impresión y el diseño web
- El diseño impreso está basado en ver, pero el diseño web está basado en hacer.
- La función del diseño tradicional es contar historias; la misión del diseño digital es entablar conversaciones.
- El soporte gráfico se sostiene sobre relaciones espaciales y la experiencia web sobre relaciones temporales.
- El diseño impreso es estático; en cambio, la experiencia de un sitio web se define por la interacción del usuario con el diseño y el contenido. Por ejemplo, un usuario hace clic sobre la navegación o se desplaza hacia abajo (scrolling) para leer una página.
- Un buen diseño impreso tiene que entenderse y ser estético, pero un buen diseño web tiene que entenderse, facilitar la navegación (usabilidad) y ser atractivo. Normalmente se recomienda priorizar la usabilidad, después el contenido y, finalmente, el arte.
- El diseño impreso se visualiza en un espacio limitado, pero el diseño web se tiene que poder visualizar en múltiples espacios; además, el diseño web se puede extender fuera de la pantalla mediante barras de desplazamiento.
- Cuando se diseña para imprimir, el resultado será exactamente igual o muy parecido al original. En cambio, al diseñar una web, debemos considerar factores externos fuera de nuestro control, como diferentes resoluciones de pantalla, distintos navegadores web o la ausencia de tipografías específicas en el sistema del usuario.
- El diseño impreso se visualiza igual en cualquier revista; en cambio, los diferentes navegadores pueden presentar elementos del diseño con sutiles variaciones.
- En el diseño impreso se puede utilizar cualquier tipografía, pero el diseño web normalmente solo muestra las tipografías que el usuario tenga instaladas o que se carguen mediante servicios externos.
- En el diseño impreso se trabaja con pulgadas y centímetros, pero en el diseño web solo se trabaja con píxeles.
- En el diseño impreso se trabaja con altas resoluciones para mantener la calidad, mientras que en el diseño web se trabaja con resoluciones bajas para ahorrar recursos del servidor y permitir una carga rápida.
- En diseño web, debemos optimizar las imágenes y animaciones, bajando la resolución lo máximo posible sin perder calidad significativa. El peso (Kb o Mb) de una página es la suma de todos los documentos que la integran (imágenes, archivos, animaciones).
- En el diseño impreso se trabaja con colores sustractivos (CMYK), mientras que en el diseño web solo se trabaja con colores aditivos (RGB).
- El diseño impreso no se puede modificar tras la impresión. Por el contrario, el diseño web es dinámico: se pueden corregir errores, completar contenido o mantener la información actualizada tras su publicación.
Uso de imágenes en la web
Los formatos de imágenes que cualquier navegador web puede presentar son:
- GIF: Formato que conserva cada píxel de la imagen original, eficiente para gráficos sencillos con pocos colores. Permite entrelazado, animaciones y transparencias del 100%.
- PNG: Similar al GIF pero no permite animaciones. A cambio, permite degradados de transparencias (canal alfa).
- JPG: Comprime mucho más las imágenes. Es excelente para fotografías con muchos colores y texturas, manteniendo la calidad percibida con pesos bajos. No permite transparencias ni animaciones.
Enlaces web
Los enlaces web pueden ser texto o imágenes. El puntero del ratón cambia de flecha a mano al pasar por encima. El diseño debe diferenciar los enlaces mediante colores, subrayados o tipografías distintas. Podemos definir efectos según el evento:
- El enlace no ha sido visitado por el usuario.
- El enlace ha sido visitado anteriormente.
- El puntero pasa por encima (hover), lo que suele iluminar o destacar el enlace.
- El usuario hace clic sobre el enlace.
Arquitectura web
En la web, si la estructura no es sólida e intuitiva, el arte de la página no sirve para nada. Antes del aspecto estético, es indispensable pensar en la arquitectura del sitio. Para ello, debemos:
- Definir las secciones y páginas.
- Escoger los accesos desde la página principal.
- Decidir qué secciones deben destacar.
- Distribuir el contenido entre las páginas.
- Concretar las vías de acceso (múltiples caminos para la misma información).
- Especificar el número de idiomas.
- Realizar un esquema a mano alzada o wireframe para facilitar cambios estructurales.
Estructura de una página web
Una vez definida la «planta de la casa» (sitio web), diseñamos cada «habitación» (página web), decidiendo la ubicación del contenido y los elementos gráficos. Debemos definir:
- El tipo de web (tarjeta de visita, catálogo, anuncio, juego).
- El tipo de información (predominio de imagen o texto).
- El mensaje principal al abrir la página de inicio.
- Los elementos comunes (como el sistema de navegación).
Elementos comunes en el diseño de páginas
- Cabecera (Header): Contiene el Logo y el menú de navegación. Es vital que esté visible (extendido en escritorio o contraído en móviles). Puede incluir un buscador y sliders de imágenes de alta calidad.
- Cuerpo (Main Content): Contiene el contenido principal. Puede estructurarse en columnas. Es común el uso de un Sidebar (barra lateral) para publicidad o redes sociales, especialmente en blogs.
- Pie (Footer): Cierra la página. Contiene información legal, contacto, redes sociales y, a veces, una repetición del menú para mejorar la navegación.
- Página principal (Home): Se concibe como un escaparate de la empresa, presentando los accesos principales a las secciones del sitio.
Uso del color
En el entorno multimedia, trabajamos principalmente con los siguientes modelos:
Modelo HSB (HLS)
Basado en la percepción humana, se describe mediante tres ejes:
- Tono (Hue): El color en sí, medido en grados (0º a 360º) en el círculo cromático.
- Brillo (Brightness): Cantidad de luz (0% negro, 100% blanco).
- Saturación: Pureza del color (0% gris, 100% color puro).
El color hexadecimal
Los colores en HTML se especifican mediante el estándar RGB (Red, Green and Blue). Este estándar indica que una combinación de los tres colores básicos puede dar lugar a cualquier otro color. Los valores que se les da al RGB son valores hexadecimales que van desde el 00 hasta el FF. Al valor del color se le antepone una almohadilla (#).
Los colores en HTML se especifican mediante el estándar RGB (Red, Green and Blue). Este estándar indica que una combinación de los tres colores básicos: rojo, verde y azul puede dar lugar a cualquier otro color. Los valores que se les da al RGB son valores hexadecimales que van desde el 00 hasta el FF. Al valor del color se le antepone una almohadilla. De esta forma un color rojo sería aquel que solo tiene activado el Red, el verde solo la parte del Green y el azul la parte del Blue. Así los colores básicos en HTML serán: Rojo #FF0000, Verde #00FF00 y Azul #0000FF.
Combinaciones de colores y contraste
La combinación de colores es fundamental para el impacto y la sensación que se produce en los usuarios. Podemos distinguir:
- Color primario: El tono básico que define la página (frecuentemente el background).
- Color secundario: Predominante en menor medida, utilizado para resaltar áreas.
- Color destacado: Utilizado para aspectos concretos; debe tener un alto contraste (como un complementario).
El contraste y la accesibilidad
El contraste influye en la claridad y la usabilidad web. Debemos seguir las pautas de accesibilidad al contenido web (W3C) para garantizar que la información sea accesible para personas con discapacidad. El contenido incluye:
- Información natural: texto, imágenes y sonidos.
- Código o marcado: estructura y presentación.
Un buen contraste beneficia especialmente a usuarios con ceguera al color o baja sensibilidad al contraste, quienes tienen dificultades para distinguir bordes y detalles. El diseño es inútil si los usuarios no pueden leer el contenido.
Deja un comentario