16 asombrosos ejemplos de HTML

Página 1 de 2: Página 1

Algunos de estos sitios utilizan las últimas tecnologías para ampliar los límites de lo que es posible en la web; otros utilizan principios de diseño tradicionales para crear sitios hermosos y utilizables. Ya sea que esté usando HTML simple o buceando en WebGL y CSS 3D, aquí encontrará algo que lo inspire.

También tenemos una brillante selección de inspiradores ejemplos de CSS para que lo explores.

01. Appy Fizz

Este diseño mezcla elementos superplanos y de efecto 3D

Este diseño mezcla elementos superplanos y de efecto 3D

Appy Fizz es una bebida espumosa que se describe a sí misma como 'el champán de las bebidas de frutas'. El nuevo sitio web de Appy Fizz fue parte de un proyecto de cambio de marca más extenso de la firma de diseño con sede en Nueva York Sagmeister y Walsh . Como explican los creadores en su caso de estudio, la identidad 'visualiza burbujas carbonatadas a través de un lenguaje gráfico dinámico de esferas y círculos 3D'.

El diseño es una mezcla interesante de elementos tridimensionales superplanos e implícitos. El lenguaje circular escrito en negrita, blanco y negro me recuerda el trabajo de Yayoi Kusama, el artista de renombre mundial asociado con el arte pop, el minimalismo y los lunares.

El arte y su espacio en las industrias comerciales es un tema con el que juegan Sagmeister & Walsh a lo largo de su trabajo, y es interesante ver cómo esta combinación se traduce en la web. Aquí hay muchas animaciones y elementos de lienzo interactivos que hablan el mismo lenguaje visual: una simulación de carbonatación incluso sigue al mouse del usuario mientras se mueve por el sitio web.

02. Hecho por pocos

Este sitio de conferencias está lleno de sorpresas ocultas

Este sitio de conferencias está lleno de sorpresas ocultas

Made by Few es una conferencia web anual organizada por Pocos , una agencia de diseño y desarrollo en Arkansas. Sally Nixon Las ilustraciones brillantes y detalladas aparecen en la cabecera y en las descripciones de los oradores, y toma un momento darse cuenta de que hay repetición en la multitud, porque es muy sutil.

A medida que explora el sitio, hay más sorpresas. 'En Few, amamos los accidentes agradables y fomentamos la exploración', dice Arlton Lowry, cofundador de Few y organizador de la conferencia. Manteniéndose cerca de su filosofía de exploración, hay gemas ocultas esparcidas por todo el sitio (no las regalaremos todas, ¡pero intente usar el Código Konami!).

Estos elementos divertidos le dan al sitio mucha personalidad que Arlton atribuye directamente a la cultura de la agencia. 'Creemos que cuando se proporciona a las personas un entorno abierto y divertido, no se sabe qué resultará de ello'.

03. Allbirds

Una fotografía de producto sólida le da impacto a este sitio

Una fotografía de producto sólida le da impacto a este sitio

Allbirds es una marca de calzado deportivo de la tierra de 29,221,344 ovejas. Comenzó cuando el cofundador Tim Brown observó las increíbles cualidades de la lana merino y se preguntó por qué nunca antes se había utilizado en el calzado.

El sitio web, que se ha creado con Shopify, combina fotografías de estilo de vida con ilustraciones. El resultado es una experiencia deliciosa que no solo cuenta la historia detrás de los Allbirds, sino que también le da una idea del producto en sí.

'Está diseñado para mostrar la increíble atención al detalle y el pensamiento detrás del diseño de nuestro producto', explica Brown sobre el razonamiento detrás del sitio. 'Invertimos mucho en fotografía, y en el fotógrafo de kiwis Henry Hargreaves, radicado en Nueva York, para darle vida al sitio y articular nuestra misión de hacer mejores zapatos de una mejor manera'.

Tanto Brown como el Asta roja el equipo habla de su extrema dedicación a la UX del sitio y cómo se inclinaron hacia los detalles que tan a menudo se pasan por alto. La sección mundana de preguntas frecuentes cobra vida con GIF animados y la ilustración se utiliza en todo el sitio como motivo de narración inesperado.

04. Karim Rashid

Ejemplos HTML: Karim Rashid

El nuevo sitio de Karim Rashid es genial

El diseñador Karim Rashid es tan prolífico como celebrado. Con más de 3.000 diseños en producción y trabajo en 20 colecciones permanentes en todo el mundo, tal vez no sea sorprendente que su propio sitio web haya pasado a un segundo plano durante los últimos 10 años. Hasta que encargó Anton & Irene , eso es.

Con su marca registrada de interacciones atractivas, tipografía emotiva y diseños verdaderamente independientes del dispositivo, el dúo ha entregado un sitio que invita a una exploración vigorosa. Que era, por supuesto, el punto: 'Nuestro objetivo principal era mostrar la gran cantidad de productos y proyectos de una manera visualmente atractiva', dice la pareja en su blog.

Esta plétora de productos también presentó un desafío. ¿Cómo se pueden entregar más de 5000 imágenes de diferentes formas y tamaños en un entorno receptivo? La solución: una reinvención de los diseños convencionales y un enfoque de baja fidelidad para la estructuración para proporcionar una cuadrícula precisa y flexible combinada con una tipografía atrevida (pero discreta).

Quizás lo más impresionante del nuevo sitio de Rashid son las transiciones fluidas entre las ventanas gráficas. 'Siempre diseñamos todas las pantallas simultáneamente ... En el momento en que tenemos una idea para un componente o un diseño, la probamos en todas las pantallas y vemos si tiene sentido en todos los ámbitos'.

05. Histografia

Ejemplos de HTML: histografía

Una cronología interactiva desde el Big Bang hasta la actualidad.

Histografía: diseñador y desarrollador israelí Matan Stauber El proyecto de último año en la Academia de Artes y Diseño de Bezalel es una línea de tiempo interactiva que abarca no menos de 14 mil millones de años, desde el Big Bang hasta la actualidad. Extendiéndose literalmente a lo largo de toda la historia del universo conocido, es una infografía inmensa e interactiva que desafía nuestras ideas preconcebidas sobre cómo comunicar temas complejos.

Cubriendo temas que van desde la literatura y la música hasta asesinatos, inventos y religión, la línea de tiempo de Histography nos invita a explorar eventos de nuestro rico pasado, cada uno extraído dinámicamente de Wikipedia y representado en la pantalla como un pequeño punto negro. Hay dos modos: la vista horizontal, de izquierda a derecha, que permite al usuario ubicarse en un período de tiempo específico; o la máquina del tiempo en forma de hélice que presenta una lista seleccionada de eventos clave.

Stauber dice que siempre le ha fascinado la idea de mostrar que la historia se desarrolla a lo largo del tiempo: “Las líneas de tiempo son la forma más popular de visualizar la historia y, sin embargo, sentí que siempre fueron muy limitadas. Desde el comienzo de este proyecto supe que quería crear una línea de tiempo que no se limitara a un año, una década o un período. Quería una línea de tiempo que pudiera contener toda la historia '.

06. En la red

Ejemplos de HTML: en la cuadrícula

Una guía internacional de vecindarios, curada por diseñadores.

Aunque es estresante para muchos, mudarse de oficina también puede ser una gran fuente de inspiración. Cuando Hyperakt reubicado en Gowanus, Brooklyn, la emoción del equipo al descubrir los tesoros ocultos de su nuevo entorno llevó a la encarnación de On the Grid: una guía internacional de vecindarios, curada por diseñadores.

El sitio es minimalista pero impresionable, y fue ' diseñado para ser muy estructurado, pero divertido y dinámico, al igual que el contenido del sitio '. La estética sensata evita la típica trampa de la imagen del héroe y hace un gran uso de la ventana gráfica incluso en tamaños extremos.

Y luego está la atención al detalle. Desde el logo animado hasta las 100 (y contando) ilustraciones de ciudades únicas y animaciones simples, On the Grid claramente no es solo otro blog de estilo de vida.

En su blog, Hyperakt explica cómo quería crear 'un recurso confiable que capture la verdadera esencia de los lugares que amamos, a través de hermosas fotografías, descripciones sinceras y curaciones basadas en el diseño'. Con más curadores que se unen cada mes, On the Grid pronto llegará a un vecindario cercano a usted.

07. Producciones LS

Ejemplos de HTML: LS Productions

El sitio web de LS Productions fue producido por la agencia de Edimburgo Whitespace

LS Productions amplió recientemente sus horizontes desde la obtención de excelentes ubicaciones (bajo el nombre de Location Scotland) para convertirse en lo que ahora es la compañía de producción de servicios de imágenes fijas y movimiento más grande del Reino Unido. Su marca y sitio web fueron producidos por la agencia de Edimburgo. Espacio en blanco .

El diseñador senior Mike Bryant dice que la prioridad era dejar que el trabajo de la empresa hablara: 'Tienen una cartera tan increíble, que va desde imágenes fijas hasta movimiento, que nuestra tarea principal era crear una estructura que complementara la tipografía mínima con la imagen'. Este enfoque es inmediatamente evidente en la página de inicio, que encapsula la amplia oferta de la empresa con una mezcla adecuada de tipografía animada y video.

Los principales desafíos técnicos, mantener los tiempos de carga al mínimo y administrar diferentes cultivos para las imágenes de alta calidad, se superaron reemplazando las imágenes de mayor resolución cuando fuera necesario y utilizando JavaScript para administrar dinámicamente la altura y las relaciones de aspecto de las imágenes en varios tamaños de pantalla .

El resultado final, dice Bryant, es un 'sitio despojado que utiliza paneles modulares, tipografía limpia y una paleta de colores mínima para actuar como un telón de fondo sutil para el hermoso trabajo'.

08. señor

Ejemplos HTML: Lordz

El video ayuda a capturar el corazón de esta academia de baile

'El juego es más antiguo que la cultura, porque la cultura ... siempre presupone la sociedad humana, y los animales no han esperado a que el hombre les enseñe a jugar'. Así comienza Homo Ludens de Johan Huizinga, donde el autor analiza el impacto del juego en la sociedad.

El elemento del juego es uno que Lordz, una academia de baile con sede en Suiza, se toma en serio. Para Lordz, la danza no es solo movimiento; es una forma de arte, un medio lúdico de expresión cultural. Encargado de diseñar un sitio para la academia, Eidenbenz / Zürcher utilizó este espíritu para orientar su dirección artística.

'Queríamos crear algo que confrontara la experiencia digital con el corazón mismo de Homo Ludens', explica el director de arte y socio Daniel Zürcher. 'Una forma lúdica de conocer la práctica diaria de la danza; el movimiento, los sentimientos, etc. Para lograr esto, utilizamos la tecnología más nueva en filmación, postproducción y, por supuesto, programación '.

El resultado es bastante sorprendente; un sitio único e inspirador reconocible que realmente captura el corazón de la organización a través del uso de videos, una hazaña poco común en estos días.

Página siguiente: 8 ejemplos más impresionantes de HTML

  • 1
  • 2

Página actual: Página 1

Siguiente página Página 2