Tipos de imágenes y tipografias aplicadas al diseño web
08/11/2016

Tipos de imágenes y tipografias aplicadas al diseño web

Programación y Diseño Web

Al igual que otras veces hemos hablado de la evolución de los diseños en las aplicaciones móviles, el panorama web también ha sufrido cambios con el tiempo, siendo víctima de las distintas modas que han ido pasando, para bien por supuesto, que han aportado calidad al producto final, ayudando a la legibilidad y a la información inicial que el usuario recibe en el primer vistazo, algo que parece que aún se escapa a algunos responsables dedicados al mantenimiento de estas páginas.

Tenemos que tener en cuenta que hay ciertas fuentes que son tan poco recomendadas de usar que casi rozan el veto absoluto (comic sans), y luego está el hecho de usar colores agradables para la visión, en vez de colores chillones. Vamos a ver todo esto a continuación.

Diseño web pensando en el usuario

Empezaremos por las fuentes.

Como bien he mencionado, una fuente, aparte de ser un aparato urbano que expulsa agua, es la tipografía que usaremos para redactar, no sólo nuestra web, también documentos profesionales, ya que las mismas prácticas se aplican en ambos casos. Lo más importante al seleccionar una en concreto es la legibilidad, algo que no únicamente incluye el hecho de entender qué hay escrito, también observar que no haya letras que se confundan fácilmente.

Esto es algo que alguna vez hemos visto, seguramente: “i” que parecen “l”, “l” que parecen “1”...cosas de este estilo. Puede parecer un capricho, pero si os fijáis, prácticamente todas las webs que quieran ser mínimamente profesionales tratan de usar fuentes “Serif”, las cuales incluyen derivados de Arial, Times y estas tan conocidas que las letras están muy bien trazadas y no se confunden las unas con las otras con su forma.

He comentado que fuentes como “Comic Sans” están muy penalizadas debido a su falta de seriedad, pero sin embargo está muy extendida. ¿Cómo es esto posible? La podemos ver en muchos lugares ya que es una fuente, como bien digo, casual y “sin ambición” lo que genera que en algunos casos sea una “fuente segura”. Pero esto que parece una virtud es su mayor defecto, porqué el hecho que sea tan fácil de usar sin pensarlo dos veces ha generado que sea ciertamente odiada en todos los ámbitos, sobretodo entre diseñadores. Yo no la recomiendo para nada, considero, a nivel personal, que una fuente Arial es mucho más segura, tanto por legibilidad como seriedad. Funciona con todo, desde la escritura de documentación hasta la presentación de conferencias.

Finalmente, para terminar con las fuentes, es la escritura de código fuente para el usuario. Imaginad un blog dedicado al desarrollo en el que queráis explicar trozos de ejemplo. Está estandarizado que tengan un formato parecido al texto de consola, con fuentes llamadas, de forma muy imaginativa, “console” o “mono”. Esto como resultado tiene que, de un sólo vistazo, sepamos identificar qué es documentación y qué es ejemplo, algo que ayuda mucho cuando estamos navegando.

¿Pero qué hay de las imágenes y los colores?

Muy fácil y resumido en dos reglas: blanco y tonos de gris. Si deseáis añadir un color para dar un poco de identidad, no debe predominar en todos lados, más bien deben ser pinceladas sutiles. Por ejemplo en el título, en los enlaces (recordad que los enlaces por defecto son azules y pasan a ser púrpuras una vez visitados), etc.

La idea es que el blanco y el negro son colores más neutrales que ayudan a que los ojos no se cansen ni duelan. Son los dos colores escogidos normalmente para entornos donde vas a estar mucho rato fijando la vista, como software de desarrollo, diseño o edición de vídeo, lo cual está transportado por supuesto al diseño web. La idea detrás de nuestra identidad en la red es que el usuario pase mucho rato leyendo nuestra información y no la de los demás. Si nos presentamos con colores muy llamativos les haremos huir sin dudarlo. En esto también entra el formato de la fuente: parece de sentido común pero el texto no se debe fundir con el fondo, ni siquiera de las imágenes, algo que a día de hoy se sigue viendo.

¿Cómo lo haremos? Muy fácil, tendremos el fondo de un color, que coincidirá con el texto, mientras que el contenido estará integrado en un fondo de color opuesto. Por ejemplo, si visitamos Siliconera, una web dedicada a la industria del videojuego nipón, veremos todo lo que os he comentado: fuentes arial, colores neutros que no molesten y el detalle personal, que es el rojo y el verde de su título, en sitios muy sutiles cómo títulos o secciones. Este es un ejemplo de un buen blog.

Para ver lo que no debemos hacer, os dejo una web con varios ejemplos horribles, ya que una imagen vale más que mil palabras.

Curso relacionado: Curso de Diseño Gráfico Multimedia

Comparte en:

Grado Superior de Desarrollo de Aplicaciones informáticas en la Salle de Barcelona. Trabaja actualmente como desarrollador de aplicaciones para móviles, especialidad en videojuegos.

Mejores plataformas para crear un ecommerce
21/05/2020
Carlos Yañez

Mejores plataformas para crear un ecommerce

En el post de hoy veremos cuales son las plataformas de ecommerce más adecuadas para crear una tienda on-line para que, si estás interesado, puedas desarrollar tu pr...

Consejos para detectar un ciberataque
21/05/2020
Rubén Bellido

Consejos para detectar un ciberataque

Estamos en un momento de pleno auge digital, es por ello que también estamos en un punto que los ciberataques van en aumento exponencialmente y así lo demuestran dif...

claves web exito
09/05/2020
Carlos Yañez

6 consejos para hacer una web exitosa

En el post de hoy te daremos las claves para que tu web sea realmente exitosa. Veamos en qué apoyarnos para conseguir el éxito.