fbpx
A importância da prototipação na concepção de um projeto

Transformação Digital

A importância da prototipação na concepção de um projeto

Bruno Santos
Escrito por Bruno Santos em 30 de junho de 2020

Um dos principais processos na concepção de uma ideia é a realização do seu protótipo. Este é o estágio onde a ideia se torna algo “além do papel”, se aproximando ainda mais de sua versão definitiva. 

Da Vinci e o princípio da prototipação 

Desde os primórdios da humanidade, a construção de protótipos para ilustrar uma ideia fizeram parte da criação de novas tecnologias, objetos e ferramentas. 

De bicicletas até máquinas voadoras, o inventor e cientista Leonardo Da Vinci (1452–1519) costumava esboçar ideias e, a partir disso, desenvolver versões demonstrativas, de modo a demonstrar com mais clareza suas concepções. 

prototipação Leonardo Da Vinci

A imagem acima refere-se a um protótipo de um tanque de guerra, desenvolvido por Da Vinci. O intuito do desenho seria representar visualmente o conceito de um veículo de grande porte que pudesse intimidar os inimigos e abrir espaço para a infantaria avançar livremente. 

Como podemos perceber no exemplo, desenvolver um esboço ou protótipo de uma ideia, é essencial para avançar em etapas mais complexas da construção de um projeto, como a execução. 

Redução de Riscos e Custos 

Além da eficácia em representar visualmente uma ideia, a construção de protótipos também auxilia na redução de riscos e custos. 

Quando ainda estamos na etapa inicial de um projeto, não conseguimos detectar todas as falhas e fatores de risco, pois muitos deles só aparecem na fase da prototipação, onde temos uma visão mais consistente e real de toda a ideia. Além disso, esta é a fase em que pode ser realizados testes de usabilidade e interface, o que auxilia ainda mais na detecção de novos riscos. 

Ao se tratar de custos de um projeto, é importante que a sua estruturação seja o mais “enxuta” e definida possível, pois pontos em aberto podem futuramente gerar custos maiores ou desnecessários. Desenvolver protótipos ou wireframes auxiliam na definição completa do projeto.

O benefício dos Wireframes para prototipação

wireframe para prototipação

Um wireframe é um tipo de protótipo, geralmente voltado para aplicativos, páginas web ou sistemas. Com ele, a etapa de prototipação torna-se enriquecedora, já que consiste no desenvolvimento não apenas do layout e diagramação do projeto, mas também do fluxo que ocorrerá em toda a interface. 

Ao desenvolver um wireframe, desenhamos o visual do projeto, já com os elementos posicionados nos lugares planejados e com o visual já definido. Geralmente, cada “página” ou etapa do projeto é desenhada de forma separada. 

Por exemplo: ao chegar na etapa de prototipação de uma nova Rede Social, desenhamos a tela de login, o layout do perfil de um usuário etc. Dependendo do tipo de wireframe e da ferramenta utilizada, também é possível desenhar todo o “fluxo” dessa Rede Social. 

Da tela de login, a transição ocorre para a tela inicial que exibe todos os posts. Clicando no número de curtidas deste post, é exibida uma tela com os usuários que deram as curtidas. 

Tipos de Wireframe

Um wireframe pode ser desenvolvido de diversas maneiras, dependendo da complexidade e nível de detalhamento do tipo escolhido.. Ele pode ser desenhado em uma folha de papel comum, como também existem ferramentas próprias para isto.

Balsamiq Mockups

O Balsamiq é uma ferramenta interessante de desenvolvimento de wireframes, pois seu visual é inteiramente inspirado em Sketch, ou rascunhos feitos em papel. Assim, além de disponibilizar uma variedade de recursos, ela força o usuário a focar em estrutura e conteúdo, evitando discussões sobre cores e visuais que podem vir em processos posteriores. 

wireframe balsamiq

A ferramenta também disponibiliza a criação de todo o fluxo do projeto. Definindo áreas clicáveis em botões ou links é possível criar uma navegação entre as telas, simulando de forma fiel às transições entre elas.

Zeplin

Sendo uma das ferramentas mais detalhadas para produção de wireframes, o Zeplin conta com integrações com CSS e até mesmo React Native – tecnologia utilizada para desenvolver aplicativos mobile. 

Ao criar um protótipo na ferramenta, é possível definir variáveis utilizando cores, tamanhos de fontes,  dimensões de blocos e elementos. Além disso, podem ser criadas e implementadas classes em CSS diretamente no layout, possibilitando a transferência visual do site para uma página web com facilidade. 

WebFlow e a linha tênue entre o protótipo e o produto real

Com uma interface semelhante a uma boa ferramenta de desenvolvimento de wireframes, o WebFlow ultrapassa o limite que divide o que é um protótipo e o que é um site real. 

Ao desenvolver um layout na plataforma, todo o código em HTML, CSS e JavaScript (linguagens utilizadas na criação de uma página web) do wireframe é gerado automaticamente. Assim, o conteúdo do seu layout está instantaneamente disponível na web, convertido em um site fluido e já adaptado para diferentes tipos de dispositivos, como tablets e smartphones. Sendo assim, o WebFlow é ideal para usuários com pouco ou nenhum conhecimento web, já que é possível conceber o layout e o próprio site sem precisar programar uma linha de código. 

Aplicando UI Design no Wireframe

UI Design (User Interface Design) é a área em que estuda a interação entre o usuário e a parte visual de um sistema, software ou aplicativo. O principal intuito do UI é estudar e mapear os pontos fortes e fracos na interface, a fim de melhorar as falhas e transformar pontos fortes em pontos chaves.

Muitos aplicativos e sites apresentam uma interface cansativa aos olhos do usuário, ou então funcionalidades muito difíceis de serem utilizadas, por exemplo. O UI Design atua como uma ponte entre o que foi projetado e o que o usuário está recebendo, certificando a melhor interação possível e evitando estes tipos de problemas. 

Quando se trata de um produto digital, é uma boa prática iniciar o desenvolvimento real das telas analisando a UI e toda a parte visual já definidas no wireframe. Portanto, o wireframe se torna o melhor momento para atuar com o User Interface Design, já que é nesta etapa que são simuladas as interações entre botões, telas e o visual.

Conclusão

Como visto, a prototipação é um elemento fundamental no desenvolvimento de um projeto. 

É nesta etapa que a ideia toma consistência, problemas são revelados e novas ideias surgem.  

Também é nesse estágio onde é definida a maior parte do layout, o lugar que cada elemento irá ocupar e quais interações acontecerão entre o usuário e a interface. Por isso, a prototipação deve ser feita com responsabilidade, organização e adotando as melhores técnicas possíveis, pois isso afetará cada etapas do projeto até sua conclusão.

Gostou deste artigo? Então deixa seu e-mail abaixo para receber toda semana conteúdos sobre tecnologias, comunicação interna, gestão de documentos e RH:  

Conteúdo novo toda semana

Entre para nossa lista e receba o melhor conteúdo do blog

E aí,

o que você achou deste conteúdo? Conte nos comentários.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *