Interface primeiro #

Desenhe a interface antes de começar a programar #

Muitos aplicativos começam com uma mentalidade de programar primeiro. Isso é não é uma boa ideia. Programar é o componente mais pesado na construção de um app, o que significa que é o mais caro e o mais difícil de mudar. Em vez disso, comece pelo design.

O design é relativamente leve. Um esboço no papel é barato e fácil de mudar. Os designs em HTML ainda são simples de modificar (ou descartar). Isso não é verdade na programação. Começar pelo design mantém você flexível. Programar primeiro te limita e prepara o terreno para custos adicionais.

Outro motivo para começar pelo design é que a interface é o seu produto. O que as pessoas veem é o que você está vendendo. Se você simplesmente colocar uma interface no final, as lacunas vão aparecer.

Nós começamos com a interface para podermos ver qual é a cara do app e como seria usá-lo desde o início. Ela está constantemente sendo revisada ao longo do processo. Faz sentido? É fácil de usar? Resolve o problema em questão? Essas são perguntas que você só pode responder de verdade quando está lidando com telas reais. Começar pelo design te mantém flexível e te leva a essas respostas bem mais cedo no processo.

A Caneta Laranja Que Deu Início ao Blinksale #

Assim que percebi minha frustração com o software de faturamento pronto para uso, decidi desenhar como eu preferiria que minha solução de faturamento funcionasse. Peguei uma caneta laranja, porque era a única coisa que tinha à mão naquela noite, e em poucas horas já tinha desenhado cerca de 75% da UI. Mostrei para minha esposa, Rachel, que estava passando roupa naquele momento, e perguntei: "O que você acha?" E ela respondeu com um sorriso: "Você precisa fazer isso. De verdade."

Nas duas semanas seguintes, refinei os designs e criei páginas HTML estáticas completamente mockadas para quase toda a primeira versão do que viria a ser o Blinksale. Nunca fizemos nenhum wireframe além daqueles esboços com a caneta laranja, e entrar diretamente no design em HTML nos ajudou a manter a empolgação sobre o quão "real" o projeto estava se tornando, mesmo que naquele momento realmente não soubéssemos no que estávamos nos metendo.

Uma vez que os mockups em HTML estavam completos, abordamos nosso desenvolvedor, Scott, com a ideia para o Blinksale. Ter a maior parte da UI desenhada antecipadamente foi extremamente benéfico em vários níveis. Primeiro, deu ao Scott uma visão real e empolgação para onde estávamos indo. Era muito mais do que apenas uma ideia, era real. Segundo, nos ajudou a avaliar precisamente quanto esforço e tempo do Scott seria necessário para transformar o design em uma aplicação funcional. Quando você está financiando um projeto com recursos próprios, quanto mais cedo puder prever os requisitos de orçamento, melhor. O design da UI se tornou nossa referência para o escopo inicial do projeto. Finalmente, o design da UI serviu como um guia para nos lembrar sobre o que a aplicação era à medida que avançávamos no desenvolvimento. À medida que éramos tentados a adicionar novos recursos, não podíamos simplesmente dizer: "Claro, vamos adicionar isso!" Tínhamos que voltar ao design e nos perguntar onde esse novo recurso iria entrar, e se não houvesse um lugar, ele não seria adicionado.

—Josh Williams, fundador, Blinksale