Lorem Ipsum es un sistema de generación de textos que en el mundillo web hemos usado por años y cada vez es más difundido. Este sistema ya está presente en programas de diseño y editores de código para que podamos simular texto en nuestros diseños y maquetas.
Recientemente me he encontrado con muchísimas discusiones entre maquetadores y diseñadores acerca de si es bueno usarlos o no en nuestros diseños.
Este sistema consiste en un generador online de párrafos de texto en idioma latín de un libro de Cicerón, de modo tal que no nos interese lo que esté escrito (a menos que seas filósofo y sepas latín), sino que nos interesan los grises o cajas que estos párrafos dibujan.
¿Por qué utilizar texto simulado en la web?
Justamente porque los textos también se diseñan. Tenemos que tener un texto real para saber cómo queda en la puesta en página junto a las decisiones que tienen que ver con tamaños, espaciados, márgenes, etc.
No es lo mismo mostrar esto:
A esto:
¿Por qué no es lo mismo? porque si tipeamos repetitivamente las mismas teclas, sin espacios, solo creamos un patrón gráfico. En el primer ejemplo vemos que entre líneas las palabras repetitivas dibujan líneas rectas, cuando en la vida real, los interlineados no son líneas rectas, sino que sufren diferentes alturas de acuerdo a la forma de cada letra.
Usar o no usar Lorem Ipsum
Muchos profesores evangelizan en sus clases que no es bueno usar Lorem Ipsum porque siempre hay que probar los diseños con la información real que va a llevar el sitio. Yo estoy de acuerdo, pero no tanto. Acá les cuento por qué:
- Un cliente nunca entrega la información real en el proceso inicial de un proyecto web. No podemos quedarnos simplemente de brazos cruzados esperando a que el cliente se ponga a redactar o mande a alguien a hacerlo. Podemos tener información suficiente acerca de un proyecto para empezar a diseñar sin tener los textos finales, ¡si no desperdiciaríamos muchísimo tiempo valioso!
- Las páginas o apps suelen tener contenido dinámico, por lo que nunca hay “un texto final”, sólo hay mínimos y máximos de números de caracteres. Si esto se programa desde el backend ¿por qué no diseñarlo antes desde el frontend?
- Nos permite hacer pruebas de espacio. Sí, de antemano podemos saber si tal bloque puede llevar más líneas o no, probando distintos formatos al texto y ver si realmente se pueden leer. Esto es útil si necesitamos establecer más espacios a mayores jerarquías. A veces el espacio, sobre todo en apps, es tirano, y muchas veces terminamos apretando demasiado los textos, cuando en realidad si quito en un lado gano en el otro que necesita.
- Pero ¿y si confunde al cliente? La comunicación con el cliente es esencial. Cuando uno va a encarar una reunión de trabajo para mostrar adelantos en el diseño, solo resta explicarle ANTES al cliente que lo utilizado en el sitio es simulado y que luego se cambia al texto final. No es tan dificil ¿no? si necesito enviar por correo los diseños, solo es escribir unas líneas al cliente explicándole los recursos. De hecho, es bueno plantear ese sistema de trabajo desde la primera reunión para que el cliente vea tu forma de trabajar.
Tres formas de usar textos simulados
Yo creo que hay dos instancias de uso y tres posibilidades. La primera es en la etapa de boceto inicial (redacted font) y la segunda es cuando debes tener texto para probar familias, tamaños etc… (lorem ipsum, quijotispum).Aquí te los dejo:
Redacted Font, una tipografía abstracta tipo boceto
@agustinvis nos dejó este genial aporte en una discusión en un curso de mejorando.la. Redacted Font es una tipografía que recrea esa instancia de boceto a mano, donde comienzan a surgir los primeros intentos de un wireframe. Podés usar cualquier texto que se va a ver como si fueran rayones de lápiz de grafito. Este recurso es muy bueno en esa primera instancia en donde recién estamos probando los márgenes, los espacios y demás elementos en el diseño.
Luego en la próxima etapa de trabajo, sólo debes cambiar la tipografía y los textos aparecerán para que puedas trabajar en los puntos tipográficos, familias, espaciados y demás. Esto es super práctico!
Podemos usarla en nuestro HTML, en Illustrator o el programa en el que trabajes.
Usa Lorem Ipsum si tu sitio es en inglés
Básicamente porque en este idioma, o al menos en las palabras que nos da el generador de texto, no hay eñes o acentos, y el latín tiene muchas, demasiadas palabras cortas, como el inglés.
Entonces, si mi sitio es en español ¿qué uso?
Usa Quijotipsum si tu sitio es en español
Quijotipsum es un genial recurso de nombre muy gracioso y con textos en español sacados del libro Don Quijote de la Mancha. ¿Por qué usarlo para sitios en español? porque justamente aquí podemos contemplar si nuestros textos necesitan más interlínea por el tema de los acentos, eñes, diéresis, etc., y en nuestras maquetas, la codificación.
Además ¿nunca les pasó que el Lorem Ipsum quedaba hermoso en nuestros bocetos pero cuando poníamos los textos reales se veía horrible porque no entraban y había que achicar todo? justamente, en nuestro hermoso idioma español las palabras son más complejas y largas, y la construcción de una oración lleva más palabras por lo que debemos probar los textos simulados en el idioma del sitio.
De nuevo, no creo que nuestros clientes se pongan a leer los textos del Quijote de La Mancha en medio de una reunión, y bueno, si se queja, que entregue los textos finales ¿no?
Planifica los posibles casos de textos desde el wireframe
Siempre, en cuestión de textos, sobre todo para páginas dinámicas, tenemos que armar posibles “casos”, por ejemplo qué pasa cuando los títulos tienen una sola línea, cuando tienen dos y cuando tienen tres siendo éste el máximo de líneas que el sistema permite. ¿Suben los textos que están debajo?¿se quedan en el mismo lugar, dejando más espacio o menos espacio según el caso? Todas estas opciones tenemos que pensarlas ya en el wireframe, ¡así luego la información “real” no nos toma por sorpresa!
Como siempre digo, no hay que ser tan estricto con algunos usos de ciertos recursos, sino pensarlos y usarlos siempre en función de que se tornen prácticos a la hora de hacer nuestro trabajo de la mejor manera.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por penHolder el 26 de Marzo de 2014
Por Dientuki el 26 de Marzo de 2014
Por mantish el 26 de Marzo de 2014
En muchos casos, lo que se debería hacer es diseñar con texto y fotos reales. Es decir, antes de empezar a diseñar, tener los contenidos que se van a publicar finalmente, y hacer el diseño acorde a estos.
Cuantos sitios no hemos visto que salen al aire con estos textos de relleno...
Por Mariux el 26 de Marzo de 2014
mantish :
hablo acerca de eso en el articulo
penHolder :
jajaj gracias! espero seguir escribiendo cosas que nos sirva a todos!
dientuki :
que simpático! no sabia que había generadores así, en ese caso, igual hay que fijarse el idioma a utilizar!
Por Fri Disseny el 26 de Marzo de 2014
Yo en Diseño Gráfico utilizo el "Texto falso" y en Diseño Web "Lorem Ipsum" y van geniales.
"Quijotipsum" no lo conocía, pero parece interesante y lo probare.
Por Endhen el 27 de Marzo de 2014
Por Dano el 29 de Marzo de 2014
Por Victor Gracia Web el 30 de Marzo de 2014
También quiero compartir mi blog y portfolio, tratan sobre desarrollo de aplicaciones web, noticias, manuales... Espero a todos vuestra visita para que además compartamos todos nuestros conocimientos.
http://blog.victorgraciaweb.com
http://www.victorgraciaweb.com
Saludos
Por Gamernoob el 02 de Abril de 2014
Victor Gracia Web-blog :
También quiero compartir mi blog y portfolio, tratan sobre desarrollo de aplicaciones web, noticias, manuales... Espero a todos vuestra visita para que además compartamos todos nuestros conocimientos.
http://blog.victorgraciaweb.com
http://www.victorgraciaweb.com
Saludos
Victor que plugin ocupaste para el menu?
Por Otaku RzO el 02 de Abril de 2014
Para quijotipsum que un package: quijotipsum snippet
https://github.com/ArmandoMendoza/sublime-quijotipsum
Donde escribimos: mancha + TAB
Por adhara web el 03 de Abril de 2014
Por adhara web el 03 de Abril de 2014
Por Mariux el 03 de Abril de 2014
Otaku RzO :
Para quijotipsum que un package: quijotipsum snippet
https://github.com/ArmandoMendoza/sublime-quijotipsum
Donde escribimos: mancha + TAB
buen dato! gracias!
Por penHolder el 04 de Abril de 2014
Otaku RzO :
Para quijotipsum que un package: quijotipsum snippet
https://github.com/ArmandoMendoza/sublime-quijotipsum
Donde escribimos: mancha + TAB
quijote para sublime awesome!
Por Dientuki el 09 de Abril de 2014
Por The Fricky! el 25 de Abril de 2014
En cualquier caso, en este artículo de Mashable hay generadores para escoger.