Ir para o conteúdo

Protótipos

Introdução

Uma das técnicas mais usadas para garantir que o produto será bem aceito ou que não causará problemas ao usuário é a prototipação. É um método que ajuda a desenvolver rapidamente uma versão “testável” do seu projeto, seja ele um produto ou serviço.

Para essa prototipação, será utilizado a ferramenta Figma.

Será adotado um modelo evolucionário de prototipação, que consiste em produzir um modelo inicial de protótipo e ir refinando-o ao longo das várias fases do desenvolvimento do projeto até atingir sua forma final.

Protótipo de Alta Fidelidade

Um protótipo de alta fidelidade (às vezes chamado de high-fi ou hi-fi) é uma representação interativa do produto, baseada no computador ou em dispositivos móveis. Esse protótipo já apresenta maior semelhança com o design final em termos de detalhes e funcionalidade.

Protótipo de Média Fidelidade

Um protótipo de média fidelidade visa definir a estrutura de conteúdo da interface, definir o peso, relevância e relação entre os elementos e criar um layout básico (com conteúdos e imagens de marcação).
Para chegar à primeira versão do protótipo de alta fidelidade, os membros do grupo elaboraram alguns protótipos de média fidelidade para conciliar ideias e construir um protótipo de alta fidelidade mais próximo ao ideal.

Protótipo 01

Autor: Nícalo Ribeiro

Prototipo_Media_Nicalo

Autor: Hugo

Essa parte do protótipo teve como objetivo principal compilar as ideias gerais da equipe sobre o produto, concebido após as restrições da refatoração dos Requisitos do projeto.

A primeira tela se refere à uma tela principal, onde a maioria das frunções estariam disponíveis assim que o usuário começasse sua experiência.

Prototipo_Hugo

A segunda tela se refere ao perfil do Estabelecimento onde todas suas informações estarão dispostas, assim como as imagens de seus serviços.

Prototipo_Hugo

Autor: Gustavo

Prototipo_Gustavo

Protótipo de Alta Fidelidade

Wireframe

Dessa vez a equipe decidiu produzir os protótipos passo-a-passo, de forma que as ideias tivessem mais espaço para amadurecer e o front-end estivesse de acordo com os requisitos evoluidos após a refatoração do escopo. Assim, antes de lançarmos a versão final, decidimos produzir um Wireframe.

Wireframe pode ser definido como um esqueleto do produto final. Nele está contido o conjunto de estruturas do site e os principais elementos, organizados por formas geométricas que ajudam a visualizar um produto real.

Home

Na Home dispusemos os elementos de forma que simplificasse cada sessão de serviço para o usuário, dividindo em quatro os atributos:

  • Menu
  • Apresentção
  • Mapa
  • Feed de serviços

Wireframe_Home Homepage do site - Hugo

Perfil do Estabelecimento

A página de Perfil conta com as principais informações do Estabelecimento, descrição do mesmo (afim de engajar o cliente), e um menu onde o cliente pode visualizar por:

  • Trabalhos realizados
  • Posição no Mapa
  • Comentários de clientes daquele estabelecimento

Wireframe_Perfil Página de perfil do Estabelecimento - Hugo

Filtro de Estabelecimentos

A página de Filtro Avançado foi criada para permitir que o usuário pudesse fazer uma busca personalizada, de forma a economizar tempo buscando por tipo de serviço ou distância, por exemplo.

Filtro

Página de Filtro Avançado - Hugo

Cadastro de Cliente

Cadastro de Cliente Página de cadastro - Hugo

Cadastro de Dono de Estabelecimento

Cadastro de Dono Página de cadastro dono estabelecimento - Hugo

Página de Login

Tela de Login Página de Login - Hugo

Cadastro de Estabelecimento

Cadastro de Estabelecimento Cadastro de Estabelecimento - Hugo

Versão 1.0

Caso haja problema na visualização, Clicar aqui.

Versão 2.0

O protótipo de Alta Fidelidade foi atualizado de acordo com a modelagem final dos Wireframes, se tornando a versão final do projeto.

https://www.figma.com/proto/2P0B6tvj2IfXUSEpXhq78R/Encare?page-id=0%3A1&node-id=1%3A2&viewport=450%2C425%2C0.3713192641735077&scaling=min-zoom

Referências

Versionamento

Data Descrição Autor(es) Versão
18/03/2021 Criação do documento Nícalo, Gustavo, Hugo 0.1
18/03/2021 Estruturação do documento Nícalo, Gustavo, Hugo 0.2
18/03/2021 Adicao do prototipo de média 01 Nícalo 0.3
18/03/2021 Adição da primeira versão do protótipo de alta fidelidade Nícalo 0.4
18/03/2021 Adição dos protótipos do Hugo e Do Gustavo Gustavo, Hugo, Nícalo 0.5
19/03/2021 Adição de alguns ajustes na página Gustavo 0.6
25/03/2021 Adição do Wireframe Home Hugo 0.7
25/03/2021 Adição do Wireframe Perfil e Descrição das pages Hugo 0.8
08/04/2021 Adição do Wireframe Filtro Hugo 0.9
08/04/2021 Adição da descrição do protótipo de baixa (Hugo) Hugo 1.0
01/05/2021 Adição da tela de cadastro do cliente Hugo 1.1
01/05/2021 Adição da tela de cadastro do dono Hugo 1.2
01/05/2021 Adição da tela de Login Hugo 1.3
01/05/2021 Adição da tela de cadastro de Estabelecimento Hugo 1.4
03/05/2021 Adição de protótipo de alta fidelidade 2.0 Hugo 1.5