Es difícil imaginar a un diseñador web en todo el mundo que no conozca Awwwards. Como residente desde hace mucho tiempo de este vibrante lugar creativo, el equipo de tubo también tuvo la oportunidad de colaborar con Awwwards en uno de sus proyectos específicos hace algún tiempo. Presentamos otro ejemplo de diseño, esta vez con un regreso al proceso creativo para un sitio web reconocido por los mejores diseñadores en Awwwards en 2020.
Awwwards es reconocido mundialmente como un lugar que reúne a diseñadores y desarrolladores para compartir y fomentar la creatividad y la innovación. La plataforma se autodenomina un lugar de encuentro donde los profesionales del diseño digital de todo el mundo encuentran inspiración, comparten conocimientos y experiencias, interactúan y comparten críticas constructivas y respetuosas. Por lo tanto, de año en año se convierten en una plataforma donde se muestran cientos de diseños web diferentes, demostrando soluciones en la intersección de usabilidad y belleza, lógica sólida e impresionantes efectos sorprendentes, grandes plataformas web con amplia funcionalidad y pequeñas páginas de destino enfocadas en un estrecho audiencia. objetivos.
Sobre esta base, cada año el equipo de Awwwards selecciona los mejores sitios web, diseñadores, estudios, agencias, desarrolladores, comercio electrónico y proyectos móviles para el premio. Con este fin, cada año, otro equipo que también es residente de Awwwards crea un sitio web de votación especial “Awwwards of the Year”. En 2020, Awwwards lo hizo con Tubik.
Tradicionalmente, el proceso de diseño comenzaba mucho antes de que se imprimiera la primera línea en papel o apareciera el primer píxel en la pantalla. Todo comenzó con llamadas y discusiones sobre la visión del cliente, así como un estudio exhaustivo de los sitios de los premios anuales de años anteriores. Echa un vistazo a uno de los moodboards que armamos en el proceso.
Así comenzó el proceso de diseño y en una primera etapa fue necesario buscar un concepto común. Aquí hay un vistazo a algunas de las ideas que nuestros diseñadores desarrollaron y probaron, algunas monocromáticas, otras usando colores y degradados, algunas de las cuales jugaron con un contraste de color bastante marcado y otras jugaron con matices.
Después de discutirlos con el equipo de Awwwards, decidimos un concepto basado en un fondo oscuro, una tipografía brillante y audaz pero compleja, así como un patrón básico que unifica todas las páginas y agrega creatividad al proceso de interacción.
Dado que Tubik es bien conocido por sus gráficos vibrantes y la variedad de estilos de ilustración integrados en la marca y el diseño de la interfaz, la búsqueda de antecedentes inicial también tuvo como objetivo sondear esta dirección. Esto resultó en varios conceptos de estilo de ilustración que podrían funcionar de manera efectiva para formar una plantilla aplicable a diferentes formatos de pantalla y necesidades generales de concepto de diseño.
Cada estilo tiene sus propias características y beneficios atractivos. Sin embargo, cuando las probamos como plantilla de fondo en combinación con el resto del diseño web, quedó claro que las plantillas de ilustración no lograban el objetivo estético e interactivo que los diseñadores les propusieron. Además, aunque se veían hermosos y atractivos, aún no brindaban una conexión cercana y clara con los residentes de Awwwards, quienes son demasiado diversos para ser capturados en un solo estilo de ilustración.
Fue el momento en que el proceso de creación de un patrón dio un giro en U y al diseñador se le ocurrió una idea brillante en su simplicidad. Hizo una plantilla a partir de fragmentos extraídos estéticamente de proyectos reales presentados en Awwwards.
Entonces, los nominados participaron en el diseño del sitio web de AOTY 2020. Al abrir el sitio web y ver este collage artístico, los residentes de Awwwards pudieron reconocer los trabajos que enviaron o vieron en la plataforma. Como resultado, las páginas web se han vuelto no solo atractivas y elegantes, sino también profundamente significativas y emocionalmente atractivas.
La página de inicio del sitio web está construida alrededor de un eslogan audaz que comunica el propósito detrás del sitio web. Además, utiliza un efecto especial que imita una antorcha, que captura algunas partes de la imagen de fondo cuando los visitantes mueven el cursor. Esto hace que la página sea interactiva y viva. Otro punto que vale la pena mencionar es la animación de carga, abriendo la página desde un pequeño círculo tomando partes del patrón y convirtiéndose en un botón de votación animado.
A continuación, puede echar un vistazo a la cuadrícula interactiva en capas: a medida que los visitantes se desplazan hacia abajo en la página, descubren partes del patrón de fondo.
Cada página de categoría está personalizada y tiene una imagen de fondo única. Se crea a partir de piezas de sus diseños nominados, celebrando el trabajo de todo el año de los residentes de Awwwards en proyectos que han realizado o inspirado. Nuevamente, la página es interactiva y agrega una sensación de profundidad a través del efecto de seguimiento del cursor. El círculo sobre un fondo claro en el centro muestra el nombre de la categoría e inmediatamente llama la atención mediante el contraste de color.
Otro aspecto que vale la pena mencionar es la interacción del menú, que literalmente juega con las fuentes y utiliza el contraste tipográfico para agregar un atractivo divertido y emocional al diseño del sitio web.
Una nueva característica que distingue a este sitio web de Awwwards anuales de los anteriores es una página elegante y minimalista del Salón de la Fama que muestra a los ganadores anteriores.
Por supuesto, los diseñadores han hecho su tarea al trabajar en una capacidad de respuesta móvil bien pensada para hacer que las páginas web se vean geniales en cualquier dispositivo.
“Tubik ha logrado crear una experiencia digital maravillosa al aprovechar la creatividad con un concepto artístico impresionante, un uso impecable de la tipografía y el espacio, combinado con una hermosa interfaz de usuario y un diseño de movimiento. Tubik lleva al límite las capacidades de los navegadores modernos tanto para computadoras de escritorio como para dispositivos móviles, brindando una experiencia en línea extremadamente confiable y atractiva”. Mencionado por Oscar Pérez, co-fundador de Awwwards, y este parece ser el mejor resumen de esta historia creativa.
Aquí hay otro conjunto de estudios de casos que hablan sobre decisiones de diseño y enfoques de algunos de los proyectos de diseño realizados por el equipo de Tubek.
PharmSense. Identidad y diseño web para tecnologías agrícolas
Bitcoins reales. Creación de ilustraciones para sitios web.
Uplife. Diseño de identidad corporativa para la app Salud
Potestades. Creación de un sitio web con Webflow
Otozen. Diseño de aplicaciones móviles para una conducción segura
Bennet. Identidad y diseño del sitio web de la marca Tea
Pásalo. Diseño de página de destino para la aplicación de entrega.
Lúmenes. Sitio web del Museo de Fotografía de Montaña
Mantas GNO. Branding y diseño web para e-commerce
