layout y tipografia - luiscarlosaceves.com · diferentes texturas a la página. ... • el uso de...

maru cázares • udem • v erano 2009

Diseño de Interfases para Comercio Electrónico

Herramientas de Diseñode páginas WEB

Layout y Tipografía



Layout• Cómo

estructuramosla informaciónen un documento



Diseño flexible• La apariencia de la página depende de elementos tales como

el tamaño de la pantalla, la resolución, los coloresestablecidos, la altura y ancho de la ventana del browser, laspreferencias del software tales como las ligas, el color delfondo, y las fuentes diponibles.

• No se puede controlar el diseño en una página de web.• La mejor solución es aceptar lo que se tiene y diseñar con

flexibilidad páginas que son legibles y accesibles a todos losusuarios.



Layout usando cascadas de estilos [css]

•Una de las propiedades visuales que tiene el usode CSS es el cómo posicionar los elementos en lapágina.

•Permite al diseñador definir los márgenes, laposición del texto y las imágenes en relación deunas con otras, esconder y mostrar elementos, etc.

http://www.subcide.com/tutorials/csslayout/index.aspx



Características de la tipogafía en la web

• La tipografía se proyecta a una resolución muchísimo masbaja que en un documento impreso.

• La mayoría de las revistas y libros maneja la tipografía a 1200puntos por pulgada, mientras que en una pantalla sólo a 85.

• El área usable en una pantalla es mucho menor que en unarevista o un libro, limitando la información sin mover lapantalla.

• Pero quizá la mas diferente de las características es suvariabilidad.



• La tipografía es la herramienta que debemos usar para dardiferentes texturas a la página.

• La primera cosa que el lector verá no es el título sino loscontrastes de los elementos en la página.

• Una composición con parches, sin orden, va a dar masdificultad al lector y sera imposible de predecir.

• http://www.havenworks.com/

Legibilidad



• http://www.papress.com/thinkingwithtype/



Alineación

• Los márgenes delinean el textoprincipal de otros elementos en lapágina, le dan unidad a la aparienciadel sitio.

• Aumentan el interés visual por mediode contraste entre el espacio positivoy el negativo.



Alineación

• Los bloques de texto tienen diferentes formas de ajustarse al margen:hacia la izquierda, derecha, justificado, central… Texto justificado

• Es el que se posiciona a ambos márgenes. Central y a la derecha:

• Difícil de leer. Justificado a la izquierda

• Es la opcion las legible. Justificacion de encabezados

• Titulos y encabezados sobre texto justificado a la izquierda deben serjustificados a la izquierda también.

• Titulos centrados lucen bien con texto justificado, pero texto justificado nodebería ser usado en páginas de web.



No a la alineación justificada en web

El diseño de un sitio web no es igual a un folleto impreso.

específicamente de la alineación justificada que nos da una caja de textoperfectamente cuadrada, bueno esto es sólo en contados casos.

muchos sitios usan justificación del texto

El primer problema: tipo visual, al justificar los textos en columnas o cajas de textode dimensiones medianas a pequeñas digamos que desde unos 450 px para abajose generan ríos en el texto (ver foto anexa - los ríos están señalados en amarillo),haciendo que la mancha de texto se vea irregular generando un ruido visual.

La segunda razón y más importante es que afecta la legibilidad del texto, como losespacios entre palabras no son constantes hay "brincos" en la lectura haciendo deesta una tarea de descifrar prácticamente.



¿Porque pasa esto?

Falta de control sobre el texto. Mientras notengamos separación silábica en los textosHTML en el idioma que está escrito, esteproblema seguirá presentándose

Forma en que cada navegador renderea eltexto, cada navegador tiene sus estándaresy su propio motor de render



Hay algunos casos en que la alineación justificada se ve bien, y es ensitios donde el ancho de columna es grande, esto le da oportunidad altexto de ajustarse visualmente y que los ríos no sean tan evidentes.

Aún así se generan otros problemas porque hay anchos de columnasrecomendados para lectura que se mide en palabras.



• Líneas anchas de texto requieren que los lectores muevan la cabeza un pocopara forzar a que los músculos de los ojos se ajusten a lo largo del texto.

• La legibilidad sufre porque al final de la línea, el lector puede perder la líneasiguiente.

• Uno de los principios fundamentales en la web es que el usuario debe poderestructurar cómo ver la pantalla.

• Cuado se diseña con un layout fijo, tipicamente se usa texto no más largo de365 pixeles. Si se usa una tipografía Times New Roman en 12 puntos, la lineatendrá mas o menos 50 caracteres…9 o 10 palabras por linea. Se cree queésto logra el mayor balance entre eficiencia y legibilidad.

Largo de la línea



Espacio blanco (espacio negativo)

• El espacio vertical en un bloque de texto se conoce como interlineadoy es la distancia entre la base de una linea de texto a la otra.

• Afecta poderosamente la legibilidad en un texto• CSS ofrece control de interlineado y lo refiere como “altura de la

línea”• Una regla general en impresión es dar al interlineado 2 puntos más

que el tamaño de la letra, esto es un texto en 12 puntos con uninterlineado de 14.

• En computadora, hay que tomar en cuenta la resolución de lapantalla. Es mejor 12 puntos sobre 14 o 16 de interlineado.



Fuentes

• Es mejor escoger entre las fuentes defaulten la mayoría de los sistemas operativos.

• Considerar que el usuario puede definir laspreferencias del browser e ignorar las fonttags y proyectar las páginas usando sufuente designada por default.



Legibilidad en la pantalla• Algunas fuentes son mas legibles que otras en la pantalla.• La legibilidad en la pantalla esta influenciada por la altura x (la

altura de la letra x minúscula) del tamaño de la fuente.• Times New Roman es un buen ejemplo de una fuente tradicional que ha

sido adaptada para ser usada en pantallas. Es la fuente default en lamayoría de los web browsers con legibilidad promedio y una altura xmoderada. Funciona bien en grandes cantidades de texto queprobablemente sean impresos por los lectores, más que leídos en lacomputadora.



Diseñada para la pantalla• Tipografías como Georgia o Verdana fueron diseñadas

especificamente por su legibilidad en la pantalla.• Tienen una altura x exagerada y son mas grandes comparadas a otras

fuentes tradicionales en el mismo tamaño de puntos.• Ofrecen una excelente legibilidad en páginas diseñadas para ser leidas en la

pantalla, sin embargo no lucen bien cuando son utilizadas para impresionesen papel.

• Tienen una altura x exagerada y son mas grandes comparadas aotras fuentes tradicionales en el mismo tamaño de puntos.

• Ofrecen una excelente legibilidad en páginas diseñadas para serleidas en la pantalla, sin embargo no lucen bien cuando sonutilizadas para impresiones en papel.



• El esquema mas convencional en el uso de tipografías, es utilizar unacon serif como Times New Roman o Georgia para el cuerpo del texto,y una Verdana o Arial como contraste para los encabezados y titulos.

• Se podría usar una combinación entre estos dos tipos, o diferentesvariaciones de la fuente como bold, italica, etc..o una Helvetica conuna Georgia, y se pueden variar los tamaños. Pero no se recomiendael uso de mas de 2 fuentes.

• Se puede especificar cualquier fuente para una página, pero muchascomputadoras solo tienen instaladas las fuentes default.

• Ser mas general y designar una fuente “sans serif” y el browserproyectara cualquier fuente con estas caracteristicas.

Escogiendo una tipografía



Tamaño de la letra• Con CSS los diseñadores tienen varios métodos de definir el tamaño.• La W3C recomienda que se deje al usuario definir el tamaño base de

la fuente en su browser y que el diseñador defina todas lasvariaciones usando la unidad “em”.

• El “em” en un contexto para la red equivalente al tamaño de la fuente,lo que la hace una unidad relativa y por lo tanto flexible.

• Se pueden usar puntos como medida tipográfica, pero hay queconsiderar que esto funciona muy diferente a los puntos en impresos.

• Si la integridad del layout depende de un tamaño específico detipografía, la mejor opción es usar unidades en pixeles. El textodefinido en pixeles sera el mismo sin importar el tamaño y laresolución en el browser.



Case

• El uso de palabras o texto en mayúsculas generalmente debeevitarse porque es muy difícil de leer. Quizás la excepciónpodría ser su uso en títulos o encabezados.

• Leemos primeramente al reconocer la forma general de lapalabra, no leyendo cada letra.

• Cuando se usan mayúsculas, se forma un rectángulomonótono que hace muy difícil el reconocer las formas de lasletras.



Énfasis• Hay formas de lograr que un texto resalte, pero hay que

asegurarse de hacerlo moderadamente.• Si un bloque de texto se usa todo en “bold” parecerá que se le

esta gritando al lector y comoquiera nada resaltará en elbloque.

• Una buena regla es usar solamente un parámetro a la vez, estoes, si tenemos un encabezado, no usarlo grande, bold, todo enmayusculas, etc. Si se quiere mas grande, incrementar eltamaño en un punto a la vez. Si se prefiere bold, se puede usardel mismo tamaño que en el texto.



Enfasis con estilo

• Itálicas La forma de la letra contrasta con el texto. Cuando hacemos referencia a un libro, o información especifica,

como palabras en lenguaje extranjero, etc. Evitar mucho texto en itálica porque la legibilidad es menor en

pantalla y el tamaño es mas pequeño si se compara con lavariedad en “roman”.

• Bold Enfatiza la palabra porque contrasta con el color del cuerpo de

texto. Subtitulos pueden usarse bien en bold. Es muy legible en pantalla, aunque textos muy largos pierden el

contraste y pierden su efectividad.



• Subrayado Se usa más para ligas En texto normal subrayado se va a confundir con una liga.

• Color Evitar el uso dentro del texto. Puede pensar que es un hyperlink. Pudiera usarse para subtitulos, con suficiente contraste con el

fondo. Evitar el uso de azul y púrpura, colores default para ligas.

• Mayúsculas Forma mas común y menos efectiva de darle importancia a un texto. También espaciando el texto e indentándolo se puede dar mas

énfasis a un texto.



• http://www.havenworks.com/• http://www.fabricland.co.uk/• http://www.brillpublications.com/• http://yvettesbridalformal.com/• http://www.cleanishappy.com/• http://www.stexps.com/• http://www.alternativetransportservices.co.uk/• http://webpagesthatsuck.smugmug.com/gallery/6872802_vfkua#495066219_TbmnT-

A-LB• http://www.toyjoy.com/• http://www.burlingtonnews.net/burlington_ufo_center.html• http://www.cowdance.com/• http://www.tracyskarate.com/



http://www.subcide.com/tutorials/csslayout/index.aspx



Sitios de Interés [tipografía]

• http://www.papress.com/thinkingwithtype/• http://welovetypography.com/• http://www.alistapart.com/• http://ilovetypography.com/• http://es.letrag.com/visualizador.php• http://www.robotype.net/index.php• http://typophile.com/

layout y tipografia - luiscarlosaceves.com · diferentes texturas a la página. ... • el uso de...

Documents