Tipografía web (Introducción)

Presente en todo momento de la vida de todo ser humano en el mundo civilizado, desde que nos despertamos a que nos dormimos, se encuentra la tipografía.

Desde la hora en el despertador, la marca del shampoo y los letreros en la calle hasta los libros y libretas que utilizamos, estamos expuestos a diferentes tipos de letra, o tipografías (también llamadas fuentes por el anglicismo de Font), por lo que al conocer tantito de tipografía, el mundo se voltea de cabeza, primero se ve el tipo de letra y luego el contenido que compone.

Steve Jobs atribuye en gran parte el éxito de su sistema operativo (Mac) a la tipografía, misma que aprendió como oyente en la universidad donde empezó sus estudios (no se graduó), revolucionando la norma del momento, donde todo lo dominaban las máquinas de escribir y en las computadoras había una letra semi cuadrada, ideal para los monitores del momento.

El mismo Sr. Jobs dice que después Bill Gates se copió de ellos y habilitó la tipografía en su Windows, que como sabemos, se popularizó mundialmente hasta estar presente hoy en cerca del 90% de las computadoras personales, lo que permitió el acceso a tipografía a las masas, antes limitado solo a expertos tipógrafos que trabajaban con bloques de madera o de metal (ver foto anterior) para posteriormente entintarlos y después imprimir las letras en papel.

Aunque trataré este tema más a profundidad en otra ocasión, por el momento, quisiera aprovechar para mencionar las 4 categorías de tipografías que existen:Serif, Sans Serif, Script y Creativas.
Les pongo algunos ejemplos:
Serif: La más popular es Times New Roman
Sans-Serif: La más popular es Helvetica o Arial



La selección de la tipografía es lo que al final de cuentas hace o deshace una composición (anuncio, página, folleto, logotipo, etc.), pero lamentablemente, los sistemas operativos cuentan con una limitada cantidad de tipografías, que hace que todos los documentos luzcan igual al que hace alguien del otro lado del mundo (Casi todos en Times New Roman o en Arial).

En el mundo de Internet, la lista se reduce aún más, dejando sólo 8 tipos de letra que funcionan en todos los navegadores y en todos los sistemas operativos, y hasta hace poco, la única manera de poner tipografía profesional en una página web era a través de imágenes, que no permitía seleccionar el texto, perjudicaba a discapacitados con necesidad de lectores de pantalla (Braille o auditivas), mucho espacio en disco, etc.


Así hemos operado desde el comienzo de la Web hasta hace relativamente poco, con la introducción de Web Fonts, que permiten incrustar el tipo de letra en el servidor web, permitiendo a su vez que el mundo entero vea nuestra página en tipografía profesional.

Para muestra, un botón: en nuestra página web utilizamos la tipografía Kievit Pro y Cinecav X Sans.

Próximamente desarrollaremos un poco más este tema (tipografía), del cual podríamos escribir libros enteros.

Fotografía para la Web

Uno de los principales problemas que acechan a todas las páginas web es la falta de calidad en fotografías e imágenes.


Sin importar en qué medio (impreso, web, TV) o de qué asunto trate, las fotografías e imágenes son la parte más esencial de cualquier publicación. Sea para una tienda virtual profesional, amateur, catálogo, directorio o para un sitio de subastas, es crítico tener la mejor fotografía del producto posible. Por ejemplo, si en una tienda popular de subastas en línea quiere vender un reloj «seminuevo», ayuda incluir fotografías nítidas y claras desde varios ángulos, y si existen, las fotos publicadas por el fabricante. Mientras que en varias de las fotografías que acompañan éste post retratan equipo fotográfico profesional, no te preocupes, ahorita incluyo tips para poder tomarlas en casa. Una de las claves en toda fotografía es la iluminación, sea de productos, casas (y oficinas) o de personas, ya que tomadas sin flash, muchas veces salen oscuras, y con flash salen brillantes. Por esto, los profesionales usan iluminación difuminada.

En la imagen anterior, podemos ver dos reflectores iluminando un juego para asador a través de una tienda de campaña para difuminar. El propósito es generar una imagen como la siguiente, con muy pocas reflexiones y sin sombra (o muy poca sombra): También ayuda no sólo tomar diferentes ángulos, sino diferentes aplicaciones del producto, como del siguiente collar de perlas, mostrado en una modelo, detalle en acercamiento del broche con fondo blanco, en su caja, o como pulsera en otra modelo.



Estas variaciones ayudan al comprador a visualizar el producto ya sea como un regalo romántico o como un accesorio a tener, incrementando la confiabilidad y por lo tanto, ayudando a vender el producto más fácil.

En contraste, si el mismo cliente viera la descripción, pero no la foto, o una foto de muy baja calidad, pensaría que están tratando de hacer un fraude o que quizá no valga el precio, etc.

El tomar excelentes fotos podrías dejárselo a profesionales (nosotros tenemos estudio fotográfico para fotografía de productos en monterrey), pero tu lo puedes hacer en casa, solo basta tener 2 a 3 lámparas con focos de luz blanca (mientras más watts y/o lúmenes, mejor), y los puedes difuminar con un contenedor de plástico transparente, usando una cartulina blanca para la parte de abajo y atrás, y lograrás unas excelentes fotos.



Como siempre, en caso de tener cualquier duda o comentario, no dudes en hacérnosla llegar.

Por fín blogueando

"Lamentablemente existen incontables páginas inútiles—daría más frutos hacer un poster para poner en el baño de visitas"

He diseñado sitios desde 1996 y he tenido la fortuna de ver al Internet convertirse en la herramienta indispensable de ventas que ahora es, cada paso y peldaño. También soy director general de Dirección Virtual, el mejor despacho de diseño y hospedaje web en México, fundando en Monterrey a principios de 2004.
Aquí están nuestros planes de diseño de páginas web y hospedaje web.

Lamentablemente, debido a que hasta el amigo del vecino "sabe" diseñar una página, existen incontables páginas inútiles—daría más frutos hacer un poster para poner en el baño de visitas de la oficina del director general; ya que esos sitios carecen de un objetivo y los medios para lograrlo (vender, por ejemplo).

El objeto de éste blog es compartir la experiencia que he adquirido en éstos 13 años con directores de empresas y sus encargados de coordinar el diseño de su página Web, para que cada centavo que cueste su proyecto Web sea bien invertido.

Trataré de escribir lo más frecuentemente posible, sin embargo sólo escribiré sobre los temas más interesantes y aunque cueste un poco más de tiempo, haré lo posible para no aburrirlos.

AM