Magazine El Calamar Gigante

Portada del Primer Número
de la
Revista Calamar Gigante

El 5 de Febrero se presentó El Calamar Gigante en la escuela de arte de Guadalajara. El Calamar Gigante es un magazine de Cultura, Diseño y Actualidad nacido en Guadalajara.

La revista es gratuita y su primera tirada, de más 2.000 ejemplares, se ha distribuido por Guadalajara entre espacios públicos como la escuela de arte, biblioteca y diversos locales de Guadalajara.

Salón de Actos de la escuela de arte de Guadalajara
durante la presentación del Calamar Gigante

Los creadores de esta revista son los diseñadores Eva Pérez, Javier Arroyo, Jorge Diego, Gema Cormano, Eva Larbah, Francisco Javier A.P. y Luis Márquez G. La revista es un conjunto de diseños creados por cada uno de estos diseñadores. El contenido de la revista se integra alrededor de estos diseños dotando cada parte de la revista de una personalidad diferente. El índice de su primera edición da una idea sobre el contenido de la revista y espero que os abra el apetito sobre la misma:

• Actualidad. El Proceso de Bolonia
• Arte en el Mundo. Arte étnico: Irán
• Arte y Cultura. Monográfico. Historia de la Escritura nº1
• Diseño de Autor. Herakut
• Poema Ilustrado. Miguel Labordeta / Ilustración: Eva Larbah
• Opinión. José Enrique Canabal. Estética y Ética.
• Opinión. Sacarmento Alarcón. Abellán. Gaza
• Colaboración. José Luis Espinosa.
• Ilustración. Eva Larbah
• Arte y Cultura. Monográfico. Historia de la Fotografía nº1.
• Portfolio Fusiones. Francisco Javier
• Entrevista. Fernando Benito
• Microrrelato ilustrado. Influjo Refeljo. Surrealismo por Gedimita.
• Portfolio. Captando el espíritu. Texto y fotos: Luis Márquez
• Crítica de Cine. por Jorge Diego
• Nuestro Entorno. Villaescusa de Palositos
• Diseño de Autor. Saul Bass. Gráfica cinematográfica.
• Microrrelato Ilustrado. La Rueda por Jorge.
• Agenda / Cartelera. Actividades / Exposiciones / Concursos / Asociaciones

Estoy colaborando con ellos para conseguir plasmar la revista en una Web. Hasta ahora podéis consultar en elcalamargigante.com sólo una serie de imágenes que componen el primer número de la revista. Esperamos crear una página Web mucho más accesible en las próximas semanas.

Etiquetas: El Calamar Gigante, magazine, publishing

¿Para que resolución de pantalla debo diseñar?

La siguiente gráfica muestra las resoluciones usadas por los visitantes del portal Web del Ayuntamiento de Brihuega durante el último mes:

Capturas del portal Web de Brihuega en diferentes resoluciones

A continuación se muestra una serie de captura de pantallas de la página de inicio del portal Web de Brihuega a las resoluciones mencionadas en la gráfica anterior.

Página de inicio de Brihuega a 1024x768

Página de inicio de Brihuega a 1280 x 1024

Página de inicio de Brihuega a 1400x900 píxeles

Página de inicio de Brihuega a 1366x768 píxeles

Página de inicio de Brihuega a 800x600 píxeles

Página de inicio de Brihuega a 1680x1050 píxeles

Página de inicio de Brihuega a 1280 x 768 píxeles

Página de inicio de Brihuega a 1360x768 píxeles

Página de inicio de Brihuega a 1920x1200 píxeles

Página de inicio de Brihuega 1152 x 864 píxeles

Página de inicio de Brihuega a 1280x800 píxeles

¿Qué es el fold de una página Web?

Hace unos años cuando comencé en el diseño Web la mayoría de la gente navegaba en 800x600 píxeles. Esto se debía a que la mayoría de esos gigantescos monitores CRT no ofrecían una resolución mayor. Se denomina fold a la parte de una página Web escondida en una primera carga y a la que accedemos haciendo scroll hacia abajo. Fold es el término anglosajón que se refiere a la parte de los periódicos doblada que no estaba a la vista al público cuando éstos se exponían en los kioskos. Es decir, el creador del periódico se devanaba los sesos para lograr posicionar su contenido en la parte que si se veía con el periódico doblado para así captar la atención de los transeúntes y lograr más ventas. La siguiente imagen muestra este concepto y muestra la página de inicio de este portal con una línea roja que marca el comienzo del fold para una resolución de 1024x768 píxeles.

La importancia del fold en el diseño Web fue, en mi opinión, durante un gran tiempo sobrevalorada. Se consideraba que todo aquello que por debajo del fold era practicamente invisible al usuario. Con el paso del tiempo, todos nosostros nos hemos familiarizados con las metáforas del interfaz Web (buscador en la esquina superior derecha, logotipo con enlace a la página de inicio ...) y con las barras de desplazamiento verticales. Creo que los usuarios hacen más scroll de lo que creemos. Y que no lo ven como un gran problema.

No obstante, es importante colocar el contenido más importante por encima del fold. En mi caso las diferentes posiblidades de seguir mi trabajo y mi actividad. Es decir, el banner de mi agencia de diseño Web, la suscripción a la lista de correo, al RSS, a mi cuenta de Twitter o mi página de Facebook están justo encima del fold. Además el título, de la entrada actual y gran parte de su contenido (de modo que el visitante se anime a continuar leyendo) están también visibles.

¿Para que resolución de pantalla debo diseñar?

Las premisas de Jacob Nielsen sobre resolución de pantalla y diseño de página en 2006 son en su mayoría todavía válidas.

• Optimizar para 1024x768, que es actualmente la resolución de pantalla más usada. Por supuesto, la regla general es optimizar para la resolución más común de tu audiencia; esta resolución puede cambiar en el futuro. Puede ser incluso una resolución diferente ahora, si por ejemplo, estas diseñando el intranet de tu empresa, la cual da monitores con resoluciones grandes a todos sus empleados.
• No diseñes específicamente para una sola resolución por que las resoluciones varían entre usuarios. La variación en el tamaño de las ventanas es incluso más grande, porque los usuarios no tienen siempre sus navegadores maximizados (especialmente aquellos que tienen monitores grandes).
• Usa un diseño líquido, que se estire para adaptarse a la resolución del usuario (esto es, evita que diseños fijos que son siempre el mismo tamaño).

¿Cómo optimizar para 1024x768?

Los tres criterios principales para diseñar para una resolución concreta son:

• Visiblidad inicial: ¿Está visible toda la información relevante por encima del fold, de modo que los usuarios puedan verla sin hacer scroll? Es decir, una solución de compromiso entre cuantos objetos se muestran respecto cuanto detalle se muestra por cada objeto.
• Legibilidad: ¿Cómo de fácil se lee el texto en las diferentes columnas, dado el ancho asignado?
• Estética: ¿Cómo de atractiva es la página cuando los elementos están al tamaño y localización adecuados para esta resolución de pantalla?. ¿Se alinean todos los elementos correctamente; es decir, los pies de fotos justo debajo de las fotos, ...

El diseño del portal de Brihuega es un diseño fijo. Debido al modo actual de hacer zoom en los navegadores, considero que algunas de las ventajas que tenía el diseño fluido frente al fijo han desaparecido. Esto es tema para otra entrada y no quiero profundizar más aquí. Volviendo al diseño del portal de Brihuega este siempre tiene un ancho de algo menos de 1.000 píxeles. Este ancho se escogió para adaptarse a las principales resoluciones. Sólo un 3% de usuarios navegan a 800x600 por lo que el portal opta por adaptarse más a la gran mayoría que hacer un diseño todavía más conservador para 800 píxeles. Lo ideal sería ofrecer un diseño alternativo para dichas resoluciones.

Hay que tener en consideración que las capturas de pantalla incluyen un banner amarillo justo debajo de la navegación. Este banner no aparece normalmente en la página con lo que hay que imaginarse que los elementos mostrados para la resolución 1024x768, la más común, se parecerán más a la imagen en 1280x1024 píxeles que a la mostrada en esta entrada. No obstante la serie de capturas mostradas más arriba ponen a la vista algunos problemas:

• El banner superior, ocupa gran parte de la página antes del fold. A mi gusto demasiado espacio. Si el banner fuera 2/3 de su tamaño actual, la visibilidad inicial sería mejor.
• Contenido importante como los tres próximos eventos en la agenda de la villa o la información meteorológica de los próximos dos días aparece oculto inicialmente para la mayoría de las resoluciones.

No obstante, los principales elementos de navegación como buscador o menú están visibles incialmente, la legibilidad de los mismos es buena y el banner superior, si bien quita visibilidad, aparta también un componente estético.

Resumiendo, optimiza tus diseños para 1024x768 pero asegurate que tu página se ve bien para todo el abanico de resoluciones.

Etiquetas: resolution

Cosas a tener en cuenta al construir el índice de un portal Web

Soy de la opinión que un portal Web de más de 20 páginas tiene que tener un índice. Hay que ofrecer varias posibilidades para que nuestros visitantes sean capaces de encontrar el contenido buscado. Estas podrían ser índice, buscador y navegación. El concepto de índice viene de la industria del libro en un intento de facilitar el salto a una información determinada dentro de un texto. La manera de consumir información se basa a menudo en el escaneado de información más que en una lectura en profundidad. Por esto el concepto de índice es aplicable dentro del diseño Web.
A continuación presento varios punto a tener en cuenta cuando construimos un índice para nuestra página Web:

Utiliza las letras del abecedario para crear separadores visuales

Esto permite navegar el índice de un modo más rápido. El concepto se ilustra en la siguiente imagen, un extracto del índice de la Web de Brihuega.

Presta atención a como ordenar letras especiales

Es decir signos de exclamación, números, signos de interrogación, letras acentuadas etc. Intuitivamente los usuarios van a situar las páginas que comiencen por una Á en la categoría A. Comprueba que tu algoritmo de ordenación funciona del modo que esperan tus usuarios. Asi mismo, crea una convención para ordenar las páginas cuyo nombre comienza por un símbolo de exclamación, número o interrogación. Yo soy partidario de obviarlos para crear el orden. Es decir si queremos ordenar ¡Comienza el espectaculo!, el nombre que usaremos será Comienza el espectaculo y por lo tanto lo colocaremos sobre la letra C.

Orden Alfabético en múltiples columnas

Si alguna vez ordenas algo en orden alfabético en varias columnas ordena de arriba abajo y de izquierda derecha. Por ejemplo un índice o un listado de empresas.

Intuitivamente la manera de ordenar un abecedario es como la siguiente imagen.

Sin embargo, una lista de varias columnas ordenada alfabéticamente se lee mejor de arriba abajo y de izquierda a derecha. Durante un test de usabilidad, varios usuarios se sentían más cómodos con un listado ordenado como en la siguiente imagen y tenían problemas si el orden era de izquierda a derecha y de arriba abajo. De hecho el listado de empresas del portal del ayuntamiento de Brihuega se cambió para ajustarse a este descubrimiento.

Espero que construyas un índice para tu portal Web y así facilitar el uso del mismo. Si tenéis algún comentario sobre mis ideas, no dudes en contactar conmigo.

Etiquetas: index, sorting

Cosas a tener en cuenta al construir el índice de un portal Web

Soy de la opinión que un portal Web de más de 20 páginas tiene que tener un índice. Hay que ofrecer varias posibilidades para que nuestros visitantes sean capaces de encontrar el contenido buscado. Estas podrían ser índice, buscador y navegación. El concepto de índice viene de la industria del libro en un intento de facilitar el salto a una información determinada dentro de un texto. La manera de consumir información se basa a menudo en el escaneado de información más que en una lectura en profundidad. Por esto el concepto de índice es aplicable dentro del diseño Web.
A continuación presento varios punto a tener en cuenta cuando construimos un índice para nuestra página Web:

Utiliza las letras del abecedario para crear separadores visuales

Esto permite navegar el índice de un modo más rápido. El concepto se ilustra en la siguiente imagen, un extracto del índice de la Web de Brihuega.

Presta atención a como ordenar letras especiales

Es decir signos de exclamación, números, signos de interrogación, letras acentuadas etc. Intuitivamente los usuarios van a situar las páginas que comiencen por una Á en la categoría A. Comprueba que tu algoritmo de ordenación funciona del modo que esperan tus usuarios. Asi mismo, crea una convención para ordenar las páginas cuyo nombre comienza por un símbolo de exclamación, número o interrogación. Yo soy partidario de obviarlos para crear el orden. Es decir si queremos ordenar ¡Comienza el espectaculo!, el nombre que usaremos será Comienza el espectaculo y por lo tanto lo colocaremos sobre la letra C.

Orden Alfabético en múltiples columnas

Si alguna vez ordenas algo en orden alfabético en varias columnas ordena de arriba abajo y de izquierda derecha. Por ejemplo un índice o un listado de empresas.

Intuitivamente la manera de ordenar un abecedario es como la siguiente imagen.

Sin embargo, una lista de varias columnas ordenada alfabéticamente se lee mejor de arriba abajo y de izquierda a derecha. Durante un test de usabilidad, varios usuarios se sentían más cómodos con un listado ordenado como en la siguiente imagen y tenían problemas si el orden era de izquierda a derecha y de arriba abajo. De hecho el listado de empresas del portal del ayuntamiento de Brihuega se cambió para ajustarse a este descubrimiento.

 

Espero que construyas un índice para tu portal Web y así facilitar el uso del mismo. Si tenéis algún comentario sobre mis ideas, no dudes en contactar conmigo.