Los principios básicos de diseño aplicados a la creación de sitios web
Han sido las innovaciones que han tenido lugar a lo largo de la historia las que han transformado la práctica del diseño gráfico. Cada cambio significativo en la historia del diseño gráfico estuvo relacionado con algún progreso en la tecnología, desde la imprenta de Gutenberg hasta la invención de la litografía.
Pero fue la revolución digital y la llegada de Internet de los años 90 lo que supuso un auténtico desafío para muchos diseñadores gráficos, quienes tenían que aprender sobre ordenadores, software y dispositivos para seguir siendo competitivos en el campo del diseño.
Para ello, los diseñadores comenzaron a aprender nuevas técnicas y lenguajes visuales y el papel del diseñador pasó a ser multidisciplinar. La revolución digital llegó para quedarse y el sector del diseño gráfico ha tenido que avanzar al diseño digital y a la comunicación visual.
En este tema, abordaremos las peculiaridades del diseño aplicado a los sitios web, la evolución, los principios básicos de diseño y la metodología y procesos para el desarrollo.
Internet es una de las innovaciones más importantes desde la revolución industrial. Fue a finales de 1990 cuando Tim Berners-Lee tenía el primer navegador / editor y servidor web (info.cern.ch) en funcionamiento en una computadora NeXT en el CERN, la Organización Europea para la Investigación Nuclear.
El diseño web daba sus primeros pasos de la mano de la emoción provocada por la capacidad de compartir información sin límites. Desde su lanzamiento en 1991 se han creado millones de sitios web. Una auténtica revolución digital en constante y rápido cambio, cambio que aún hoy se sigue dando.
En los primeros tiempos de la World Wide Web, los sitios eran relativamente sencillos. Constaban principalmente de un documento HTML y varias imágenes y botones que se empleaban como barra de navegación en la cabecera (header) o pie (footer) de la página web. Por aquel entonces los diseñadores gráficos se aventuraban a diseñar aquellas páginas sencillas estáticas con programas de maquetación visuales, más conocidos como editor de HTML.
Con el paso de los años las páginas dejaron de ser estáticas y pasaron a ser dinámicas, lo que conllevó una transformación radical en la forma de crear sitios web y en todas sus tecnologías asociadas. Ya era necesario un componente de programación más avanzado detrás (backend) de la parte visual de la web.
Hábitos de navegación
Nuestros hábitos de navegación también han cambiado. En el 2000 consultábamos los sitios web en pequeños ordenadores y ahora llevamos pequeños ordenadores en nuestro bolsillo. Los teléfonos inteligentes se han convertido en nuestra primera opción para navegar por internet lo que implica, a la hora de diseñar, una cantidad ilimitada de tamaños y resoluciones y por ello necesitamos elementos que se adapten según el tamaño de pantalla, el llamado diseño responsive.
Con toda esta evolución se crea un nuevo término: el diseñador gráfico digital y se emplea para describir al profesional que crea diseño y comunicación gráfica para su difusión en soporte y medio digital, o lo que es lo mismo, para su difusión en pantalla. El diseñador gráfico digital incluye la creación de proyectos identidad gráfica y su utilización para su correcta visualización en múltiples pantalla y el diseño de todo tipo de material de marketing digital, como banners, imágenes promocionales para publicación en redes sociales, Landing Page de sitios web, o la parte visual y estética del diseño de una web como la imágenes de cabecera o pie de página, o la estética grafica global de un sitio web o de una APP.
No hay que confundir la tarea del diseñador gráfico digital con la tarea donde desarrollador web front-end o de un diseñador de interfaces y experiencia de usuario (UI/UX User Interface / User experience Designer). La labor de estos últimos, requiere conocimiento de código y lenguaje de programación web y de desarrollo de aplicaciones que, en muchas ocasiones debido al papel multidisciplinar de los diseñadores es posible que tengan conocimiento de código y programación lo que haga de ellos un profesional multidisciplinar.
Principios de Diseño aplicado a creación de sitios web.
El concepto a tener en cuenta para el diseño aplicado a creación sitios web, es la idea conductora, la columna vertebral, del plan de cualquier solución interactiva. Se basa en el contenido, la estrategia, los objetivos y en el brief que debería de determinar las características específicas de los objetivos de un sitio Web.
Hay que tener muy claro que un buen diseño web siempre responde a las necesidades e intención del usuario al interactuar con la web y a la vez la imagen de marca también debe de transmitirse a través del concepto y del diseño visual, debe ser coherente a lo largo de todos los medios como unidad.
Para construir este concepto y diseño visual se tienen que tener en cuanta los principios básicos del diseño aplicado a creación sitios web, que son:
- Equilibrio
Es uno de los principios que podemos considerar más intuitivos ya que lo usamos es nuestros propios movimientos físicos. En términos de diseño, el equilibrio es asegurarse que ningún elemento domine a otro, lo que hace que los otros componentes se reduzcan de manera insignificante a un segundo plano y no sirvan para nada.
Para aplicarlo a una web: Usa una cuadrícula o retícula es una manera fácil de tener las cosas organizadas, especialmente cuando tienes planeado mostrar bastante contenido en una sola página.
- Color y Contraste
El diseñador de una página web debe prestar una atención especial al color. Los contrates entre colores y formas crean emoción y exige la atención del espectador. El contraste es una expresión poderosa en el mundo del arte y el diseño.
Para aplicarlo a una web: destaca elementos a través del color como: títulos, botones (CTA, de llamada a la acción)… Para ello hay que diferenciar el aspecto de unos elementos de otros diferenciando el tipo de letra y el tamaño, agregando más espacio en blanco a su alrededor o usando una forma diferente.
3. Énfasis
Se da este principio cuando un elemento se convierte en el dominante de una composición. A menudo se logra a través del color pero no exclusivamente, hay varios tipos como: énfasis por aislamiento, colocación, escala, estructuras, a través de elementos de dirección… Necesitamos un “punto focal”, que le servirá a tu composición como puerta de acceso a los espectadores.
Para aplicarlo a una web: piensa que no todas las partes de la web son igual de importantes, identifícalas y destaca las necesarias.
4. Ritmo y movimiento
El movimiento siempre nos llama la atención, incluso de la manera más sutil. En el arte abstracto, es el proceso de usar diferentes elementos que crean una sensación de movimiento (como líneas diagonales y curvas y la ilusión de espacio) y hacen que los ojos tomen un paseo alrededor de la composición. En el diseño digital, el proceso es aún más fácil, ya que la tecnología te permite incorporar efectos animados, directamente en tus páginas.
Para aplicarlo a una web: Agrega pequeñas animaciones y movimientos a tu web, como un efecto “parallax” o “bounce” en algunos elementos.
- Repetición
Repetir el mismo elemento una y otra vez crea un patrón que nos gusta ver. Además, la repetición crea consistencia, un factor crucial cuando se trata de dar unidad a tu web.
Para aplicarlo a una web: Se puede crear un ritmo visualmente atractivo mediante la repetición de ciertos elementos de diseño.
- Jerarquía visual
Nuestro cerebro tiende a dar más importancia a los primeros elementos que percibe, y es aquí donde los grandes artistas quieren centrar la atención de los espectadores. Elegir la ubicación de cada elemento según su nivel de importancia es la clave para dominar este principio y tu hermosa composición.
Para aplicarlo a una web: debes de crear las secciones de tu página web de manera que los ojos de los usuarios vean lo que es más importante primero.
- Unidad y armonía
Para encontrar el equilibrio perfecto entre todos los elementos, el diseñador debe asegurarse de que cada elemento tenga un lugar y papel específico en la composición. Nada debe estar fuera de lugar, ser inútil o aleatorio. Conseguimos la armonía cuando conseguimos que todos los elementos trabajen con un destino en común.
Para aplicarlo a una web: debe de haber elementos que están de acuerdo entre si, por ejemplo unidad en las imágenes, botones…
- Escala y proporción
La escala es el tamaño de un elemento o forma vista en relación a otros elementos. La escala se basa en las relaciones proporcionales entre las formas.
¿Cómo conseguimos proporción en nuestros diseños destinados a la web?
- La regla de los impares: Utilizada en el diseño y en la fotografía. Consiste en colocar el objeto de un diseño rodeado de un número par de objetos; de este modo se obtiene un número impar de objetos totales. Los objetos de apoyo proporcionan equilibrio al diseño y ayudan a centrar la atención del usuario en un objeto principal.
- La sección áurea o divina proporción: Una aplicación simple en el diseño web, está en las estructuras o grids, es usar la sección áurea como una regla que mide proporciones en lugar de medidas numéricas. De este modo, las proporciones de la sección áurea pueden aplicarse fácilmente en cualquier diseño. Y sobretodo hoy en día al tener que utilizar el mismo diseño en diferentes dispositivos.
- La sucesión Fibonacci: Es la sucesión numérica en la que cada número es la suma de los dos anteriores. Utilizada también en el arte, la arquitectura y el diseño ya que proporciona una fuente preestablecida de las dimensiones que producen proporciones armoniosas. Difícil de utilizar en el diseño web pero no imposible, podemos usarla por ejemplo en el tamaño de las tipografías: Cada encabezado (h1, h2, h3, h4…) que sea proporcional al anterior dividiendo por el número divino 1,61 por ejemplo, el H1 tiene un tamaño de 45, por tanto el H2 tendría una tamaño de 27 pt.
La implantación de diseño aplicado a creación sitios web y redes sociales conlleva un cambio de mentalidad para los diseñadores gráficos tradicionales, del trabajo en “papel” pasan ahora a un “multi-formato”, un mismo diseño en múltiples soportes pero afortunadamente el diseño gráfico tanto para medios impresos como digitales, siempre será necesario, independientemente del soporte donde se manifieste.
Landa, R. (2011). Diseño Gráfico y publicidad. Madrid: Anaya .
López, A. M. (2020). Diseño Gráfico Digital. Madrid: Anaya.
Tendero, J. E. (2019). Diseño de interfaces web (GRADO SUPERIOR): Gráficos y diseño web. España: Ra-Ma Editorial.
Otros artículos relacionados:
- Dibujar con Realidad Aumentada (AR) o con Realidad Virtual (VR)
- Apps para hacer nuestros dispositivos más inteligentes
Diseño y Usabilidad