Selección de Tipografía

Para decidir que tipos de letra se usarán en el sitio, hay que tomar en cuenta nuevamente el hecho de que el sitio se va a desplegar no solo en computadoras sino también en dispositivos móviles como lo exige el usuario.

Al elegir los tipos de letra para la Web, se debe tener en cuenta las siguientes cualidades: estilo, forma, lo fácil que es para leer, el uso previsto de la tipografía – si es para lectura larga o de manera decorativa, como renderiza en distintos dispositivos, si es que fue hecha para pantalla o no y si es gratuita o pagada. (Viljami Salminen, 2013, Prototyping Responsive Typography, http://viljamis.com/)

El hecho de que el sitio se deba adaptar a dispositivos, significa que las columnas de texto serán elásticas y por lo tanto los párrafos no tendrán un ancho definido. El problema está cuando una columna es muy delgada lo cual sucede en un dispositivo móvil y un título puede llegar a ocupar demasiados renglones.

Marko Dugonjić, habla un poco sobre este tema:

Tipografías condensadas, así como tipografías decorativas especializadas están siendo redescubiertas en los sitios webs. Estos añaden estilo y peso, que funciona especialmente bien para llamar la atención en los encabezados y como enlaces de texto largo. (Dugonjić, 2013, Designing For The Reading Experience, smashingmagazine.com)

A lo que se refiere Dugonjić es que, como se mencionó previamente, una tipografía condensada para titulares es ideal cuando el sitio es elástico. Se muestra un ejemplo a continuación:

Como se observa en el ejemplo, se puede reducir hasta la mitad de renglones en un título utilizando una tipografía condensada, por supuesto sin perder legibilidad y manteniendo jerarquía.

Las tipografías a usarse serán tomadas de Google Fonts, un directorio de tipografías gratuitas de fácil implementación y de alta compatibilidad con navegadores.

Para titulares como se pudo apreciar, será una tipografía condensada para ahorrar espacio y mostrar una mayor cantidad de información por página. Así el usuario tendrá a su disposición accesos directos de otros artículos de su interés.

Google fonts ofrece una gran variedad de tipografías condensadas. Entre las destacadas podemos encontrar:

Six Caps nos ofrece un solo grosor y es una de las más condensadas lo cual disminuye legibilidad. Además la altura de la x casi alcanza la línea de las ascendentes, lo cual también disminuye su legibilidad.

Squad One que también nos ofrece un solo grosor y es medianamente condensada lo cual es bueno por su legibilidad pero en un título largo, sigue ocupando mucho espacio.

Económica que nos ofrece 4 opciones de las cuales dos son Italic siendo estas descartadas, ya que no se las recomienda usar en titulares.

Y Oswald, siendo esta la más adecuada ya que nos ofrece 3 opciones medianamente condensadas, una distancia apropiada entre la altura de la x y la ascendente, lo cual aumenta legibilidad.

De la misma manera para párrafos, se selecciona una tipografía que combine con los titulares. Con los mismos criterios de selección y tomando en cuenta una gran variedad de tipografías, se selecciona “Gudea” como la tipografía para párrafos y para submenús y para información de la publicación.

Esta es bastante legible, tiene 3 grosores y uno de ellos es italic que en este caso nos servirá para enfatizar textos y destacarlos del contenido cercano.

Se han seleccionado dos tipografías sin serif ya que esto facilita la lectura en pantallas, brinda un ambiente informal, joven y fresco, que es precisamente lo que el usuario busca en este sitio.

Las tipografías sin serif son las mejores para pantallas. Mientras las tipografías con serif interrumpen el flujo de lectura en pantalla(a pesar de que crean el flujo en impresos), las sin serif crean un proceso de lectura intuitivo y limpio en la pantalla. Las tipografías Sans Serif producen una sensación de informalidad, es por eso que no son buenas para sitios de leyes, pero son perfectas para blogs y sitios personales. (Alex Bulat, “Font Psychology: What Your Font Says About Your Website”,

http://blog.templatemonster.com/2012/05/16/font-psychology/)

2.3.1.4.

Imágenes

Una imagen vale mas que mil palabras, y grandes imágenes ayudan a hacer la diferencia entre un sitio promedio y uno verdaderamente cautivador. “Las imágenes son utilizadas para ponerle tono a un sitio en el menor tiempo que toma leer una descripción.” (Duckett, 2011, pag 98)

Si se tiene una página que muestra un sin número de fotografías (como es el caso de la galería del sitio), solo con ponerlas en un fondo simple pero consistente ayuda a que luzcan mejor en un grupo.

Duckett hace las siguientes recomendaciones al poner imágenes en la web. Las imágenes deberían :

• Ser relevantes

• Transmitir información

• Transmitir el estado de ánimo adecuado • Ser instantáneamente reconocidas • Adaptarse a la paleta de colores

En este caso las fotografías e ilustraciones, no deberán ser ofensivas, violentas, agresivas ni racistas, para reafirmar que, desde la música se generan diversos estilos de vida y nuevas prácticas culturales juveniles, los cuales deben ser comprendidos para ser aceptados y

desmitificados, además de fortalecer la idea de tolerancia, igualdad social, de salud, derechos y expresión juvenil.

2.3.2.Elementos

Se tomará como punto de partida la manera en la que se muestran los elementos en la maqueta para ir diseñando las partes, manteniendo el concepto moderno y minimalista que se ajuste a esta variedad de públicos ya mencionada.