El porqué de Feitio

Antes de cualquier color o componente, una idea: interfaces que muestran el cuidado de quien las creó y la voluntad de avanzar.

De dónde viene

Feitio es una palabra antigua portuguesa para el modo en que se hace algo, a mano. Un traje a medida tiene feitio; un mueble tiene feitio. Se trata de la mano que lo hizo, no solo del resultado.

El sistema se decidió desde cero, una elección a la vez, al observar: dieciséis borradores, cada uno respondiendo una pregunta, conservados desde el primero hasta el último. El camino mismo se convirtió en parte del sistema.

La idea: un taller vivo

Feitio se sitúa entre dos imágenes: el banco de alguien que hace cosas a mano, con cuidado y las marcas del trabajo, y un taller lleno de personas y movimiento, ansioso por hacerlas realidad. Humano, nunca técnico. Cálido, nunca solemne.

De él surgen tres valores, que dicen qué hacer, y tres "nunca", que dicen a dónde no ir. Cada regla del sistema proviene de una de ellas; cuando una regla no cubre un caso, deciden.

Tres valores

Afinamiento

Cuidado en los detalles que nadie pidió. Pocos elementos, cada uno bien terminado. Si no ayuda, se va.

Por qué: una pantalla con menos cosas, todas correctas, es menos cansada y más rápida de entender. El refinamiento no está en lo que agregas, sino en lo que quitas.

Dónde se muestra: una familia tipográfica única (Alegreya); una escala de siete espacios; pocos roles de color; el trazo de tinta de 1px; sin sombra borrosa.

Proceso

Las marcas del trabajo permanecen visibles cuando ayudan a la comprensión: qué cambió, por qué, qué viene después.

Por qué: una interfaz que oculta cómo llegó ahí pide confianza ciega. Mostrar el proceso, con medida, trata a las personas como capaces de entender.

Dónde se muestra: los bordes ligeramente irregulares, como papel cortado a mano; los iconos dibujados, donde cada unión es dos trazas cruzadas; el historial de borradores, conservado.

Energía

Naranja es movimiento. Muestra dónde ocurre algo: la acción principal, lo que acaba de cambiar, lo que necesita atención.

Por qué: la energía no es ruido. Un color fuerte solo lo es cuando es raro; el naranja reservado para la acción hace que la pantalla señale el camino por sí misma.

Dónde se muestra: un botón naranja por pantalla; papel que llega como un recorte asentándose en la mesa; sin cambio de estado que ocurra de golpe.

Tres "nuncas"

Los valores dicen a dónde ir; las "nuncas" marcan el borde del camino. Cada una es una tentación común que arrastraría a Feitio lejos de la idea.

Vibes tech

Sin neón, pantallas oscuras brillantes, rejillas de terminal o tipografía mono decorativa. La sensación es un taller, no una sala de servidores: el look "tech" dice "esto es complicado" antes de cualquier palabra.

Complicado

Una columna, una idea por bloque, pocas clases de componentes. Si algo necesita explicarse para usarse, está mal: cada elemento extra es otra decisión más para quien lo mira.

Ruidoso

El naranja aparece con poca frecuencia y por eso cuenta. El movimiento solo responde a una acción, y al más un momento por página llega por sí mismo. Cuando todo grita, nada se escucha.

Humanista

Humanista significa hecho para las personas y con una marca humana: tipografía nacida de la caligrafía, papel cálido y colores de tinta, dibujando con un poco de temblor en la mano, texto escrito para la persona.

En Feitio, esto se convierte en opciones que puedes ver: un naranja animado; esquinas ligeramente irregulares; iconos dibujados a mano; la dura sombra del papel pegado.

Móvil primero

Hoy en día la mayoría de las personas accede a internet a través de un smartphone. Por lo tanto, cada pantalla Feitio nace en el móvil (teléfono y tableta) y crece hacia el ordenador, nunca al revés.

• Móvil se diseña primero. La pantalla ancha gana columnas y navegación lateral; el cambio sigue el ancho de la caja en la que se sitúa el componente, no la ventana.
• La tarea principal viene primero, sin desplazamiento.
• Objetivos de 40px, con espacio entre ellos: un dedo no es un puntero.
• Nada depende del hover.
• Hasta el 4K: el contenido tiene medida y se mantiene centrado, y la retroalimentación de una acción aparece donde ocurrió.
• Pertenece al contenido la pantalla: lo que no se usa todo el tiempo se guarda oculto.

Solo JavaScript necesario

Feitio utiliza JavaScript donde mejora la pantalla: el menú desplegable, la apertura animada, una respuesta sin recarga. No tiene por qué funcionar sin él. Lo que queda fuera es el exceso: una gran librería para un pequeño efecto, un script en cada página por hábito, toda la pantalla construida en el navegador cuando el servidor ya la entregaría lista. Antes de escribir un script, comprueba si el navegador ya lo hace.

Cuando la regla es silenciosa

Ninguna documentación cubre todo. Cuando un caso no se escribe, estas frases resuelven el empate:

Si tienes dudas, quítalo.

Si no puedes decir qué hace un elemento para la persona, se va.

La palabra supera al icono.

El dibujo ayuda a la reconocimiento; el texto explica.

La claridad supera a la personalidad.

El estilo de Feitio nunca puede costar comprensión.

Proceso solo cuando ayuda.

Mostrar el camino es para entender, no para decorar.

El pulgar decide.

Si no se puede hacer con una mano, aún no está listo.

Accesible no es opcional.

Si una idea hermosa deja a alguien fuera, cambia.

La casa y las fachadas

Feitio tiene una casa: el tema crema y naranja, de día y de noche. Para trabajos externos, como una página de tienda, cede su estructura con otra fachada: solo cambian los colores. La tipografía, la forma, el espacio y el movimiento permanecen feitianos. Cuando un trabajo exige más que otros colores, se hace fuera del sistema.