La web de papel

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

Retrato de Sebastián Vivarelli Sebastián Vivarelli Buenos Aires Seguidores: 292

Opiniones:
27
Votos:
101
Compartir:

«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.

Retrato de Sebastián Vivarelli Sebastián Vivarelli Buenos Aires Seguidores: 292

Opiniones:
27
Votos:
101
Compartir:

Colabora con la difusión de este artículo traduciéndolo

Traducir al inglés Traducir al italiano Traducir al portugués
  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
Código QR de acceso al artículo La web de papel

Este artículo no expresa la opinión de los editores y responsables de FOROALFA, quienes no asumen responsabilidad alguna por su autoría y naturaleza. Para reproducirlo, salvo que estuviera expresamente indicado, por favor solicitar autorización al autor. Dada la gratuidad de este sitio y la condición hiper-textual del medio, agradeceremos evitar la reproducción total en otros sitios Web.

Sebastián Vivarelli

Más artículos de Sebastián Vivarelli

Título:
Héroes de papel
Sinopsis:
Símbolos, máscaras, trajes. Componentes visuales del «universo superhéroes» que llevados al afiche, definen identidades en un golpe de vista.
Compartir:
Título:
El cine como espejo del diseño gráfico
Sinopsis:
Tipografías y actores, composición y puesta en escena: similitudes estructurales y conceptuales entre el cine y el diseño gráfico.
Compartir:
Título:
Ver para (des)creer
Sinopsis:
Sobre la manipulación digital de imágenes y su influencia en la construcción de la realidad.
Compartir:
Título:
Logo Stereo
Sinopsis:
Soda Stereo constituye para el rock latinoamericano el máximo referente de excelencia en comunicación visual.
Compartir:

Debate

Logotipo de
Mi opinión:

Ingresa con tu cuenta para opinar en este artículo. Si no la tienes, crea tu cuenta gratis ahora.

Retrato de Miguel Gallego
38
Miguel Gallego
Jul 2013

Buen artículo, buenos links.

0
Responder
Retrato de Lucas López
28
Lucas López
Jul 2012

Muy bueno el artículo y la mención a The Grid System. Haciendo historia, agrego que los breadcrumbs provienen del mito «El Hilo de Ariadna», donde un ovillo de hilo para desenrollar que la enamorada Ariadna le dio a Teseo le permitió matar al Minotauro, desandar el laberinto y escapar. Esta historia antigua simboliza hoy el recorrido de las páginas en internet.

2
Responder
Retrato de David (Davo) Ayala Velarde
0
David (Davo) Ayala Velarde
Jun 2012

Podría decir que soy diseñador web sin embargo he hecho mucho editorial de hecho estudie una especialidad en diseño editorial, termino que se asocia con medios impresos, se le llama editorial por que edita texto, imagen, estadísticas, etc. en la web o en cualquier formato multimedia se hace eso pero ademas se le suma, animación, audio, y sobre todo interactividad, para mi la web es sólo un medio más en el que se aplica el diseño editorial y celebro que con el css3 y html5 podamos hacer más efectivos nuestros diseños, sin embargo el que es gallo en cualquier granja cacarea

0
Responder
Retrato de Pamela Paredes
0
Pamela Paredes
Jun 2012

Con nuevos formatos, nuevas responsabilidades. Ya que no se trata de equiparar web con papel, recomiendo esta tesis en linea que plantea el nuevo concepto de documento en la cultura de la imagen, y que aborda muchos términos como información, comunicación, usuarios, y lo más importante la irrupción del hipertexto en el diseño gráfico: Enlace

0
Responder
Retrato de Pablo Castillo
0
Pablo Castillo
May 2012

Me gusto el articulo, pero me parece que hay un error de fondo al equiparar web con el papel.

Veo mucho el vicio de diseñadores gráficos viendo de editorial que al enfrentarse a la pantalla la tratan como si fuera un papel infinito o como si fuera un cartel.

Decir esto acá me parece que va a ser malo para mi salud.

1
Retrato de Sebastián Vivarelli
292
Sebastián Vivarelli
May 2012

Hola Pablo. La equiparación es más a nivel metafórico, no literal. De hecho el artículo empieza citando libros impresos. Si bien se van concretando zonas híbridas entre el soporte digital y el papel, cada uno tiene características propias que no son intercambiables, y que exigen del diseñador cualidades específicas. Saludos.

1
Responder
Retrato de Francisco Cázares
0
Francisco Cázares
May 2012

¡Perfecto! Nunca debemos dejar de aprender

0
Responder
Retrato de Alfredo Texis Michicol
6
Alfredo Texis Michicol
May 2012

Muy interesante el tema.

0
Responder
Retrato de Vladimir Hernández Botina
26
Vladimir Hernández Botina
May 2012

Me preocupa en gran manera, el observar que después de hacer parte de grandes procesos y transformaciones sociales, el diseñador siga enfocando su mirada solo en la forma y las limitantes tecnológicas. Pretender que tendencias como el responsive design se crearon para conservar el look and feel de un proyecto, es equivalente a decir que la función del cirujano de corneas es preservar la estética del ojo.

0
Responder
Retrato de Jositux Guaimas
2
Jositux Guaimas
May 2012

Muy buen artículo! es muy necesario para los Diseñadores profundizar en responsive design. Por mi parte cuando hago una web: trato de mantener el mismo look and feel tanto en desktop como para tablets pero con menor resolución en las últimas. En los móviles una versión mas reducida, al estilo RSS. Un detalle cuando dices «programación html»: El lenguaje html es de marcado, no de programación, esto es discutible por la llegada de html5 pero en definitiva se programa javascript u otro. Enlace%C2%BFpor-que-html-no-es-un-lenguaje-de-programacion abrazo

0
Responder
Retrato de Vladimir Hernández Botina
26
Vladimir Hernández Botina
May 2012

El papel del diseñador web, va mucho mas lejos y es mucho mas complejo. El diseñador de interfaces ya no solo es un híbrido entre diseñador gráfico y diseñador industrial, la gran cantidad de conceptos y disciplinas que intervienen en la creación web o de aplicaciones móviles lo asemejan al director de una orquesta el cual debe coordinar multitud de aspectos, así pues se conjugan en su mente: Usabilidad, la arquitectura de la información, el posicionamiento, la programación, el diseño del look & feel, el diseño de experiencias de usuario, la psicología, la persuablidad, etc, etc, etc

4
Retrato de Abisai De Rosas Ruiz
0
Abisai De Rosas Ruiz
May 2012

no lo había pensado de esa manera :O

0
Responder
Retrato de Claudio Alvarado
0
Claudio Alvarado
May 2012

Excelente!

Fuerza y valor!

0
Responder
Retrato de Alejandra Hernandez
1
Alejandra Hernandez
May 2012

interesante...

0
Responder
Retrato de Anelia Stoyanova
0
Anelia Stoyanova
May 2012

La web ha heredado mucho del papel pero ofrece una dimensión más a sus usuarios – la interacción. La manera de planificar el contenido es muy diferente porque se deben utilizar palabras clave que siempre se puedan consultar en fuentes externas, el contenido globalmente tiene que construirse en base de todas esas ventajas que nos ofrece. Solamente pensando que la web es otro tipo de media y cada vez se diferencia más de la impresión, es como se puede llevar a cambios radicales en las maneras de escribir el código y representar la información en la gran variedad de dispositivos del mercado.

0
Responder
Retrato de J. Leonel Salgado
3
J. Leonel Salgado
May 2012

Aún así, las tipografías se crearon para satisfacer ciertas necesidades, uno no puede escoger solo la letra «más bonita» o la mas popular. Hay que saber historia de la tipografía. Y Ergonomía visual. Tampoco puedes ir escogiendo colores al azar o poniendo menús en donde «quepan» o se acomoden mejor. Si no hay un buen conocimiento de ergonomía visual, tampoco le veo futuro a un profesionista que quiera incurrir en esta nueva especialidad. Seguirá habiendo diseñadores web, esto lo veo más bien como «diseño de interfaces virtuales para dispositivos personales».

0
Retrato de Sebastián Vivarelli
292
Sebastián Vivarelli
May 2012

Hola Leonel. Comparto lo que planteas acerca de la historia de cada tipografía, de hecho es una materia central en la carrera. Pero también es cierto que mas allá de la breve historia de fuentes para embeber, la calidad formal y buena legibilidad que permiten muchas de ellas, hace que se las encuentre en infinidad de sitios, incluso muchos de ellos portales de noticias, donde la lectura de textos es primordial. Saludos.

1
Responder
Retrato de Marta Espinel
0
Marta Espinel
May 2012

Buena informaciòn! :)

0
Responder
Retrato de Luis Ferrera
17
Luis Ferrera
May 2012

Muy, muy buen aporte Sebastián, gracias por los datos.

0
Responder
Retrato de Freddy Oyuela
3
Freddy Oyuela
May 2012

Muy buen artículo.

0
Responder
Retrato de Jhon Eag
0
Jhon Eag
May 2012

Que buen y acertado artículo.

0
Responder
Retrato de Marcelo Pérez
1
Marcelo Pérez
May 2012

Interesante artículo que presenta algunos de los aspectos más relevantes en el desarrollo web actual: el problema de las fuentes tipográficas, la utilización de una grilla que estructure los elementos del sitio y el tema de las inferfaces líquidas debido a la multiplicidad de resoluciones.. Una profesión que día a día exige mejores conocimientos y habilidades, tanto de diseño como de programación..

0
Responder
Retrato de Ana María Schiappacasse
0
Ana María Schiappacasse
May 2012

Excelente artículo!

0
Responder
Retrato de Marcelo Venturotti
3
Marcelo Venturotti
May 2012

Excelente artículo no tengo nada más para agragar, pusiste en palabras cosas que vengo experiementando en los últimos años y muchas otras que no tengo tan claras.

0
Responder
Retrato de Maximiliano Vilchez
0
Maximiliano Vilchez
May 2012

Yo creo que deberías de mencionar por lo menos un simulador de interfaces líquidas. De resto todo excelente.

0
Retrato de Oscar Tello
0
Oscar Tello
Sep 2014

Alo Max, te dejo un link (Enlace), donde podrás encontar sino simuladores, si una gran cantidad de herramientas que permiten hacer un Responsive Web Design, que en cierto modo, en este momento reemplaza los métodos "liquidos" usados hasta hasta hace un buen rato

Salu2

0
Responder
Retrato de Hernán Cabeza
12
Hernán Cabeza
May 2012

Excelente aporte Sebastián. Todos los que estamos en diseño web sabemos que mañana será otro día y lo que esto implica en la dificultad de adaptación y en la necesidad de diseñar y programar sitios con la mayor usabilidad posible. Igualmente lo que hoy diseñaste, mañana mismo puede resultar obsoleto, aún planificado todo esto cuando en el mismo instante puede que alguien está planificando otra cosa.

2
Responder

Te podrían interesar

Ilustración principal del artículo Diseñando apps para móviles
Autor:
Javier Cuello
Título:
Diseñando apps para móviles
Sinopsis:
Un libro que llena un vacío de información en español para todos aquellos que quieren comenzar a diseñar Apps y no saben cómo dar sus primeros pasos.
Compartir:
Interacciones:
Votos:
59
Opiniones:
17
Seguidores:
155
Retrato de Rodrigo Mazza
Autor:
Rodrigo Mazza
Título:
¿Es posible el software de diseño?
Sinopsis:
Técnicamente aún no existe el software de diseño. Lo que tenemos por ahora es software de edición. Pero ya se empiezan a ver nuevas herramientas que propician un nuevo debate entre diseñadores.
Compartir:
Interacciones:
Votos:
115
Opiniones:
110
Seguidores:
38
Ilustración principal del artículo Publicaciones institucionales de YPF
Autor:
Tholon Kunst Diseño
Título:
Publicaciones institucionales de YPF
Sinopsis:
Un sistema gráfico que abarca las diversas publicaciones institucionales, que sirve como referencia para los estudios de diseño que trabajan para la empresa petrolera.
Compartir:
Interacciones:
Votos:
70
Opiniones:
81
Seguidores:
32
Ilustración principal del artículo Diseño UX en el desarrollo de tecnología educativa
Autor:
Mara Serrano
Título:
Diseño UX en el desarrollo de tecnología educativa
Sinopsis:
¿Por qué el diseñador gráfico puede abordar proyectos de tecnología educativa mediante el paradigma del diseño de experiencias?
Compartir:
Interacciones:
Votos:
18
Opiniones:
3
Seguidores:
41
Ilustración principal del artículo Los diez errores en diseño web revisados
Autor:
Fernandho Silva
Título:
Los diez errores en diseño web revisados
Sinopsis:
¿Cómo está el diseño web de hoy en relación al famosísimo decálogo de errores que detectara Jakob Nielsen en el ya lejano año 2002?
Compartir:
Interacciones:
Votos:
161
Opiniones:
42
Seguidores:
1
Retrato de Mario Balcázar
Autor:
Mario Balcázar
Título:
6 consejos para diseñar portadas de revistas
Sinopsis:
A la gente le toma no más de 6 segundos para decidir si compra o no una revista. De ahí que valga la pena hacer un análisis de su diseño y del poder que tiene la portada en ese momento decisivo.
Compartir:
Interacciones:
Votos:
277
Opiniones:
86
Seguidores:
566
Retrato de Marcelo Palacios Solórzano
Autor:
Marcelo Palacios Solórzano
Título:
CTRL-Z
Sinopsis:
Afortunadamente en la vida no existe Control Z. Desafortunadamente algunos estudiantes de diseño no estamos aprendiendo a vivir sin él.
Compartir:
Interacciones:
Votos:
33
Opiniones:
21
Seguidores:
13
Ilustración principal del artículo El arte de la línea
Autor:
Estudio Zkysky
Título:
El arte de la línea
Sinopsis:
Libro de arte, libro de historia, libro objeto y libro conceptual. El libro de los colectivos es un registro documental de este protagonista de la vida cotidiana de los porteños como transporte público.
Compartir:
Interacciones:
Votos:
125
Opiniones:
53
Seguidores:
15

Próximos cursos online

Desarrollamos para ti los mejores cursos online de actualización profesional, que te permitirán formarte y especializarte de la mano de renombrados especialistas

Estrategia de Marca

Estrategia de Marca

15 claves para programar el diseño de símbolos y logotipos de alto rendimiento

4 semanas
24 Junio

Branding: Diseñador y Cliente

Branding: Diseñador y Cliente

Tratar con el cliente, hacer presupuestos y planificar las etapas de la creación de una marca

3 semanas
2 Septiembre

Relecturas del Diseño

Relecturas del Diseño

Una inmersión en el discurso sobre el diseño para despejar sus nociones más controvertidas: creatividad, innovación, arte, tecnología, función social...

4 semanas
16 Septiembre

Auditoría de Marca

Auditoría de Marca

Taller de práctica profesional: análisis, diagnóstico y programa de marca sobre casos reales

6 semanas
30 Septiembre

Branding Corporativo

Branding Corporativo

Cómo planificar, construir y gestionar la marca de empresas e instituciones

4 semanas
21 Octubre