Existe uma ordem de trabalho que virou padr\u00e3o no mercado e que quase sempre custa caro: primeiro desenha-se a tela, depois escreve-se o texto para caber nela.<\/p>\n\n\n\n
Faz sentido do ponto de vista de quem vende o projeto. O layout \u00e9 o que impressiona na apresenta\u00e7\u00e3o, \u00e9 o que o cliente consegue avaliar r\u00e1pido, \u00e9 o que fecha a venda. O texto vem depois, e vem para preencher.<\/p>\n\n\n\n
O resultado \u00e9 previs\u00edvel: um desenho bonito com frases gen\u00e9ricas dentro.<\/strong> “Solu\u00e7\u00f5es sob medida para o seu neg\u00f3cio.” “Excel\u00eancia em cada detalhe.” “Sua parceira de confian\u00e7a.” Frases que caberiam em qualquer empresa de qualquer ramo \u2014 e que, por isso, n\u00e3o convencem ningu\u00e9m de nada.<\/p>\n\n\n\n Tem um problema t\u00e9cnico nessa ordem, antes mesmo do problema de conte\u00fado.<\/p>\n\n\n\n Quando se desenha com texto falso \u2014 aquele lorem ipsum<\/em>, ou frases de exemplo curtinhas \u2014, o layout \u00e9 calibrado para um texto que n\u00e3o existe. O bloco tem espa\u00e7o para um t\u00edtulo de quatro palavras. O texto real tem doze. O card tem espa\u00e7o para duas linhas de descri\u00e7\u00e3o. A descri\u00e7\u00e3o real tem cinco.<\/p>\n\n\n\n A\u00ed acontece uma de duas coisas, e as duas s\u00e3o ruins:<\/p>\n\n\n\n O texto \u00e9 cortado para caber no desenho.<\/strong> A informa\u00e7\u00e3o que o cliente precisava dar \u00e9 sacrificada por causa de uma caixa. \u00c9 a decis\u00e3o errada, tomada por um motivo que nada tem a ver com o neg\u00f3cio.<\/p>\n\n\n\n O desenho \u00e9 remendado para acomodar o texto.<\/strong> As propor\u00e7\u00f5es que estavam boas na apresenta\u00e7\u00e3o se desmancham, e o layout aprovado n\u00e3o \u00e9 o layout entregue.<\/p>\n\n\n\n Um sintoma comum de layout desenhado com texto falso: todos os t\u00edtulos de se\u00e7\u00e3o t\u00eam exatamente o mesmo tamanho de linha, e todos os cards t\u00eam a mesma altura de descri\u00e7\u00e3o. A vida real n\u00e3o \u00e9 assim. Quando o texto vem primeiro, o desenho j\u00e1 nasce sabendo que um t\u00edtulo tem tr\u00eas palavras e o outro tem onze.<\/p>\n<\/blockquote>\n\n\n\n As decis\u00f5es dif\u00edceis acontecem cedo, quando ainda s\u00e3o baratas.<\/strong><\/p>\n\n\n\n Escrever a primeira tela obriga a responder: o que essa empresa faz, e para quem? Se n\u00e3o houver resposta clara, a discuss\u00e3o \u00e9 essa \u2014 e \u00e9 uma discuss\u00e3o de estrat\u00e9gia, n\u00e3o de design. Melhor t\u00ea-la num documento de texto, onde mudar de ideia custa apagar uma linha, do que numa tela pronta, onde custa refazer.<\/p>\n\n\n\n O corte fica de gra\u00e7a.<\/strong><\/p>\n\n\n\n Decidir que a se\u00e7\u00e3o de valores n\u00e3o entra \u00e9 f\u00e1cil quando ela \u00e9 um item de uma lista. \u00c9 caro quando ela \u00e9 um bloco desenhado que j\u00e1 foi aprovado e vai deixar um buraco.<\/p>\n\n\n\n O desenho ganha um trabalho.<\/strong><\/p>\n\n\n\n Isso \u00e9 o mais importante e o menos \u00f3bvio. Quando existe um texto real, o layout deixa de ser decora\u00e7\u00e3o e passa a ter uma fun\u00e7\u00e3o: fazer aquele texto espec\u00edfico ser lido na ordem certa.<\/strong><\/p>\n\n\n\n O que merece peso? O que precisa de respiro em volta? Onde a pessoa vai parar? O que ela v\u00ea primeiro se s\u00f3 olhar por dois segundos? Essas perguntas s\u00f3 t\u00eam resposta se houver um texto de verdade. Sem ele, o desenho vira arranjo de blocos bonitos.<\/p>\n\n\n\n O documento de texto vem antes de qualquer pixel. Ele tem a cara de um roteiro:<\/p>\n\n\n\n Feio, e de prop\u00f3sito. Sem cor, sem fonte, sem imagem \u2014 porque tudo isso desvia a conversa. A aprova\u00e7\u00e3o nessa etapa \u00e9 sobre o que est\u00e1 sendo dito, e s\u00f3.<\/p>\n\n\n\n Depois vem a tela, j\u00e1 sabendo o tamanho de cada coisa.<\/p>\n\n\n\n Essa ordem tem um custo real, e \u00e9 justo dizer: as primeiras semanas do projeto n\u00e3o t\u00eam nada bonito para mostrar.<\/strong><\/p>\n\n\n\n Enquanto o outro fornecedor j\u00e1 mandou tr\u00eas telas coloridas, a gente mandou um documento de texto. \u00c9 desconfort\u00e1vel, e mais de um cliente j\u00e1 perguntou se o projeto estava andando.<\/p>\n\n\n\n Est\u00e1 \u2014 e \u00e9 justamente a\u00ed que ele anda mais r\u00e1pido, porque \u00e9 a etapa em que mudar de ideia n\u00e3o custa nada.<\/p>\n\n\n\n O retorno aparece na aprova\u00e7\u00e3o: a tela chega quando o que ela precisa dizer j\u00e1 foi acordado. A\u00ed a conversa \u00e9 sobre desenho, e n\u00e3o sobre “ser\u00e1 que a gente devia falar de pre\u00e7o aqui?” \u2014 pergunta que, feita na frente de um layout pronto, custa uma rodada inteira.<\/p>\n\n\n\n Se voc\u00ea quiser saber se o seu site foi feito nessa ordem ou na inversa, fa\u00e7a o seguinte:<\/p>\n\n\n\n Copie o texto da sua primeira tela e cole num bloco de notas, sem formata\u00e7\u00e3o nenhuma.<\/strong> Sem imagem, sem cor, sem fonte bonita.<\/p>\n\n\n\n Leia. Aquilo, sozinho, faz algu\u00e9m querer saber mais?<\/p>\n\n\n\n Se sim, o site tem conte\u00fado e o desenho est\u00e1 trabalhando a favor dele.<\/p>\n\n\n\n Se o que sobrou for “Solu\u00e7\u00f5es inovadoras para o seu neg\u00f3cio crescer”, o desenho est\u00e1 carregando a p\u00e1gina sozinho \u2014 e desenho n\u00e3o responde obje\u00e7\u00e3o, n\u00e3o prova nada e n\u00e3o fecha neg\u00f3cio.<\/p>\n","protected":false},"excerpt":{"rendered":" Layout bonito com texto gen\u00e9rico \u00e9 papel de parede. A ordem inversa custa mais no come\u00e7o e economiza duas rodadas de aprova\u00e7\u00e3o depois<\/p>\n","protected":false},"author":1,"featured_media":36,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-35","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bastidores"],"_links":{"self":[{"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/posts\/35","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/comments?post=35"}],"version-history":[{"count":1,"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/posts\/35\/revisions"}],"predecessor-version":[{"id":37,"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/posts\/35\/revisions\/37"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/media\/36"}],"wp:attachment":[{"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/media?parent=35"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/categories?post=35"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/grupomelvor.com.br\/blog\/wp-json\/wp\/v2\/tags?post=35"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}O texto falso mente sobre o layout<\/h2>\n\n\n\n
\n
O que muda quando o texto vem antes<\/h2>\n\n\n\n
Como a gente faz na pr\u00e1tica<\/h2>\n\n\n\n
SE\u00c7\u00c3O 1 \u00b7 O que a gente faz \n T\u00edtulo: [frase de at\u00e9 10 palavras] \n Apoio: [2 linhas] \n A\u00e7\u00e3o: [texto do bot\u00e3o]\nSE\u00c7\u00c3O 2 \u00b7 Prova \n Etiqueta: [1 palavra] \n T\u00edtulo: ...<\/code><\/pre>\n\n\n\nA parte que assusta o cliente<\/h2>\n\n\n\n
O teste, para qualquer site<\/h2>\n\n\n\n