Diferencias básicas entre el diseño gráfico y el diseño web

El diseño web

El diseño y creación de páginas web reúne todas aquellas actividades necesarias para la creación de una identidad online para un individuo o empresa. En este proceso participan diseñadores gráficos, programadores, maquetadores, especialistas en experiencia de usuario, SEOs entre otros profesionales, implica la realización de tareas como la arquitectura de información, estructura del sitio web, interfaz de usuario, la ergonomía de navegación, selección de colores, tipografías, imágenes y fotografías buscando una adecuada experiencia del usuario o usuarios finales del sitio y que sobre todo este espacio cumpla con los objetivos de negocio. 

Tres diferencias básicas entre el diseño gráfico y el diseño web

A pesar de que en el diseño encontramos ciertas pauta comunes, también hay que saber que a la hora de trabajar, los distintos tipos de diseño (gráfico, web…) presentan muchas diferencias. En esta entrada analizaremos estos aspectos en el diseño web comparándolos con el diseño gráfico en lo referente al color, las unidades de medida o el tamaño y la resolución principalmente.

El color en diseño gráfico y web

Y empezando por el color… en diseño gráfico para impresión, la gama de colores con la que se trabaja es la Cuatricromía (CMYK). La suma de estos colores da el negro y la ausencia de todos ellos el blanco. En el diseño web se trabaja con los colores Luz: hablamos de la gama RGB, compuesta por tres colores primarios que son Rojo (R), Verde(G) y Azul(B). En una composición de color RGB, cada color primario tiene un valor entre 0 y 255. A través de la gama RGB obtenemos más de 16 millones de colores. Su suma, es decir, todos ellos a 255, da el blanco y el valor 0 en los tres da el negro.
También contamos en web con los colores hexadecimales. Se trata de un método universal y extendido en el mundo web para definir colores RGB. Un color hexadecimal es un código precedido por una almohadilla y formado por 3 parejas de dígitos que indican el valor correspondiente a cada color primario. En los números hexadecimales, se emplean las primeras letras del abecedario a parte de los números, para poder representar valores como el 255 en sólo 2 dígitos.




Espacio tonal en el cono de color



Las unidades de medida en diseño gráfico y web

Respecto a las unidades de medida: en diseño gráfico estamos acostumbrados a trabajar con un tamaño concreto, en centímetros o milímetros. En el diseño web, la unidad de medida es el píxel. De esta manera un banner animado puede medir 300x250px, por ejemplo.
Por otro lado, el tamaño es una cuestión relativa. Existen diferentes tamaños, resoluciones de pantallas y dispositivos, y al principio no podemos controlar al 100% como verán nuestra web todos los usuarios. Cuando diseñamos una web para una pantalla intermedia actual entre todos los usuarios, se toma como referencia 1024 x 768 píxeles. Pero en un navegador web pueden aparecer elementos como por ejemplo el scroll, que restan espacio visual dentro de la pantalla. Finalmente, nos quedamos con una anchura intermedia de diseño de 960px, que normalmente se alinea al centro, siendo el tamaño del full HD 1920×1080 píxeles.


La resolución en diseño gráfico y web

Por último, en lo que a la resolución se refiere usamos 300ppp (pixeles por pulgada) para la impresión óptima de imágenes en el diseño gráfico para apreciar una imagen de calidad sobre papel. Pero en pantalla, con sólo 72ppp podemos apreciar una imagen de calidad. Por lo tanto y generalizando podemos decir que la resolución para web es esta, aunque sería discutible, ya que el concepto de resolución afecta únicamente a la hora de imprimir una imagen.



resolución en diferentes modelos

Comentarios

Publicar un comentario

Entradas populares de este blog

Tipos de listas en HTML

Imagen
Listas HTML  (no ordenadas) y (ordenadas) El lenguaje HTML, ya sea la versión HTML4 o la versión HTML5, posee tres tipos de listas. Las listas no ordenadas , las listas ordenadas y las listas de descripción. ( la veremos más adelante) Cada una de estas listas se crea con una etiqueta específica de HTML: <ul> para la lista no ordenada, <ol> para la lista ordenada   Los elementos de las listas se definen de la siguiente forma. Para la lista no ordenada y la lista ordenada se emplea el elemento <li>. Ul es el acrónimo de unordered list , lista no ordenada. En una lista no ordenada, el orden de aparición de los elementos no es importante. Cada elemento de la lista se define con <li> , que es el acrónimo de list item. Los elementos de la lista se indican con símbolos, como círculos, cuadrados o rombos. En el siguiente ejemplo, vemos el código HTML que produce como resultado la lista no ordenada que figura a continuación       El estilo de u...
Leer más

Enlaces, hipervínculos e imágenes

Imagen
Enlaces, links, hipervínculos Definición y Uso La etiqueta <a> define un hipervínculo, que se utiliza para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del vínculo. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado es subrayada y púrpura Un vínculo activo es subrayada y rojo Enlaces hipervínculos HTML  enlaces HTML son hipervínculos. Puede hacer clic en un enlace y saltar a otro documento. Al mover el ratón sobre un enlace, el puntero del ratón se convertirá en una pequeña mano. Nota:  Un enlace no tiene que ser un texto.  Puede ser una imagen o cualquier otro elemento HTML. video Vínculo a un link externo <a> Vínculo a una imágen  <img src> Abrir un enlace en una nueva ventana del navegador  ...
Leer más

Tablas en HTML

Imagen
Creación de Tablas Desde sus primeras versiones, HTML incluyó el soporte para crear tablas de datos en las páginas web. Además de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo. Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación de documentos: Las tablas de HTML puede contener elementos simples, agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos. A pesar de que las tablas HTML son fáciles de comprender y utilizar, son uno de los elementos más polémicos de HTML. El problema de las tablas es que no siempre se utilizan adecuadamente. Aunque parezca obvio, las tablas se deben utilizar para mostrar información tabular. Hasta hace unos años, las tablas también se utilizaban para definir la estructura de las páginas web. La cabecera de la página era una fila de una gran tabl...
Leer más