Viaje por el carril de la memoria: primeros diseños de sitios populares

A lo largo de los años, los sitios web actualizan y cambian su estilo de diseño gradualmente, a veces para mejor, a veces para peor, pero nos guste o no, Internet es un organismo en rápida evolución. Las tendencias de diseño de interfaces siempre están cambiando y puede ver estas ideas reflejadas en diseños de sitios web anteriores.

Para este artículo, quiero presentar una pequeña colección de diseños anteriores en sitios web populares, examinando cómo han cambiado a través de varias iteraciones . Lo que muchos llamarían la era de la “web 2.0” agregó muchas ideas nuevas a la cultura del diseño.

Al mirar hacia el pasado, podemos aprender qué interfaces funcionaron bien y, lo que es más importante, por qué razones. La historia es siempre un maestro poderoso en retrospectiva.

Youtube

Índice

Casi todo el mundo debería conocer YouTube a estas alturas. Es la red de carga de videos más popular y maneja una gran cantidad de datos en comparación con otros sitios web. Se lanzó inicialmente en 2005 y ha crecido muy rápidamente desde entonces.

Puedo recordar el primer par de diseños de YouTube que realmente se destacaron. El sitio web siempre ha tratado de simplificar y facilitar la experiencia de visualización . Su diseño moderno se ha renovado bastante y también se ha conectado a Google para las cuentas de usuario. Pero esta es una empresa que hizo muchos movimientos positivos y creció muy rápidamente.

Octubre de 2006

Esta captura de pantalla se remonta al otoño de 2006, que es poco después del lanzamiento de YouTube. Ha sido retocado desde el diseño inicial en 2005 y se ve mucho mejor. Las pestañas en la parte superior permiten una navegación fácil, mientras que también puede ver videos en la transmisión destacada.

Esta importante actualización fue tan destacada porque hizo que los usuarios se interesaran más en el uso de canales .

>Septiembre>

Un año más tarde, en 2007, hubo una serie de actualizaciones. Alrededor de 2007-2008, YouTube experimentó con muchos widgets rotativos personalizados en la página de inicio . Estos se crearon utilizando Flash, ya que muchos de los reproductores de video también eran reproductores flash nativos. Además, el diseño de la lista de videos es mucho más fácil de hojear a distancia.

En la interfaz de usuario de la lista, tenemos todos los detalles clave, incluido el cargador, la calificación por estrellas, el recuento de vistas y la categoría de video. Las pestañas de encabezado y navegación se han adornado con degradados de color azul brillante . Sin embargo, el diseño todavía se siente mínimo y es muy fácil interactuar con él.

>Abril>

YouTube continuó actualizando su mismo diseño básico con pequeños cambios hasta principios de 2012. Luego, optaron por un enfoque muy diferente al oscurecer el color de fondo y crear una nueva columna para todos los enlaces de categorías .

El diseño actual de YouTube de hoy en día todavía recuerda a este rediseño de 2012. El minimalismo es una característica importante, pero hay más en el diseño real además del espacio en blanco simple.

>6>

.no-js #ref-block-post-17639 .ref-block__thumbnail { background-image: url(“https://assets.hongkiat.com/uploads/thumbs/250×160/youtube-tricks.jpg”); }

6 consejos básicos de YouTube que todos deberían saber

Ya sea que desee ver algunos videos musicales nuevos o encontrar los últimos tutoriales sobre un tema, … Lee mas

Digg

Antes incluso de haber entendido Internet, recuerdo haber navegado por Digg. Ese sitio web tenía muchas buenas noticias y los comentarios a menudo eran divertidos. El fundador Kevin Rose puso a Digg en línea en noviembre de 2004. Desde entonces ha pasado por muchos trastornos como entidad solitaria hasta que se vendió en julio de 2012 a Betaworks.

Febrero de 2006

Uno de los primeros diseños de Digg presentaba un área de navegación de barra superior azul limpia con algunos enlaces típicos de sitios web. Las insignias de votación eran de un tono más tosco de amarillo, bloqueadas y más pequeñas . Además, las categorías y los enlaces relacionados se sentían muy apretados en la barra lateral. Pero así es como suelen empezar los grandes sitios web.

Fue un diseño que funcionó y puso la bola en marcha para que Digg captara una base de usuarios y creciera rápidamente.

>Octubre>

Esta captura de pantalla de octubre de 2008 muestra mi estilo de diseño favorito personal. Esto es lo que muchos usuarios de Digg conocen y aman, ya que tenía muchas funciones únicas de redes sociales. Los envíos de historias ahora incluían miniaturas , las categorías se ubicaban en el encabezado con enlaces desplegables . Además, las insignias de votación recibieron una actualización importante y se ven mucho mejor que el diseño original.

Los perfiles de usuario se adaptaron tremendamente bien e incluso hubo “gritos” para vincular amigos a sus historias favoritas. Digg fue un pionero de las noticias sociales basadas en Internet y, mirando hacia atrás, es brillante ver todo el trabajo que este equipo puso en la empresa.

>Octubre>

Sé que muchos usuarios de Digg encontraron que esta actualización es la más decepcionante. Los miembros de la comunidad ahora solo estaban ganando atención en función de la cantidad de seguidores que tenía su cuenta. El antiguo sistema de usuarios avanzados era mucho mejor considerando que era un círculo compartido de reciprocidad. Pero el lanzamiento de Digg v4 rompió muchos enlaces y funciones antiguos en el sitio web.

El diseño en sí realmente funciona porque es minimalista y elegante. Sin embargo, no creo que haya ayudado a Digg, porque sus diseños más antiguos ya incorporaban características más complejas . Para muchos usuarios, esto se sintió como una degradación en la funcionalidad. Pero para otra startup o comunidad de noticias sociales, este diseño de diseño podría ser un punto de lanzamiento creativo.

>WordPress

>WordPress, la plataforma de blogs de código abierto más utilizada, ha cambiado drásticamente el mundo entero. Se ha cambiado la forma en que escribimos y cómo compartir información. Cualquiera que tenga algo de dinero para un servidor web puede instalar WordPress en menos de una hora.

La empresa matriz Automattic ha estado trabajando diligentemente para incluir nuevas funciones y escalar la empresa cada año que pasa.

Agosto de 2005

El diseño inicial del sitio web fue muy sencillo y no incluía logotipos bonitos. Esta captura de pantalla es de agosto de 2005. Puedo recordar que hubo algunas adaptaciones de este diseño, pero todas fueron muy simples usando fondos blancos y no muchos colores.

WordPress comenzó como un proyecto de código abierto, por lo que siempre fue un esfuerzo inicial. Es curioso ver cuánto ha crecido el sitio web en sí.

>Agosto>

Ahora, esta captura de pantalla fue tomada de agosto de 2008 y refleja un diseño similar al del sitio web actual. Se incluyen todos los enlaces de la pestaña de navegación superior que conduce a temas gratuitos , complementos y la documentación oficial . También me gusta cómo están usando un área de encabezado oscura en contraste con una sección media azul brillante .

Este estilo exacto se ha actualizado con el tiempo, pero el diseño del sitio web oficial de WordPress aún conserva muchas de estas características principales.

>eHow

>El sitio web eHow es un excelente lugar para leer sobre tutoriales comunes. Ha sido sembrado con contenido desde principios de 2000 y actualmente es administrado por Demand Media . Realmente me encanta el diseño actual, ya que refleja el típico sitio web de una revista en línea . Pero el contenido está escrito en un formato de tutorial fácil de seguir y es posible que se sorprenda por su estilo de diseño poco convencional y su contenido escrito de alta calidad.

Agosto de 2004

Simple, limpio, algo pequeño pero fácil de leer. Así era eHow en agosto de 2004. Los listados de categorías eran bastante sencillos y se podían encontrar elementos de navegación relacionados diseñados como pestañas a un lado .

La idea del diseño es muy tosca, pero funciona. eHow ejecutó este diseño durante un par de años hasta que finalmente se actualizó a un concepto más moderno.

>Agosto>

Realmente me gusta lo que hizo el equipo con esta iteración de 2008. El título es fácil de leer y definitivamente llama su atención. Además, el sitio web en realidad parece una publicación tutorial en lugar de una lista de directorio burlonamente brillante.

La página de inicio ahora usa widgets para enumerar las preguntas frecuentes destacadas e ideas similares. El área de la barra lateral utiliza una navegación vertical para contener todas las categorías principales. Esto es bastante común en los sitios web de preguntas frecuentes, incluido Yahoo! Respuestas y bolsa de respuestas. Pero también notará que eHow comenzó a presionar para una mayor interacción del usuario . Los enlaces de las pestañas superiores van a perfiles y páginas de escritura para crear su propio tutorial práctico.

>Delicioso

>Cuando Delicious se lanzó por primera vez en 2003, estaba usando la URL del.icio.us. Muchas aplicaciones web 2.0 seguían esta tendencia de utilizar TLD alternativos para crear una palabra más corta. Pero finalmente el sitio fue adquirido por Yahoo! en 2005 y empezaron a utilizar el delicioso.com más común .

Agosto de 2006

Este diseño inicial de agosto de 2006 muestra un sitio web de marcadores muy simple. Ya era propiedad de Yahoo! y todavía tenían una sección popular en la página principal llamada hotlist . Esto mostrará cuántas personas han marcado cada enlace como favorito y qué etiquetas se están utilizando . Es algo sorprendente ver un formulario de registro en la página de inicio, pero sin duda es una forma de captar más usuarios.

>Agosto>

Aquí estamos 2 años después, en agosto de 2008. El sitio ha cambiado mucho, en mi opinión para mejor. Este fue probablemente el mejor diseño que Delicious haya usado. Recuerdo que la interfaz de la etiqueta era hermosa y realmente fácil . Los enlaces tenían la forma de pequeñas etiquetas y, al hacer clic, se mostraban todas las etiquetas marcadas por otros usuarios.

Definitivamente mi diseño favorito personal y creo que otros servicios de marcadores sociales podrían aprender de esto.

>Flickr

>Al igual que YouTube fue pionero en el futuro de los videos de Internet, Flickr fue pionero entre los servicios de carga de fotos . Permitieron a los usuarios etiquetar secciones en la foto, agregar geolocalizaciones, configurar colecciones de álbumes de fotos y muchas otras funciones útiles. El reciente rediseño de 2013 es un gran cambio con respecto a los diseños anteriores, pero sigue siendo el mismo sitio web maravilloso para compartir fotos que todos conocemos y amamos.

Agosto de 2005

El primer diseño del sitio web de Flickr fue básico, pero funcionó. Es posible que los nuevos usuarios se hayan confundido porque no explica muy bien el propósito de su sitio web. Sin embargo, puede iniciar sesión o registrarse fácilmente para obtener una nueva cuenta, buscar fotos, explorar etiquetas y otras funciones comunes.

El diseño era muy pequeño y encajaba en la pantalla. También puede saber qué tan anticuados están los estilos de los botones con sombras en forma de bloque y bordes duros.

>Agosto>

De cara a agosto de 2008, notará muchos cambios. Los gráficos de los botones se ven mucho más limpios en primer lugar. Además, la tipografía es más grande y más fácil de hojear a distancia. Siento que este es un diseño de sitio web mucho más atractivo. Y este mismo estilo de diseño se mantuvo como página de inicio de Flickr durante mucho tiempo.

Las personas que usaron Flickr hace años pueden recordar que sus botones de entrada de búsqueda basados ​​en HTML aún conservaban el mismo diseño cuadrado. Era relativo al producto original de Flickr y casi se siente como la marca típica de un sitio web. Además, sus estados de desplazamiento de hipervínculo únicos cambiarían todo el fondo del texto del enlace, que todavía era un concepto bastante nuevo en ese momento.

>Pensamientos>

Estos sitios web de ejemplo brindan mucha información sobre el avance de las tendencias de diseño. La Wayback Machine merece permanecer en línea durante décadas, la catalogación de diseños de página web para ser archivados para su examen futuro. Es una maravillosa herramienta de aprendizaje y una pacífica reminiscencia de la nostalgia de Internet .

Los enfoques de diseño web han crecido muy rápidamente desde principios de la década de 2000 y espero que podamos ver un crecimiento aún mayor en los próximos años.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *