Y entonces qué es el diseño Web?

Publicado el 30 / 10 / 2010
En estos tiempos más que nunca se ha hablado mucho de diseño web y del internet, y parece que el avance es tan vertiginoso que la definición de diseño web de hace unos 5 años simplemente ya no resulta suficiente. 25Horas se esfuerza por presentar este artículo no. 100 a todos los diseñadores interesados en la evolución y re-definición del diseño Web.

Primero lo primero: Una introducción…

Desde que la primer página web apareció en el mundo del Internet en 1990, una nueva forma de comunicación daba poco a poco muestras de un potencial de enorme impacto mundial. La World Wide Web fue creada por un grupo de físicos encabezados por Tim Berners-Lee, usando un lenguaje de hipertexto (HTML, creado también por él) para ligar y transferir archivos e información a través de la computadora. Como bien sabemos, este proyecto resultó un éxito y la aplicación de esta tecnología a las computadoras de escritorio para el público en general no se hizo esperar.

El World Wide Web Consortium (W3C) recreó la experiencia de las primeras páginas web con “WorldWideWeb: Proposal for a HyperText Project”. Una comunidad donde se pueden encontrar los primeros documentos de hipertexto desde 1989.

Desde entonces, hemos sido testigos una gran cantidad de tendencias en el diseño de sitios, herramientas, lenguajes y formas de interacción que han cambiado para siempre nuestra manera de relacionarnos. Debido a esto, la concepción del diseño web ha cambiado desde su concepción.

Para definir más claramente esta compleja rama del diseño, es necesario hacer un análisis histórico que permita el re-conocimiento del diseño web hoy en día.

Web 1.0

La versión primigenia de la Web desde la creación del hipertexto continuó su desarrollo a través de hipertexto con básicas opciones de formato y algunos enlaces.  Con la aparición del primer explorador para el público, las primeras páginas web, la información por todas partes y nuevas experiencias de comunicación y consulta estimularon la creación del W3 Organization para regular la Web. Sin embargo, todo esto crecía tan rápido que cuando se generó el soporte para gráficos no hubo un momento para determinar la dirección de lo que podría llamarse diseño web.

¿Qué era el diseño web entonces?

A partir del 95 los sitios web para el público en general nacieron (creo que en su totalidad) sin diseñadores o con algún proceso de desarrollo coherente con el producto creado. Los programadores fueron los encargados de crear sitios web completos con las herramientas básicas de interacción. El propósito de esta primera etapa de desarrollo web, era crear guías simples para que el usuario buscara el contenido que le interesara del sitio. En la Web 1.0 la transferencia de información se da en un solo sentido: de la página Web al usuario, sin posibilidades de retroalimentación.

El programador “diseñaba” una estructuración semántica y jerárquica de los elementos, el usuario los relacionaba y así podía navegar hasta un contenido específico. Esta etapa primera de interacción entre sitio web y usuario educó a una gran generación de internautas y los preparó hacia un posterior avance de las herramientas que se crearían después, e incluso el usuario rechazaría las estructuras de navegación que no siguiesen estos lineamientos.

El estilo gráfico

A esta etapa de Web 1.0 le debemos las expresiones gráficas básicas en la interacción Web-Usuario que marcaron tendencia y se volvieron estándares en la forma en que comprendemos la Web; aunque también le debemos grandes problemas por falta de una regulación que aún son posibles de ver en muchos sitios actuales (lamentablemente):

Hipervínculos

El texto en color azul es reconocido universalmente como el enlace a otra página Web y el texto marcado con color morado como la representación de un enlace al que se accedió previamente. Jakob Nielsen recomendaba firmemente en esta época que los sitios web no deberían salir de esta relación de colores para no confundir al usuario (Aunque después reconoce que este no es un buen color para resaltar el texto importante, sobre todo porque reduce la legibilidad).

Jerarquía de tamaños

Es muy importante incluso en estos tiempos una correcta jerarquización del contenido. En sus inicios fue muy clara la necesidad de crear etiquetas que definieran el tamaño del texto según su importancia jerárquica. Así podemos ver los sitios con títulos, subtítulos, secciones, texto, listas ordenadas y no ordenadas que en conjunto representan una relación de relevancia de contenidos.

Tablas

En el avance del diseño Web se crearon las tablas y las posibilidades de diseño crecieron enormemente al permitir un sitio estructurado en más de una columna, por ejemplo. Era posible una manipulación más directa de los espacios y acomodo de la información. Los sitios Web ya podrían disponer de un menú horizontal o vertical, imágenes al lado de los párrafos,  imágenes usadas como fondo de la página y demás aplicaciones.

Las hojas de Estilo CSS (Cascade Style Sheet)

Aparecieron por primera vez en 1996. Por primera vez se tenía una apartado específico para desarrollar el aspecto gráfico del sitio. Las hojas de estilo se hicieron fundamentales para hacer una diferenciación en la manera de trabajar la web. Esto sin duda benefició y abrió las puertas para la participación y especialización del diseñador.

A principios del nuevo milenio, el avance de los estándares en el diseño a través de las hojas de estilo dio paso a una comunidad de diseñadores enfocados en la creación de experiencias en el usuario a través de la interfaz gráfica del sitio. Proyectos como el CSS Zen Garden permitían demostrar el gran potencial para crear sitios bellamente diseñados usando un mismo contenido con posibilidades infinitas usando sólo CSS.

El diseño Web sin duda seguía ganando reconocimiento y los estudios sobre el impacto del mismo en el usuario profundizaban cada vez más en nuevas formas de enfocar el diseño Web. Su relación con la tipografía y el diseño editorial es evidente, además de involucrar ilustración e identidad. Mientras el mundo se abría paso para dar la bienvenida a la Web 2.0, los estudios de diseño Web para una mejor experiencia de usuario dejaban ver una profesión cada vez más centrada y eficaz.

Web 2.0

Es en la declarada Web 2.0 cuando el usuario comienza a tener una participación más activa en la sociedad digital. Ahora el usuario crea y comparte sus contenidos, selecciona y especifica sus preferencias, comparte fotos, videos y demás. Las herramientas Web se desarrollan más, el manejo de información toma otra perspectiva y Google toma el liderato como el gran negocio del Internet.

“La Web como la conocemos ahora, que carga en una ventana en estáticas pantallas completa esencialmente, es sólo un embrión de la Web que viene. Los primeros destellos de la Web 2.0 están comenzando a aparecer, y estamos comenzando a ver cómo el embrión podría desarrollarse. La Web será entendida no como pantallas completas de texto y gráficos, sino como un mecanismo de transporte, el éter a través de la cual la interactividad ocurre. Eso aparecerá en la pantalla de tu computadora […] en tu set de TV […] en el tablero del carro, tu celular […] videojuegos portátiles […] quizás incluso en tu horno microondas.”
– DiNucci, D. (1999) “Fragmented Future,” Print 53

Ante esta premonitoria visión de lo que significaría la Web 2.0, definitivamente resultó una evolución radical de consumir la información por Internet. La web 2.0 tenía un fin específico al hacer partícipes a los usuarios en la interacción de la Web.

“La lección de la Web 2.0: Hacer uso del autoservicio del cliente y de la gestión de datos algorítmica para llegar a toda la web, a los extremos y no sólo al centro, a ‘la larga cola’ (‘the long tail’) y no sólo a la cabeza.”

¿Qué significa esto?, que en vez de que las páginas Web estáticas sólo muestren información, ahora el usuario podría aportar al sistema algo muy valioso: sus datos. Estas bases de datos conformadas con preferencias específicas como sitios web favoritos, imágenes, vídeos, artículos, etc, permiten más adelante que los sitios interpreten esos datos y generen recomendaciones.

Es necesario mostrar algunos de los sitios que marcaron esta etapa de la retroalimentación y gestión de contenido por parte del usuario y su interacción activa en los sitios Web y con los demás internautas.

Los protagonistas

Google

” Google […] comenzó su vida como una aplicación web nativa, nunca vendida o empaquetada, sino siempre entregada como un servicio, con clientes pagando, directamente o indirectamente, por el uso de ese servicio. Ninguna de las rémoras de la vieja industria del software están presentes. No hay programación de las actualizaciones de las versiones del software, sencillamente mejora continua. Ninguna licencia o venta, sencillamente uso. Ningún tipo de portabilidad a diferentes plataformas de forma que los clientes puedan ejecutar el software en su propio equipo, sencillamente, una colección masiva de PCs escalables en los que corren sistemas operativos de software abierto junto con aplicaciones y utilidades de su propia cosecha que nunca nadie de fuera de la compañía consigue ver.”
-Tim O’Reilly

Youtube

La comunidad de video más importante de la Web resultó un éxito al permitir al público compartir su material, subirlo al sitio y retroalimentarse con los comentarios de los demás usuarios. El sistema de etiquetas (tags) permitió una clasificación gestionada por los mismos internautas. La relación de estos tags generó una lista de recomendaciones desplegadas de forma dinámicas, de tal manera, un usuario podría pasarse horas consumiendo en este espacio.

El impacto de este espacio como bien sabemos, lanzó a la fama (aunque fuese por 5 minutos) a muchas personas o animales por momentos excéntricos, geniales, raros o sorprendentes que se inmortalizaron en vídeo. Esto demuestra el gran poder de un medio de difusión que se formó gracias a los usuarios que comparten sus contenidos.

Del.icio.us

Este sitio fue uno de los pioneros de los marcadores (bookmarking) y su éxito se debe al conferirle el poder de decisión sobre los contenidos que el usuario quiera  seguir. Una persona puede agregar páginas a sus favoritos y en del.icio.us observar todos sus sitios y mantenerse al día en el momento de actualizar información. Estos datos hacen uso de tags para hacer más accesibles los enlaces, con la posibilidad de compartir la información con la comunidad de usuarios.

Flickr

Una de las herramientas por excelencia para publicar y compartir fotos. En Flickr, la interacción entre usuarios e imágenes a formado grandes galerías, se han descubierto talentos artísticos y ,por supuesto, hemos descubierto más del mundo en esta poderosa comunidad. Organizado por tags, con una interfaz sencilla y un diseño simple y efectivo, flickr es el sitio más popular para compartir imágenes.

Wikipedia

¿Quién de nosotros no utilizó alguna vez Wikipedia para sacarnos de algún apuro al momento de buscar información específica? La enciclopedia del pueblo para el pueblo. Wikipedia fue el primer gran sitio de contenido libre con posibilidades de edición. Cualquiera puede agregar o crea una nueva página para un término que necesite información después de pasar por un filtro para comprobar la escritura del artículo. El sistema de relación de enlaces de una página a otra crea inmensas ramificaciones de información, con etiquetas específicas que incluyen prácticamente cualquier palabra conocida por el hombre. Sin duda, un éxito de la Web 2.0.

Así se crearon páginas con información realmente extensa aunque, sin embargo, siempre ha sido considerado como una fuente de información no muy fiable dado que casi cualquiera puede escribir y compartir información. No obstante, la comunidad de Wikipedia sigue creciendo.

Blogger

Uno de los que lanzaron el concepto de blog para las masas. Las personas necesitan y quieren ser escuchadas, y Blogger les dio el espacio y las herramientas para que los usuarios se expresaran. Con una navegación intuitiva y sencilla, la gente tiene las facilidades de compartir cualquier tipo de información. El fenómeno generó nuevos distribuidores de información, que a diferencia del mundo corporativo de las noticias, provenían de personas comunes y corrientes que expresaban su opinión.

Facebook

El impacto que causó Facebook como un punto fundamental de una conexión más íntima entre usuarios que las demás comunidades en Internet fue uno de los grandes pasos que se dieron en las nuevas formas de relación social. Siendo una combinación de herramientas vistas anteriormente en otros sitios, Facebook se volvió una red de comunicación e intercambio de información en tiempo real en una escala masiva.

Las bases de datos que se han creado en Facebook tienen la particularidad de poseer información que ningún otro sitio había generado antes. El usuario se siente realmente libre de expresar todo lo que quiere, ya que considera que el espacio es suyo, lo apropia y lo edita, comparte su sentir con el mundo periódicamente: una frase, un comentario, una breve descripción de lo que hace en algún momento del día. Facebook es el sitio de referencia imprescindible en la comunidad de Internet.

¿Qué es el diseño Web en estos momentos?

Quizás en este punto no he hablado mucho de diseño, porque sin duda un gran cambio que dio la Web 2.0 en las formas de diseño y desarrollo web fue la participación activa del usuario, el avance del Internet como medio social.

Ya no sólo se trata de diseñar estructuras para desarrollar el contenido de manera eficaz y atractiva para el usuario, más allá de eso, el diseño Web se debe concentrar en la manera en que el internauta viva una experiencia total de navegación, en el desarrollo de las formas en que el usuario se relaciona con la interfaz y cómo se volverá partícipe en ese espacio.

Las tendencias

La frase de “menos es más” se vuelve una constante en el desarrollo y diseño Web. Los sitios se caracterizan por una estructura limpia y con información concreta, las guías al usuario se vuelven más claras, los sistemas de navegación son simples, y por sobre todas las cosas, se desarrolla una experiencia completa que cautive al usuario mientras navega. Con el uso de herramientas dinámicas se suavizan transiciones de página a página, se optimizan los tiempos de carga y se busca envolver al usuario en un ambiente amigable.

A continuación les presento una galería de muy buenos ejemplos de Web 2.0

Web 3.0

Es el año 2010 y los especialistas han denominado Web 3.0 para una nueva etapa en la manera de consumir y desarrollar la Web. Para explicar un poco el cambio y las diferencias entre Web 2.0 y Web 3.0, les muestro esta gráfica y este video que resultan muy útiles para la comprensión de este nuevo movimiento:

La llegada de las aplicaciones

Los dispositivos móviles en la actualidad ofrecen la posibilidad de conectarse a Internet y acceder a la información. Por su naturaleza, la adaptación del diseño Web “tradicional” a medios móviles se traduce en desarrollo de aplicaciones específicas que destacan la simpleza con que se accede a la información.

La expansión de las aplicaciones y su gran utilidad para la comunicación de los usuarios han llamado la atención de expertos en desarrollo Web, ya que sin duda se está viviendo una nueva etapa donde la página Web está siendo reemplazada poco a poco. Cabe destacar un artículo que publicó la revista Wired, donde declara la muerte de la Web como la conocemos. No hay que alarmarse por semejante declaración, sino que es cierto que la evolución del consumo de la Web va abriendo sus puertas a nuevas tecnologías.

Aún queda mucho camino por recorrer y seguramente el término Web 3.0 se hará más presente conforme el Internet empape nuestras vidas por todos los medios posibles.

Y a todo esto… ¿Qué es el diseño Web?

Después de un recorrido de veinte años en el nacimiento y desarrollo del diseño web como una disciplina del diseño, y ante el imparable avance tecnológico, una definición de diseño Web, quizás podría solo ser válida para esta época. La respuesta que más me intrigó por esa disposición a la transformación conforme al paso del tiempo fue la de Zeldman del blog “A List Apart”:

El diseño web es la creación de entornos digitales que facilitan y fomentan la actividad humana; reflejan o se adaptan a las voces individuales y el contenido, y cambian con gracia en el tiempo pero siempre manteniendo su identidad.

El punto de este artículo no es el de mostrar las tendencias de diseño al paso de los años, sino la forma en que la página Web se comunica e interactúa con el usuario. En el proceso de diseño es y tiene que ser más importante la planeación de un sistema eficaz de navegación e interacción para desplegar contenido que la aplicación de algún efecto popular.

Según el sitio Smashing Magazine, se pueden plantear los siguientes principios para un diseño Web efectivo:

  • No hagas pensar a los usuarios
  • No desperdicies la paciencia de los usuarios
  • Administrar para enfocar la atención de los usuarios
  • Luchar para tener exposición
  • Haz uso de una escritura efectiva
  • Lucha por la simpleza
  • No tengas miedo del espacio en blanco
  • Comunícate efectivamente con un “lenguaje visible”
  • Las convenciones son nuestras amigas
  • Prueba al principio y prueba seguido

Como bien mencioné, el diseño web no se trata de estilos gráficos, sino de una experiencia de navegación e interacción. El diseñador web debe prepararse para el salto multiplataforma, adaptarse y ampliar sus conocimientos a las nuevas herramientas que hacen más eficaz la experiencia. Es necesario salirnos de métodos convencionales de “diseñar Web” y centrarnos en un contenido relevante, un concepto bien encauzado, una esquematización de contenidos y una estructuración coherente en la cual el usuario pueda sentirse cómodo.

El diseño web avanza, y hay que tratar de aguantarle el paso.

Espero que hayan disfrutado este viaje en el post no. 100 de 25horas. Este proyecto ha sido muy importante para mí y a pesar de llevar 4 meses, me ha traído muchas sorpresas muy agradables. Me da mucho gusto que haya gente interesada en leer estos artículos de un apasionado del diseño. Este camino aun tiene mucho trecho, y será un gusto recorrerlo con ustedes.

Ahora sí, es mi momento de descansar!

Referencias y mayor información:
Alertbox- Jakob Nielsen
The Web is dead – Wired
A web history – Webdesign.about.com
The Best of Web 2.0 –  Digital trends
10 Principles of effective web design – Smashing Magazine
Understanding Web Design – A List Apart
The future of web standards – Techradar.com
Qué es Web 2.0. Patrones del diseño y modelos del negocio para la siguiente generación del software – Sociedad de la Información


Escrito por

Te puede interesar

  • Valeria

    Muy buen artículo, me sirvió mucho!! Gracias.

  • http://designcenter.com.mx Ing. Luis Rojas

    Impresionante recopilación. Informacion extemadamente util para realmente saber los origenes de lo que diario nos da de comer. Increible darnos cuenta que la web siempre ha estado en mejora continua, asi que tengamos la esperanza que siga siempre así.

  • Yasser

    Le echaste ganas en este artículo, muy bueno!