Sebastián Vivarelli

La web de papel

Apuntes sobre la relación entre el diseño, el papel y lo digital.

«El proyecto de interfaces para programas de computación constituye un nuevo campo del diseño. Un área híbrida, donde los límites entre diseño gráfico e industrial se diluyen».
Gui Bonsiepe, «Del objeto a la interfase».1

En el inicio fueron los libros. Algunos de ellos, tanto por forma como por contenido, adelantaron la lógica de internet. Hansel y Gretel (1812), famoso cuento de los hermanos Grimm, traza una conexión con la web cuando Hansel marca un camino —dejando trozos de pan— para recordar la ruta de regreso; hoy se llama «breadcrumbs» (migas de pan), a la zona de la interfaz que indica al usuario su ruta de ubicación en el site.

Rayuela (1963), novela de Julio Cortázar, propone leer sus capítulos de dos maneras: a la lectura tradicional, siguiendo el orden de las páginas, se agrega otra en la que el lector puede saltar y alternar entre capítulos. Llevada al entorno digital, esa idea anticipa el acto de saltar entre contenidos mediante los hipervínculos.

Papel blanco

Las —cada vez mayores— posibilidades expresivas que soportan los navegadores, acercan el diseño de páginas web a las publicaciones impresas, generando un soporte híbrido. El sitio The Grid System2 —que en su portada cita a Josef Müller-Brockmann y ofrece la descarga de grillas predefinidas (HTML+CSS)—, recuerda la importancia del uso de las mismas como organizadoras de contenidos. Ese control del espacio que ya es posible, sumado al desarrollo del html53 y de la web semántica, brinda al diseñador herramientas para pensar y proyectar, no solo el aspecto visual de un sitio web (su look & feel), sino también su código de programación HTML, que deberá dar cuenta —respetando estructuras lógicas de etiquetas4 y microdata5— del significado del contenido para un mejor posicionamiento en motores de búsqueda. El lápiz y el papel por lo tanto, vuelven a ser elementos importantes al diagramar la estructura integral de un sitio.

Papel digital

Lejos quedaron los tiempos en los que la selección tipográfica para web se limitaba a «Arial», «Verdana», «Georgia» o «Trebuchet». Si bien estas familias se siguen utilizando ya que garantizan buena legibilidad, la proliferación de nuevas fuentes (para ser embebidas en el código HTML), sumado a las posibilidades del lenguaje CSS36, desafían la sensibilidad y las posibilidades de ajuste tipográfico del diseñador, algo que era más propio del diseño editorial sobre papel. La gran variedad y calidad de fuentes ofrecidas en sitios com Font Squirrell7 y Google Webfonts8 —uno de los principales proveedores— acercan el soporte digital a las ediciones impresas. Ajustes de variables, interlineados y maridajes tipográficos y uso de retículas, son algunas de las capacidades que el diseñador deberá ir perfeccionando en forma constante.

Papel plegable

Con la llegada de las pantallas táctiles, la dimensión de zonas activas dejó de tener como única referencia al puntero del mouse (de un pixel). La usabilidad deberá estar reformulada en base al tamaño del dedo del usuario (50 pixeles aproximadamente), razón por la cual la estructura de la interfaz deberá proyectarse en base a estas nuevas definiciones. La gran variedad de dispositivos disponibles en el mercado (teléfonos móviles, tabletas, lectores de libros electrónicos, smart TV), determinan que, desde su génesis, la arquitectura web deba pensarse como adaptable a diversas resoluciones9 (un rango que podría delimitarse a grandes rasgos entre 320 x 480 pixeles y 1024 x 768 pixeles) y a modos de pantalla horizonales y verticales. Las denominadas «interfaces líquidas», exigen replantear la presentación de la información y la usabilidad en base a cada tamaño de pantalla —lo que se denomina responsive design—. Al trabajar con imágenes, deberá tenerse en cuenta la relación entre peso y velocidad de transferencias de datos, que difiere notoriamente entre cada aparato. En caso de no disponer del dispositivo para probar el funcionamiento de la aplicación (situación ideal) existe gran variedad de simuladores10 que reproducen con gran fidelidad situaciones reales.

 

El diseñador web —término quizás obsoleto— es hoy un profesional híbrido que se define constantemente entre el entorno gráfico y digital. A los conocimientos sobre gráfica, programación, tecnología y usabilidad, deberá agregar capacidad de adaptación y versatilidad, ya que el contexto en el que se desenvuelve está en permanente transformación.
Author
Sebastián Vivarelli Buenos Aires
  1. «Del objeto a la interfase». Mutaciones del diseño. Gui Bonsiepe, Ediciones Infinito, 1999.
  2. Ver thegridsystem.org
  3. Ver HTML5 en Wikipedia
  4. Ver referencia HTML5 en el sitio del consorcio W3
  5. Ver información sobre microdata en el sitio del consorcio W3
  6. Ver css3.info
  7. Ver fontsquirrel.com
  8. Ver Google Webfonts
  9. Ver resizemybrowser.com
  10. Ver página de simuladores de Blackberry

Published on 24/05/2012

IMPORTANT: This article does not express the opinion of the editors and managers of FOROALFA, who assume no responsibility for its authorship and nature. To republish, except as specifically indicated, please request permission to author. Given the gratuity of this site and the hyper textual condition of the Web, we will be grateful if you avoid reproducing this article on other websites. Instead, we suggest and value a partial reproduction, also including the name of the author, the title and the source (FOROALFA), a link to this page (https://foroalfa.org/articulos/la-web-de-papel) in a clear and visible place, inviting to complete the reading.

Autor:
Sebastián Vivarelli

More articles bySebastián Vivarelli

Article:

Logo Stereo

Article:

La guerra diseñada

Article:

Identidad a puro gol

Article:

El cine como espejo del diseño gráfico

Article:

El diseño paciente

Article:

Héroes de papel

Article:

Vivir del diseño

Article:

De Terror

Article:

Escuchar imágenes, mirar música

Article:

Luz, cámara... ¡Cartel!

Followers:
273

Related

Illustration:
Camilo Vera
Author:

Camilo Vera

Title:

Debate: Adiós Google Reader, ¿bienvenido Atchus?

Synopsis:

Ahora que Google Reader no funciona más, muchos nos preguntamos ¿qué podremos hacer para importar y seguir gestionando nuestras suscripciones dinámicas RSS?

Idioma:
ES
Illustration:
Dante Claudio Reynoso
Author:

Dante Claudio Reynoso

Title:

El horizonte de la Web

Synopsis:

La red, entre la evolución acelerada del medio y la esperanza de un mundo mejor.

Votes:
69
Comments:
25
Followers:
50
Idioma:
ES
Illustration:
David Abajo Fernández
Author:

David Abajo Fernández

Title:

Qué debe transmitir la Memoria de empresa

Synopsis:

Es muy común que se ponga mayor foco en el diseño de este tipo de piezas, que en el desarrollo de su comunicación.

Votes:
16
Comments:
6
Followers:
8
Idioma:
ES
FOROALFA ISSN 1851-5606 | Contactar | Publicidad | ©Luciano Cassisi 2005~2017