¡Otro mes, otra colección de sitios web fascinantes! Aquí hay algunos que nos han llamado la atención últimamente.
GitHub Octoverse 2016
Además de lanzar un montón de actualizaciones interesantes, GitHub publicó recientemente su desglose anual de lo que ha estado sucediendo en la comunidad. Se llama GitHub Octoverse:
Es gracioso pensar que el Octoverso solía ser pequeñas publicaciones de blog y ahora han florecido en hermosos sitios web independientes llenos hasta el borde con infografías y gráficos.
Me gusta especialmente la elección del texto grande y el uso de la tipografía Karla.
Intercomunicador
Intercom, la plataforma de comunicación con el cliente, lanzó recientemente un sitio web rediseñado repleto de ilustraciones y hermosas imágenes:
Vale la pena explorar cada página del sitio web para ver la forma en que describen su producto, su equipo y sus objetivos. Un elenco de personajes animales aporta una sensación de ligereza y extravagancia a lo que podría ser una experiencia sencilla y aburrida.
Océano digital
Es posible que ya esté familiarizado con Digital Ocean, la empresa de computación en la nube, y que también hayan lanzado un sitio web rediseñado.
El equipo de diseño escribió sobre los objetivos del rediseño que incluían priorizar la accesibilidad y la arquitectura CSS:
El antiguo CSS de digitalocean.com tenía miles de reglas, declaraciones y colores únicos. El tamaño del archivo sin gzip llegó a la friolera de 306 kB.
Para el rediseño, implementamos un nuevo sistema de diseño llamado Float basado en componentes reutilizables y clases de servicios públicos para simplificar y optimizar nuestros estilos. Con el marco Float, que esperamos abrir pronto como código fuente, pudimos reducir el tamaño del archivo CSS a casi una cuarta parte de su tamaño original: ¡solo 80kB!
Raya
Stripe también recibió un hermoso rediseño hace un tiempo:
Una cosa interesante que noté fue cómo se carga la fuente Camphor en el head:
<link rel="preload" href="https://css-tricks.com/fonts/camphor/4b0f2143.woff2" as="font" type="font/woff2" crossorigin>Este es uno de los muchos trucos útiles para cargar una fuente web súper rápido, con precarga. No es un enfoque ideal, y ciertamente no debería precargar varias fuentes porque eso afectará el rendimiento, pero en este caso, dado que Stripe no está cargando muchos pesos, este es un enfoque sólido.
De todos modos, hay una pequeña interfaz de usuario que me llamó la atención aquí: los estados de desplazamiento en la navegación principal. Hay un retraso al pasar el cursor sobre cada elemento que se siente en ese maravilloso “punto óptimo” de animación que es tan difícil de acertar:
NYT: Cómo meditar
The New York Times publicó un artículo sobre cómo meditar. La animación y la ilustración de fondo son particularmente hermosas en pantallas grandes:
Términos de tipo
Los términos de tipografía ayudan a los diseñadores a aprender más sobre los elementos específicos de una forma de letra y tipo de letra:
Nuevamente, las animaciones sutiles juegan un papel en el movimiento a través de la interfaz que realmente marca la diferencia:
inspirador en línea
inspiring.online, en palabras de su creador Tim Holman, es …
… Un blog para aquellos que buscan aliento e inspiración en el mundo de la tecnología, pero también es un experimento. Todo el blog es de código abierto, por lo que cualquiera puede enviar enmiendas a las publicaciones, corregir errores ortográficos, agregar enlaces de discusión y crear nuevas publicaciones también. ¡Idealmente, es una excelente área de inicio para que alguien ingrese al mundo del código abierto!
¡Y eso es todo hasta la próxima! Si tiene más sitios web que le parezcan interesantes, ¡asegúrese de hacérnoslo saber en los comentarios!