Lanzar sitio web
Qode Interactive Catalog es una compilación seleccionada de temas creativos de WordPress diseñados por Qode Interactive con el objetivo de mostrar un enfoque original del diseño web contemporáneo de una manera optimizada. Los temas recopilados comparten características estéticas distintas inspiradas en diversas formas de arte, todas enmarcadas dentro del contexto moderno y minimalista del Catálogo.
Premios:
Sitio del día - Awwwards
Excelencia móvil - Awwwards
Premio al desarrollador - Awwwards
Sitio web del día - CSSDA
Premio UI / UX / INN - CSSDA
Webpicks - Artes de la comunicación
El enfoque:
Desde el principio, estaba claro que queríamos que el Catálogo interactivo de Qode fuera un escaparate de todas las direcciones innovadoras y audaces que podía tomar un tema de WordPress. Una exposición, por así decirlo, de cuán creativo puede ser un tema. El hecho de que ya tuviéramos un extenso catálogo de temas sin duda fue una ventaja en sí mismo. Pero también trajo consigo uno de los mayores desafíos que enfrentamos mientras trabajábamos en este proyecto.
El primer dilema surgió durante el proceso de selección de temas. En las primeras etapas, la cantidad de temas en los que decidimos enfocarnos era bastante superior a 20. Pero al mirar más de cerca esta colección, nos dimos cuenta de que, quizás, era demasiado. Demasiados de los temas competían entre sí en términos de diseño y funcionalidad. Fue entonces cuando se hizo evidente que necesitábamos recortar el número de temas mostrados y mantener el énfasis solo en los aspectos de diseño que queríamos destacar.
Esto llevó a las decisiones fundamentales en términos del diseño del Catálogo: nos centraríamos en un estilo monocromático y atenuado, y la tipografía sería el eje que uniera todo en un todo compacto y unificado.
El principal rasgo subyacente de todos los temas del Catálogo es su sutil dependencia de elementos inspirados o tomados de diferentes formas de arte visual, ya sea clásico o moderno. Esto nos llevó a encontrar la forma más apropiada de crear presentaciones de temas individuales, y los diseños fluidos, de desplazamiento horizontal y ricos en animaciones del Catálogo nos llegaron de forma bastante natural.
El diseño:
La página de navegación principal del Catálogo, o efectivamente la lista de temas, pasó por varias revisiones estilísticas. Comenzó como un control deslizante de carrusel, luego se transformó en un control deslizante interactivo con grandes vistas previas de temas que aparecían cuando se seleccionaba un tema, y después de un poco más de refinamiento y ajustes, se convirtió en una lista interactiva minimalista que muestra elementos seleccionados cuidadosamente de cada uno de sus temas. en vuelo estacionario.
A lo largo de este proceso de descubrimiento, el concepto general detrás de Qode Interactive Catalog se mantuvo fiel a nuestra visión original. La versión final de la página de inicio del Catálogo es predominantemente tipográfica, centrada en la familia de fuentes Heebo, simple pero distinta. Al combinar tamaños de fuente drásticamente grandes y detalles animados (por ejemplo, nombres de temas grandes con descripciones significativamente más pequeñas que se desplazan debajo de ellos), imbuimos la página con algo de diversión adicional y creamos una interfaz que atraería a los espectadores.
Este mismo concepto se trasladó más tarde a las presentaciones de temas individuales, que también se basan en una tipografía fuerte, con detalles dinámicos y textos cinéticos que redondean el diseño y forman el tejido conectivo entre encabezados prominentes y elementos gráficos. También nos aseguramos de dejar suficiente espacio para que cada diseñador individual resaltara el carácter único de sus respectivos temas mediante la elección de paletas de colores y elementos artísticos adicionales.
Todos los temas exhibidos tienen sus propias personalidades e identidades visuales únicas. Sin embargo, se mantienen firmes como un todo dentro del Catálogo. Se mantienen estrechamente unidos por su disposición colectiva, artísticamente matizada, que se manifiesta en los muchos elementos inspirados en obras de numerosas esferas del arte.
A veces, estos elementos son simples sugerencias, leves guiños a un movimiento artístico o al cuerpo de trabajo de un artista. En otros casos, se enfatizan de manera abierta e intencional. Estas influencias van desde las antiguas obras de arte clásico hasta los paisajes distópicos de Katsuhiro Otomo y Philip K. Dick, así como la vitalidad del arte moderno del collage y el expresionismo ondulante en las obras de Egon Schiele.
Por supuesto, también queríamos dar a estos elementos un punto de referencia contemporáneo, por lo que pensamos que funcionarían perfectamente junto con diseños limpios y espaciosos, cargados de tendencias minimalistas modernas. Es esta combinación de diseño moderno y arte, esta sinergia distintiva la que representa la esencia de lo que pretendíamos con el catálogo interactivo de Qode.
La tecnología:
Nuestro enfoque general se centró en establecer una sensación suave impulsada por la animación que acompañaría la estética moderna del proyecto. En ese sentido, el núcleo de la experiencia de navegación del sitio son las transiciones AJAX que utilizan BarbaJS. Teniendo en cuenta la naturaleza gráfica del catálogo y su dependencia de imágenes y videos para la mayoría del contenido, la introducción de la carga diferida fue primordial. Para mantenerse verdaderamente fiel a esta idea de alta velocidad y ajustar la presentación en línea con la tendencia creciente de los sitios web estáticos, el enfoque de desarrollo de QI Catalog estuvo a la altura: la mayoría del código se ejecuta en el momento de la compilación, en lugar del tiempo de ejecución renderizar plantillas de Nunjucks con sus datos JSON en páginas HTML estáticas y compilar módulos ES6 en JavaScript vanilla listo para el navegador.
Los diseños individuales, o las páginas temáticas individuales, tenían que adaptarse a los estilos únicos de los temas mostrados. La implementación de un diseño de desplazamiento horizontal puede representar un desafío por derecho propio, y se puede abordar al menos de varias maneras diferentes. Aquí, tenemos la barra de desplazamiento suave haciendo todo el trabajo pesado, ya que proporciona varios métodos y devoluciones de llamada útiles para las interacciones de contenido. Cada sección del diseño único tiene su propio estilo de comportamiento interactivo, y en su mayoría se basan en el desplazamiento. Precargar el contenido, activar videos a medida que entran y salir de la ventana gráfica y utilizar requestAnimationFrame para la mayoría de los efectos de sesgo y traducción son solo algunos conceptos que usamos para ayudar a reducir los costos de pintura y mantenerse lo más cerca posible de esa marca de 60 fps .
Información de la compañía:
Qode Interactive es un equipo de más de 100 profesionales dedicados cuyo objetivo es establecer nuevos estándares en el negocio de temas y plantillas de WordPress. Encabezado por su equipo de más de 30 expertos en UI y UX, diseñadores gráficos, artistas visuales e ilustradores, Qode ofrece solo los productos más bellos que llevan su ambiente auténtico.
Lanzar sitio web