Hoy en día en el universo de Internet, tener un blog no es novedad para nadie. Si bien hay muchos sitios o proveedores que brindan el servicio de blogs gratuitos, lo más interesante de la experiencia de tener uno, no es sólo poder compartir notas y artículos que me parecen interesantes, sino también hablar con su diseño. Para mi la experiencia de tener un blog es completa cuando más personal es el diseño de la interface de dicho sitio.

Claro está que todo este planeamiento es posible, siempre y cuando contemos con algunos conocimientos para llevar a cabo el diseño de la interfase:

1. Limitaciones Técnicas: es fundamental tener conocimiento en manejo de software para diseño web, tratamiento de imagen y armado de sitios. De esto surge la primer limitación, acaso la más fácil de resolver, que es la parte técnica y de aprendizaje de manejo de herramientas. Yo utilizo para armar un blog: Fireworks, Dreamweaver y algún programa de ftp.
2. Limitaciones Teórico/Conceptuales: a toda la cosmética y funcionalidad, es necesario sostenerla con una buena idea, que a su vez debe ser traducida a una buena idea gráfica. Este tipo de planteo es más teórico y supone conocimientos de diseño gráfico, interfases en la web y navegación

Cabe aclarar que este artículo presupone que el punto 1 está resuelto. Lo que propongo aquí es contarles como abordo el proceso de diseño de un blog, no en cuanto al detalle técnico, sino al proceso y la evolución de la idea, en torno a la plataforma Wordpress.

 1. Elegir la plataforma de publicación.

Elijo Wordpress porque es la mejor plataforma que conozco para llevar adelante un blog con muy poco esfuerzo, y es altamente personalizable. Es gratuito, y la instalación no nos llevará más de 5 minutos, y con conocimientos mínimos.

2. Entender y visualizar la estructura.

Hablando sintéticamente, la estructura de un típico blog de Wordpress está organizada en pocas y autodescriptivas partes:

• HEADER (Encabezado): que se repite en todas las páginas.
• CONTENT (Contenido): generalmente donde se ubicarán los posts. Es la sucesión de los mismos.
• SIDEBAR (Barra lateral): es la barra de navegación que se presenta en la homepage sobre el lado derecho, y que podemos configurar de manera que aparezca en todas las páginas.
• FOOTER (pie): una especie de colofón donde ubicaremos copyright y demás.

Entendiendo a grandes rasgos como se estructura un blog, se puede empezar el plenamiento del diseño con este simpole esquema, teniendo en cuenta que los contenidos (texto, imágenes, videos, etc) estarán "contenidos" en estos bloques. Si propongo un fondo que continúa en varias partes, hay que prestar particular atención a los empalmes del mismo, los colores, etc, para que la experiencia visual sea armónica.

3. Boceto, boceto, y más boceto…

Creo que en mi epitafio van a poner "Muerto bocetando…". Es fundamental para llegar a un buen diseño, plasmarlo antes en papel. Las primeras imágenes mentales aparecen siempre como deslumbrantes en nuestro cerebro, pero es un grave error ir de nuestra imaginación creadora directamente a la computadora. Seguramente el resultado será tosco y desalentador.

4. Dar vida al boceto en fireworks.

El paso siguiente es ubicar dentro del material creado en papel, el que más me guste y sienta que va con mi idea, y la imagen mental que tengo. Con el archivo original a un tamaño representativo de la realidad promedio de navegantes (digamos 1024 x 1024 píxeles), monto en una capa (layer) el boceto, y la bloqueo. Luego trabajo en capas adicionales, cada detalle, desde colores de fondo, texturas, tipografía y bullets.

En primera instancia, llevo el boceto scaneado a Fireworks, y lo "calco" 

A medida que incorporo elementos, voy probando distintas variantes sobre la marcha.

Sigo probando, pero voy agregando elementos reales de la estructura del blog: titulares, posts y sidebar, simulados. 

5. Dejar que el diseño crezca hasta el prototipo final.

Lo más probable es que la imagen mental y el resultado en pantalla difieran. Es bueno poder amalgamar elementos o recursos que provengan de otros bocetos. Muchas veces fluyen conceptos gráficos a través de la serie de dibujos y bocetos que se hicieron.

6. Codificar las hojas de estilo (CSS).

Para cada sección de la estructura que describí en el punto 2, así como para el documento en general, podemos definir tipografía, colores, fondos, espaciados, etc. Ponerme a detallar tags y modificadores de CCS, escapa a la idea de este artículo. Lo importante es entender que cada zonificación del diseño, tanto a grandes rasgos, como en el más mínimo detalle, puede ser personalizado y diseñado mediante Cascade Style Sheets.

7. Grabar, subir, testear.

Mi método se fundamentea en diseñar las hojas de estilo, subirlas al servidor e ir refrescando continuamente la página, al menos en Explorer y Mozilla, para ver "en vivo" los resultados del diseño. Dado que Wordpress reagrupa los "bloques" de la estructura, en principio puede resultar difícil editar cada pedacito de código (el header, content, sidebar y footer son "pedazos" de codigo, que se ensamblan al momento de mostrar el blog). Una técnica que uso es hacer el preview en el browser, y el documento HTML a la carpeta local donde estoy trabajando con el blog. Se puede editar esa hoja de estilos y aplicarla al archivo descargado, para ver el "todo" de la página del blog de forma más organizada.

El proceso de diseño descripto es el que uso habitualmente a la hora de diseñar un blog, aunque en general, puede ser trasladado a unas cuantas piezas más. En este caso particular, las imágenes que ilustran el artículo corresponden al diseño del blog de sobreexpuestos , completamente dedicado a la fotografía.

Espero encuentren este artículo de utilidad, me gustaría escuchar comentarios sobre que les pareció.

Eduardo Cesario

Cuando comencé con el tema este de escribir un blog, me plantee un par de objetivos básicos, unos lineamientos, acerca de que temas tocaría, como los encararía y de que forma entregarle al eventual lector algo interesante, sin que caiga en el diario íntimo del diseñador gráfico que saca a pasear su ego al ciberespacio.

Es así que hoy en día, dada la demanda de trabajo, más el estudio y otras actividades normales que realizamos los diseñadores gráficos (lease: somos seres humanos también!), me permiten entregar un artículo (o post) semanal, de, a mi neurótico y obsesivo criterio, cierta calidad, o al menos eso es lo que intento: aportar mi granito de arena a la blogósfera mundial, con mi visión sobre tópicos como son: diseño gráfico, fotografía, música y, a veces, literatura.

Aquí es donde se me planteaba el primer conflicto: las pasiones del "arte" lo van llevando a uno por diferentes caminos, y a veces la tentación nos hace tocar un poco de oído, quiero decir, improvisar un poco sobre un terreno en el cual no estamos específicamente preparados, pero que nos gusta, y nos acomodamos a él con razonable facilidad.

Es así que entre una de esas pasiones a la que me entrego (casi) incondicionalmente, es escribir. Siguiendo con lo que comentaba más arriba, la forma de encarar este blog, los contenidos, temas, bla, bla, no contemplaban en su esquema, la catársis.

Y miren ustedes, que este es el primer post catártico.

La verdad es que chequeando las estadísticas de este blog, tiene un modesto número de visitantes, pero que por ser un blog el cual no recibe publicidad, y el cual tampoco me he encargado particularmente de difundir, ese numerito no es tan modesto como para que me despierte la atención una cosa: cuánto vale para mi, dedicar el tiempo que merece cada post, tomándolos realmente en serio, como para que prácticamente no reciba comentario alguno de lo que entrego… Sigo pensando en voz alta, y me enojo, claro, no se bien con quien, pero me enojo. Quizá sobrevalúe este medio de comunicación tan actual, y tan de moda como el egolog, digo, fotolog. Pero resumiendo, es un tanto frustrante brindarse, y recibir a cambio, 300 lecturas, y un comentario de algún amigo/a que siempre entra.

El silencio es salud, dicen por ahí. Todo depende el contexto en que lo veamos, amigos y amigas. Ya que el silencio puede presentarse como respeto, ignorancia, desconocimiento, asombro….. indiferencia. Y a esa palabrita quería llegar: indiferencia.

Creo que pocas cosas ofuscan más al ser humano que el pasar desapercibido. El no causar nada en otros. Quizás me estoy yendo por las ramas, y estoy extralimitando el valor del silencio en un post. Pero la verdad es que necesitaba hacerlo. Catarsis pura.

Como comunicadores visuales que pretendemos ser los diseñadores gráficos, no hay nada peor que no saber comunicarnos.

No dejemos que el silencio se constituya en la voz de nuestra opinión.

Eduardo Cesario

Rememorando definiciones, recuerdo la de sistema como "conjunto de piezas o partes que persiguen un fin común". Además de esa hermosa definición (digna de ser colgada en un cuadro), se que cuento de constantes y variables, para enriquecer y fortalecer la pertenencia de las partes a ese todo. 

Hablando de lo más general para plantear sistemas visuales de baja/mediana complejidad, contamos con cuatro recursos para operar sobre las piezas:

1. Color
2. Forma
3. Tipografía
4. Imagen

De esta forma, dosificando estos recursos en manera ordenada y tolerante, el receptor asumirá que entre las piezas que diseño hay una coherencia visual que las va a "pegar". Claro que esto tiene que estar apoyado por un concepto o idea que nos de un plus de fuerza comunicacional al trabajo, entonces la cosa empieza a tomar color.

En este ejemplo que traigo, me interesa señalar particularmente como con un buen sistema de colores y pictogramas, uno puede resolver sistemas de baja y mediana complejidad, sin rebuscarse tanto en piezas super complejas que nunca terminan siendo decodificadas por el receptor.

El basamento de mis diseños lo constituye fundamentalmente un buen sistema de pictogramas. No digo íconos, porque estos por lo general son un poco más simples en su resolución formal comparados con los pictogramas.

Luego de terminar con una buena síntesis del propio sistema de pictogramas, tengo todo listo para empezar a definir el perfil del resto de las piezas.

Ahora se suma un elemento más, fundamental en el proceso de diseño de quien les habla: el color.

Aquí lo que busco básicamente, es definir tríadas de colores para cada subarea de la empresa, primeramente definida por un color identificatorio, similar en saturación y luminosidad al de las otras.

Utilizando dichos colores, formo tríadas: blanco y negro (que se mantienen constantes) sumados al tercer color del área misma. Esta manera de trabajar, hace que el ojo perciba rápidamente y asocie las diferentes combinaciones, independientemente que el rojo y el verde en principio no se peguen mucho.

La fórmula: pictogramas + color

Llegamos al meollo del asunto. Este artículo pretende plantear una forma de trabajo que he ido perfeccionando a lo largo de los años, y que actualmente utilizo a la hora de plantear sistemas gráficos.

Esta combinanción me permite regular constantes y variables planteadas desde otro punto de vista:

• Subsistemas de color basados en tríadas, con 2 componentes constantes (blanco y negro) sumados al tinte elegido por área (constante).
• Sistema de pictogramas usando la misma estética (limpia y redondeada), con variables mínimas en cuanto a sus contenedores.
• Familia tipográfica constante, en este caso Univers, pero muy flexible, dada la cantidad de variaciones que existen de la misma.

El punto está en la resolución adecuada y pertinente de un buen sistema de pictogramas (o señales), que como pieza gráfica son altamente pregnantes, sumado eso a que también pueden ser utilizados como algo estético y sensible en las piezas.

Para finalizar, adjunto una muestra más de piezas utilizadas en este sistema: un cartel de uso interior de los locales. En este caso, la fotografía es encarada con un criterio de macrofotografía, que "encuadra" lo importante del objeto. Nótese que la foto particularmente mantiene su paleta cromática, pero es apoyada por los tintes definidos para dicha área, además del fuerte reconocimiento y fijación que produce el sistema de pictogramas en el sistema.

Conclusión 

Queda expuesta de esta forma, el método que uso habitualmente para diseñar sistemas gráficos. La idea es siempre poder enriquecer el material gráfico que a priori el cliente espera obtener de un sistema gráfico de baja o media complejidad. Los pictogramas son elementos fuertes y reconocibles, que aportan solidez a la comunicación visual inmediata con el receptor, que sumados a una paleta cromática adecuada y pregnante, configuran un escenario gráfico apto para producir piezas de alto impacto. 

Eduardo Cesario

Siempre que se habla de ideas, particularmente en diseño gráfico, se busca llegar a lo inimitable y completamente original. Esos postulados nos llevan a una insondable búsqueda de "la idea", que le vuele la tapa de los cesos de los potenciales receptores. Reviendo este tema, lo primero que se me ocurre decir es: de nada sirve nuestra idea genial, si es imposible de bajar gráficamente en algo rápidamente reconocible. Una buena idea no necesariamente es compleja, es más, por lo general es bien simple y directa.
Esta pequeña introducción al tema, es para situarnos en la utilidad de una idea a la hora de emplearla en el proceso de diseño: muchas veces escuchamos que un buen diseño lleva consigo no sólo un atractivo visual y una pertinencia (coherencia) con el comitente (cliente), sino que también debe ser respaldado por una buena idea, un buen concepto.
Totalmente Cierto. Nada que decir frente a eso.
Ahora, lo que intento volcar en estas líneas, es una sugerencia, una observación, sobre la utilidad de la idea en nuestro diseño, supongamos, un isologotipo. En principio, como ya vimos más arriba, la buena idea potencia directamente la buena resolución gráfica, digamos que se retroalimentan para producir, en nuestro caso, un símbolo poderoso e inolvidable.
Pero poco se dice de la idea como verificadora de nuestro proceso de diseño.
¿Cómo sabemos si nuestro logotipo realmente esta comunicando eso que tanto deseamos?
Por lo general confiamos en la buena voluntad de nuestros colegas, para que nos den una devolución sobre nuestro trabajo, y su verificación en la realidad. Ese es un muy buen paso, porque nos ahorramos toda nuestra subjetividad, para que otros descubran en nuestro trabajo posibles fallas, o que nos den sugerencias de otros caminos alternativos para arribar a un mejor resultado.
Pero una vez que nos hemos asentado mínimamente en la proyección del diseño, en la generación de la idea y en la excusa gráfica que dará forma definitiva a nuestra creación, la idea se constituye como el mejor método de control que tenemos nosotros mismos, para ir auto-corrigiéndonos y testear nuestro trabajo.
Si mi idea fue generar sensación de dinamismo, por ejemplo, una posible resolución sería la de buscar algún objeto figurativo que remita a ese concepto, e intervenirlo inteligentemente para darle una nueva significación, creando así un nuevo símbolo.
Al yo mirar mi trabajo, debería reconocer que mi marca está comunicando esa idea, ese valor.
Allí es donde la idea resignifica todo el proceso, y le da un cierre, o nos indica que algo elegimos mal en el desarrollo del mismo: bocetos, conceptos, bajadas, paleta de color, tipografía, etc.
En resumidas cuentas:

1. Una buena idea no necesariamente tiene que ser compleja.
2. Por lo general, las ideas simples, son más directas y fáciles de resolver.
3. La idea/concepto se retroalimenta directamente con una buena resolución gráfica.
4. Esa misma idea, me servirá como método de control sobre mi trabajo, para chequear su efectividad en potenciales receptores.

Desde luego que este breve ensayo apunta a nuestra faceta de creatividad y auto exigencia, para poder arribar a un resultado satisfactorio frente a nosotros mismos, en primera instancia.
Luego el resultado de nuestro trabajo puede ser sometido a estudios de marketing, a la percepción de nuestro cliente, etc., pero el poder llegar a un resultado que nos satisfaga a nosotros mismos como profesionales, es fundamental para poder luego, sostener nuestro diseño y afianzarnos como diseñadores gráficos creativos.

Eduardo Cesario

Muy a menudo los diseñadores gráficos nos topamos con una de las peores frustraciones (como profesionales), muchas veces a raíz del desconocimiento: no son pocos los clientes que se espantan cuando consultan por la cotización de una marca o isologotipo.

"Eh! ¡tanto cuesta un dibujito? ¡¿Pero si lo que yo pido es bien simple?!", protestan…

Y ahí es donde radica la confusión: primeramente, un isologotipo no es un "dibujito", si bien en ciertos casos puede servirse de una gráfica similar; en segundo lugar, sí, con suerte su marca será SIMPLE y recordable, eso si es una virtud…

Simple, pero no obvio. Parece ser algo fácil de confundir. Y de hecho lo es. El límite que separa lo OBVIO con el "dibujito" definitivamente es estrecho. Digo todo esto porque el objetivo de este breve artículo es destacar el papel fundamental de una BUENA IDEA en el desarrollo de una marca.

Podría hasta pretensiosamente resumir en dos pequeñas oraciones el espíritu de un buen diseño de isologotipos:

1. Si el isologotipo es simple, con una buena idea que lo sustenta, creo que hicimos todo bien. Generalmente en estos casos, los conceptos son interesantes por el apareamiento de un elemento reconocible, completamente identificable, y alguna operación formal y conceptual, que lo altera en cierta manera 'sutil'.
2. Corolario: si preferimos contar algo obvio, hagámoslo de una forma inédita, o desde un punto de vista nuevo. Hay marcas que nos muestran objetos trillados o muy vistos, pero de una manera novedosa, y eso es justamente lo que les otorga valor y peso como símbolos.

Ejemplos del caso 1

En estos casos, lo que se muestra son ideas y grafismos recurrentes en el imaginario habitual de las personas, pero abordados de un punto de vista más ingenioso que la mera representación.

• Una torta o "pie chart", gráfico de estadísticas por excelencia, toma un significado mucho más fuerte e interesante, cuando resulta ser que la porción que se extrae de la misma, reconstruye la forma de la letra K, inicial de a empesa de inversiones "Koh Inversiones".
• La ya clásica asociación de lo circular con la óptica y los anteojos, es redefinida al insertar dos letras del nombre de la empresa, para ilustrar por contraforma, un perfil de una persona con lentes.
• Las cadenas de ADN (este concepto si que fue usado) le dan otro dinamismo a una marca de un criadero de chinchillas, poniendo énfasis en el mejoramiento genético de sus ejemplares, e interactuando directamente con la parte tipográfica (logotipo).
• Una simple bolsa de compras, simbolo harto utilizado por shopings, cobra más vida y sugestión, mediante el uso de una letra "&" mandada al corte del plano de color que genera formas y movimiento que muchas otras marcas no tienen.

Ejemplos del caso 2

Aquí se combinan tanto elementos reconocibles en el imaginario habitual, como también conceptos o ideas que los alteran, dándoles así un 'algo' a veces no reconocible en la primera mirada, pero que definitivamente, hace que nos quedemos inquietos por saber que ocurre ahí.

• Para "Triatleta", una marca de ropa para deportes de triatlón, se usó el elemento triangular como signo aglutinante de las tres actividades. La operación formal fue el repetirlo, y construir una forma imposible como las que usaba Escher, para de esa forma ilustrar lo infinito y la retroalimentación constante que genera el deporte.
• En el caso de Electronica Avanzada, la letra 'e' rotada, conforma a la vez la 'a', ambas iniciales del nombre. Fusionándolas en un círculo, obtuvimos un signo potente, que muestra la interrelación entre dos partes para un todo comunicacional.
• Para ILAR, se combinaron dos signos: una pupila de un felino, representando el reino animal, y una página de un libro, mostrando el conocimiento. Las jornadas de este evento, dedicadas a la concientización de los derechos del animal, encontraron así una identidad mucho más sugestiva, por la suma de ambas partes.
• Por último, para el sitio web UbiquitousClick, se jugo con el super trillado concepto de click del mouse, pero que se convierte en un faro que emite luz, y guía el camino de potenciales navegantes a sus respectivos sitios, una idea más que pertinente para una empresa cuyo servicio es redireccionar tráfico afín a segmentos comerciales para sitios web. 

Buscando una finalidad constructiva a todo esto, y sin pretender adueñarme de una verdad aparente, la conclusión es, poder nosotros como profesionales, valorar y cotizar nuestro trabajo, no sólo desde lo monetario (que necesariamente es importante), sino también desde lo profesional. Eso lo lograremos en base a "educar" a nuestros clientes, que en muchos casos desconocen la investigación, el proceso de diseño, testeo y demás que llevamos a cabo para poder brindarles el tan preciado "dibujito".

Por último, los logotipos aquí presentes fueron desarrollados por CCS , para ver más de nuesto trabajo, pueden hacer click aquí , o visitar nuestro sitio web. 

Eduardo Cesario

El tema parece simple, pero en realidad, es crucial.

Todos los que hacemos diseño, o al menos los que recibimos una formación proyectual y conceptual, se nos ha inculcado desde el principio, la importancia de un boceto para llegar a dar forma a lo que será la idea/concepto final de nuesto diseño.

Hasta ahí vamos bien, ahora, ¿qué pasa cuando lo que tenemos que representar es un diseño en plantilla xhtml/css? 

En realidad esta pregunta, que puede parecer obvia, no lo es tanto. Algunos dirán "me bajo una plantilla prearmada y la modifico", si, pero se supone que la plantilla la estamos creando y diseñando nosotros, por ende, esa respuesta queda descartada del razonamiento.

"Empiezo a codificar con un editor visual del tipo Dreamweaver, y voy usando las paletas para guiarme": esa es una posible solución, pero no para la persona que recién se está adentrando en el mundo xhtml: sabemos que un div mal cerrado puede producir un desastre en nuestro diseño…

"Codifico todo de cero", pero cómo hacer eso sin tener la idea realmente definida, y la destreza aplicada a esa resolución.

Lo que yo propongo es lo siguiente: revalorizar nuestra capacidad de dibujar y bocetar (por más que no seamos Leonardo Da Vinci, de hecho, yo estoy muy lejos de serlo), para poder visualizar con mucha más claridad y de forma más amena, lo que vamos a intentar decirle al navegador que haga.

Estoy hablando de un boceto no para concebir la idea gráfica (se supone que ese/esos ya los hicimos antes de plantear la estética, concepto, etc.), sino uno que va a ser una suerte de mapa de como descompondremos el cuerpo del documento en divs o areas para ser traducidas a código.

A continuación detallo un ejemplo para un diseño que estamos haciendo en el estudio:

Primero tenemos el layout o plantilla, en mi caso, un png, hecho en Fireworks. La primer parte es observación pura, determinar que áreas vamos a separar, agrupar, etc.

En nuestro block o cuaderno, hacemos un rápido esquema representando en abstracción, la plantilla supuesta.

Yo recomiendo:

• Usar 'cotas' para medir en pixels o porcentajes las areas a designar.
• Usar rectángulos para separar los divs.
• Colocar aunque sea abreviado, el nombre para cada div.
• Tratar de utilizar la menor cantidad de zonas.
• Usar nuestra inteligencia, para poder visualizar cual solución es la mejor y menos costosa.

En esta figura, si bien no es lo más clara posible,vemos el resultado de superponer el boceto de la estructura, sobre el diseño original: si bien no tienen que coincidir fielmente, este paso es completamente ilustrativo y no es necesario hacerlo, me tome el trabajo para que vean como conviven ambas figuras.

Ahora si: en nuestro boceto original no se veía con mucha claridad el trabajo, pero si lo aprolijamos un poco, vemos detalladamente cada una de las zonas o divs en las cuales descompondremos el cuerpo del documento xhtml, para llegar al resultado final.

Si bien este procedimiento/método no nos va a solucionar el problema que representa la crudeza de encarar un diseño xhtml, la compatibilidad en diferentes browsers/plataformas, la 'reinterpretación' de cada browser de nuestro código, etc, puedo garantizar que hace el trabajo mucho más ameno, y que con el paso del tiempo, hasta quizás podamos prescindir de este paso para diseñar.

Espero les haya sido de utilidad.

Eduardo Cesario

Mik, Edu y Adri (ejem, sus docentes), según Alejandro Inés

Otro año de cursada finalizó en la FADU. 

Después de haber hecho devoluciones personalizadas a cada uno de los chicos (este año bastante más personales que en otros anteriores), una sensación de alegría y realización personal nos invadió a Micaela, Adriana y yo, uno de los tríos docentes que la cátedra Wolkowicz designó para el año 2006. Alegría porque en el 95% de los casos, los chicos pudieron crecer mucho a nivel gráfico y conceptual: fue un placer realmente nuestro grupo de cursada.

Para festejar, con las chicas nos cruzamos al bar que está en frente de Ciudad Universitaria, y nos quedamos compartiendo unas cervecitas. Como era de esperar, el tema diseño gráfico aflora casi instantáneamente (sobre todo si están sentados 3 diseñadores gráficos en una mesa, y más si son docentes).

Entre tanto parloteo, salió el tema del estilo: lo que nos define como profesionales y nos da cierta consistencia visual/conceptual en los trabajos. Yo le decía a Mik, que un "buen diseñador, es el que puede ponerse todos los trajes sin importar el proyecto a diseñar".

¿Podemos realmente ser esclavos de un estilo?

En lo personal creo que no, si bien hay muchos diseñadores o artistas (y no por eso quiero poner al diseño gráfico como un arte), que por seguir fieles a un estilo no pueden interpretar o llevar adelante muchos otros proyectos. "Un buen diseñador debería poder diseñar una página para una funeraria, como también para una Rave". Morir con el estilo no me parece muy propio de un diseñador, si de un artista. 

Ahora, hay otra cosa que muchas veces desvela a los estudiantes, más cuando se acerca el fin de la carrera: la búsqueda de ese estilo, como si eso fuera a surgir premeditamente, y lo que yo puedo decir como experiencia personal, es que en mi caso fue tan natural, que en tercer año de mi carrera decantó solo, y es el día de hoy que sostengo una forma de trabajar que me identifica, pero no me hace esclavo de ella. Muchas veces choco con eso, mi irremediable tendencia a usar colores muy saturados y contrastados, formas orgánicas y lenguaje gestual e icónico. Es verdad, a medida que pasa el tiempo, uno se acostumbra a su forma de diseñar, y probablemente, a uno lo llamen porque les gusta esa forma particular de trabajar con la imagen.

El estilo nos define, nos da identidad como diseñadores gráficos: pero no tenemos que perder nunca de vista que somos profesionales que aspiramos a comunicar con la imagen, y que en muchos casos seremos felices diseñando acorde a nuestras tendencias y motivaciones propias, pero en muchos otros nos veremos conducidos inevitablemente, a ceder un poco de nuestra parte para satisfacer a nuestro cliente.

Eduardo Cesario

Hace unos cuantos días que vengo pensando en escribir algo sobre la web: tendencias de diseño, optimización de sitios web, buscadores…

En principio este iba a ser un artículo orientado a como es nuestra experiencia en la web ahora, y como era hace unos 10 o 15 años. Pero este punto me llevó a orientar el artículo hacia la parte de SEO (Search Engine Optimization, u Optimización para Motores de Búsqueda), hoy tan de moda.

Actualmente estamos migrando hacía una web orientada a la usabilidad e interacción. Estos dos tópicos son beneficiosos y recomendables, ya que la finalidad primitiva de la web es poder compartir. Si a eso agregamos que los sitios diseñados son accesibles en práctiamente todas las plataformas, navegadores y sistemas operativos, tenemos un sitio útil y funcional.

Estamos mutando a una web mucho más útil y conciente: es por eso que hoy los navegantes se nutren de los sitios, más que navegar por esparcimiento, o este esparcimiento lo encuentran en comunidades interactivas, foros, intercambio de fotos, photologs, portales de noticias, etc. Hace 15 años, no tener un splash en un sitio web era un crimen, y saber flash significaba estar en la cresta de la ola.

Qué pasa hoy: el cliente pide usabildad, accesibilidad y diseño de calidad y escalable.

¿Pero que tiene esto que ver con la optimización para buscadores?

Como primer punto, es conveniente aclarar el alto nivel de ignorancia sobre el tema que hay en el ambiente. No sólo entre potenciales clientes, sino también entre profesionales, algunos que utilizan este argumento para vender servicios de los que no tienen idea, o simplemente aprovechan esto para vanagloriarse de estar en lo último, y mentir para obtener réditos extra (económicos o de otro tipo).

Mi propia experiencia en diseño de sitios me lleva a esta conclusión: no existen garantías algunas de aparecer 1, 2, 10 o 50 en Google o en cualquier otro buscador, sencillamente, porque los motores de búsqueda van optimizando cada vez más sus procedimientos y disciernen cada vez mejor lo que es spam de lo que son sitios utilies y profesionales, y porque los criterios son combinaciones de muchos datos para llegar a una posición en el ranking.

Una vez desmitificado esto, que me parece fundamental, voy a seguir exponiendo el segundo punto: Optimización.

Acá es donde aparecen las herramientas que nadie nombra como potenciales optimizadores de un sitio web, y que para mi son:

• Diseño simple basado en standards, como por ejemplo, xhtml/css/ajax.
  Simple no significa básico, puede ser un diseño simple, y muy bello.
• Areas de interactividad con el usuario (que cumplen con el punto anterior): un blog, un foro, etc.
• Buena calidad de enlaces entrantes (sitios que nos 'linkean'), más que cantidad.

Estos son para mi los preceptos básicos, si bien hay muchos datos más específicos que no entran en el marco de este artículo, y otros tantos generales que por ahí este olvidando ahora.

Pero la estrella de la optimización hoy en día es… ¡EL CONTENIDO!.

Así es: nadie menciona que los contenidos son lo que dan valor a un sitio web. De nada sirve tener el mejor diseño, ultra optimizado, si no hay contenidos de calidad. Me atrevo a decir, que hoy en día es tan, o más importante, que la optimización y el diseño. Y en realidad, no estoy descubriendo nada probablemente: la forma puede ser la más sensual, bella o atractiva, pero si no está respaldada con ideas/contenidos, se cae, es un romance a corto plazo. El costado más técnico revela que los contenidos son lo más importante para los buscadores líderes a la hora de indexar (catalogar e incoporar al índice del motor de búsqueda) las páginas: cuando editamos contenidos de calidad sobre temas que son de consulta habitual, es cuestión de tiempo para que empecemos a tener visitas al sitio gracias a las búsquedas de cibernautas.

Esto trae aparejado, por ejemplo, que un blog que empieza como una diversión, termine siendo un sitio ampliamente visitado y rentable, a medida que genera contenidos de calidad (ya sea por diversión, originalidad, especificidad, etc) ¿Que está por detrás de ese simple blog? probablemente una plataforma del tipo de Wordpress, que permite publicar un blog con una visualización propia (como éste que ves ahora), con código válido, rss, y muchos más chiches, tan sólo con descargarlo de la web, subirlo a un hosting, y dar unos cuantos clicks.

¿Y la intro en flash? Nada tiene que ver.

Buscamos eso que nos nutre y nos divierte, emociona, llama la atención, pero el acento va puesto en el contenido de calidad, lo cosmético viene después.

Por Eduardo Cesario

Los que trabajamos en Diseño Gráfico, en realidad, en cualquier disciplina que se vincula a lo proyectual (desde Arquitectura hasta Diseño de Imagen y Sonido), nos hemos visto envueltos desde hace años, en el eterno dilema del funcionalismo/racionalismo, opuesto diametralmente al concepto de forma/ornamento/belleza.

A lo largo de unas cuantas décadas ya, ha quedado demostrado que, tanto en Diseño Gráfico, como en cualquier otra actividad, los fundamentalismos sobre una u otra postura, nos llevan a cometer errores inconmensurables, y a enrolarnos en ciertas "tendencias" o "formas de pensamiento", que terminan condicionando nuestro desempeño como profesionales.

En este pequeño artículo, lo que quiero plantear es una revisión de estos aspectos, función y forma, que tan bastardeados han sido durante años, pero esta vez volcándolos a un nuevo enfoque de análisis: la tan de moda usabilidad.

Haciendo una búsqueda rápida a través de Google, encontramos unas cuantas definiciones del término, bastante atractivas y complementarias:

• Según Jakob Nielsen, autoridad mundial en la materia, la usabilidad se define como un atributo de calidad de una página o sitio web, que determina la facilidad de la interfaz para ser utilizada. La palabra también se refiere a los métodos para mejorar la facilidad de uso durante el proceso de diseño.
• En el contexto de las aplicaciones informáticas, se refiere al conjunto de características que inciden en la utilización, atendiendo a cualquier contexto o tipo de usuario.
• Cualidad que tiene un algo de ser usado con facilidad para el fin al que ha sido destinado. Así, una herramienta es muy usable cuando con ella se puede hacer fácilmente el trabajo para el que se fabricó y el usuario no necesita explicaciones sobre cómo usarla.

Revisando estas definiciones, yo podría definir a Usabilidad, como el valor que posee un diseño, plasmado fundamentalmente en la web, que permite su fácil e intuitiva utilización por el usuario/navegante, así como también un amplio soporte de plataformas y navegadores/clientes donde será visualizado. Así, ponemos no sólo en primer plano a la facilidad de utilización, sino también un amplio espectro de tecnologías y sistemas que podrán decodificar sin mayores problemas, y con un criterio muy similar, nuestro diseño.

Ahora, ¿qué tendrá que ver todo esto con el planteo inicial que hice relacionado a forma/función?

La Usabilidad acerca posiciones en ambos extremos: porque justamente lo que hace no es sólo llamar nuestra atención para crear diseños y contenidos 'usables' o útiles, sino que también plantea una importante parte estética en la cuestión, que esta íntimamente relacionada con la faceta intuitiva y amigable de la interface del sitio, que es la que en definitiva va a vincular los contenidos con el usuario.

Aquí es donde radica la diferencia y lo que creo sumamente interesante de este concepto: la simbiosis. La Usabilidad nos propone un puente entre la forma (diseño web) y la función (utilidad y arquitectura de esos contenidos, adaptables a la forma).

Como tecnologías referentes de este paradigma, aparecen:

• La parte de contenidos o estructural, diseñada en xhtml (con sus diferentes variantes), altamanente estandarizada para que los tags, el formato del documento y los diferentes modificadores sean validados correctamente, eliminando así lo que conocemos por código invalido (siempre y cuando se respeten las especificaciones, claro).
• La parte visual y de organización espacial/esética, en CCS, Cascade Style Sheets, u hojas de estilos, que no sólo formatean los elementos a nivel estético, sino que también los posicionan en la página.
• Estas tecnologías separan la presentación visual de la arquitectura de datos del documento.

De esta feliz conciliación entre forma y función, podemos ver hoy en día una web orientada mucho más a los contenidos y su correcta visualización, que a la espectacularidad de la animación de sitios Flash de hace unos 10 años.

Actualmente podemos diseñar un sitio web con cientos de tipo de visualizaciones o 'skins' distintas, sin tocar una sola línea de código html. Basta chequear uno, sino el precursor, de los colectivos pro usabilidad en la web, el CSS Zen Garden , donde el código xhtml,  es "interpretado" por cientos de diseñadores web, con las más distintas influencias y posturas para plasmar el diseño. El código html por un lado (la función, si se me permite la analogía), y la forma (la plantilla CSS con sus imágenes asociadas), por el otro lado.

Dejando de lado los fundamentalismos, y sumando los dos recursos, uno orientado a lo funcional, y el otro a lo estético, podemos darle una carga más sensible a esa función, y lograr del diseño web, algo útil, y porque no, bello y amigable a la vez.

Por Eduardo Cesario