Executando verificação de segurança...
9

Pitch: [Processo de criação] PolarizeMe - O Gerador de Polaroid

Hey, pessoal! Como vão?

Sou Javascript Developer há um pouco mais de 2 anos, no entanto, já estou na área da programação há 3 anos. Uma das minha maiores dificuldades era encontrar ideias mais 'originais' ou colocá-las em prática pela falta de tempo, mas isso mudou há um pouco mais de um mês.

Apresento a vocês: www.polarizeme.com.br

Gostaria de compartilhar como a ideia surgiu, quais foram os desafios, alguns dados bacanas e metas futuras.


Fotos polaroides são muito queridas por trazer nostalgia e dar um toque especial em painéis ou album de fotos. Eram e continuam extremamente populares, no entanto, criá-las ainda pode te dar uma dor de cabeça, seja pelo trabalho ou pelo gasto.

Atualmente se buscarmos por ferramentas que disponibilizam polaroides editáveis haverá poucas opções, além de ter alguns pontos 'negativos' para muitos usuários:

  1. Ferramenta paga
  2. Necessário realizar cadastro
  3. Necessário instalar um software
  4. Experiência com edição de imagens
  5. Habilidades com tecnologia
  6. Polaroid com fundo

Há alguns meses decidi fazer uma surpresa para a minha esposa e dentre uma delas estavam algumas fotos polaroides nossas (que só de pensar o bolso chora). Depois desse dia, ela decidiu fazer suas próprias fotos polaroides e utilizou o editor de imagem PhotoScape. Ela demorou um pouquinho, mas conseguiu criar. O problema é que dependendo da quantidade de polaroides que você quer criar, o processo se torna cansativo e repetitivo.

Pensando nisso, decidi criar um gerador de polaroides em que não fosse necessário instalar ou baixar nada e nem mesmo realizar cadastro. Seria apenas simples, fácil e rápido para que até mesmo o mais leigo pudesse gerar suas próprias polaroides. E assim, surgiu o PolarizeMe. Inicialmente seu nome era Polaroid Generator, tanto que a primeira url foi polaroid-generator.vercel.app.

1° semana:

A primeira versão não era nada mais nada menos que um website com um fundo cinza, um dropzone para realizar o upload e o botão de download. O objetivo não era deixá-lo magnífico, mas sim funcional. Após o primeiro dia, me empenhei nos seguintes tópicos:

  1. Criar nome e logo.
  2. Buscar referências de design no site (UI Desig Daily)
  3. Hospedar o site na Vercel
  4. Entender como o Google Adsense funciona
  5. Criar um board no próprio Github mesmo para registrar todas as alterações realizadas em cards, utilizando o método Kanban.
  6. Conhecer o programa de Associados da Amazon (quem sabe vender umas câmeras, hein!?)
  7. Implementar a segunda versão com um design mais consistente.
  8. Responsividade é essencial!
  9. Mostrar para alguns colegas de trabalho para coletar insigths.

2° semana:

Ok, o site já estava funcionando. Qual o próximo passo?

  1. Coletar métricas de Anlytics pra entender quantas pessoas acessaram, em qual browser, de qual país, entre outros dados, para adequar o site e ter ideias mais consistentes do que deveria ou não ser feito e de como priorizar. Pra isso utilizei o Web Analytics da Vercel.
  2. Coletar métricas de desempenho pra estar atenta a possíveis melhorias, utilizando o Speed Insigths também da Vercel.
  3. Criar as Políticas de privacidade e Termos com o Privacidade.me
  4. Mostrar para mais alguns colegas.
  5. Comprar domínio atualmente utilizado pela umbler
  6. Mapear todas as features e ideias adquiridas como feedback e organizá-las.
  7. Criar ferramentas de edição: redimencionar, rotacionar e zoom.
  8. Adicionar Header e Footer.
  9. Organizando e mapeando todas as mensagens de erros com o componente Toasty.
  10. Mapeamento de todas as extensões de imagens aceitas.
  11. Ferramenta para adicionar cor de fundo para imagens png

3° e 4° semana:

Iih, gente... não é que ta dando certo?

  1. Melhorias de design,
  2. Paleta de cores mais consistente
  3. Olha a responsividade...
  4. Adicionando opção de adicionar legenda na polaroid
  5. Seção com instruções de como gerar a polaroid
  6. Ajustes para se adequar as políticas do Google Adsense
  7. Reformulação do Headeer (em andamento)
  8. Reeorganizazção de cores, fontes e espaçamentos (em andamento)
  9. Estruturando página de feedback e reporte de problemas (em andamento)

Métricas:

Bom, neste 1 mês de vida consegui coletar métricas bem bacanas. Aliás, gostaria de agradecer ao Tabnews, pois ontem apenas comentei sobre o projeto em uma das threads e já rendeu um número realmenre especial pra mim.

DataUsuáriosVisualizações
27/06 - 24/0797192
25/0775108
Total169300
DispositivoDesempenho
Mobile96
Desktop100
TabletNão há dados

Caso tenham interesse em saber mais sobre o projeto, tenha dúvidas ou tenha um feedback, fique a vontade para comentar.

Agradeço por ter chegado até aqui. Nos vemos em breve!

Carregando publicação patrocinada...
1

Muito massa mano, uma dica adicione "Pitch" no início do titulo ou entre "[ ]" assim vai ser melhor identificar seu trabalho aqui no TabNews.

E continue sempre divulgando seu projeto, acredito que em breve terá muito mais resultados.

Outra dica que eu dou também é criar uma versão em inglês!

0
1

Que legal! Tô com uma ideia e vou colocar ela em prática usando o PolarizeMe como exemplo. Continue atualizando as métricas aqui 🤝.

Pode falar mais sobre sua organização de cards no GitHub?

1

Que honra! Pode deixar que irei continuar publicando e trazendo sites e ferramentas utilizados no processo.

Sobre a organização de cards, o Github tem a funcionalidade Projects, onde é possível criar quadros Kanban e editá-los da forma que achar melhor. Abaixo vou deixar o link para o projeto que criei, mas caso não tenha acesso me avise, que dou um jeito de te mostrar.

Mas basicamente, criei um template de tarefas em Markdown pra facilitar no preenchimento das tarefas. Então praticamente todas as tarefas tem os campos: Contexto/Objetivo, Critérios de aceite, MR (Merge Request) e (se for bug) comportamento atual, comportamento esperado e evidências.

https://github.com/Rafa-Denlavor/polarizeme/projects?query=is%3Aopen

1
1

Obrigada!

Quando ao Google Adsense, o único problema é que ele está identificando que o site está com pouco conteúdo (conteúdo de baixo valor). Pretendo adicionar alguns artigos e novas páginas pra dar uma incrementada e tentar novamente.

1

Muito bacana o site. Eu gosto muito deste tipo de projeto de ferramentas de nicho.

Minha dica é: adicione texto abaixo da ferramenta, contendo palavras-chave que seu público alvo pesquisaria no Google (olha só como essa ferramenta faz: https://dolarhoje.com). Isso pode ajudar a rankear melhor.

Uma coisa que observei é que quando fiz o upload de uma foto pelo celular (Chrome no iOS), a imagem saiu espremida. A mesma imagem no computador ficou normal.

Boa sorte com o projeto!

1

Obrigado pela referência e feedback!

Ainda tenho algumas melhorias pra fazer quando se trata de mobile, pois depedendo do dispositivo acontece o que aconteceu contigo. Vou criar uma tarefa pra dar uma olhada.

1

Muito legal o seu projeto, obrigado por compartilhar! Eu vi uma resposta sua no tópico dos microsites e resolvi dar uma olhada.

Se me permite uma sugestão para melhorar mais o seu projeto, acredito que seria uma boa ter no site alguma forma do usuário ver exemplos do resultado final da sua ferramenta. Muita gente sabe o que é uma foto polaroid, mas fiquei confuso o que exatamente o site estaria me retornando (é só a minha foto com uma borda branca? Vou poder customizar de alguma forma? Vou conseguir escrever alguma coisa?)

Eu reparei que aparece uma ferramenta para escolher cores depois que o site me retorna a foto, mas eu não consegui mudar a cor das coisas usando a ferramenta. E se eu mudo de aba no navegador com a ferramenta aberta, a ferramenta continua visível(!)

E por último, é uma coisa bem pequena, mas quando tento mudar o texto padrão da foto, tento dar um clique duplo para selecionar e apagar tudo, mas só consigo clicar no meio da palavra, ir apertando a seta para direita até o final de "legenda" e ir apagando um caractere por vez com o backspace. Seria legal ter o comportamento padrão, de poder selecionar a palavra inteira com um clique duplo ou o texto padrão é só um placeholder fantasma, que apaga no momento em que o usuário começa a digitar.

Acho que é isso! Boa sorte com o projeto!

1

Agradeço pelo feedback!

Adicionar uma polaroid de exemplo é uma ótima ideia. Vou ver um jeito de encaixá-la.

Sobre a legenda, é uma funcionalidade nova, então ainda to vendo alguma lib que possa me ajudar com a adição de texto e seja manipulável.

A cor de fundo será mais pra imagens png ou se você diminuir o zoom, daí vai ser possível visualizar, no entanto, preciso realizar uma melhoria nisso mesmo.

Sobre o bug da aba, conseguiria tirar uma foto ou mandar um video?

Whats: (11) 96030-7271