martes, 26 de mayo de 2009

Exposición «Helvetica Forever»

Titulada en origen New Haas Grotesk y nacida para desbancar a la Akzidenz Grotesk, la Helvetica se ha convertido en uno de los clásicos del siglo XX. Creada al unísono por Edouard Hoffman y Max Miedinger durante un periodo de nueve años (1956-1965).
La exposición «Helvetica Forever» itinerante (ahora en Sofía, Bulgaria) recoge la vida de esta tipografía universal y ejemplos de su aplicación.

Hay que resaltar un diario de anotaciones hecho por Hoffman, en el que recogía cada paso realizado en el diseño, sugerencias de otros, dibujos con los cambios a realizar, diferencias con la Akzidenz...

viernes, 22 de mayo de 2009

Diseño de periódicos: impresos vs. digitales

Vaya por delante que de diseño editorial el de periódicos es lo que menos controlo, pero estas reflexiones no son tanto como diseñador sino como usuario o lector.

¿Por qué el diseño de periódicos impresos es tan dispar del digital? En la primera página del primero hay unas ocho noticias, se supone que las más importantes; en el segundo, en la home, hay un número indefinido, pero siempre más de veinte ¿por qué?

Se me ocurre algún motivo, que plantearé después, pero antes habrá que preguntarse cuál es la función de estas primeras páginas de los periódicos. Supongo, terreno peligroso el de las suposiciones, que será dar una visión general de las noticias más importantes ocurridas en el día.

Partiendo de esta suposición, vamos con los motivos de esta diferencia. Se me ocurre que será económico. En internet se supone que te da lo mismo el tamaño. Cuesta lo mismo, mano de obra aparte, hacer una home que no tenga necesidad de scroll para verla toda, que una que necesite quinientos scroll para llegar al final. De ahí el número indefinido de noticias que se pueda publicar.

En cambio en la versión impresa estás limitado por el formato, si quieres más tienes que cambiar el formato y eso supone, de primeras, más papel con lo cual sale más caro.

Hasta aquí lo tengo claro. El problema se me plantea después.

Se supone, buff otra suposición, que los directores de ambas ediciones buscan la visión general de las noticias y que sean legibles. Entonces por qué se enfocan de manera tan distinta. Entonces por qué el de la versión impresa no se hace más modular y así le caben más noticias. O viceversa, por qué el de la versión digital no se hace menos modular y se colocan menos de diez noticias.

Ya sé que la diferencia es el medio, pero eso me lleva al motivo económico, lo que me hace pensar que, o al primero le da lo mismo la visión general de las noticias; o al segundo no le importa la legibilidad. Porque la abundancia de tanta información me produce ruido o me satura (me gustaría saber si hay estudios sobre si la sobreinformación produce ruido, desinforma... o sólo me ocurre a mí). Si a esto le añadimos la «feria choquetín» de los banner (todos se mueven, van y vienen) pues la legibilidad escasa. Quizás es que soy muy simple.

Yo prefiero el medio impreso, un vistazo y ya tienes la visión general perfectamente legible, aunque vayas al kiosco sólo a comprar la prensa deportiva. En cambio en el digital hace falta más de un vistazo y de un scroll para esa visión general, porque si no es así ¿para qué lo colocas en la home?

Otra inquietud y esta sí que es de diseño. ¿Por qué los impresos se ajustan a una rejilla base y los digitales no? En este caso sí se que no es por el medio, ni por cuestiones técnicas.

Helvetica vs Arial

jueves, 21 de mayo de 2009

Cursivas: itálicas y oblicuas

Las cursivas fueron creadas por Aldo Manuzio por motivos económicos, quería que entraran más letras en un determinado espacio y así poder publicar una serie de textos en formatos más pequeños y por tanto más baratos.
Manuzio encargó a Francesco Griffo el diseño y fundición de una familia tipográfica basada en la escritura utilizada en la cancillería papal en aquella época. Quería una familia basada en los rasgos propios de la escritura manual, como el estilo inclinado, rasgos que se alargan o quiebran según los movimientos de las manos... de ahí el nombre de cursiva.
Pero por qué a unas cursivas se las llama itálicas, italics,  y otras oblicuas, oblique. Las itálicas son aquellas en las que la forma de la letra cursiva varía de la romana, y las oblicuas son aquellas en las que la forma sólo está inclinada. Ojo, esto no quieres decir que cojamos y las inclinemos sin más, estas cursivas llevan ligerísimos ajustes en el trazo.

Normalmente las tipografías con serifa suelen ser ser itálicas y las grotescas son oblicuas, pero esto no es una regla.
Así que ya sabéis otro factor al que os enfrentáis cuando tenéis que elegir una tipografía para vuestro diseño editorial.

Mi Poesía en el IED

Un poco de promoción propia y autobombo.
El IED (Istituto Europeo di Design), ha incluido uno de mis proyectos, Poesía, en la página dos de su pdf del programa del master «Diseño editorial: medios impresos y digitales» del año 2009-2010. Muchas gracias

Diseño editorial suizo



Estudio de diseño suizo, ccrz, con muy buenos trabajos en diseño editorial. Se nota de dónde son.

miércoles, 13 de mayo de 2009

¿Qué tipo de letra escoger?


En diseño editorial, a la hora de elegir la tipografía para una publicación nos fijamos en diferentes aspectos, sobre todo gráficos, como que la tipografía sea bonita, su carácter, el color de la mancha del texto, etc...
Os traigo aquí un texto entresacado del libro The Elements of Typographic Syle de Robert Bringhurst para que veáis que no es lo único en lo que hay que fijarse.
Es un texto que sirve para testar el kerning de la tipografía que vayamos a utilizar. Contiene pares de letras que normalmente no se darán en nuestros textos porque son palabras extranjeras, no para nosotros, que también, sino para el propio tipógrafo, muchos de ellos anglosajones.
El ejemplo que os propongo está maquetado, de izquierda a derecha, en Adobe Garamond (postcript), Adobe Garamond Pro (otf) y Bergamo Std (otf, bajada gratuitamente de la red).
Está compuesto con bandera a la derecha para que la justificación no distorsione la prueba, obviamente sin kerning, ni tracking.
Sin entrar en un análisis profundo, os menciono algunas cosas que me han llamado la atención:
  • El cierre de las comillas altas con la letra «f» ha empeorado en el paso de la Garamond de postcript a otf.
  • «Vázquez», un apellido tan nuestro, compuesto con la Garamond postcript separa demasiado la «V» y «á» (ocurriría lo mismo con «Vídeo», en el ejemplo utiliza para el par «V» e «í» la palabra «Vídrio»). En la Garamond otf está, ligeramente, arreglado.
  • «d'œuvre» no está arreglado en ninguno de los tres. La palabra «d'œuvre» en azul que hay en el bloque de en medio no es que tocado el kerning, sino que hay un pictograma o glifo «d'» incluida en la fuente.
  • «Yale» compuesto en la tipografía Bergamo separa en exceso las letras «Y» y «a».
Con estos ejemplos os muestro que a la hora de elegir una tipografía no sólo hay que fijarse en los aspectos gráficos, sino también en el idioma en que se va a componer el texto, la nacionalidad del tipógrafo, si el texto incluye muchas palabras extranjeras, si existe una palabra «clave» en el texto, etc...
El modismo «palabra clave» se refiere a si existe una palabra que se repite mucho en el texto y que es significativa. En nuestro ejemplo si vamos a maquetar un texto sobre la universidad de Yale, en donde se supone que aparecerá frecuentemente, no sería la mejor opción utilizar la tipografía Bergamo, o si vamos a diseñar una bibliografía sobre el escritor Vázquez Montalbán no utilizaremos la Adobe Garamond postcript. Esto en la práctica no es tan infrecuente. En mi caso, maquetando un libro para el Banco Urquijo me ocurrió con la palabra Urquijo en tipografía Granjon (izquierda sin tocar el kerning).

Es en estos detalles donde se aprecian las diferencias de las tipografías, dónde se ve un buen diseñador que se preocupa de la tipografía y la calidad de una edición.

New Rail Alphabet


Es el rediseño de una fuente de principios de los años sesenta llamada British Rail Alphabet. Se utilizó por primera vez en los hospitales de la seguridad social del Reino Unido, adoptándose más tarde en la Renfe británica.
En un principio la fuente original se utilizó para señalética, sin embargo este última versión se ha rediseñado para que funcione en cuerpos pequeños.
Si tenéis una publicación que tenga que ver con el mundo británico, ya sea el cliente o la temática, y queréis utilizar una tipografía sin serifa esta New Rail Alphabet sería una mejor opción que una Helvetica, que es de un caracter más germánico.

lunes, 11 de mayo de 2009

Concurso Internacional de Música


Por Astrid Stavro

Kris Sowersby

Este neozelandés ha ganado otros dos premios del TDC 09 (Type Directors Club, organización internacional que busca la excelencia en la tipografía, ya sea en medios impresos o digitales) por la fuente Serrano, creada para Bank of New Zealand, y por la Hardys, para una bodega australiana.
También ganó un premio en el TDC 08 por la tipografía National.

Serrano


Hardys


National

Tipografía y MacOSX


Os dejo un link a un pdf de Adobe en el que se explica todo lo que hay que saber sobre el manejo de la tipografía, tan importante en diseño editorial,  en Mac OSX. Aprovecho para comunicaros que Adobe tiene nueva página de tipos 

domingo, 10 de mayo de 2009

Qué busco y que ofrezco

No, no, no. No soy otro diseñador freelance más.

Un diseñador que cree que el diseño editorial potencia el mensaje a transmitir, que piensa que el diseño impulsa la imagen de marca y corporativa, que opina que el diseño sirve para impulsar la comunicación, y que está convencido que el diseño no sólo sirve únicamente para que el medio de comunicarse sólo sea más bonito.

Un diseñador que ha trabajado en una fotomecánica dedicada a los catálogos de arte y la edición de lujo, lo que le permite realizar trabajos minuciosos y con cuidado de los detalles. Trabajos que, además, no tendrán problemas de última hora.

Un diseñador que también es maquetador y que está acostumbrado a grandes trabajos por su importancia y volumen.

Sí, sí, sí, un diseñador que abarca todas las fases del proyecto: concepción, realización y supevisión. Un diseñador con la formación y la experiencia para desarrollar un proyecto de principio a fin, con un resultado cuidado, mimado y que busca en su trabajo la satisfacción del lector.

Muchas gracias por haber perdido un poco de tu tiempo y haber llegado hasta aquí.


Saludos

Colección Nueva Novela Negra


Diseño de colección de novela
El término «novela negra» se asocia a un tipo de novela policíaca en la que la resolución del misterio no es en sí el objetivo principal; que es habitualmente muy violenta y las divisiones entre el bien y el mal están bastante difuminadas. Este tipo de relato presenta una atmósfera asfixiante, miedo, violencia, falta de justicia, corrupción del poder e inseguridad. La novela negra agrega la violencia a las características del género policial. Los crímenes se basan en las debilidades humanas como la rabia, ansias de poder, envidia, odio, avaricia, pasiones, etc. Por esta razón aparece un lenguaje más crudo, donde se le da más importancia a la acción más que al análisis del crimen. En este tipo de relato importa más la descripción de la sociedad donde nacen los criminales y la reflexión sobre el deterioro ético.
La colección «Nueva novela negra» consistiría en una colección de cincuenta títulos del género escritos por autores contemporáneos de todas las nacionalidades. Porque no sólo hay «asesinatos» en el mundo anglosajón. Cada vez que se lee una novela negra, no hay que «estar» en la tranquila campiña inglesa o en el agitado Nueva York. En el mundo de la globalidad hay que conocer los ambientes, víctimas, delincuentes y policías de otros países.
El público objetivo sería muy amplio ya que es un género que atrae a mayores y jóvenes, grandes y pequeños, hombres y mujeres...
Su venta y distribución se realizaría através de los quioscos de prensa.
Esta opción fue rechazada por el cliente.

Cubiertas Novela Negra

Tipografía utilizada.

Univers

Colección Nueva Novela Negra (aprobada)

 Diseño colección Novela Negra Aprobada
En esta opción se opta por un diseño más clásico, en el que como recurso gráfico se utiliza una imagen que tiene relación con el contenido de la obra.
Para el título de la obra y autor se utiliza la tipografía Celeste, que es la que se emplea en el interior.
Como licencia gráfica se usa como color principal el blanco como contraste al caracter «negro» de la colección. Hay que resaltar que uno de los autores exclamó: ¡Por fin una novela mía en blanco!. Esta opción resaltaría más en los expositores de libros del género, ya que en la mayoría de los libros de este género predominan el negro y los colores oscuros. Por contra si fuera expositores generales perdería un poco su identidad como novela negra.

Colección Poesía


Consiste en diseñar una colección de poesía dividida en tres partes: Poesías inéditas, antologías poéticas y poesías completas.
El requisito principal es que la producción sea lo más barata posible y, en consecuencia, sólo se utilicen dos tintas.
Se utiliza un diseño común para toda la colección distinguiéndose las tres partes, por un lado, en la tipografía utilizada para el título de la obra y, por otro lado, en el color utilizado en dicha tipografía. Además se incluye la inicial de cada serie: «i» para poesías inéditas, «a» antologías, «c» poesías completas.
La distinción de las series se podría reforzar empleando un tipo de cartulina distinto para cada serie.

Revista mncars I


Proyecto consistente en el diseño de la revista mncars. Este diseño tiene que ser acorde a la imágen del museo del que depende, conservando su imágen moderna. No obstante, el diseño ha de tener un grado máximo de legibilidad, ya que no se pretende que sea simplemente una revista para ojear.
El diseño de la revista ha de acomodarse a las distintas secciones fijas de las que consta la revista (Próximas exposiciones, Entrevista, La crítica, Publicaciones mncars, Actividades mncars, Colección mncars) y otras secciones o artículos de caracter no periódico.
Para poder abarcar el diseño de todas estas secciones se opta por diseñar una rejilla con un rejilla de dos, tres, cuatro y cinco columnas, que se podrán utilizar según las necesidades del artículo y del diseño.


En otras entradas se exponen las soluciones a las distintas secciones utilizando la rejilla a conveniencia. Al lado de cada doble página, se muestra la rejilla que se ha utilizado superpuesta al ejemplo.

Revista mncars II

A continuación se exponen las soluciones a las distintas secciones utilizando la rejilla a conveniencia. Al lado de cada doble página, se muestra la rejilla que se ha utilizado superpuesta al ejemplo.

Próximas exposiciones


Revista mncars III

A continuación se exponen las soluciones a las distintas secciones utilizando la rejilla a conveniencia. Al lado de cada doble página, se muestra la rejilla que se ha utilizado superpuesta al ejemplo.

Entrevista


Revista mncars IV

A continuación se exponen las soluciones a las distintas secciones utilizando la rejilla a conveniencia. Al lado de cada doble página, se muestra la rejilla que se ha utilizado superpuesta al ejemplo.

La crítica

Revista mncars V

A continuación se exponen las soluciones a las distintas secciones utilizando la rejilla a conveniencia. Al lado de cada doble página, se muestra la rejilla que se ha utilizado superpuesta al ejemplo.

Publicaciones y actividades mncars

Revista mncars VI

A continuación se exponen las soluciones a las distintas secciones utilizando la rejilla a conveniencia. Al lado de cada doble página, se muestra la rejilla que se ha utilizado superpuesta al ejemplo.

Colección mncars


Tipografías utilizadas: Texto General, «The Serif»; textos auxiliares, «Gotham».

The Serif

Gotham

El imperio romano



La exposición sobre el imperio romano en la que se apoya este catálogo tiene un caracter didáctico y pedagógico. No se limita a ser una exposición para entendidos y estudiosos del tema, sino que trata de acercar la vida en el imperio romano a un público generalista con películas y elementos multimedia, además de con los tradicionales elementos expositivos.
Dado este caracter didáctico y generalista de la exposición el diseño del catálogo ha de introducir elementos gráficos que separen este catálogo de otros más formales que se crean para otras exposiciones que no contienen este contenido pedagógico. Todo esto no ha de impedir que el catálogo de esta exposición pierda el caracter propio de este tipo de libros y se convierta en una revista o un libro de texto.

Esta característica didáctica y más informal se aborda en el diseño de las portadillas que se utlizan para dividir las distintas secciones en que está dividida la exposición. Se divide verticalmente la página en cuatro partes en la que sección que se introduce tiene un mayor tamaño. Para las distintas secciones se utiliza unos colores muy vivos que estén relacionados con la temática. Además cada sección tiene una imágen bitono para reforzar la sección que se va a contemplar.

Esta diferencición de las distintas secciones por colores ya se muetra en la cubierta, en la que se muestran a modo de separadores las distintas secciones. Además, la numeración de las piezas de catálogo serán acordes a la sección a la que pertenezcan.
Rejilla. Esta rejilla de cuatro columnas es adecuada tanto para los ensayos como para el catálogo de las piezas expuestas, pudiéndose emplear segun su importancia una, dos, tres o las cuatro columnas.


Tipografías utilizadas: Texto General, «Celeste»; textos auxiliares, «Frutiger».

Celeste

Frutiger

La enseñanza del grabado en Alemania


Diseño de tesis doctoral para la facultad de Bellas Artes de la Universidad Complutense de Madrid, en la que era un factor primordial la legibilidad del texto.En este tipo de publicaciones una de las dificultades estriba en el diseño de los ladillos para diferenciar bien las distintas divisiones de cada capítulo, ya que pueden llegar a tener cinco niveles diferentes.Si bien el texto siempre está a una caja, se diseña una rejilla de seis columnas debido a la amplitud de los formatos de las imágenes y esquemas que ilustran la tesis.

A pesar del caracter formal de la tesis, se le dotan de ciertas pinceladas de actualidad gráfica, mediante la utilización de tipografía sin serifa para los textos auxiliares y la posición de la foliación.

Cartel aleatorio


Lo traigo aquí porque aunque el diseño no es mío, sí lo es la maquetación del fondo
Se trataba de crear cuatro versiones del fondo de un cartel, en el que se repetía aleatoriamente un logotipo. El logotipo, en sus veinticinco versiones, en cinco colores, se repetían unas 1.700 veces, eso suponía que para crear las cuatro versiones había que colocar unas 6.800 veces el logotipo, un trabajo de chinos que no está pagado.
Cree un sistema en el que utilizando una hoja de Excel e InDesign se creaba una versión aleatoria nueva automaticamente.
Este sistema permitía crear cuantas versiones aleatorias distintas quisieras en un tiempo mínimo. Os dejo tres más.

Diseño web. Introducción y metodología

Vamos a desarrollar un proyecto de creación de un sitio web basado en el diseño centrado en el usuario (DCU). Cubriremos algunos de los pasos que conforman el ciclo de vida de un DCU, no todos porque sería desarrollar un sitio, y lo que intento mostrar es cómo se debe desarrollar un sitio web.

Desde luego esto no es más que una ligerísima introducción, hay multitud de bibliografía, blogs, expertos, diseñadores, empresas que se dedican a esto en más profundidad. Pero sirva de introducción.

Obviamente, no todos los sitios web requieren de todos los pasos del DCU ni tampoco requieren que se sigan con igual «intensidad». Pero lo que sí hay que decir, es que cuando se desarrolla un sitio web hay que tener el DCU presente, aunque se trate del sitio más simple.
El DCU busca la «usabilidad» del sitio web y que se puede resumir en la siguiente fórmula:

usabilidad = eficiencia + eficacia + satisfacción (experiencia de usuario)

Mediante esta «usabilidad» lo que se intenta conseguir es que el usuario vaya recorriendo, de forma progresiva, todos los pasos para conseguir el cliente ideal:
  • Percepción: el usuario nos tiene que percibir entre todos los demás. Por eso, la primera diferenciación debe estar en el plano de la identidad (lo que eres) y luego en el plano de la imagen (lo que proyectas).
  • Interés: Que se interese por nuestro sitio, para que más explicaciones.
  • Probar/comprobar
  • Utilización: Hasta aquí es donde llegan la mayoría de los sitios web.
  • Interactuación: En este paso conseguiríamos que el usuario, por ejemplo, se inscribiese en un club de marketing.
  • Optimización: Consistiría en conseguir que haya un feedback con el usuario.
  • Evangelización: Objetivo cumplido. Ya tenemos un usuario que hace una labor de «venta» de nuestro sitio, y además gratis. Hasta aquí han llegado pocos, muy pocos (Facebook, Youtube...).
Como hemos dicho anteriormente el diseño centrado en usuario hay que seguir una serie de pasos. Estas fases no tienen por que ser sucesivas, sino que interactúan, se mezclan, se juntan, se solapan... Estas fases son:
  • Briefing: Petición, exigencia, explicación, ruego, súplica... por parte del cliente de lo que quiere o pretende. Para entender bien lo que quiere, antes hay que saber lo que es, lo que proyecta, etc...
  • Indagación con usuarios: Incluiría las siguientes técnicas
    • entrevistas
    • card-sorting
    • test de usuarios
    • mistery user
    • diario de uso
  • Investigación:
    • Benchmarking
    • Análisis heurístico, consistiría en un estudio de los principios heurísticos (claridad de propósitos y objetivos, visibilidad y orientación inmediata, adecuación a los modelos mentales del usuario y la lógica de la información, reconocimiento más que memoria, control y libertad del usuario, consistencia y estándares, prevención de errores, flexibilidad y eficiencia de uso).
  • Prototipado y desarrollo:
    • Wireframes
    • Diseño, teniendo muy presentes las técnicas SEO (search engine optimization)
  • Comprobación con usuario
    • Test con usuario
    • test concepto
    • click show
Pero esto no es todo, el diseño centrado en usuario es sólo un ingrediente de la fórmula magistral. Habría que añadir como ingredientes arquitectura de la información (que consistiría en la organización de los contenidos con el objetivo de que el usuario pueda manejarlos, navegar por ellos fácilmente y satisfacer sus necesidades de información), SEM (search engine marketing), marketing «tradicional», suerte...
Con la combinación en su justa medida de todos estos ingredientes conseguiremos nuestro «usuario evangelizador».

Como he dicho en el proyecto que voy presentar, La buena mesa, no muestro todos los pasos e ingredientes, me limito a:

Diseño web. Briefing y benchmarking I

Briefing
El cliente nos comunica que quiere crear un sitio de recetas de cocina en el que se puedan consultar, añadir, votar... Pero no quiere que únicamente sea un recetario, sino que además abarque más aspectos de la gastronomía como maridaje de vinos, licores, restaurantes, biografías de chefs, bibliografía, etc... Además debe ser un sitio participativo que no sea de mera consulta, en el que se puedan añadir recetas, comentar restaurantes, etc...

Benchmarking
Se analizan cinco sitios web:

Los criterios de análisis son variados, unos se apuntan a la usabilidad, otros a accesibilidad y alguno a posicionamiento en buscadores. Obviamente estos criterios se pueden ampliar, o eliminar algunos. Recuerdo que esto es un simple ejercicio.

El método de anállisis es el siguiente: se enuncia el criterio, se explica sucintamente, y se comentan los sitios analizados con respecto al criterio correspondiente. La calificación del análisis se hace de forma ponderada, los criterios que estimamos más importantes se puntúan de cero a cinco, y los criterios menos importantes de cero a dos.
  1. Nombre y logotipo. Mostrar el nombre y el logotipo del sito de la empresa a un tamaño razonable y en una ubicación relevante. Todos están en un lugar relevante (arriba a la izquierda), los tamaños de mayor a menor son Epicurious, Delices, Karlosnet, Allrecipes, Recetae, siendo este último quizas un poco pequeño, de ahí su menor puntuación. La escasa puntuación en este apartado a Karlosnet se debe a que está rodeado de banners y además el que está su derecha son otros logotipos lo que hace que se confunda más todavía.
  2. Eslogan. Inclusión de una frase que resuma explicitamente la actividad del sitio. Sólo esta en Epicurious que quizá es quien más lo necesita por no deducirse del nombre a que se dedica el sitio. Recetae y Allrecipes, al poder deducirse del nombre y apoyado en un logotipo con utensilios de cocina serían los que menos lo necesitarían, de ahí su inferior puntuación. Delices y Karlosnet no la incluyen así que un usuario no sabe en un primer vistazo a que se dedican, de ahí su pésima calificación.
  3. Logo vinculado a página de inicio. Es una regla de estilo y cortesía desde el principo de internet aceptada por todo el mundo. No se pensaba poner en este estudio, pero como hay uno de ellos, Delices, que sorprendentemente no la cumple se ha decidido incluirla.
  4. Resaltar las tareas de mayor prioridad del usuario. Este es un criterio subjetivo, ya que se presupone que el usuario lo que busca es una receta de cocina. Todos los sitios, menos Delices, tienen en el tercio superior de la página un vínculo con una receta de cocina. En Delices hay que hacer scroll para encontrar la primera receta de ahí su baja calificación.
  5. Incluir información corporativa separada. Se refiere a lás páginas de “quiénes somos”, “contacte con nosotros”, etc, que por costumbre se colocan de forma separada. Aunque cada vez es menos relevante, es un apoyo en la confianza en el sitio y en algunos casos es obligatorio. Tres sitios (Karlosnet, Epicurious y Allrecipes) tienen esa información, en los dos restantes no está disponible o muy poca, como en el caso de Recetae.
  6. Utilización de ejemplos que revelen el contenido del sitio. Los ejemplos de contenidos bien elegidos pueden expresar mucho más que las palabras utilizadas aisladamente. Hay que intentar evitar un título llamado “recetas” con una descripción del estilo “las recetas más sabrosas”. Todos los sitios tenían una receta pero además se ha calificado que estuviera apoyado por un texto descriptivo, Allrecipes, y que tuviera una imágen de apoyo, todas menos Delices.
  7. Ejemplo de receta a la ficha directamente. Todos los sitios cumplen con este criterio, aunque en Karlosnet su receta del día lo incumple, de ahí que tenga una calificación inferior.
  8. Vínculo a categoría más amplia. Este criterio califica que cuando se pincha en una receta de la página principal aparezca la categoría a la que pertenece, y que sea linkable. Sólo lo cumple Delices, en Epicurious unas veces aparece y otras no, y en el resto no aparece.
  9. Acceso a lo reciente. Se refiere a la inclusión de un apartado que muestre las recetas aparecidas más recientemente para que el usuario que no accede regularmente tenga acceso a ellas y para que el usuario olvidadizo tenga fácil acceso a ellas. Unicamente Recetae cumple el criterio.
  10. Diferenciar los vínculos. Este criterio aparte de valorar que se vea con claridad que es un link y que no, también tiene en cuenta que haya un criterio único. Los más estrictos son Recetae y Allrecipes, todos los links son gráficamente iguales. Epicurious también es bastante estricto aunque mezcla dos criterios, en unos sitios utiliza el color y en otros la negrita. Delices utiliza dos criterios uno para las recetas (negrita y negro) y otro para el resto (negrita y color). Karlosnet lo hace todo al revés: lo que está en negrita y subrayado no es el link, es lo que está en normal y sin subrayar, hay vínculos en sólo negritas, en cursivas, etc. de su pésima calificación.
  11. Diferenciar los links visitados de los no visitados. Aunque es una convención cada vez menos utilizada, en sitios como estos en que puedes llegar a consultar muchas recetas sería recomendable utilizarlo. Ninguno utiliza este recurso.

Diseño web. Briefing y benchmarking II

  1. Navegación principal destacada. Este criterio evalúa la colocación de los menús de navegación en un sitio destacado y “esperado”. Los usuarios de estos sitios no tienen poque ser usuarios avanzados así que la navegación ha de ser estándar. Epicurious, Allrecipes y Delices tienen colocados los menús en sitios convencionales aunque con ligeras diferencias. Allrecipes es el que mejor cumple los estándares, uno arriba y otro a la izquierda. Epicurious también coloca uno arriba y el segundo a la izquierda aunque debajo de otras informaciones lo que hace que casi desaparezca de la primera pantalla, si bien están disponibles en los desplegables del menú superior. Recetae utiliza otra forma de clasificación y de navegación, aunque está clara la forma de navegación. En Karlosnet el que hay en la parte superior está cercado por dos banners lo que hace que la posición destacada se pierda; el que hay en la parte izquierda está debajo de una foto del cocinero, por qué? lo conoce todo el mundo? o sólo en España?.
  2. Buscador propio. Este criterio evalúa la inclusión de un buscador propio ya que se considera muy apropiado para estos sitios por su posible extensión y porque contiene información muy específica, muy susceptible de ser encontrada por este sistema. Todos tienen buscador, los mejores los de Allrecipes y Recetae que busca en todo su contenido no se limita a las recetas como en el de Epicurious y Karlosnet. Delices no posee buscador propio sino que es google.
  3. Caja del buscador amplia y bien situada. Todos los buscadores, excepto el de Karlosnet, son lo sufientemente amplios para las búsquedas, están situados en sitios bastante accesibles y son visibles. El de Karlosnet es el más pequeño, está en un sitio que no es el convencional y además se confunde con el resto. El de Recetae también esta colcado en un sitio no habitual pero resalta lo suficiente al tener un área más grande.
  4. Elementos más importantes en un primer vistazo. Se considera que en un sitio de este estilo, lo más importante son los accesos a recetas, la participación social y la recuperación de información, por lo tanto han de estar accesibles en la primera pantalla (810 px) o haciendo un pequeño scroll (1000 px). Delices es el que no cumple o muy escasamente este criterio, ya que no se ve prácticamente nada de interés, sólo el buscador. El resto en esos primeros pantallazos tienen acceso tanto a recetas como a los foros donde participar como a los buscadores.
  5. Título de la página. Este criterio hace referencia al título de la ventana, se valora este criterio por dos motivos, por un lado por usabilidad, por otro lado, porque influye en la localización y posicionamiento de google. Se valora que tenga el nombre de la empresa y que contenga alguna palabra clave que sea susceptible de ser utilizada en un buscador para encontrar el sitio. Karlosnet no cumple ninguno de los dos requisitos, utiliza una frase descriptiva apoyada en la fama, en su país, del cocinero. Delices utliza unicamente la palabra clave (receta/recetas). Los otros tres son los que mejor solucionan este criterio ya que usan los dos recursos, quizás Recetae tendría que ser más “expresivo”, ya que se queda un poco corto.
  6. Anuncios en periferia. Se valora porque la gente evita la publicidad y los artículos que estén a su alrededor pueden verse influenciados. Recetae no tiene con lo cual no se valora. Karlosnet tiene una publicidad muy agresiva, parece que sólo quiere ganar dinero a cualquier precio, la cabecera es una mezla de banners y logotipos, tiene dos columnas de banners a la derecha, un banner enmedio del contenido, otro banner a la izquierda. Delices pone los anuncios que tiene enmedio, antes que las recetas. En el caso de Allrecipes y Epicurious curiosamente en la home sólo disponen un poco de publicidad en la derecha y es en los siguientes niveles cuando incluye publicidad en cabecera.
  7. Registrarse como usuario. En este criterio se valora que en la opción de registrarse no se mencione únicamente, sino que se añadan los beneficios de registrarse. Los que mejores aplican este criterio son Epicurious y Recetae, Allrecipes no lo aplica en la home si no en el siguiente nivel, y Karlosnet y Delices directamente no lo aplican.
  8. Comunidad o foros con vínculos específicos. Como se estima que la participación social es muy importante, este criterio valora que el vínculo a las comunidades o foros este en lugar visible, y que no se haga exclusivamente de una manera literal, sino que se añadan unos vínculos a los temas que más se debatén en los foros o cualquier otra idea que exprese participación. Los que peor utilizan este recurso son, nuevamente, Karlosnet y Delices, en ambos casos sólo existe un vínculo literal en el menú. En el caso de Recetae es el que más importancia le da al hecho de registrarse ya que lo coloca en un lugar prefente y muy destacado. Allrecipes lo coloca también en el primer pantallazo en un menú específico. El que hace una utilización más intensiva es Epicurious que también lo coloca en una zona destacada, pero además en la home pero más abajo tiene su propia sección con algunos temas.
  9. Utilización de etiquetas «h1, h2...» Este criterio se valora por dos motivos: demuestra una metodología a la hora de ordenar la información lo que favorece la accesibilidad del sitio; por otro lado, es otro de los criterios que utilizan los buscadores a la hora de realizar el posicionamiento. El único que hace utilización plena de este recurso es Epicurious, Recetae y Allrecipes no utilizan «h1» pero sí las siguientes, y Karlosnet y Delices no utilizan ninguna.
  10. Separación información-diseño. Este criterio afecta a la accesibilidad de las páginas y a la versatilidad gráfica del diseño. Los dos que realmente separan los dos ámbitos son Epicurious y Recetae. Karlosnet no utiliza las clases, sigue utilizando las tablas, etc... Allrecipes y Delices utilizan clases, aunque siguen utilizando tablas aunque mezcladas con etiquetas «div».
  11. Utilización de palabras clave. Es un criterio exclusivamente para posicionamiento en buscadores. Los dos peores son Karlosnet y Recetae que se mueven en el rango 10-15, después está Allrecipes 15-20, y finalmente Delices y Epicurious en el rango 20-25.
  12. Multimedia. En esta época de web 2.0 y con menos limitaciones técnicas se valora la inclusión de vídeos, podcasts... Sólo incluyen vídeos Delices, Epicurious y Recetae. Aunque en el primero son sólo unos extractos de una cadena de documentales.
  13. Web 2.0. Este es un criterio de apreciación personal, e intenta valorar la intención en adapatarse a la nueva web, mayor participación del usuario, nuevos medios, etc... en definitiva que no sea un mero escaparate. Todos los sitios tienen una comunidad o foro, todos dejan subir y compartir recetas, en la mayoria se pueden hacer comentarios de las recetas, algunos dejan subir vídeos. Karlosnet dispone de un foro con diversos temas en los que se pueden incluir recetas. No dispone de la posiblidad de comentar las recetas de la empresa pero se pueden comentar las de los usaurios através de los foros. Delices es la que es menos participativas ya que unicamente se pueden compartir recetas y comentarlas. Epicurious dispone la posibilidad de compartir y comentar recetas, subir vídeos, además tiene foros... Recetae dispone la posibilidad de compartir fotos y videos de las recetas. Allrecipes sólo dispone de la posiblidad de compartir las recetas.

En la tabla adjunta se ofrecen las distintas valoraciones para los cuatro sitios web analizados

Diseño web. Card-sorting

El card-sorting u ordenación de tarjetas consiste en que un grupo de personas agrupan y asocian entre sí un número predeterminado de tarjetas etiquetadas con las diferentes categorías temáticas del sitio web.
Las personas que participan en este procedimiento tienen que ser potenciales usuarios de nuestro sitio web, y cuantas personas participen, 5 mínimisimo, más fiables serán los resultados obtenidos. La «tarjeta» ha de tener el nombre real del servicio y se le puede acompañar una descripción real del servicio, no tienen que ser frases de marketing. Es recomendable que no se le presenten más de 70 tarjetas por usuario. También ha de ser de una duración determinada, para unas 40 tarjetas unos 20 minutos.
La mecánica consiste en entregar las tarjetas, barajadas, a los participantes y han de agruparlas por similaridad. ¿Cómo se agrupan? Se puede hacer de dos formas. La primera, se les da los grupos, número y denominación, en los que tiene que agruparlas. En este caso hablaríamos de un card-sorting cerrado. La segunda forma de agruparlos es dejarlo a total discrecionalidad de los usuarios, tanto en número como en cuanto a denominación, preguntando en este caso la denominación de los grupos que han formado. En este caso hablaríamos de un card-sorting cerrado.
Existen aplicaciones informáticas de card-sorting: web-sort, EZSort, cardswort, etc...
Se pueden realizar dos tipos de análisis de los datos. Un análisis cualitativo, que consiste en anotar todas las dificultades, dudas, preguntas, con las que se encuentra el usuario. Se puede anotar que tarjetas agrupa con más rapidez, etc...
El segundo tipo de análisis que se realiza es el cuantitativo, y consiste en el procesamiento estadístico de los datos obtenidos por todos los usuarios.
De toda esta técnica se consigue aproximarse a cómo ven los usuarios la organización de nuestro sitio web, reduciéndose la incertidumbre.
A continuación os muestro un ejemplo de card-sorting realizado para este proyecto con 10 usuarios.

De este diagrama se ven cuáles son las agrupaciones que se forman en los seis grupos que yo quiero que haya.
Un resultado que a mí me ha llamado la atención, en este caso concreto, es que la categoría de «grandes chefs» se ha colocado con las categorías de «técnicas avanzadas», «técnicas básicas», etc... Cuando yo como promotor del sitio la habría puesto junto a las categorías de «restaurante más votado», «buscar restaurante», etc... Lo que demuestra que estaba equivocado, los usuarios lo ven en otro lugar.

Diseño web. Arquitectura de la Información I

Como he comentado anteriormente la arquitectura de la información consiste en organizar los contenidos para que el usuario pueda manejarlos, navegar por ellos y satisfacer sus necesidades de información. Es decir, incluye los sistemas de organización y estructuración de los contenidos, los sistemas de rotulado y etiquetado de dichos contenidos (naming) y los sistemas de navegación y recuperación de la información.
Todo esto se logra a través del análisis, descripción, indiziación y clasificación de los contenidos de nuestro sitio web mediante una serie de herramientas y conceptos. Así para la indiziación de contenidos podríamos utilizar los metadatos, categorías, taxonomías, palabras claves, etc.
Para el proyecto que estamos estudiando y de todo lo que llevamos expuesto sacaríamos un «arbol» web, en este caso derivado del card-sorting, como el siguiente:

Del cual hemos desarrollado, un poco, la parte de las recetas.

Diseño web. Arquitectura de la Información II

Recuperación de información
Debido a la amplitud del sitio sólo se va tratar la recuperación de la información en las secciones de las fichas técnicas de las recetas, los vinos y los restaurantes.

Facetado
Para implementar los sistemas de recuperación de la información se facetarán tanto las recetas, como los vinos y restaurantes, y se asignarán a los elementos las categorías correspondientes a sus facetas.
En las recetas se asignan las siguientes facetas: Ingrediente principal, ingrediente secundario, país/región, tipo de plato, temporada, dificultad, método de cocción, tiempo de preparación, dietas especiales, votación. La indización en este caso la realizará el usuario cuando publique su receta, y se le indicará cuáles son obligatorias y cuáles son opcionales. En este caso todas las facetas tienen unas categorías cerradas y se le presentará al usuario en forma de menú desplegable.
Para los vinos se crean las siguientes facetas: Añada, color, tipo, uva, país/región, bodega, puntuación.
Restaurante: Ciudad, precio, puntuación, tipo. En este caso la indización también la realizara el usuario, siendo todas las facetas de categorías cerradas, excepto en el caso de la bodega, que por la imposibilidad de poder abarcarlas todas se le ofrecerá una caja de texto para que incluya el nombre de la bodega.
También para los restaurantes se han creado unas facetas: Tipo de cocina, precio, país, ciudad y puntuación. Al igual que en los dos casos anteriores la indización la realizará el usuario. La faceta “ciudad” es muy amplia así que se utilizará una caja de texto para que el usuario pueda indizarla.
A todos los recursos habría que añadir los metadatos de título/nombre y fecha.

Sistemas de recuperación de la información
Para la recuperación de información se utilizará tanto sistemas de búsqueda como de navegación.
  • sistemas de búsqueda:
    • sistema tradicional de consulta a base de datos por solicitud del usuario mediante palabras clave introducidas por él. Se ofrecerá en todo el sitio web en la esquina superior derecha y consistira en una caja de texto para introducir las palabras clave y un botón de buscar.
    • Sistema de consulta a base de datos por solicitud del usuario mediante criba por categorias de facetas sugeridas por gestor del sitio. Se ofrecerá en la home y en cada una de las páginas principales de las secciones de recetas, vinos y restaurantes.
  • sistema de navegación: sistema de directorios organizado según las facetas y categorías de los elementos. Se ofrecerá en las secciones de recetas, vinos y restaurantes.
En el cuadro adjunto os muestro una relación más detallada de las facetas y sus categorías para recetas, vinos y restaurantes.

Diseño web. Wireframes I

Ya hemos llegado a la última fase de nuestro proyecto, los wireframes. Éstos no son más que un bocetado de nuestro sitio web con explicaciones sobre las funciones a realizar, que se presenta al cliente. Es aquí donde aplicaremos gráficamente todos los pasos que hemos dado anteriormente.
El boceto que se puede realizar es con el resultado final, es decir ya diseñado, y así el maquetador puede empezar su trabajo; o por el contrario, puede ser un esquema gráfico de cómo va ser nuestro sitio. Dependiendo de que opción hayamos elegido es aquí donde podremos dar rienda suelta a nuestra imaginación y a nuestros conocimientos como diseñadores gráficos.

En el proyecto que estamos viendo el bocetado está casi completo, el sitio web tendría un aspecto similar al que veis.


Home
  1. Area de navegación. Está dividida en dos partes, en la primera, a la izquierda, incluiremos las secciones más importantes para el usuario y cada sección tendrá un menú desplegable con sus respectivas secciones. En la segunda parte, a la derecha, se dará acceso a las secciones del sitio web con un uso menos intensivo.
  2. Buscador. Buscador en flash de recetas o vino o restaurante en el que se efectúa un filtrado según dos características.
  3. Area de Comunidad. Área en la que el usuario puede registrarse o darse de alta. Además se ofrece noticias de la comunidad como preguntas más activas de los foros y contenido más votado por los usuarios.
  4. Área de noticias. Sección en el que se ofrece periódicamente un resumen de una receta, un vino y un restaurante. Estarán directamente vinculados con su ficha técnica desarrollada. El resumen se acompaña con una serie de iconos que ofrecen un resumen de las características y que corresponden a una categoría de las facetas de cada elemento.
  5. Área de recursos. Sección actualizada periódicamente de pequeños recursos.
  6. Área histórica. Sección en el que se enumeran los elementos de recetas, vinos y restaurantes publicados en el último mes, para que el usuario que no realiza una visita periódica frecuenta pueda consultar las novedades.

Diseño web. Wireframes II



Home zona recetas
  1. Area de navegación. Está dividida en dos partes, en la primera, a la izquierda, incluiremos las secciones más importantes para el usuario y cada sección tendrá un menú desplegable con sus respectivas secciones. En la segunda parte, a la derecha, se dará acceso a las secciones del sitio web con un uso menos intensivo.
  2. Buscador. Buscador en flash de recetas o vino o restaurante en el que se efectúa un filtrado según dos características. Aquí podemos apreciar la labor de los arquitectos de la información.
  3. Area de Comunidad. Área en la que el usuario puede registrarse o darse de alta. Además se ofrece noticias de la comunidad como preguntas más activas de los foros y contenido más votado por los usuarios.
  4. Área de contenido. En esta sección se ofrecerá:
    • Receta de la semana: Breve descripción con las características plasmadas mediante iconos.
    • Receta más votada o comentada: Breve descripción con las características plasmadas mediante iconos.
    • El menu de la semana: Breve descripción del menú que hay para la semana. Se dará acceso a algunas fichas técnicas de las recetas. También se dará acceso a menus de dietas especiales (para celíacos, diabetes...)
  5. Acceso a las recetas y los menus del mes

Buscar receta y resultado


  1. Area de Comunidad. Se mantiene esta área porque se considera de máxima importancia. Es un área en la que el usuario puede registrarse o darse de alta. Además se ofrece noticias de la comunidad como preguntas más activas de los foros y contenido más votado por los usuarios. Este contenido se puede variar a lo largo del sitio: cambiando las noticias de los foros y “lo más votado” por “lo más comentado”, “lo más nuevo”...
  2. Buscador. Se mantiene el buscador por si el usuario equivocó los crierios de búsqueda o quiere cambiarlos.
  3. Resultados de búsqueda. Se muestran los resúltados de la búsqueda según parámetros deseados por el usuario. En los resultados se muestra: el título de la receta, descripción, características de la receta, representado mediante iconos y que se corresponden con las facetas de la receta. Estas características las habrá introducido el usuario cuando haya publicado la receta. Se ofrece la posibilidad de ccambiar el criterio para ordenar los resultados de la muestra.
  4. Publicidad.

Diseño web. Wireframes III


Ficha técnica de receta

  1. Area de Comunidad. Se mantiene esta área porque se considera de máxima importancia. Es un área en la que el usuario puede registrarse o darse de alta. Además se ofrece noticias de la comunidad como preguntas más activas de los foros y contenido más votado por los usuarios. Este contenido se puede variar a lo largo del sitio: cambiando las noticias de los foros y “lo más votado” por “lo más comentado”, “lo más nuevo”...
  2. Menú de Ficha Técnica. Menú para navegar por las distintas secciones de la receta: receta, comentarios, imágenes y vídeos. Estos menúa aparecerán si existe contenido para ellos.
  3. Ficha Técnica. Área de conternido de la receta. Se mantienen los iconos que describen las características de la receta. Se divide en dos secciones ingredientes y elaboración. En la sección ingredientes se añaden dos botones para añadir éstos a una lista de la compra que será acumulativa con los ingredientes de las distintas recetas que haya elegido el cliente, para poder imprimirla de una vez.
  4. Área interactiva. Área en el que el usuario podrá incluir un comentario a la receta, votar la receta, y añadir a una lista personal en la que se incluirán todas las recetas que quiera el usuario.