Front – Responsabilidad de diseñadores

Posted by maximiliano | Posted in Buenas Prácticas, CSS, HTML, Normas, Validación | Posted on 30-04-2010

23

El diseño visual está lejos de ser “un dibujito a la rápida”, aunque sigo encontrándome con ese tipo de solicitudes. En la web es consecuencia de un proceso cada día más científico de DCU. Pero ¿quién traduce el diseño visual para navegarlo y crear un buena experiencia en los usuarios?

Somos los Diseñadores gráficos que debemos tomar el guante y hacernos responsables y no los programadores o ingenieros.

Nada personal,  es más accesible aprender lenguajes como HTML y CSS por ser más acotados.  En el pasado expliqué ¿Qué es el diseño Front? y teniendo eso en cuenta, lo siguiente.

El dominio del HTML y CSS no basta, si bien es fundamental, no basta. Se necesitan conocimientos y experiencia, como en cualquier oficio o profesión. En este caso, teoría de color, estudio de tipografía, composición de elementos, equilibrios visuales, etc. Elementos que construyen  una sensibilidad que hay que saber utilizar, leer, reconocer e interpretar.

Repito, sin dominar el Front no llegamos a ningún lado. Dominándolo podemos hacer una óptima traducción de la propuesta visual, desarrollada en un lenguaje gráfico, en valores de luces, sombras, pesos visuales, dominios del blanco, etc. plasmando correctamente el objetivo, concepto e idea generatriz del proyecto. Traducción o interpretación que por cierto debe tener sentido, ser semántica.

Cuando no dominamos (Diseñadores, Programadores e Ingenieros por igual) alguno de estos lenguajes, Visual, HTML, CSS es cuando los diseños se distancian de las propuestas visuales, cambian los márgenes, tipografías, desaparecen iconos, etc. y pierde el valor o parte de él, el mensaje que se queire entregar.

El Diseño no es “el arte“. Helarte es lo que sientes antes de congelarte.

Comments (23)

Me parece excelente el reconocimiento e invitación. Comparto completamente. Se pierde mucho al entregar un jpg para que sean ‘implementados’ en áreas ‘técnicas’.

He estado buscando por mucho tiempo a un diseñador ‘web’ para estos temas (pequeños micrositios, landing pages y otros). Ninguno ha declarado que sabe del tema. Algunos sí de flash (facepalm).

Que un diseñador conozca de Html, Css e incluso Jquery es lo mismo que hace el diseñador que trabaja para imprenta: estudia y conoce, a través de la literatura o la experiencia la mecánica del papel y como desenvuelven las tintas en diferentes contextos y lo hace por que este es su medio y debe, DEBE conocerlo. En la web es lo mismo, un diseñador debe cononcer el medio que es el soporte de su trabajo. Debe hacerlo, porque los ingenieros y programadores nos preocupamos (me incluyo en mi faceta de programador) del proceso más que del usuario… esa responsabilidad sigue siendo del diseñador…

Es increíble la poca oferta de “mano de obra” que hay en esta materia… Recuerdo a mi generación de estudios y eramos muy pocos (me sobran dedos en verdad) los que nos interesamos en internet y mucho menos, los que nos interesamos en el código y no en Flash…

doble facepalm.

Entiendo tu punto, de hecho, la mayoría de los front’s buenos que he visto, están hechos por los mismo diseñadores, por que claro, ellos más que nadie tienen claro hasta el más mínimo detalle, lo que lleva a un fron’t que refleja fielmente el diseño.

Pero por otro lado, y acá doy mi punto de vista de programador. HTML y CSS básicamente es código, el código por naturaleza siempre va a estar más cercano al programador que al diseñador, el programador por su estructura mental siempre va a generar mejores soluciones respecto a problemas de código.

Si un diseñador, sabe hacer front es algo muy bueno, ya que como decía anteriormente el front reflejará 100% al diseño, por otro lado, si un diseñador no sabe hacer front está bien, ya que no es algo fundamental para cumplir su rol como diseñador, sería un complemento.

Y por último, es el programador el que tomará el front para implementarlo, por lo cual a veces es mejor que el mismo programador que va a implementar el front sea el que haga el front, ya que este front se armará pensando en la implementación, lo cual, lleva a una implementación mucho más fluida. Así que personalmente creo que el tema pasa por educar a los programadores para que sean capaces de reflejar 100% el diseño en el front, más que, meter en código a los diseñadores.

Código siempre se va a llevar mejor con código :D

Este post me recuerda varias publicaciones donde se plantea que diseñadores web deben saber (al menos) front: http://carsonified.com/blog/uncategorized/5-good-reasons-why-designers-should-code/ , http://www.webdesignerdepot.com/2009/01/6-reasons-why-designers-should-code/ , http://37signals.com/svn/posts/1066-web-designers-should-do-their-own-htmlcss .
En mi caso me toco aprender HTML / CSS al hacer las plantillas de mi proyecto de título el 2007. Sí, la sufrí, pero fue fundamental para entender lo que hago (y decir con propiedad que no me gusta programar). Si bien no llevo el pulso de hacer front rápidamente, puedo entender el código y los comportamientos, lo que se traduce en realizar diseños basados en las posibilidades reales de programación (por ejemplo al entregar maquetas indico “esto se abre con ajax”, este borde es una imagen, adjunto elementos con sus hover, etc.) Ahora con HTML5 va a ser más importante aún que los diseñadores estemos al tanto de las nuevas posibilidades técnicas al momento de diseñar, por eso no es ajeno lo que pasa al otro lado. Considero que el tema no es tan tajante como decir que el diseñador web DEBE programar sus propios diseños, ya que si realmente te especializas en uno de los dos temas, creo que te puede tomar 100% de tu tiempo. Lo fundamental es que ambas partes deben manejar (y bien) el lenguaje de ambos lados, sino la comunicación es imposible.

Saludos

Acabo de ver el comentario de Juan.. por eso trabajamos juntos! jajaja

Está claro que hay una tierra de nadie. FrontLand.

Hace años Andreas llegó de Alemania a hacer la practica donde trabajé un tiempo (tananá) y aunque no recuerdo el título de su profesión era precisamente este espacio de transición entre Diseño Visual y Código.

Comparto con Juan que estamos hablando de código, pero insisto en que HTML/CSS no es programar y lo asocio al comentario de Tri, que si te dedicas a la Web, necesitas saber…no, dominar el front HTML/CSS porque la discusión con los desarrolladores será en ese campo, el código y debemos, como diseñadores opinar y decidir con conocimiento de causa, de lo contrario vulnerabilizamos nuestro trabajo.

Sauce la “llea” es las dos cosas. Si eres diseñador de papel dominas la imprenta y hablas en su idioma.

primero que todo decir… – Que. buen. post!

la verdad es bastante serio y real que el diseñador tenga la responsabilidad… debo decir que con mi corta experiencia e tenido bastantes oportunidades de trabajar con programadores y desarrolladores muy buenos -me refiero con bastante oficio y experiencia-.

pero en mi último tiempo me he visto enfrentado a una oficina donde somos 4 y de esos 4, 2 somos diseñadores y los otros 2 desarrolladores.. el punto es que mi colega -con más tiempo que yo en la oficina no sabe css ni html – y ha sido súper complejo para los programadores que el diseñador les corrija o exija detalles de diseño o de html que antes nadie hacía, entienda-se como semántica en el contenido, preguntas como.. porqué esto es un “ul” y no un “ol” o una lista de definiciones… etc… se sorprenden y a la vez les molesta..

finalmente entiendo que es un proceso.. y que claro, los programadores también tienen sus proceso… y que con la experiencia de ellos, el diseñador jamas debes “meterse” en maquetear porque no es su trabajo..

esos comentarios me sorprenden.. pero bueno.

saludos y repito, muy buen post!

Osvaldo gracias a ti por tu comentario y bienvenido.
Para mi está claro, Diseñador web que no sepa HTML/CSS a falta de NO recomendarlo lo pondría en lista negra, cero peso específico.
Sobre asuntos semánticos y discusiones sobre código la Biblia ahora son las WCAG 2.0 no deja dudas o las minimiza al “máximo”.
Saludos

Concuerdo con Cabrera, pero me detendría en el punto en que se detubo Maximiliano sobre que Html y Css no es programar, el html no tiene estruturas de lógicas ni de iteración, por lo cual no lo hace un lenguaje de programación. Al construír el html, no se piensa en el proceso, en el input y el output, solo está marcando una unidad de información, a pesar que suena muy simple, muchos programadores no se llevan bien con el Html ni el css, por lo mismo, por que no tiene la misma lógica que programar, llámese a esto desarrollar procesos que tienen un input y retornan un tipo de unidad de información.

Lo que si hay que tener claro es que el programador tiene una capacidad diferente de abstracción que el diseñador y, en eso, los programadores llevan la ventaja…

Esto en la teoría. En la práctica, he visto muchos Fronts mal implementados por equipos de ingenieros que, por el bien del proceso (o por la comodidad de como hacerlo) han devaluado la calidad de un diseño.

PD: que interesante discusión ^ ^…

Concuerdo con que es fundamental tener conocimientos de las otras disciplinas con las que uno tiene que trabajar, para lograr asi un exitoso trabajo multidisciplinario.

Pero asi como aspectos de visualizacion/grafica, y técnicas de programación hay otra disciplina en el mundo de diseño centrado en el usuario: interacción. Lo que muchos consideran el puente de comunicación entre las otras disciplinas, los diseñadores de interacción se encargan de captura los requerimientos del usuario objectivo y lo comunica en elementos utiles para diseñadores gráficos y programadores. Esto implica que concepto cognitivos y sociales (entre otros) tambien deben ser parte del conocimiento de las otras disciplinas involucradas.

saludos
Nata

Ya Tri, el lunes partimos con clases de CSS!

Claro poh Sauce, el HTML es un lenguaje de Marcado por eso es tierra de nadie. En estricto rigor no es campo de programación ni de diseño. Aunque los programadores visualicen en navegadores.
A lo mejor al no ser programador me siento más cercano al marcado, estructura y semántica.
Por otro lado el tema de los estilos, al ser una traducción de una información visual, se aproxima más al ámbito de los diseñadores. Como uno define las fuentes en programas gráficos pero de forma escrita, Familia tipográfica, tamaño, color, márgenes, etc.
Concuerdo que hay una demanda no satisfecha en el mercado actual.

Creo que la problemática no es a quién corresponde la responsabilidad, ya que actualmente tanto un diseñador con conocimientos y habilidades con el código, como un programador con buena sensibilidad y un ojo cuidado pueden hacerse cargo sin problemas de este “eslabón” de la cadena.

El tema es que los ámbitos tradicionales de educación de ambos profesionales (diseñador y programador) no cubren completamente las necesidades de este “nuevo oficio”. Así, en las escuelas de diseño se nos enseña livianamente la traducción de nuestro trabajo a pantalla, mientras que los programadores lo ven simplemente como el soporte visible de sus desarrollos.

Tiendo a pensar que falta “nombrar” este rol intermedio, que permita crear o instituir a un nuevo tipo de profesional. Aquel que puede traducir prolijamente un diseño a código HTML y CSS, y que a su vez entiende que es un array, un loop o una query y como afecta esto el que esta codeando. E incluso que puede construir visualizaciones usando scripts (como es el caso de processing o el trabajo con javascript y html5). Yo soy partidario de ir por este camino, hablar de un nuevo profesional.

Buen tema para conversar.

Nata,
de acuerdo en algunos aspectos sobre el diseño de interacción.
Yo apunto a destacar y tratar de llegar a una solución, conclusión o consenso a que no hay disciplina que se haga cargo del Diseño Front también llamado maquetación. Y el diseño de interacción tampoco se hace cargo de un correcto marcado, como si por ejemplo lo hace la accesibilidad que implementa normas que despejan las contantes dudas que tenemos al desarrollar front.
Lo malo es que hay pocos “Maquetadores” (Programadores, Ingenieros o Diseñdores) que lo saben.

Grande Basilio,
podríamos ponerle así a ese nuevo perfil “Basilio”. El mercado necesita Basilios :)
Seré insistente en el tema, como le comentaba al diseñador @esaabeni el otro día “Para entenderte con programadores háblales de Accesibilidad” será la solución de sus problemas.
Repito, Accesibilidad.
http://www.sidar.org/traducciones/wcag20/wcag20_es.html

Probando twitterFeed de los comentarios de mi blog chan

Excelente post! como dijeron yo creo que html/css mas que un lenguaje de programación es un lenguaje de marcado,donde la sintaxis y la traducción son mucho mas influyentes que 1+1=2.
Como dice Basilio esto es un asunto de escuelas, cuanto le enseñan a cada profesional sobre esta “tierra de nadie” y como se desarrolla este nuevo profesional. Yo por mi parte encuentro triste que alguien que se vaya a dedicar al lenguaje visual de interfaz de usuario sepa poco o nada de html/css, si entras en el negocio tienes que saberlo, así como sabes medianamente usar photoshop o flash, porque le diseñador mas que un “hacedor de monos” es un personaje que tiene saber moverse y leer el medio en el que se rodea y desenvuelve, tanto desde la imprenta a la pantalla del cajero automático. Así tambien es totalmente agradable encontrar programadores que interactúan con el html/CSS pensando un poco mas en de donde viene el desarrollo visual para construir el trasfondo de lo que queremos desarrollar. He tenido la experiencia de aquello con profesionales y es reconfortante cuando encuentras em el ámbito profesional “que tanto el visual como el coder se juntan en la esquina de la plaza a conversar de mujeres” (jaja me gustó esa metafora).
Saludos Max!

Bueno entre unas Piscolas ayer hablamos de este tema curiosamente dos diseñadores y dos programadores ( y un artista que no chachaba nah, pobresito! XD).
Para mi y el decir que es tierra de nadie no es valido, es una responsabilidad compartida un diseñador que se dedica a web DEBE saber lo que es html y css sus restricciones y posibilidad, así como también saber como funcionan lenjuajes de programación como java o php. Para que? para poder hablar con el programador.
La tarea del programar a su vez es entender el mundo del diseño, saber de jerarquía visuales, tipografía y diagramación, entender “el blanco”. para que? para poder hablar con el diseñador.
Pienso que esta es la formula de un buen desarrollo enfocado al diseño total del proyecto.

Por último sobre lo que dice Osvaldo: si un progamador no sabe de accesibilidad es un un programador mediocre.
En mi trabajo tengo la difícil tarea de lidiar con muchos de ellos y sus egos y en muchos casos asumir el desarrollo del front lo que significa invertir horas en un trabajo que por decirlo de una forma (no me corresponde) primero porque yo no soy programado, no me pagan como a uno que si es y por último no esta en mi contrato.
Pero yo trabajo a favor del diseño total y sabiendo que el desarrollo va a quedar mal, si, el diseñador debe asumir la responsabilidad del front. para que? para educar con el ejemplo y hace un mundo más bello y accesible para todos :D

y por el mismo precio. jeje XD

y no me sorprende que el etiquetado HTML funcione ;) jeje

Esteban,
el marcado no es programación, hay que tener clara esa diferencia, ergo el campo de conversación con programadores no es la programación. El marcado tampoco es diseño, entonces el campo de discusión no es el diseño visual.
Se confunde porque HTML/CSS es código que es un ámbito de programación, pero como dije antes, no es programación y creo que ahí está una de las premisas del problema al relacionarlo por defecto con la programación. Como que la arquitectura no es construcción, pero debe saber, proyectar materiales y hablar ese lenguaje.
No creo que un frontman deba saber programación, peor como en todo un profesional que se maneja en más ámbitos vale más y domina mejor su entorno.

no creo que HTML se considere un lenguaje de programacion, ya que considera simples instrucciones que permiten diseñar un contenido y texto (lenguaje de marcado).
No contiene en si un algoritmo implementado en una logica de secuencias estructurada ni orientada a objetos.
Creo que en programacion pura (codificacion, puro codigo), idependiente del lenguaje, se debe considerar la estructura del desarrollo, no es llegar y meter codigo codigo y mas codigo.
Mi experiencia en desarrollo de software y estos asociada a interfases de usuario, y ahora ultimo en el desarrollo de HMI (Human Machine Interface), me dice que la funcionalidad de las aplicaciones supera al diseño visual.
Creo que el diseño visual de aplicaciones en Chile no es valorado, lo veo dia dia.
Cuando me piden que alguna interfaz sea “bonita”, que hacer?? que letra ocupar, que color?, por eso los pantallasos diseñados por informaticos o programadores son un asco……..funcionan? si, pero feos.

Wena JP, bienvenida especial a la familia. Lo comente más arriba pero claramente lo explicas mejor. HTML no es programación, es un lenguaje de marcado. Pero al ser código se “confunde” al asociarlo a los programadores.
Por otro lado está el tema de interacción que a mi modo de ver está en una capa previa tanto a la programación, diseño visual y marcado.
Saludos

Write a comment