Por @Alvy — 26 de Enero de 2020

Define Your Shades / Refactoring UI

En Cómo construir tu propia paleta de color Adam Wathan y Steve Schoger explican los fundamentos que hay que conocer a la hora de crear una paletas de color para usar en la web o en apps de cualquier tipo, sin tener que recurrir a herramientas «automáticas» (las clásicas páginas que te construyen paletas a partir de uno o varios colores, que no están mal pero no enseñan «lo que hay detrás»).

La cuestión va un poco más allá de encontrar colores «armónicos» y que «peguen bien». Tal y como explican toda interfaz de usuario necesita de tres categorías: los grises, los colores primarios (derivados a partir del color principal que se quiera usar, por ejemplo el «azul Facebook») y los acentos que son distintos y sirven para destacar ciertas cuestiones o realizar acciones. Algunos de ellos son lógicos: rojo para las acciones «peligrosas» o verde para las acciones «positivas», etcétera.

Define Your Shades / Refactoring UI

A partir de esos colores se pueden generar los demás, que generalmente son tonos intermedios, procurando que tengan cierta diferencia y contraste. No se menciona expresamente en el artículo, pero herramientas como la Contrast Checker de WebAIM –bastante exigente, pero útil– permiten chequear si superan los estándares de accesibilidadd en diversos grados a partir de los valores hexadecimales. (Esto evita problemas como los colores con poco contraste que las personas con dificultades de visión no llegarían a ver bien.)

Wathan y Schoger son los autores de Refactoring UI, un libro digital sobre diseño del que se pueden obtener un par de capítulos al suscribirse al boletín gratuito (lo vuelvo a recomiendar, como ya hiciera en su momento). En esta anotación del año pasado ya vimos algunos ejemplos de su contenido y cómo hace fácil lo difícil: «arreglar» lo ya existente para convertirlo a nivel de diseño e interfaz en algo más adecuado, limpio, útil e informativo.

Relacionado:

Compartir en Flipboard Compartir en Facebook Tuitear
Por @Alvy — 25 de Enero de 2020

ImgImgImgImg

JetBrains Mono es una tipografía libre y gratuita pensada para que quienes se dedican al desarrollo y pican código no tengan problemas de legibilidad. Naturalmente es monoespaciada; entre otros detalles están los que se suelen recomendar con ese fin: que se distingan bien la letra O (O) del número cero (0); que se diferencien bien el número 1 (1) de la letra ele (l) y letra i mayúscula (I) y otros detalles.

Además de eso ciertos signos ortográficos como los dos puntos (:), el punto y coma (;), la virgulilla (~), paréntesis, llaves y demás están diseñados con mimo para que se puedan leer bien y sin posibilidad de confusión. De hecho algunos incluyen ligaturas para mejorar la legibilidad. Además de eso las itálicas y pesos están calculadas con máxima precisión con ese mismo objetivo.

La tipografía JetBrains Mono además tiene todos los caracteres del grupo latino (incluyendo todos los que nos interesan en castellano como la eñe, vocales con tildes etcétera) y de paso del cirílico. Se puede descargar libremente, sin más, en todos los formatos (incluyendo TrueType y Web). Y como se distribuye bajo la licencia libre Apache 2.0 se puede usar no sólo para uso personal sino incluso para uso comercial.

Relacionado:

Compartir en Flipboard Compartir en Facebook Tuitear
Por @Alvy — 24 de Enero de 2020

EnFont Terrible / Javier Arce

Esta ocurrencia del artista Javier Arce es un sitio llamado EnFont Terrible que permite modificar de formas un tanto perversas tipografías OpenType para crear nuevas fuentes horriblemente deformadas. Basta usar la que viene de ejemplo o arrastrar cualquier fuente sobre la ventana del navegador. Unos clics y ya está el lío montado.

Los manejadores permiten deformar y distorsionar la fuente, o añadirle un toque aleatorio que la haga más rara todavía. Haciendo clic sobre la caja Show marks se pueden ver los puntos con los que se trazan las curvas y cómo se retuercen con cada transformación.

Si después de hacer el ganso con las tipografías quieres descargarlas también hay un botón Create Font que genera un nuevo fichero OpenType con la fuente resultante de las diversas aberraciones. El propio Arce se ríe de los resultados y asegura con un contundente «no sé ni lo que es el kerning» que todo es un poco para echarse unas risas. Humor tipográfico, que lo llaman.

Relacionado:

Compartir en Flipboard Compartir en Facebook Tuitear
Por @Alvy — 16 de Enero de 2020

Me crucé por casualidad –más bien debería decir por algoritmos– con este viejo vídeo de Boing Boing TV en el que hay una breve pero estupenda entrevista a Syd Mead, el recientemente fallecido diseñador de los mundos de Blade Runner, Alien y Tron. Aquí en concreto se concentra en algunos aspectos de Blade Runner. [Por desgracia la calidad de vídeo es muy… baja resolución 2008.]

Entre otras cosas cuenta cómo había cinco arranques distintos para la película: uno con el holocausto androide cuando los humanos deciden «retirarlos en masa»; otro en las colonias en las que se rebelan y escapan los androides, otro con Deckard llegando a la ciudad en tren y otro en el que llega por la autopista en un spinner, más parecida a la definitiva. También cuenta cómo concibió la pirámide de Tyrell, los detalles de los spinners y cómo en los edificios hay una especie de «señales de tráfico de colores» para guiar a los coches voladores.

Syd Mead dot com

Aparte de eso al final se menciona Syd Mead dot com que es la página oficial de este artista, donde pueden encontrarse muchos de sus trabajos y preciosos y carísimos libros de ilustraciones y fotografías. Altamente recomendable a la par que tentador.

Relacionado:

Compartir en Flipboard Compartir en Facebook Tuitear