DisenioN » Maquetación

Revista Voir

Diego González Villarejo — Thu, 07 May 2009 06:26:47 +0000

Un nuevo trabajo para mi portfolio. En este caso el encargo era el diseño y la maquetación del número especial de una revista de óptica, coincidiendo con el 50 aniversario de su producto estrella. La revista tiene un tamaño DIN A4 y una retícula de 3 columnas con ámplios márgenes. En breve intentaré subir la retícula en InDesign como he hecho otras veces.

Folleto: Argumentario de ventas

Diego González Villarejo — Thu, 09 Apr 2009 15:55:49 +0000

Un folleto claro, de fácil uso. Pensado para que el cliente lo maneje con asiduidad como una herramienta de ventas. Es un cuadríptico de tamaño A5 cerrado. Los gráficos y las fotografías que acompañan al folleto han sido creados (o seleccionados) intentando seguir la misma lína de comunicación de este producto en otros medios. Espero que os guste:

Folleto Cuadrado

Diego González Villarejo — Mon, 09 Mar 2009 21:19:32 +0000

Despúes de una semana sin publicar nada hoy volvemos con una nuevo trabajo. En este caso es un folleto de tamaño 21×21. El cliente me pidió un folleto elegante para mostrar precios y descripciones de productos. Fotos potentes y grandes, un aspecto limpio con una retícula muy cuidada y una gama de colores amplia para darle el mayor juego posible al folleto.

Las fotos llevan un barniz UV para potenciarlas y el juego gráfico de los círculos y las líneas hace referencia a la línea de comunicación del producto. Espero que os guste:

Campaña de nuevo producto

Diego González Villarejo — Mon, 09 Feb 2009 07:32:46 +0000

Para un diseñador siempre agradable encontrarse con un proyecto grande. Muchas veces el interés de un proyecto viene determinado por la libertad que te den. Si un proyecto es pequeño y no te dan libertad, al final tienes la sensación de que el trabajo no es tuyo (vamos que no lo sientes como una obra tuya, aunque hayas empleado unas cuantas horas en él). Pero si el proyecto aunque no tenga mucha libertad es un proyecto más grande y con piezas variadas, siempre hay más espacio para introducir detalles propios o para experimentar.

Hoy os presento un proyecto de una envergadura “mediana”. La libertad era más bien escasa, pero al tener varias piezas siempre te puedes explayar algo más.

Esta campaña que os presento hoy se compone de 4 piezas básicas. Un folleto con la descripción técnica del producto, un folleto más pequeño y directo, una hoja resumen de todas las nuevas características y un par de cartas para informar de la novedad.

El folleto ténico tiene un tamaño cerrado DIN A4. Se maqueta en horizontal y debian primar las imágenes y los textos grandes.

Las cartas y las hojas de resumen llevan una maquetación más básica. La premisa era mantener una línea clara y limpia, jugando con los blanco, azules y negros.

Por último os muestro el folleto pequeño. Un tamaño mucho más pequeño que su hermano mayor y plegado en ventana dos veces.

Catálogo General de Lentes Oftálmicas

Diego González Villarejo — Wed, 28 Jan 2009 16:20:55 +0000

Ahora que ya entramos en 2009, os presento la nueva entrega de un catálogo que hago cada año para una multinacional del sector de la óptica. Es un catálogo muy ámplio de precios y productos, con una gran cantidad de información técnica.

El catálogo va en una carpeta con anillas para facilitar la entrada de nuevas hojas (nuevos productos lanzados a mitad de año). Tiene un cuerpo principal dónde va la información de precios y en un folleto aparte grapado con “grapa omega” las referencias técnicas de todos los productos. La grapa omega dispone en el exterior de una abertura para poder insterla dentro de una carpeta de anillas.

Un par de folletos

Diego González Villarejo — Mon, 26 Jan 2009 15:25:54 +0000

El folleto es uno de los encargos más habituales del diseñador, y dependiendo del cliente puede ser uno de los más satisfactorios. En la elaboración de un folleto se aprecia bien el gusto tipográfico, fotográfico, del uso del color y en cuanto a composición que tiene un diseñador. A continuación os presento los dos últimos folletos que he creado. Por deseo expreso del cliente sus logos y nombres aparecen eliminados o difuminados, no es el resultado final lo que os presento pero es muy parecido:

Uno de los dos folletos tiene como leiv motiv el uso de pasiajes y otro está orientado a la cocina. De este último precisamente ya hable en otro post en el que deje incluso la retícula que use para el folleto. Os dejo unas fotografías que he hecho de los mismos:

Retícula de folleto 21×21

Diego González Villarejo — Tue, 13 Jan 2009 09:32:03 +0000

Pues para empezar bien vamos a dejaros en exclusiva y gratis por completo una plantilla de maquetación para InDesign.

El tamaño de la página es de 21x21cm. Cuenta con unos márgenes idénticos a cada lado de 15mm y la página izquierda y derecha son iguales. Es una maqueta pensada para contenidos muy divididos, datos concisos y sin textos excesivamente largos. Originalmente la maqueta también estaba pensada para que la mitad de folleto tuviese una imagen grande en la página de la izquierda y el texto explicativo en la derecha. La paginación va cajeada en la parte superior, y seria muy interesante colocar el logo al lado de la páginación. La parte superior queda libre para introducir un títular o para centrar más la información en la zona inferior. A continuación os dejo un par de ejemplos de mi folleto con esta retícula:

Sois libres de usar esta retícula para cualquier proyecto, tanto comercial como personal. Podeis modificarlo sin problema alguno y no es necesaria ninguna mención al autor de la retícula. Me gustaria que si utilizais esta retícula tengais la amabilidad de enviarme un imagen con el folleto maquetado para incluir en este mismo post. Pondré la imagen y un link hacia vuestra web. (No es necesario que lo envieis, solo es para enriquecer el trabajo que hagamos).

Retícula de folleto 21×21 (para InDesign CS3, si la necesitas en otra versión, por favor contacta conmigo: diego.gonzalez@disenion.com o deja una comentario en este post)

Maquetando textos digitales (II)

Diego González Villarejo — Thu, 14 Sep 2006 14:09:00 +0000

Retomamos la maquetación de textos digitales y así volvemos tras este largo descanso efectuado (casi dos semanas). Volvemos con la alineación y los colores.

La alineación

La mayor parte de las veces una decisión sobre como alinearemos un texto (a la izquierda, centrado, a la derecha o justificado) vendrá determinado por una decisión de diseño. Aunque esta decisión normalmente influye también en la facilidad de lectura y el lo agradable que se hace ese texto a la vista.

Cuando maquetamos textos largos elegiremos textos justificados o alineados a la izquierda. Los textos alineados a la izquierda presentan un aspecto irregular en la parte derecha, una sección irregular que puede resultar anti-estetica. El problema de los textos justificados es que el espacio entre palabras, o incluso entre letras, se ve forzado para adaptar la longitud de la línea a un ancho determinado.

Una familia tipográfica es un grupo de tipografías unidas por características similares. Los miembros de una familia (los tipos) se parecen entre si, pero también tienen rasgos própios. Las tipografías de cada familia tienen distintos grosores y anchos. Algunas familias las forman muchos miembros, otras sólo de unos pocos.

En el texto anterior se puede apreciar como los espacios entre las palabras son mayores en el parrafo superior. (Cortesia de unostiposduros una web de referencia que debeis añadir a favoritos todos los amantes de la tipografia). En un libro en el que el tamaño de la tipografia es pequeño esos huecos blancos son menos apreciables y en esos casos se agradece una uniformidad en el ancho de las lineas.

El color

En cuanto al color del texto y aunque parezca muy evidente, es importante buscar un color de tipografia bien contrastado con el fondo. Fondo blanco – Letra negra. Es la referencia que traemos de la producción impresa, ya que el papel es, normalmente blanco.

Fijaos que hablo de contraste y no de colores similares. Para explicar este punto os diré que un texto en color rojo sobre un fondo azul no es legible. Sabemos diferenciar facilemente el rojo y el azul, pero no se contrastan bien. Así que por lo general usaremos un texto con la tipo en blanco o la tipo en negro, dependiendo de como se consiga el mejor contraste.

En cuanto a cual es la mejor combinación de los textos que van a ser leidos para ordenador existen multitud de opiniones. Está demostrado que un texto en blanco sobre un fondo oscuro, un gris oscuro, por ejemplo, posee un mayor contraste que otras opciones, y por eso se recomienda esta combinación de colores para las webs que van a ser visitadas por gente con problemas de visión. Si bien es cierto, que esta combinación consigue que nos cansemos antes de leer el texto, así que llegados a este punto nos damos cuenta de que no podemos llegar a una conclusión definitiva.

Unicamente como consejo, cuando maqueteis un texto claro sobre un fondo oscuro os aconsejo que utilizeis tipografias con un palo ancho o en negrita, ya que así facilitareis su lectura.

Maquetando textos digitales. Nociones básicas (I)

Diego González Villarejo — Mon, 28 Aug 2006 08:42:00 +0000

¿Qué hace que una página sea agradable a la lectura o no? ¿Qué hace que nos cansemos tan rápido de una web?

Muchos factores influyen en la legibilidad de un sitio web. El principal sin lugar a dudas es la maquetación del texto. Este post no pretende ser una clase magistral de maquetación de textos, si no solo una pequeña guia para diseñadores que están comenzando o para cualquiera que vaya a maquetar un texto (un trabajo para clase, un informe en el trabajo, etc.) Os aseguro que un texto bien presentado son muchos puntos a vuestro favor.

Empezaremos con lo más basico. Tamaño de letra, interlineado, el espacio entre palabras, alineamiento y colores. Ilustraremos todo con ejemplos para una mejor comprensión.

Tamaños de letra

Cuando el tamaño es muy pequeño, se require un esfuerzo adicional por parte del lector. Leer textos en una pantalla es un ejercicio en muchas ocaciones poco agradable. A su vez debemos buscar un equilibrio entre títulos, subtitulos y texto general. (En maquetación web usaremos etiquetas como h1, h2, etc.)

Cuando el tamaño es muy pequeño, se require un esfuerzo adicional por parte del lector. Leer textos en una pantalla es un ejercicio en muchas ocaciones poco agradable. A su vez debemos buscar un equilibrio entre títulos, subtitulos y texto general. (En maquetación web usaremos etiquetas como h1, h2, etc.)

Cuando el tamaño es muy pequeño, se require un esfuerzo adicional por parte del lector. Leer textos en una pantalla es un ejercicio en muchas ocaciones poco agradable. A su vez debemos buscar un equilibrio entre títulos, subtitulos y texto general. (En maquetación web usaremos etiquetas como h1, h2, etc.)

El primer texto es en exceso pequeño como podemos ver claramente y requiere un esfuerzo por nuestra parte, no es agradable su lectura. En el último texto el tamaño es en exceso grande. La primera impresión es que estamos ante un título y la lectura es complicada porque dificulta la comprensión general del parrafo.

Interlineado

El interlineado es la espacio que separa dos lineas consecutivas. Veamos unos ejemplos:

Con un interlineado muy pequeño, los palos superiores e inferioes se montan, y la lectura se hace confusa y complicada. Si el interlineado es muy grande se pierde la forma de parrafo y al lector le cuesta mucho enlazar las lineas, además se complica la comprensión del parrafo.

Con un interlineado muy pequeño, los palos superiores e inferioes se montan, y la lectura se hace confusa y complicada. Si el interlineado es muy grande se pierde la forma de parrafo y al lector le cuesta mucho enlazar las lineas, además se complica la comprensión del parrafo.

Con un interlineado muy pequeño, los palos superiores e inferioes se montan, y la lectura se hace confusa y complicada. Si el interlineado es muy grande se pierde la forma de parrafo y al lector le cuesta mucho enlazar las lineas, además se complica la comprensión del parrafo.

Cuando maquetemos una web el parametro del alto de linea se controla con la etiqueta “line-height” y se suele medir en porcentajes, en el primer caso tenemos un line-height del 60% y el último un line-height del 200%. En el caso correcto hemos ultizado un line-height del 110%. En textos en la web es más comodo para el lector un interlineado un poco mayor que en los textos impresos.

Espacio entre palabras

En muchos de los programas de edición de textos (como “word”) el espacio entre palabras o “word-spacing” se determina automaticamente en función de la justificación del parrafo.

Si el espacio entre palabras es muy pequeño será muy dificil dinstinguir donde comienza y donde acaba cada palabra, esto implica una gran incomodidad para el lector, que muy posiblemente dejará de lector el texto en el acto. Si el espaciado es muy grande, aparecerán antiesticos huecos blancos y la comprensión del texto será muy complicada.

Si el espacio entre palabras es muy pequeño será muy dificil dinstinguir donde comienza y donde acaba cada palabra, esto implica una gran incomodidad para el lector, que muy posiblemente dejará de lector el texto en el acto. Si el espaciado es muy grande, aparecerán antiesticos huecos blancos y la comprensión del texto será muy complicada.

Este ejemplo es sumamente gráfico.

En el próximo capitulo veremos la justificación y el uso de los colores.