martes, 8 de marzo de 2011

Del contenido surge la forma. Guías para el diseño web

Para diseñar un sitio web debemos conocer bien todo el contenido que se va a publicar ya que lo contrario nos puede llevar a un sistema de retícula que no acabará por acomodar la información de una forma natural.

Botones y menús de navegación

Existen dos vías básicas para crear un menú de navegación.

  • Botones de igual tamaño
  • Botones de tamaño proporcional al texto que contienen
En el primer caso necesitaremos que todos los botones presenten un esquema de textos similar. Es decir, todos los botones deberán tener 1 o 2 palabras.

Si esto es posible y las palabras a su vez tienen tamaños más o menos homogéneos, será posible crear todos los botones iguales para el menú.


La botonera de apple es un buen ejemplo de este caso.
En el segundo escenario nos podemos encontrar con varias casos.

  • Tenemos botones con textos que varían mucho de tamaño.
  • Tenemos un sistema de navegación dinámico donde ponemos y quitamos botones en función de las preferencias / permisos del usuario.
  • Tenemos un diseño de página fluido, pero no los suficientes botones como para llenar todo el ancho de la página.
En cualquier caso, el definir el tamaño del botón en función del contenido parece ser la opción más flexible. No obligamos a estar escribiendo textos que se ajusten al diseño, si no que hacemos que el diseño se adapte al contenido.

En este caso deberemos especificar los márgenes que queremos que cada botón tenga alrededor del texto.


La botonera del mail de yahoo es un buen ejemplo de esta práctica.
¿Cúal es la solución correcta?

Cómo siempre, depende y como siempre se suelen combinar ambas opciones.

La solución de tamaños fijos es mas elegante pero requiere cierta disciplina a la hora de redactar contenidos y suele ser una buena opción para la navegación principal de un site.

Es decir, el nivel superior debe ser un nivel muy exigente a nivel de redacción y posicionamiento. No podemos poner cualquier cosa en el primer nivel y no deberiamos dar la imagen de empresa poco homogenéa en cuanto a sus "ideales".

La solución de tamaños fluidos es mas flexible pero menos elegante visualmente pero es más operativa para segundos niveles donde podemos necesitar esa flexibilidad para acomodar diferentes necesidades.

Tablas

Algunas recomendaciones básicas para crear tablas.

  1. Siempre mira bien el contenido e intenta comprender que se está contando.
  2. Separa los contenidos fijos de los dinámicos.
  3. Identifica totales, resúmenes, conclusiones.
Una vez que comprendes con claridad el contenido, se deben identificar incosistencias en el mismo que nos pueden perjudicar a la hora de diseñar.

Campos homogéneos

Debemos identificar que todos los campos estén etiquetados de forma consistente siguiendo jerarquías idénticas.
Que todos los campos tengan fecha, título, sección, etc...
Es muy normal encontrarse con tablas donde cada campo presenta información dispar.

Supongamos la siguiente tabla.

-----

Mac
18 equipos g3
23 equipos g4
4 equipos g5

Pc
7 workstations XP

Periféricos
Cámara Agfa

-----

Software

Mac
Photoshop
Flash

Pc
Autocad

------

Si analizamos esta tabla, podemos ver que existe una falta de títulos coherentes. Si bien tenemos "Software", no tenemos "Hardware" en la lista lo que hace la lista no sea del todo coherente.

Este tipo de errrores es muy común y hace que el diseñador tenga que trabaja con material corrompido de origén dando lugar a un mal diseño.

La tarea del arquitecto de la información es clave para detectar estos problemas antes de que lleguen a la mesa de diseño.

Contenidos dinámicos y fijos

La separación del contenido fijo del dinámico es importante ya que deberemos colocar los contenidos fijos en el eje horizontal y los dinámicos en el vertical.

De esta forma el crecimiento de la tabla se hará en el scroll vertical y no en el horizontal lo que daría problemas de impresión.

Resumenes

En la identificación de resumenes, resultados, etc... es clave que evitemos el concepto impreso de la maquetación colocando todos estos elementos al principio de la página en lugar de al final como ocurriría en la versión impresa.

Sombreados y líneas

Los sombreados y líneas son clave.
Las líneas deben utilizarse lo menos posible.


Para separar es mejor utilizar diferentes pesos tipográficos (Negrita y sin negrita) o colores. Negro, gris, etc...

Las líneas en caso de ser necesarias deben limitarse a la separación horizontal evitando la vertical.

El evitar la separación vertical es debido a que el concepto general que se ha de manejar a la hora de presentar tablos en una tabla es el que debemos intentar listar conceptos homogéneos por fila. Es decir, cada fila de información debe ser consistente evitando mezclar diferentes conceptos. verticalmente.

En los casos en los que esto sea imposible, utilizaremos líneas verticales para separar esta información.


Tabla con separación vertical.
Para los sombreados existe la posibilidad utilizarlos para diferenciar campos pares e impares en listados, pero es más interesante utilizar los sombreados para destacar novedades o cambios.

Justificación de textos en tablas

Las reglas básicas son:

  • Textos siempre justificados a la izquierda.
  • Números siempre justificados a la derecha.
  • Evitar los centrados en general.
En cuanto a fechas lo ideal es en lo posible tener un formato del tipo:
01 JUN 2005

El formato tipo:
01 05 2005 puede crear confusión entre US y el resto del mundo ya que los yankis ponen el mes antes del día.

Utilizando las 3 primeras letras del mes se evita la confusión.

Utilizar letras para el mes, a nivel de display y no de entrada de datos, ayuda a que la visualización sea más limpia ya que se evita el traducir el número al nombre del mes.

Justificado de textos en parrafos

Existen 4 formas de justificar párrafos en HTML.

  • Izquierda
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • Derecha
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • Centrado
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  • "Bandera"
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
El más normal es el justificado a la izquierda. El resto de justificados no son recomendables.

El justificado de bandera es quizás el más complejo de manejar. Este justificado lo que hace es manipular el tracking de todos los caracteres de la línea para que todas las líneas empiecen y acaben en el mismo punto creando una caja homogénea de texto.

Al manipular el tracking de todos los caracteres ocurre que cuantos menos tengamos por línea peor es el aspecto visual de la misma.

Aqui podemos ver algunos ejemplos.

"Bandera" size 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
"Bandera" size 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
"Bandera" size 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Como podemos ver con el tamaño 3 (el mayor de todos) empiezan a aparecer algunos espacios entre letras algo extraños. Si nos fijamos en la penúltima línea, los espacios son mucho más abiertos que entre las letras de las otras líneas. Este efecto es poco deseable ya que hace la lectura más complicada.

En el tamaño 2 tambien aparecen algunas zonas de "aguas" o espacios algo extraños.

Este justificado de bandera es, de nuevo, poco recomendable.

Números

Sobre los números hay un aspecto que es crucial.

La tipografía.

Si vamos a crear un site donde los números van a ser protagonistas, debemos tener mucho cuidado con la tipografía que elegimos para mostrarlos.

No existen muchas opciones en el mundo web, pero veamos las que están disponibles.

Arial
121.416,00
987.324,55


Verdana
121.416,00
987.324,55


Georgia
121.416,00
987.324,55


Times
121.416,00
987.324,55


Courier
121.416,00
987.324,55


Como podemos ver cada tipogría renderiza el texto con un tracking diferente.

  • Arial resulta muy densa visualmente.
  • Verdana es la más clara ya que el tracking es el más abierto de todas.
  • Georgia presenta un tipo de números que se denomina como "minúsculas" donde los números como el 9 y 8 caen por debajo de la línea de base. A parte, esta tipografía presenta un tracking irregular haciendo que números como e 1 presente un espacio menor que el 9.
  • La Times presenta un tracking correcto aunque es poco recomendable por un render bastante pobre en pantalla.
  • La Courier es la tipografia "monospace" por defecto aunque como hemos visto, verdana es más clara. Courier es una opción.
La opción más recomendable es Verdana. Aunque se ha ver en diferentes sistemas operativos ya que en PC puede darse otro tipo de tracking.

Un buen ejemplo.
La tabla de cotizaciones de El Pais.es

Un mal ejemplo.
El mundo en su sección de economia tiene un casillero en la columna de la derecha con los índices que da un poco de pena verlo. Las columnas cuando menos parece que están bailando.

Para Comentar Elige el Sistema de Comentario de tu Agrado:
comentarios google
comentarios blogger
comentarios facebook

Comparte este post con tus amigos!

...o también puedes seguir el blog en:

No olvides suscribirte, para recibir todas mis actualizaciones, directamente a tu email.

Ingresa tu correo electrónico:

Recuerda confirmar tu suscripción, haciendo click en el enlace que recibirás por email.

0 comentarios:

Comparte tu opinión con los demás, deja un comentario. ↓

Los comentarios son moderados, si contienen insultos o son ofensivos no se publicaran.

Es muy importante saber tu opinion sobre lo que se publica en este blog asi que POR FAVOR DEJA TU COMENTARIO.

Comentar es facil, simplemente escribe tu comentario en el cuadro de abajo, trata de comentar con tu perfil abilitado o donde dice Comentar como: selecciona Nombre/URL escribes tu nombre y listo!! (URL puede dejarse en blanco)

:a   :b   :c   :d   :e   :f   :g   :h   :i   :j   :k   :l   :m   :n   :o   :p   :q   :r   :s   :t Add smileys to Blogger +

 

©2009 - 2013 Pichujitos | Theme diseñado por chicoloco123 para Fuutec.com | Ir arriba ↑