Desarrollo WebDiseño Web

20 cosas que los diseñadores web pueden aprender del diseño para impresión

Por 31 octubre, 2014 One Comment

Mucho antes de que internet se pusiera de moda en todo el mundo, los diseñadores de imprenta abrazaron el poder de la tipografía, la selección de imágenes, y la simplicidad.

Tradicionalmente, el asesoramiento se daba a un diseñador de imprenta que estaba en transición a la vida como un creativo digital, pero las herramientas y trucos del diseñador de imprenta son altamente transferibles al mundo en línea. Sus prácticas tipográficas, en particular, pueden ayudar a transformar una página web débil con algunos retoques de estilo CSS.

 

El diseño tipográfico no debe ser subestimado y es algo que el diseñador puede tomar en cuenta para hacer diseños web impactantes y creativos. Aquí encontrarás 20 consejos del mundo de diseño de imprenta que puedes utilizar en tu trabajo digital para que tus diseños sean aún más impresionantes.

01. Hacer las cosas bien a la primera

El contenido que se pone en internet no es como escribir sobre piedra, este se puede modificar en un instante. ¿Quieres cambiar el diseño tipográfico? ¿Deletreaste mal el nombre del Presidente? No te preocupes, eso se soluciona fácilmente.

El control de calidad (QC) puede variar un poco, porque tenemos que saber que podemos mejorar este tipo de errores. Los diseñadores de imprenta saben que la primera impresión es la mejor, y hacer las cosas bien a la primera es de vital importancia, ya que su trabajo se sella y se envía a imprimir.

02. Por encima de la impresora

Echa un vistazo a alguna revista como Time o The Economist, y verás imágenes que funcionan a la perfección con las copias que las rodean. Estas complementan la copia y añaden impacto al artículo, de este modo ayudarán a contar la historia porque han sido dirigidas artísticamente. Las imágenes han sido recortadas y colocadas para mostrar la parte más impactante o interesante del artículo.

Las herramientas de distribución de contenido en línea (como WordPress), por lo general lo hacen por nosotros al tomar una imagen lo suficientemente grande y recortarla en imágenes más pequeñas para usarlas como apoyo en torno a una página web, quizá como una herramienta de llamada de acción, pero a veces esto no funciona bien con en el lado superior e inferior.

Piensa en la dirección de arte de tus imágenes más importantes y ten en cuenta la forma en que trabajan con el resto de la página en lugar de solo dejar que el CMS las recorte y haga todo por ti. Puede sonar como una charla sobre diseño sin sentido, pero esto te ayudará a crear llamadas de acción impactantes y atractivas para tu contenido web.

03. Estilos unificados

Ingresa en esta conocida biblioteca pública de WH Smith y observarás cientos de revistas que tratan de deslumbrar en las gradas. Las que llaman la atención tendrán un punto de diferencia que les permitirá comunicar al instante su estado de ánimo y sus opciones, la línea tipográfica de cubierta y de imagen.

Navegar a través de la revista (debería) tener una unidad sobre ello. Su tono debería ser muy distinto y reflejar el tema. Los sitios web deben ser sencillos de navegar y no un lío de plantillas y estilos. Una coherencia de ‘modelos’ a través de un sitio web armonizará el contenido y hará que sus visitantes se sientan contentos y cómodos en él.

04. Reducción de líneas y de copia

La reducción es una poderosa lección a aprender para cualquier diseñador web y algo que los diseñadores de imprenta han utilizado en la publicidad y las revistas durante años. Si te alejas de las diferencias inherentes entre un diseño de página web y de impresión,piensa en cómo se siente intrigado e informado el cerebro en cuanto a la reducción.

Solo porque es en un sitio web no significa que debemos saturar en una sola página el contenido del sitio web. Siempre piensa en esto: ¿tiene lugar? Es relevante? ¿Realmente necesita una línea de subtítulos de 15 palabras? ¿No sería mejor gastar unos minutos hasta dar con las palabras exactas para lograr un subtítulo más ágil y amigable, más nítida y fácilmente digerido por el cerebro?

05. Jerarquías de fuente

Echa un vistazo a páginas web como la BBC, CNN o ésta, y verás que hay un buen número de sensibilidades web y de impresión en el trabajo en ella, y sobre todo en la elección de la tipografía y cómo funcionan las partidas.

Clásicamente, en cuanto a impresión, habrá una guía de estilo para los encabezados (de una manera similar a como usamos en la web CSS) y cómo funciona. La mayoría de los sitios web tienen una estructura jerárquica, donde los títulos, subtítulos y el texto son de diferentes tamaños. Estas jerarquías clásicas funcionan. Imprimir demuestra.

06. Texto centrado

A menos que estés buscando algún folleto corporativo completamente aburrido, no verás demasiado texto centrado en un diseño de impresión. Un par de líneas están muy bien, generalmente no se suele encontrar párrafos en diseños impresos.

El texto centrado se ve aburrido, peatonal y perezoso para cualquier tipo de medio de comunicación impresa.

07. Color

Los estilos de color se utilizan como apoyo para el contenido de impresión visual. Se debe considerar esto en cuanto a cómo se utiliza el color como fondo para el texto, los bordes y así sucesivamente; es una consistencia que funciona a través de un diseño de impresión como una guía de estilo. Cuanto más utilices este estilo deberás orientar más su imagen de marca y el tono se ve reforzad ante tu público objetivo. Es una excelente manera de establecer un estilo general.

08. Hacer un enfoque en el pasado

‘Picture Post’ era una revista reportera gráfica publicada en Gran Bretaña desde 1938 a 1957. En pocas palabras contó historias a través del poder de «la gran imagen», gran tipografía, subtítulos y texto. La imagen más el título más el texto era más o menos lo que hizo que esta revista fuera la más vendida.

Mientras esta incursión en el pasado puede parecer irrelevante, tiene un sentido. La noticia ITV que acaba de ser relanzada tomó la imagen en el artículo como una de sus inspiraciones. El poder de la imagen bien elegida, un buen título y un bloque de obras de texto.

09. Espacio negativo

A todos nos gusta tener un poco de espacio. Los diseñadores de imprenta utilizan el espacio negativo, el espacio alrededor de un tema o contenido de la composición artística. El ‘desorden’ visual debe reducirse con el fin de hacer interesante la web y mejorar la participación de los contenidos en línea.

Hay una tendencia a llenar hasta el último espacio en una página, fomentando así un desorden visual, pero esto desarmoniza el entorno y es por eso que se le llama espacio negativo; al usuario le causa molestia subconsciente la página que están viendo.

10. Bordear el contenido

Hay una tendencia a utilizar una gran cantidad de líneas principales para bordear el contenido. Esto termina pareciéndose a pequeñas cajas dispersas en una página que contiene titulares.

No veas el diseño de imprenta como lo que el diseñador entiende por espacio en blanco (o negativo), en todo el título, esto es lo que le da la fuerza y poder al título. Si bordeas el contenido, lo harás ver secundario y menos importante.

11. MAYÚSCULAS

Rara vez verás un bloque en mayúsculas en el mundo de la impresión, aunque esto será muy frecuente en línea. Las mayúsculas son mucho más difícil de leer, pues nuestros cerebros las reconocen por lo que una palabra es, por la forma de la palabra completa y no por sus letras.

Todo escrito en mayúsculas puede confundir al lector. Esto, sin duda, tiene su lugar en la expresión tipográfica, pero no en algo como titulares de contenido o llamadas a la acción.

12. Hacer una cita

Una cita, por lo general va entre comillas y con tipografía grande, y a veces con el nombre de los oradores. Los diseñadores de imprenta utilizan jerarquías y estilos de letra para sus proyectos impresos. Esto hace que sean muy vistosos y resalte más en la página.

También pueden ser utilizados como relleno visual cuando no hay imágenes de apoyo, así están disponibles para otra característica. Utilízalas con moderación si no quieres bombardear al visitante con demasiada carga visual.

13. Estilos de párrafo

Seguimos haciendo hincapié en la tipografía, pues es uno de los ingredientes clave para el éxito del diseño, la legibilidad y una página web de éxito. Los diseñadores de imprenta escriben al dedillo, y podemos aprender mucho acerca de cómo lo hacen.

En los programas de diseño (como Adobe InDesign CS6) se puede aplicar un estilo de párrafo. Esto tiene un montón de opciones para configurar, como la fuente, el estilo, el tamaño, la sangría y el color. Casi todo lo que puedes hacer aquí se puede lograr en la CSS mediante el establecimiento de estilos de párrafos a nivel de bloque <p>.

El estilo tipográfico es importante para la forma en que una página se armó. Tenemos un control estándar de impresión ahora y no es sólo una cuestión de copiar y pegar un documento de Word en una página web más la aplicación de algunos cambios de estilo.

14. Espaciado de línea

El interlineado puede afectar a la legibilidad del sentido de lo que se quiere decir, dependiendo del tamaño de la fuente y el tipo de letra elegido. Trata de que las líneas no vayan juntas en un manojo de texto, y dales el mayor espacio posible para que el estilo sea mejor.

15. Una imagen dice más que mil palabras

Las imágenes de apoyo añaden sabor a una pieza de contenido, y a primera vista. Un visor de ayuda hace una conexión desde tu imagen principal a las más pequeños de apoyo para darles la esencia de un artículo y atraen a que sea leído. Echa un vistazo a cualquier revista para que sepas cómo funciona esta conexión visual.

16. Diseño en una cuadrícula

El diseño en una cuadrícula puede causar que algunos diseñadores que «hacen las cosas al ojo» se pasen las restricciones dadas. Las cuadrículas son sólo guías y actúan como lastre para tus diseños web. Estas no deben limitar la creatividad.

17. Mezclar fuentes

No caigas en la tentación de mezclar tus fuentes. Las distintas tipografías tendrán diferente impacto en tu texto, Gill sans puede ir en los títulos, Gotham puede ser para los subtítulos y Tahoma para tu copia regular.

Puedes ser más experimental y tener subtítulos en distintas fuentes, y experimentar con las líneas y el espaciado, pero tienes que pensar en tu audiencia, se trata de hacer que la web resulte llamativa para ellos.

18. Composición y simplicidad

El formato más complicado es el más fácil de crear. Seis elementos en una página con dos bloques de texto, es el más difícil de hacer que funcione.

El diseñador de imprenta ha entendido el poder de la simplicidad y de cómo se puede hacer o deshacer un diseño. El diseño más simple siempre será el más efectivo.

19. Tipografía

La buena tipografía significa buena legibilidad, y afecta a la forma en que tu sitio web se ve y se siente. No hay razón para una mala tipografía en la web. A menudo, la limitada cantidad de fuentes disponibles para el diseñador de páginas web, ha sido el motivo que provocó el ‘No podemos escribir en la web como en un diseño impreso». En la actualidad esa excusa no se sostiene más.

Las fuentes de los creativos en línea se pueden encontrar en Fonts.com, Type kit, y Google fonts. Éstos permiten a los diseñadores incrustar fuentes personalizadas en sus páginas web sin que el usuario final necesite tener instalado ningún programa. Brillante.

20. Objetos inteligentes

La edición no destructiva es la mejor manera de trabajar en conjunto con un diseñador de imprenta. Los diseñadores de imprenta trabajan con mayores resoluciones, de modo que es importante conocer los objetos inteligentes’.

Los objetos inteligentes siguen pegados en el trabajo de arte de un vector o en su resolución original, independientemente de cómo funcione o del tamaño de los mismos. Esto estará bien sin importar lo que pase y te ayudará a ser más flexible frente a los cambios que el cliente te pida realizar.

¿Qué más pueden aprender los diseñadores web del diseño de imprenta? ¡Dínoslo en los comentarios!

Extraído de http://www.creativebloq.com, traducido por: Staff Digital

Luiggi Santa María

Luiggi Santa María

CEO de Staff Digital. Experto en Diseño Web Gráfico y Publicitario.

Un comentario

Deja una respuesta