O porquê do Feitio

Antes de qualquer cor ou componente, uma ideia: interfaces que mostram o cuidado de quem fez e a vontade de seguir em frente.

De onde vem

Feitio é uma palavra antiga do português para o jeito como uma coisa é feita, à mão. Um paletó tem feitio; um móvel tem feitio. É sobre a mão de quem fez, não só sobre o resultado.

O sistema foi decidido do zero, uma escolha por vez, olhando: dezesseis rascunhos, cada um respondendo a uma pergunta, guardados do primeiro ao último. O próprio caminho virou parte do sistema.

A ideia: um ateliê vivo

O Feitio fica entre duas imagens: a bancada de quem faz à mão, com cuidado e marcas do trabalho, e uma oficina cheia de gente e de movimento, com vontade de fazer acontecer. Humano, nunca técnico. Caloroso, nunca solene.

Daí vêm três valores, que dizem o que fazer, e três "nunca", que dizem onde não ir. Toda regra do sistema sai de um deles; quando uma regra não cobre um caso, são eles que decidem.

Três valores

Requinte

Cuidado no detalhe que ninguém pediu. Poucos elementos, cada um bem acabado. Se não ajuda, sai.

Por quê: uma tela com menos coisas, todas certas, cansa menos e se entende mais rápido. O requinte não está no que se acrescenta, está no que se tira.

Onde aparece: uma família de letras só (a Alegreya); uma régua de sete espaços; poucos papéis de cor; o traço de tinta de 1px; nenhuma sombra borrada.

Processo

As marcas do trabalho ficam à vista quando ajudam a entender: o que mudou, por quê, o que vem depois.

Por quê: uma interface que esconde como chegou ali pede confiança cega. Mostrar o processo, com medida, é tratar quem usa como alguém que pode entender.

Onde aparece: os cantos levemente irregulares, como papel cortado à mão; os ícones desenhados, em que toda junção é um cruzamento de traços; o histórico dos rascunhos guardado.

Energia

O laranja é movimento. Aparece onde algo acontece: a ação principal, o que acabou de mudar, o que pede atenção.

Por quê: energia não é barulho. Uma cor forte só tem força se for rara; o laranja guardado para a ação faz a tela apontar o caminho sozinha.

Onde aparece: um botão laranja por tela; o papel que chega como um recorte assentando na mesa; nenhuma mudança de estado que aconteça num salto.

Três "nunca"

Os valores dizem para onde ir; os "nunca" marcam a beira do caminho. Cada um é uma tentação comum, que puxaria o Feitio para longe da ideia.

Tech vibes

Nada de neon, tela escura brilhando, grade de terminal ou fonte mono decorando. A sensação é de ateliê, não de sala de servidores: o visual "tecnológico" diz "isto é complicado" antes de qualquer palavra.

Convoluto

Uma coluna, uma ideia por bloco, poucos tipos de componente. Se algo precisa de explicação para ser usado, está errado: cada elemento a mais é uma decisão a mais para quem olha.

Barulhento

O laranja aparece pouco para valer muito. O movimento só responde a uma ação, e no máximo um momento por página chega sozinho. Quando tudo grita, nada é ouvido.

Humanista

Humanista quer dizer feito para gente e com marca de gente: letra nascida da caligrafia, cores quentes de papel e tinta, desenho com a mão tremendo um pouco, texto escrito para a pessoa.

No Feitio, isso vira escolhas que se veem: um laranja vivo; cantos levemente irregulares; ícones desenhados à mão; a sombra dura, de papel colado.

Mobile first

Hoje a maior parte das pessoas acessa a internet pelo smartphone. Por isso toda tela do Feitio nasce no mobile (celular e tablet) e cresce para o computador, nunca o contrário.

• Desenha-se primeiro o mobile. A tela larga ganha colunas e a navegação do lado; a troca é pela largura da caixa onde o componente está, não da janela.
• A tarefa principal vem primeiro, sem rolar.
• Alvos de 40px, com espaço entre eles: dedo não é ponteiro.
• Nada depende do mouse por cima.
• E até o 4K: o conteúdo tem medida e fica no centro, e o retorno de uma ação aparece no lugar dela.
• A tela é do conteúdo: o que não se usa toda hora fica guardado.

JavaScript na medida

O Feitio usa JavaScript onde ele deixa a tela melhor: a gaveta do menu, a abertura animada, uma resposta sem recarregar. Não precisa funcionar sem ele. O que não entra é o excesso: biblioteca grande para um efeito pequeno, script em toda página por costume, a tela inteira montada no navegador quando o servidor já entregaria pronta. Antes de escrever um script, veja se o navegador já resolve sozinho.

Quando a regra não diz

Nenhuma documentação cobre tudo. Quando um caso não estiver escrito, estas frases desempatam:

Na dúvida, tire.

Se não dá para dizer o que um elemento faz pela pessoa, ele sai.

A palavra vence o ícone.

O desenho ajuda a reconhecer; quem explica é o texto.

Clareza vence personalidade.

O jeito do Feitio nunca pode custar o entendimento.

Processo só quando ajuda.

Mostrar o caminho é para entender, não para enfeitar.

O polegar decide.

Se não dá para fazer com uma mão, ainda não está pronto.

Acessível não é opcional.

Se uma ideia bonita deixa alguém de fora, ela muda.

A casa e as fachadas

O Feitio tem uma casa: o tema creme com laranja, de dia e à noite. Para trabalhos de fora, como a página de uma loja, ele empresta a estrutura com outra fachada: só as cores mudam. Letra, forma, espaço e movimento continuam do Feitio. Quando um trabalho pede mais do que outras cores, ele é feito fora do sistema.