He aqui una definicion muy interesante de lo que conocemos como el diseño web:
El Diseño puede ser re-definido como una práctica social especializada que consiste en el procesamiento racional, intuitivo y fáctico de una serie de variables objetivas y subjetivas por medio del cual los hombres intervienen operativamente sobre la realidad material, “natural” y artificial, para producir – siguiendo una metodología proyectual y en el interior de un horizonte tecnológico, estético e ideológico predeterminado - objetos, servicios y mensajes destinados a satisfacer demandas, reales o inducidas, materiales y simbólicas..
Como ven, el diseño puede ser tomado como un arte, englobando el aspectó tecnológico por un lado, mas no descuidando la interacción con el usuario de otro modo, permitiendo la unión de 2 ámbitos aparentemente distantes entre si, como son el arte y las ciencias de la computación.
Diseños y mapas mentales
Mucho se ha hablado del ahorro en papel que nos reporta el uso del computador como medio de comunicación. Sin embargo, muchos diseñadores están regresando al uso del papel como medio eficaz de diseño, para plasmar sus ideas. Lo mejor antes de comenzar a diseñar resulta plasmar el mapa mental generado para un mejor entendimiento, y por decirlo asi, aterrizaje de las ideas generadas para la creación del sistema.
Para muestra un boton, aqui algunos ejemplos de lo que digo, aunque distan mucho de ser entendibles, al menos para simples mortales.Adjunto aqui algunos bocetos, desde los ejemplos más claros, hasta los mas, como decirlo, artísticos:
Aqui dos modelos mentales, bien artisticos:
el modelo de delicious, bastante mas formal:
Para comenzar un buen diseño, este resulta un boceto muy adecuado:
Esta ya resulta un poco mas elaborado, pero mas sólido, es decir, representa mejor las ideas planteadas:
Lo importante detrás de todo es permitir que el brain storm generado por las ideas pueda ser plasmado de alguna manera en algo tangible. Uno nunca sabe que genial idea puede ser llevada a la práctica gracias a este medio.
Para muestra un boton, aqui algunos ejemplos de lo que digo, aunque distan mucho de ser entendibles, al menos para simples mortales.Adjunto aqui algunos bocetos, desde los ejemplos más claros, hasta los mas, como decirlo, artísticos:
Aqui dos modelos mentales, bien artisticos:
el modelo de delicious, bastante mas formal:
Para comenzar un buen diseño, este resulta un boceto muy adecuado:
Esta ya resulta un poco mas elaborado, pero mas sólido, es decir, representa mejor las ideas planteadas:
Lo importante detrás de todo es permitir que el brain storm generado por las ideas pueda ser plasmado de alguna manera en algo tangible. Uno nunca sabe que genial idea puede ser llevada a la práctica gracias a este medio.
Tipografía con CSS: 2 Parte
Continuando con la explicacion anterior del uso del font stack, he aqui una forma de trabajar sobre los titulos y los párrafos correspondientes:
Títulos [superior a 12px]:
Familia tipográfica: Ideal, alternativa, común, genérica;
1. Ideal - Su selección no tiene porque ser obligatoria a lo que se considera universalmente como “seguro para web“. Hay bastantes tipografías que tienen una alta penetración en el mercado. Simplemente no hay que escoger nada muy rebuscado o serás el único en visualizarlo correctamente.
2. Alternativas - Cuando selecciones tipografías para encabezados y título, recuerda que las familias tipográficas serán más notorias y, por lo mismo, es necesario que selecciones una alternativa que esté más cerca del espíritu que del tamaño o del valor relativo. Para encontrar a esta “alma gemela” puede que desees buscar algo cercano en la clasificación tipográfica o buscar alguna creada por el mismo diseñador de tipos. Busca similitudes en las formas y contraformas de las letras.
3. Común - Solo necesitas algo ligeramente parecido y que no vaya a romper con tu diseño.
4. Genéricas - Esto es para los fanáticos que no creen en la instalación de fuentes.
Párrafos [inferior o igual a 12px]:
Familia tipográfica: Ideal, muy cercana, común, genérico;
1. Ideal - Incluso si tienes la intención de que los textos extensos o párrafos sean coherentes con los títulos, puede que desees considerar la legibilidad del tipo de letra según el largo de los párrafos. Por ejemplo: Helvetica Neue y Arial son más adecuadas para ser leídas en pequeños tamaños en pantalla que Helvetica.
2. Muy cercana - Encuentra algo que esté bien representada, una tipo multi-plataforma que no hunda tu diseño. Por ejemplo: Hay alrededor de 2 puntos de diferencia entre el ancho de Times New Roman y Georgia. Esto se multiplica por el número de caracteres total de sus párrafos y puede significar un desastre para tu otrora-bonita-web.
3. Común - Algo similar en sabor y presentación.
4. Genéricas - Una vez más, acabar con la clasificación genérica.
Ten en cuenta que si tu tipografía ideal está solo en Mac, puede que quieras usar una alternativa que sea más frecuente en Windows.
Organiza tu cascada tipográfica.
Ahora, según estas directrices y basándose en la experiencia de “tipos” más sabios, se han compilado varias lista de cascadas de familias tipográficas que abren más posibilidades para los diseñadores web y que se espera ofrezcan sustitutos apropiados:
p - ideales para párrafos o textos extensos.
t - ideales para encabezados o títulos.
Arial, Helvetica Neue, Helvetica, sans-serif - p, t
Baskerville, Times New Roman, Times, serif - p
Baskerville, Times, Times New Roman, serif - t
Cambria, Georgia, Times, Times New Roman, serif - p, t
Century Gothic, Apple Gothic, sans-serif - p, t
Consolas, Lucida Console, Monaco, monospace - p, t
Copperplate Light, Copperplate Gothic Light, serif - p, t
Courier New, Courier, monospace - p, t
Franklin Gothic Medium, Arial Narrow Bold, Arial, sans-serif - p, t
Futura, Century Gothic, AppleGothic, sans-serif - p, t
Garamond, Hoefler Text, Times New Roman, Times, serif - p
Garamond, Hoefler Text, Palatino, Palatino Linotype, serif - t
Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif - p
Geneva, Verdana, Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif - t
Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif - p
Georgia, Times, Times New Roman, serif - t
GillSans, Calibri, Trebuchet, sans-serif - p
GillSans, Trebuchet, Calibri, sans-serif - t
Helvetica Neue, Arial, Helvetica, sans-serif - p
Helvetica, Helvetica Neue, Arial, sans-serif - t
Impact, Haettenschweiler, Arial Narrow Bold, sans-serif - p, t
Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif - p, t
Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif - p
Palatino, Palatino Linotype, Hoefler Text, Times, Times New Roman, serif - t
Tahoma, Geneva, Verdana - p
Tahoma, Verdana, Geneva - t
Times, Times New Roman, Georgia, serif - p, t
Trebuchet, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif - p
Trebuchet, Tahoma, Arial, sans-serif - t
Verdana, Geneva, Tahoma, sans-serif - p
Verdana, Tahoma, Geneva, sans-serif - t
Deliberadamente se dejó algunos “bodrios tipográficos” fuera (Comic Sans), porque no se sustentan según lo explicado anteriormente.
Estas cascadas de familias tipográficas son solo ejemplos y recomendaciones de lo que se puede lograr, por lo mismo no resuelven todos los aspectos del diseño web.
Para una comparación más completa, descarga el pdf. Ahí encontrarás ejemplos de títulos y textos extensos, según las familias expuestas anteriormente.
Títulos [superior a 12px]:
Familia tipográfica: Ideal, alternativa, común, genérica;
1. Ideal - Su selección no tiene porque ser obligatoria a lo que se considera universalmente como “seguro para web“. Hay bastantes tipografías que tienen una alta penetración en el mercado. Simplemente no hay que escoger nada muy rebuscado o serás el único en visualizarlo correctamente.
2. Alternativas - Cuando selecciones tipografías para encabezados y título, recuerda que las familias tipográficas serán más notorias y, por lo mismo, es necesario que selecciones una alternativa que esté más cerca del espíritu que del tamaño o del valor relativo. Para encontrar a esta “alma gemela” puede que desees buscar algo cercano en la clasificación tipográfica o buscar alguna creada por el mismo diseñador de tipos. Busca similitudes en las formas y contraformas de las letras.
3. Común - Solo necesitas algo ligeramente parecido y que no vaya a romper con tu diseño.
4. Genéricas - Esto es para los fanáticos que no creen en la instalación de fuentes.
Párrafos [inferior o igual a 12px]:
Familia tipográfica: Ideal, muy cercana, común, genérico;
1. Ideal - Incluso si tienes la intención de que los textos extensos o párrafos sean coherentes con los títulos, puede que desees considerar la legibilidad del tipo de letra según el largo de los párrafos. Por ejemplo: Helvetica Neue y Arial son más adecuadas para ser leídas en pequeños tamaños en pantalla que Helvetica.
2. Muy cercana - Encuentra algo que esté bien representada, una tipo multi-plataforma que no hunda tu diseño. Por ejemplo: Hay alrededor de 2 puntos de diferencia entre el ancho de Times New Roman y Georgia. Esto se multiplica por el número de caracteres total de sus párrafos y puede significar un desastre para tu otrora-bonita-web.
3. Común - Algo similar en sabor y presentación.
4. Genéricas - Una vez más, acabar con la clasificación genérica.
Ten en cuenta que si tu tipografía ideal está solo en Mac, puede que quieras usar una alternativa que sea más frecuente en Windows.
Organiza tu cascada tipográfica.
Ahora, según estas directrices y basándose en la experiencia de “tipos” más sabios, se han compilado varias lista de cascadas de familias tipográficas que abren más posibilidades para los diseñadores web y que se espera ofrezcan sustitutos apropiados:
p - ideales para párrafos o textos extensos.
t - ideales para encabezados o títulos.
Arial, Helvetica Neue, Helvetica, sans-serif - p, t
Baskerville, Times New Roman, Times, serif - p
Baskerville, Times, Times New Roman, serif - t
Cambria, Georgia, Times, Times New Roman, serif - p, t
Century Gothic, Apple Gothic, sans-serif - p, t
Consolas, Lucida Console, Monaco, monospace - p, t
Copperplate Light, Copperplate Gothic Light, serif - p, t
Courier New, Courier, monospace - p, t
Franklin Gothic Medium, Arial Narrow Bold, Arial, sans-serif - p, t
Futura, Century Gothic, AppleGothic, sans-serif - p, t
Garamond, Hoefler Text, Times New Roman, Times, serif - p
Garamond, Hoefler Text, Palatino, Palatino Linotype, serif - t
Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif - p
Geneva, Verdana, Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif - t
Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif - p
Georgia, Times, Times New Roman, serif - t
GillSans, Calibri, Trebuchet, sans-serif - p
GillSans, Trebuchet, Calibri, sans-serif - t
Helvetica Neue, Arial, Helvetica, sans-serif - p
Helvetica, Helvetica Neue, Arial, sans-serif - t
Impact, Haettenschweiler, Arial Narrow Bold, sans-serif - p, t
Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif - p, t
Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif - p
Palatino, Palatino Linotype, Hoefler Text, Times, Times New Roman, serif - t
Tahoma, Geneva, Verdana - p
Tahoma, Verdana, Geneva - t
Times, Times New Roman, Georgia, serif - p, t
Trebuchet, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif - p
Trebuchet, Tahoma, Arial, sans-serif - t
Verdana, Geneva, Tahoma, sans-serif - p
Verdana, Tahoma, Geneva, sans-serif - t
Deliberadamente se dejó algunos “bodrios tipográficos” fuera (Comic Sans), porque no se sustentan según lo explicado anteriormente.
Estas cascadas de familias tipográficas son solo ejemplos y recomendaciones de lo que se puede lograr, por lo mismo no resuelven todos los aspectos del diseño web.
Para una comparación más completa, descarga el pdf. Ahí encontrarás ejemplos de títulos y textos extensos, según las familias expuestas anteriormente.
Tipografía con CSS: 1 Parte
Uno de los aspectos de diseño web que ofende a los diseñadores es la falta de tipografías que se consideran seguras para su uso. Si bien es cierto que sólo hay un puñado de fuentes web seguras, tenemos a nuestra disposición muchas que pueden llegar a ser muy poderosas. Por sobre esto, el código CSS nos ofrece algo llamado cascada de familias tipográficas(font stack).
Las cascadas de familias tipográficas te dan libertad.
Quieres utilizar Gill Sans?, úsala entonces. La cascadas de familias tipográficas son listas de prioridades tipográficas, que son definidas en el atributo “font-family” del CSS, el cual proporciona la información para que el navegador busque dentro de las opciones que les damos y que además estén instaladas en el sistema. Esto significa que puedes utilizar Gill Sans, y si los usuarios no la tienen, puedes darles la opción de un sustituto adecuado que no opacará su experiencia de uso. Como Richard Rutter ya ha ilustrado, hay toda una gama de tipografías que pueden ser utilizadas para servir las necesidades de diseño.
Lamentablemente no se está utilizando este atributo a toda su capacida, tanto en prácticas comunes de diseño web o en tecnologías asociadas al desarrollo de sitios. Hay una clara desconsideración en el proceso de creación de estas cascadas. Por ejemplo, Dreamweaver nos entrega estas opciones:
- Arial, Helvetica, sans-serif
- Courier New, Courier, monospace
- Times New Roman, Times, serif
- Georgia, Times New Roman, Times, serif
- Verdana, Arial, Helvetica, sans-serif
- Geneva, Arial, Helvetica, sans-serif
Como pueden ver no hay muchas posibilidades y las tipos sustitutas no son las más adecuadas. Este es un ejemplo de cómo la carencia de normas tipográficas en la web están dando lugar a una toma de decisiones que encaminan hacia un mal diseño. Para que vamos a especular en cuanto a quién es el culpable de que la tipografía en la web deje mucho que desear, ya que hay tantos culpables como infracciones. Diré, no obstante, que las cascadas de familias tipográficas son, en definitiva, factores de diseño y deberían ser analizadas como tal.
Todo queda en la familia
Cuando se crea una cascada tipográfica, en primer lugar hay que considerar el contexto del texto. ¿Elegiremos una tipografía para título, sub-título, párrafos ó textos extensos? Estas posibilidades determinarán el orden que debemos seguir. Sabemos que ciertas tipos funcionan mejor para títulos y encabezados y otras para textos extensos. Por ejemplo, Helvetica trabaja bien en pantalla cuando el texto esta en tamaños grandes, mientras que Helvetica Neue, debido a que es un poco más ancha, se lee mejor en tamaños más pequeños en pantalla. Arial también se ve mejor que Helvetica en tamaños pequeños. Por lo tanto, la cascada tipográfica para Helvetica puede ser diferente dependiendo de si se utiliza para textos extensos o títulos de página.
Teniendo en cuenta el contexto, hay un par de cosas más que considerar cuando creamos la cascada. En primer lugar, seleccionar la tipo ideal. Desde ahí, el camino que debemos seguir siempre será en función del contexto.
En el proximo post hablaremos mas sobre la tipografia de los titulos, los párrafos, y la estructura general de un correcto uso del CSS.
Suscribirse a:
Entradas (Atom)