Ciencias económicas y empresariales

Artículo de investigación  

 

Análisis de tendencias de diseño gráfico aplicadas en diseño web

 

Analysis of graphic design trends applied in web design

 

Análise de tendências de design gráfico aplicadas em web design

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

*Recibido: 29 de abril de 2020 *Aceptado: 30 de mayo de 2020 * Publicado: 25 de junio de 2020

 

I.          Máster en Animación, Docente e Investigador en la Universidad de Guayaquil, Guayaquil, Ecuador.

II.       Máster en Diseño y Gestión de Marcas, Licenciado en Diseño Gráfico,  Docente en la Facultad de Ciencias Humanas y Educación, Universidad Técnica de Cotopaxi, Latacunga, Ecuador.

III.     Ingeniero en Diseño Gráfico, Tecnología en Informática Mención Análisis de Sistemas, Instituto Tecnológico Superior “San Gabriel” Riobamba, Ecuador.

IV.    Máster en Creación Multimedia y Serious Games, Ingeniera en Diseño Gráfico, Doctoranda en la Universitat Politècnica de València, Valencia, España.

 

Resumen

El presente artículo presenta un análisis respecto a la importancia del diseño gráfico y sus elementos aplicados al diseño web. Mediante una exploración documental y revisión de casos explora las características de sitios web, tales como las de Microsoft y Apple para conocer el estilo que los diseñadores han aplicado. Se concluye que la importancia básica de los elementos del diseño de manera eficaz permite diferenciar a una compañía de otra y sobre todo construir la identidad de la empresa.

Palabras claves: Diseño web; diseño gráfico; tendencias.

 

Abstract

This article presents an analysis regarding the importance of graphic design and its elements applied to web design. Through a documentary scan and case review, explore the characteristics of websites, such as those of Microsoft and Apple, to learn about the style that designers have applied. It is concluded that the basic importance of the design elements in an effective way allows to differentiate one company from another and above all to build the identity of the company.

Keywords: Web design; graphic design; trends.

 

Resumo

Este artigo apresenta uma análise sobre a importância do design gráfico e seus elementos aplicados ao design web. Por meio de uma digitalização de documentos e revisão de casos, explore as características dos sites, como os da Microsoft e Apple, para aprender sobre o estilo que os designers aplicaram. Conclui-se que a importância básica dos elementos de design de maneira eficaz permite diferenciar uma empresa de outra e, acima de tudo, construir a identidade da empresa.

Palavras-chave: Web design; desenho gráfico; tendências.

 

 

 

 

Introducción

El diseño gráfico es un campo omnipresente. La forma más simple de describirlo es que es el proceso de creación de cualquier cosa artística; el arte podría ser cualquier cosa, podría ser el diseño de un rascacielos, o tal vez un sistema de metro, o incluso una página web (Comeaux, 2017). El tema general que se discutirá en este ensayo es el diseño gráfico en el desarrollo de páginas web. El desarrollo de la Web es un campo extenso, y requiere el uso de varias herramientas como el texto, las fuentes, las formas, la animación, etc. (Soderstrom et al., 2019).

En el presente documento, se utilizarán diferentes páginas web para describir el uso de varias características formativas distintas del diseño gráfico, junto con algunos documentales de investigación para aclarar el concepto básico del diseño gráfico. Inspeccionaremos cómo ha cambiado el uso de diferentes herramientas como el tipo de fuentes, ajustes de espacio, animaciones y formas, y otras cosas relativas en el transcurso de la última década. El objetivo de este ensayo es entender por qué la evolución es innegable cuando se habla del desarrollo de la web, cómo y por qué razones algunas páginas web tomaron la Internet por sorpresa.

 

Desarrollo

Durante los últimos diez años, la industria del diseño gráfico ha experimentado varios cambios. A principios de la década, las animaciones mínimas y los diseños antiguos eran la "gran cosa"; esquemas de colores neutros pero sólidos destinados a eliminar el caótico estilo detallado del diseño gráfico. La introducción de las tabletas, junto con el aumento de la popularidad de los teléfonos inteligentes entre la gente, hizo que fuera esencial un nuevo desarrollo (Engel, 2018). En esta época, los diseñadores gráficos tenían varias características formativas con las que trabajar, pero quizás la palabra correcta no es "varias", sino "demasiadas".

 La primera década de los nuevos milenios fue testigo de los diseñadores tratando de acumular tantos elementos en un espacio que no cabía; salpicaduras de tinta, texturas, y cómo puede alguien olvidar los colores del arco iris volando por todas partes. Lo único que hacían estos elementos era que creaban confusión y desorden; hacían que todo fuera difícil de leer y tensaban la comunicación. Con el amanecer de una nueva década, los diseñadores gráficos decidieron dar un paso atrás en un mundo sin complicaciones.

El foco se desplazó hacia diseños simplificados; la idea era hacer el proceso de comunicación lo más fácil posible para el usuario. Así, se estandarizó el uso de pocos colores, se eliminaron las combinaciones de colores y fuentes atrevidas. Las páginas web se diseñaron ahora con un enfoque sutil, la tipografía precisa, la estética limpia y ordenada es la nueva norma (Brage, 2019).

Esta introducción de la tipografía ocurrió debido a la falta de fuentes. Hasta el día de hoy, sigue siendo la característica formativa más destacada del diseño gráfico a lo largo de la década. Debemos mencionar "Ariel Sun" y "Adelaide Wang" aquí. Fueron pioneros en el uso de la tipografía y las imágenes para transmitir un mensaje a través de una página web; el sitio web de la boda de Ariel Sun y el trabajo de Adelaide Wang en Humm.ly todavía se consideran algunos de los mejores estudios de caso sobre diseño gráfico (Pavel et al., 2017).

 

Figura 1: Diseño de páginas humm.ly

Fuente: humm.ly

 

Adelaide Wang compartió el trabajo de todo su equipo en su estudio de caso; Es una página completa que describe cómo puede manejar eficazmente todos los procesos importantes de un proyecto que implica diseño gráfico. A medida que comienza el proyecto, el primer objetivo de su equipo es crear algo que defina su estética visual. Luego, el estudio muestra el panel de navegación de Humm.ly junto con la interfaz fácil de usar de la aplicación. El título, junto con todos los subtítulos y el texto dentro de los párrafos, se hicieron con la misma fuente.

Además, el equipo aplicó dos tonos de gris diferentes al fondo del sitio web; Esto creó una ingeniosa distinción entre los pliegues, haciendo que todo fuera más nítido y claro, lo que condujo a un diseño UX brillante (Vora, 2018). Ariel Sun, por otro lado, mostró dos de las páginas más llamativas de su sitio web. Ella usa una estructura de cuadrícula para mostrar fotos de diferentes parejas en el sitio web de su boda.

Además, el sitio web tiene un menú fijo en la parte superior. Estas características formativas colectivamente hicieron que el sitio web fuera más fácil de navegar y resultó en una experiencia de usuario incómoda (Verma y Devi, 2016).

Por otra parte, el documental llamado "Helvetica" en uno de sus capítulos subraya la importancia de la tipografía. Se centra en la percepción visual global, la tipografía y el diseño gráfico. Muestra cómo las grandes corporaciones y otras industrias se aferraron a la fuente después de su introducción. El documental destaca cómo las tipografías y estilos se utilizan en diferentes plataformas electrónicas en el mundo (Chen et al., 2017).

Por otra parte, Jared M. Spool habló largamente en Apart Boston sobre la lógica poco intuitiva detrás de las páginas web. El video de 60 minutos se llama "Las curiosas propiedades de las páginas web intuitivas", donde el Sr. Spool analiza cómo el usuario sabe de inmediato cuándo una página web tiene un diseño impecable; Cada elemento en la página tiene un propósito.

Un estudio de caso de diseño de la página web de la empresa de diseño industrial Din7, salta a la mente. Es un estudio de caso de sus diseñadores, se crearon un lenguaje visual para Din7, que se reproduce en el fondo del estudio, y sus segmentos divididos generan imágenes (Booth, 2017).

El estudio trabajó solo en la experiencia de usuario y la marca de la empresa. Crearon una identidad visual muy fuerte y completamente nueva para la empresa.

No solo crearon una nueva opción de tipografía, sino que también fueron pioneros en una nueva paleta de colores para la empresa. Utilizaron duotonos, doble exposición y pasteles en un diseño plano que incorporaba movimientos, espacios en blanco y características formativas dimensionales (Brage, 2019).

 

Figura 2: Página DIN7

Fuente: https://www.nmore.co/

 

El diseño del sitio web creado por "Brown owl creative" muestra además lo asombroso que es que las herramientas formativas de diseño gráfico puedan ser aplicadas en escenarios que coinciden completamente con las necesidades exactas de una página web y su idea. En su estudio de caso, muestran el sitio web del cliente desde el punto de vista de un ordenador portátil mostrando tres animaciones diferentes que han elaborado para el sitio web del cliente. Han añadido el botón de desplazamiento hacia arriba, hacia abajo y hacia atrás que asegurará que cualquier persona que visite la página pueda comprobar fácilmente los proyectos en los que sus clientes están trabajando o planean trabajar. Las ilustraciones de la página web del estudio de caso propiamente dicho son tan perfectas que empiezan con una imagen tipográfica (GIF), seguida inmediatamente por una tipografía que elabora su trabajo en el mismo proyecto, utilizando amplios espacios en blanco para que el lector pueda tener una comprensión clara (Verma y Devi, 2016).

El estudio termina con un enlace de la propia página web del cliente. El diseño de la página web posee un diseño receptivo que se adaptaba a varios tipos de dispositivos e interfaces de navegadores diferentes. Lo mismo ocurre con las páginas web diseñadas por las grandes empresas de tecnología. Por ejemplo, tanto Microsoft como Apple, utilizan amplios espacios en blanco y tipografía simple. Estas características hacen que sus sitios sean extremadamente fáciles de usar.  Ambos sitios usan animación para anunciar sus productos, y botones de avance y retroceso para crear una atmósfera de navegación fluida. Ambos sitios contienen cajas de texto/búsqueda en la parte superior, para hacer la navegación lo más fácil posible (Park, 2017).

En 2013 y 2014 se produjo una absorción competitiva del mercado por parte de los teléfonos inteligentes. En este mismo momento, las tabletas comenzaron a empujar contra los ordenadores portátiles y las computadoras como principales dispositivos de uso para las personas fuera del dominio de las empresas.

Esto dio lugar a un cambio en la industria del diseño gráfico. Los diseñadores comenzaron a adaptar sus diseños para que se ajustaran a pantallas más pequeñas. Este cambio masivo llevó a que el enfoque cambiara completamente hacia un diseño fácil de usar. Hoy en día, todo el mundo utiliza sobre todo un teléfono inteligente (Pavel et al., 2017). En el mundo actual, con los avances en las herramientas de diseño, los diseñadores podrían hacer más y más. Los patrones de diseño dan una sensación más artística cuando se incorporan figuras geométricas en ellos. Los patrones 3D han sido la comidilla de la ciudad últimamente. La adaptación de la antigravedad, y los efectos de los líquidos también se vio debido a la 3D.

La tecnología también allanó el camino para la "Realidad Aumentada". Analicemos el estudio de caso de Leron Ashkenazi, quien hizo uso de la tecnología 3D para crear un sitio web premiado (Dziobczenski et al., 2018). Leron y su equipo diseñaron el sitio web de la arteria. Leron, en su estudio de caso, hace uso de; textos explicativos, el modelo 3D del diseño acompañado de texto, y videos cortos para describir el proceso de ingeniería gráfica del sitio web. El estudio de caso exhibe el uso del modelo 3D que se convirtió en parte del sitio web final. El estudio incluye una imagen que muestra el sitio web en tres dispositivos diferentes (Bollini, 2017).

Cada imagen de la página web tiene un texto explicativo encima. Te dice; qué persona fue responsable de qué características formativas; el sitio también incluye una página diseñada de 404-errores. La tecnología 3D ha dejado en el polvo todo lo que vino antes. Le dio a las formas geométricas abstractas y a la tecnología plana la profundidad y la perspectiva que les faltaba (Doehling, 2019). Los diseñadores mezclaron Gradient con colores mínimos y duotonos para crear tablas de lookup de colores contrastantes en modelos 3-D. La tecnología 3D también lleva a una revisión masiva en el departamento de tipografía, dando a varias fuentes un nuevo estilo y vigor. El 3D mezclado con el 2D permitió a los diseñadores gráficos dar a los objetos una sensación de movimiento, preparando el camino para una mayor flexibilidad en el campo (Bodrunova y Yakunin, 2017).

Todo esto, muestra cómo un diseñador podría lograr el único objetivo de cualquier diseñador; cómo mezclar el diseño visual con la arquitectura de la información, la interfaz de usuario y otras características formativas para desarrollar una página web que sea cómoda para el usuario.

Con el paso del tiempo se han implementado diferentes formas de diseño gráfico. A veces, se han creado páginas para seguir una tendencia. Es evidente que con; la mejora e introducción de tecnología más reciente, el rápido movimiento del tiempo y una revisión de los valores, tanto a nivel cultural como empresarial, los diseñadores tienen que innovar en las formas de utilizar las características formativas y aplicarlas en los casos en que encajen perfectamente como un rompecabezas (Gong, 2016). Las páginas web han pasado de los colores brillantes del arco iris al neón, a lo que se siente bien al leerlas. 

El mundo pasó de un simple estilo de diseño vintage, a un diseño plano, a la Bauhaus, a figuras trigonométricas diagonales, de vuelta a lo plano y a los diseños 3D que tenemos hoy en día. El diseño gráfico y/o el desarrollo de la web son industrias exigentes. Las páginas web que se construyen sorprendentemente bien en el pasado parecen andrajosas y anticuadas. Por lo tanto, los diseñadores gráficos necesitan "re-desarrollar" incluso el sitio web bien hecho con el tiempo. Esto les permite el espacio para utilizar características y estilos avanzados para actualizar las páginas web de manera eficiente. Además, esto debe hacerse teniendo en cuenta la compatibilidad con los nuevos dispositivos y software de navegación (Butscher et al., 2018).

 

Conclusiones

Hace unos años, todo el mundo pensaba que el diseño gráfico para el desarrollo de páginas web se haría a medida que la tecnología evolucionara hasta un nivel en el que la interfaz holográfica se convertiría en la norma. Sin embargo, aquí estamos, a pesar de todos los avances, confiando en el diseño gráfico y la implicación de sus características más fuertemente que nunca. Se usa para pintar una idea de lo que representas, porque la gente tiene opciones, y el diseño gráfico te inmortaliza de manera positiva o negativa. Describe tu credibilidad y establece un tono a tu alrededor. Es un medio de comunicación muy eficaz, que, utilizado correctamente, es un activo poderoso.

Una persona puede o no darse cuenta, pero cada día se desplaza por una gran variedad de páginas web. Se encuentran con numerosas marcas en Internet, innumerables compañías, diferentes compañías que sirven a un número muy gigantesco y diferente de intereses. El glamoroso empaque, y la marca, y los logotipos están incluidos en la lista que contribuye a la construcción de una identidad. La representación visual diferencia a una compañía de otra; es el camino del mundo. A uno le puede gustar o no, pero dicta, cómo el mundo ve a los demás.

 

 Referencias

1.        Belinskiy, M. (2018). Designing a Web Page for Automotive Business. Theseus.Fi.

2.        Bodrunova, S. S., & Yakunin, A. V. (2017, July). U-index: an eye-tracking-tested checklist on webpage aesthetics for university web spaces in Russia and the USA. In International Conference of Design, User Experience, and Usability (pp. 219-233). Springer, Cham.

3.        Bollini, L. (2017). Beautiful interfaces. From user experience to user interface design. The Design Journal, 20(sup1), S89-S101.

4.        Booth, W. D. (2017). Building Tabbed Navigation using SpryTabbedPanels. WebDesignBooth.

5.        Brage, E. (2019). The rise of Brutalism and Antidesign: And their implications on web design history. Diva Portal.

6.        Butscher, S., Hubenschmid, S., Müller, J., Fuchs, J., & Reiterer, H. (2018, April). Clusters, trends, and outliers: How immersive technologies can facilitate the collaborative analysis of multidimensional data. In Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems (pp. 1-12).

7.        Chen, W., Crandall, D. J., & Su, N. M. (2017, May). Understanding the Aesthetic Evolution of Websites: Towards a Notion of Design Periods. In CHI (pp. 5976-5987).

8.        Comeaux, D. J. (2017). Web design trends in academic libraries—A longitudinal study. Journal of Web Librarianship, 11(1), 1-15.

9.        Doehling, R. M. (2019). Automation in Graphic Design. DigitalComm.

10.    Dziobczenski, P. R. N., Person, O., & Meriläinen, S. (2018). Designing career paths in graphic design: A document analysis of job advertisements for graphic design positions in Finland. The Design Journal, 21(3), 349-370.

11.    Engebretsen, M., Kennedy, H., & Weber, W. (2018). Data visualization in Scandinavian newsrooms: emerging trends in journalistic visualisation practices. Nordicom Review, 39(2).

12.    Engel, V. (2018). ENGEL Graphic Web Designer≡ QUALIFICAT≡ illustrat. Engel-Graphic.

13.    Gong, Y. (2016). New Trends of Small Paper Products Innovative Design——Calendar Design as an Example. International Journal of Literature and Arts, 4(6), 90.

14.    Park, E. (2017). Data as medium: designing and coding interactive visualizations for the web. Communication Design, 5(1-2), 21-34.

15.    Pavel, S., Jiri, V., Michal, S., Jan, J., & Jan, P. (2017). Mobile accessibility expense analysis of the agrarian WWW portal. Agricultural Economics, 63(5), 197-203.

16.    Soderstrom, U., Carlsson, L., & Mejtoft, T. (2019, September). Comparing Millennials View on Minimalism And Maximalism in Web Design. In Proceedings of the 31st European Conference on Cognitive Ergonomics (pp. 92-95).

17.    Verma, M. K., & Devi, K. (2016). Web Content and Design Trends of Indian Institutes of Management (IIMs) Libraries Website: An Analysis. DESIDOC Journal of Library & Information Technology, 36(4).

18.    Vora, P. (2018, August). Creativity in Web Design. In Congress of the International Ergonomics Association (pp. 381-393). Springer, Cham.

 

 

 

 

 

 

 

 

 

 

©2020 por los autores.  Este artículo es de acceso abierto y distribuido según los términos y condiciones de la licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional (CC BY-NC-SA 4.0) (https://creativecommons.org/licenses/by-nc-sa/4.0/).