Internet cuenta con más de 1.5 billones de páginas web, según datos de InternetLiveStats.com. Sin embargo, menos de 200 millones permanecen activas y funcionales, y menos aún cuentan con un diseño que reúna unos mínimos estándares de calidad. En este vasto universo de píxels y códigos, existen una minoría de sitios webs que brillan por su carácter innovador e inconformista.

Apple, Cisco, Nokia, Gillette, Cartier y otras grandes marcas poseen sitios webs de primerísimo nivel, pero ¿encabezan la lista de las mejores, de las más rompedoras? La respuesta es no, porque entre las páginas web más destacadas por su diseño figuran nombres como Helias Oils, Simply Chocolate, Trippeo, Mahabis o Equator Coffees. A pesar de ser marcas prácticamente desconocidas, sus espacios web constituyen una fuente de inspiración para los amantes del diseño web.

Top 7 webs destacadas por su diseño que te inspirarán

Gran parte de esta selección ha sido elaborada en base a las referencias de Awwwards.com, portal que recopila y galardona a sitios web de más que cien países, organizando además ciclos de conferencias y eventos relacionados con diseño web. ¿Qué páginas se encuentran, pues, en el Olimpo del diseño web?

Simply Chocolate (tienda online)

Captura de la página web de Simply Chocolate.

La tienda Simply Chocolate presume de tener uno de los mejores diseños de páginas web. Este productor danés de chocolatinas elabora sus productos artesanalmente con ingredientes naturales, y su espacio web subraya ese ‘toque’ casero mostrando sus chocolatinas sobre fondos con hojas, frutos sectos o rodajas de frutas. Su diseño web puede definirse como secuencial (un toque de scrolling hace pasar las secciones verticales a modo de diapositivas), usando los mismos colores de fondo que se corresponden con sus chocolatinas: marrón, azul, verde, etc.

Un vistazo a sus ‘entrañas’. La web de Simply Chocolate hace uso de JavaScripts como ReactJS y PixiJS. Su CMS es WordPress y funciona con WooCommerce, empleando tecnología jQuery, WebGL, Apache y Google Font API, entre otros. Destaca el uso del parallax y de pequeñas animaciones, dos nuevas tendencias de diseño web de creciente aceptación.

Trippeo (aplicación)

Captura de la página web de Trippeo.

La web de Trippeo no puede faltar en este listado de sitios web destacados por su diseño. Esta aplicación de viaje de negocios permite gestionar los gastos, buscar vuelos y hoteles asequibles o conservar las facturas y tickets, útiles para justificar los gastos en un meeting empresarial, por ejemplo. Su diseño web comparte con el anterior una estructura similar a una diapositivas; el scrolling funciona como un botón que navega entre las secciones, con textos animados, fondos con cinemáticas y microanimaciones en iconos y otros elementos.

Un vistazo a sus ‘entrañas’. La página web de Trippeo se sustenta en el uso de CSS3 y HTML5, sorprendiendo por el uso de abundantes cinemáticas en bucle (de 3-4 segundos), combinadas con tipografías vistosas y una cifra animada que se mantiene en el centro de la pantalla. La presencia de un menú burger y de dos botones con atributos fixed (sign up now/sign in) concentra la atención del internauta en los elementos antedichos.

Helias Oils (tienda online)

Captura de la página web de Helias Olis.

La empresa Helias Oils posee una de las páginas web destacadas por su diseño más rompedoras de los últimos años. En este ecommerce, dedicado a la fabricación y la venta de aceites esenciales y remedios homeopáticos con ingredientes 100% naturales, encontramos (una vez más) la estructura secuencial, similar unas diapositivas: un toque de scrolling es suficiente para navegar entre sus páginas, diseñadas con un fondo en colores blanco y rosa, blanco y verde, etc., con ondulaciones similares a un líquido. Sorprende su estética minimalista con la presencia de transiciones con efecto líquido entre páginas o la combinación de menú burger con un menú reducido de 4 opciones.

Un vistazo a sus ‘entrañas’. La web de Helias Oils funciona con Shopify, empleando CSS3 y HTML5, WebGL para los elementos 3D, GSAP para las animaciones y JavaScripts como Tween.js.

Species in Pieces (galería interactiva)

Captura de la página web de In Pieces.

Desarrollado por Bryan James, la web Species in Pieces funciona como una galería de arte poco ortodoxa, con 30 obras dedicadas a 30 especies en peligro de extinción (el macaco de cola de león, la vaquita marina, etc.). Se define como «una exposición interactiva basada en CSS», y en palabras de su creador «desde que escuché sobre los polígonos CSS, me sorprendió un poco la falta de furor en torno a la tecnología, por quería crear algo que no sólo funcionara como un proyecto en sí mismo, sino que también llevara esta línea de código infrautilizada al límite de sus posibilidades». No en vano fue nombrada como la mejor página web de Holanda en 2015.

Un vistazo a sus ‘entrañas’. El uso de CSS constituye el pilar de Species in Pieces, pero además este sitio, que carece de CMS, utiliza el hack HTML5 Shiv (necesario para exprimir las funciones de HTML5), jQuery y Apache.

Orano (empresa de servicios)

Captura de la página web de Orano.

«La innovación es parte de nuestro ADN». El slogan de Orano, empresa francesa dedicada a la extracción de uranio, la logística nuclear y el desmantelamiento de plantas nucleares, puede sentirse con especial intensidad en su diseño web. Realmente navegar por su site es asistir a una experiencia innovadora, casi futurista. Su estructura opera como un diseño storytelling, en el que el scrolling pasa de una sección a otra, de forma similar a unas diapositivas.

Un vistazo a sus ‘entrañas’. Orano posee una de las webs destacadas por su diseño gracias al uso de parallax y a su estructura de transiciones, con elementos 3D, animaciones 2D, diseño UI (User Interface) y uso de JavaScripts como Three.js, entre otros elementos de interés.

Mahabis (tienda online)

Captura de la página web de Mahabis.

La tienda Mahabis es una marca especializada en la fabricación de babuchas o zapatillas de estar en casa de alta calidad. Fue premiada en 2015 con el Best Innovation in Footwear de los galardones Drapers Footwear Awards. Su diseño web contiene algunos convencionalismos (slider en el encabezado) combinados con técnicas innovadoras, como las microanimaciones en productos o un desglose animado de los materiales de sus babuchas.

Un vistazo a sus ‘entrañas’. Sin grandes alardes, la web Mahabis consigue sorprender con un diseño efectista, en el mejor sentido de la palabra, al lograr su objetivo fundamental: llamar la atención sobre sus innovadoras babuchas. A pesar de la animación central (el deslosen de materiales de su producto), su velocidad de carga es rápida gracias al uso del CDN de Cloudflare, que permite agilizar la carga de elementos. Sus animaciones corren a cargo de JavaScripts como Core-js y jQuery. Por otra parte, Mahabis garantiza la seguridad de sus usuarios a través del uso de certificados LetsEncrypt y GlobalSign. En este sentido, quizá te interese conocer más acerca del certificado SSL para tiendas online.

Equator Coffees (Tienda online)

Captura de la página web de Equators Coffee.

Y si todavía te preguntas cuáles son las mejores páginas web, debes saber que el site de Equator Coffees tiene poco que envidiar al de sus competidores. «El café puede tostarse mejor, prepararse mejor y, lo más importante, puede obtenerse de una manera que mejore la vida», explican los fundadores de este ecommerce, creado en 1995. Su diseño web destaca por una acertada combinación de tipografías y colores y por la originalidad de la presentación de sus productos en la home (abajo del slider inicial): es un simple efecto de parallax, pero eficaz, acompañado de animaciones en los títulos y otros indicadores de calidad, que no lastran los tiempos de carga, sin embargo.

Un vistazo a sus ‘entrañas’. Además de las citadas animaciones, la web Equator Coffees dispone de interacciones muy interesantes, utilizando abundante código CSS3 y archivos SVG. Su CMS es Shopify, y su diseño UI (User interface) emplea HTML5, plugins como Font Awesome y Typography, el CND Cloudflare y diversas versiones de jQuery.

En vista de lo anterior, el diseño web puede alcanzar el status de arte si se deja en buenas manos. Desde Altamira Web subrayamos la importancia de confiar esta labor a profesionales, en lugar a recurrir a editores de dudosa calidad o conformarse con plantillas estandarizadas. Y si quieres analizar por ti mismo estas y otras webs, te recomendamos la herramienta BuiltWith, un recurso útil para echar un vistazo a las ‘entrañas’ de estas maravillas de internet.