Se és um utilizador do Logto, podes ter reparado que o site da nossa empresa foi recentemente renovado.
Se não és, dá uma olhada no site, logto.io, e tenta adivinhar quantos recursos investimos para que isto acontecesse.
Podes pensar: vocês vão promover-se, dizendo que precisou de muito trabalho, esforço, e um design cuidadoso só para mostrar a vossa excelência na execução?
Não!
Pelo contrário, queremos mostrar como inteligentemente aproveitamos ferramentas e métodos para melhorar a qualidade do nosso produto e entregar os melhores produtos e serviços aos nossos utilizadores.
Recebemos alguns comentários positivos da nossa comunidade e estamos a questionar-nos como fizemos isso. Esta ronda de atualizações é diferente porque reinventámos completamente um novo fluxo de trabalho num ambiente em rápida evolução. Gostaríamos de apresentar as nossas melhores práticas e também olhar mais de perto para a nossa cultura de trabalho em equipa e colaboração.
Somos uma equipa tecnológica focada em fornecer uma ampla gama de serviços de desenvolvimento relacionados com a identidade do cliente e trabalho de infraestrutura. A pressão para entregar é significativa. Entretanto, precisamos apoiar várias tarefas de storytelling e operacionais, como criar sites de marketing de marca, escrever blogs, promover os nossos projetos e interagir com os nossos utilizadores.
Um site de aterragem apelativo é crucial, pois muitas vezes é a primeira impressão que o teu público tem do teu produto, ajudando-os a entender os problemas que o teu produto pretende resolver, incluindo preços e clientes notáveis como prova social.
Além disso, pode cumprir vários objetivos de negócios:
Apresentar a marca e a proposta de valor do teu produto.
Gerar leads.
Servir como um hub de conteúdo, especialmente importante para uma empresa focada em crescimento orientado por produto ou por desenvolvedores.
Proporcionar um local para otimizar SEO, adquirir utilizadores, e acompanhar o tráfego regular.
No meu trabalho anterior, participei num projeto de website. Vamos olhar para o que um fluxo de trabalho típico envolve:
Primeiro, os gestores de marketing de produto e os gestores de produto definem o conteúdo e os requisitos.
Os designers de produto e um UX writer refinam o conteúdo.
Passamos o trabalho em progresso, geralmente uma versão de baixa fidelidade, para designers visuais e de branding para os retoques finais antes da produção.
Os engenheiros e gestores de produto então começam a implementação, focando na animação e design web responsivo.
Este processo é tedioso e envolve muitas pessoas e interessados, tornando-o inadequado para um ambiente de rápida evolução.
Mesmo que inicialmente tenhamos apenas duas pessoas a manter isto—um designer de produto e um engenheiro—, as tarefas de gerir o desempenho web, carregar imagens, assegurar design responsivo, lidar com formatos de imagem, e atualizar conteúdo ainda requerem muita comunicação de ida e volta.
Este fluxo de trabalho é ineficiente. Estou constantemente a pensar em como libertar recursos de engenharia para focar no trabalho de produto principal enquanto eu gerencio o resto.
Usar ferramentas para aumentar a produtividade é uma filosofia chave da nossa equipa. Portanto, comecei a pesquisar ferramentas que podem ajudar a simplificar esses processos.
Para desenvolver um site de marketing SaaS bem-sucedido, vamos decompor os elementos essenciais necessários:
Conteúdo: A base de qualquer site de marketing é saber exatamente o que exibir. Isso requer um entendimento profundo dos teus clientes-alvo, dos seus casos de uso típicos, e da proposta de valor do teu produto. Nenhuma ferramenta pode substituir esse entendimento. Felizmente, a minha participação no design de produto e nas estratégias de entrada no mercado significa que estou bem equipado para criar conteúdo que atenda às necessidades dos utilizadores.
Design: O site deve ter um apelo visual polido e elegante. O meu histórico em design UX/produto, embora não tão extenso quanto o de um designer criativo dedicado, capacita-me a lidar com este aspeto de forma competente.
Engenharia: Considerações técnicas chave incluem hospedar o site, garantir design responsivo e permitir micro-interações suaves. Também é crucial integrar o site de forma transparente com outros componentes, como redirecionamentos de links e a página de autenticação do produto.
Tendo realizado algumas pesquisas, aqui está o conjunto de ferramentas que planeio usar para os aspetos de design:
ChatGPT 3.5, ChatGPT 4.0, Gemini Advanced, Jasper, ou aplicações semelhantes de IA como copiloto.
Isto é para afinar e otimizar o meu conteúdo e mensagens de marketing. É importante ser claro sobre o objetivo e a intenção por trás delas. A IA é apenas um copiloto, não um tomador de decisões. Antes de escrever qualquer mensagem de marketing, faço a mim mesmo algumas perguntas:
Quem vai ler a mensagem?
Eles precisam de algum contexto extra?
Qual é o ponto-chave que queres abordar na mensagem?
O que esperas que o utilizador faça a seguir?
Esta mensagem é destinada a educar ou a conduzir a uma ação específica?
Tem o potencial de ser enganosa ou exagerada?
Depois, escrevo um rascunho inicial dos pontos que quero comunicar.
Às vezes, a IA pode introduzir palavras que parecem usadas demais ou torcer a tua intenção original para que pareça logicamente correta. No entanto, deves relembrar a tua intenção e manter-te fiel aos teus objetivos. Deves estabelecer padrões para garantir que as palavras entregues ao público sejam claras, diretas, concisas e transparentes. Isso é especialmente importante na nossa área de produto, que serve muitas empresas e desenvolvedores.
Figma, Framer para design de interação e visual, bem como animação e prototipagem
Tenho uma formação em design, principalmente focada em design de produto, o que envolve a criação de UI e UX. Embora projetar uma UI polida não seja um desafio para mim, o meu trabalho não é tão sofisticado quanto o de um profissional. No entanto, com algumas habilidades básicas de design visual e ilustração, e escolhendo as ferramentas certas, podes melhorar a qualidade do teu trabalho. Uso o Framer e o Figma neste processo criativo.
Este é o nosso design antigo, que foi completamente criado no Figma
O nosso design original foi criado no Figma. Usei o plugin oficial do Framer, "Framer to HTML", para copiar e colar o design básico no Framer, o que proporcionou um bom ponto de partida.
O próximo passo é desenhar. Se já utilizaste o Figma anteriormente, a transição para o Framer é um processo suave, uma vez que a experiência geral do utilizador é bastante semelhante. Vou destacar algumas interações interessantes que melhoram significativamente a produtividade.
Os utilizadores do Figma apreciam o layout automático porque poupa muito tempo ao dispor e posicionar elementos. No entanto, as funções de layout no Framer são ainda mais inteligentes, alinhando-se mais com uma mentalidade de front-end. No Framer, podes escolher se queres usar um layout de grelha ou de pilha, definir as colunas, definir uma largura máxima, e ele irá automaticamente mudar para outra linha, se necessário. Esta funcionalidade melhora o processo de design, refletindo como os elementos irão comportar-se num ambiente web ao vivo.
Confiando inteligentemente na configuração de pontos de interrupção e nas definições de largura (como preencher, fixo, relativo e ajustar ao conteúdo) e definindo diferentes telas, podes alcançar facilmente e com precisão diversos designs responsivos. Esta abordagem permite-te adaptar o layout a diferentes tamanhos de ecrãs e dispositivos de forma eficiente.
O Framer oferece uma variedade de animações pré-construídas, incluindo uma animação ticker que usamos extensivamente no nosso site para mostrar o nosso trabalho. Podes configurar o componente e incorporá-lo neste widget. Permite-te definir várias configurações, como velocidade, direção, espaçamento, e mais, dando-te flexibilidade e controlo sobre como a animação se comporta no teu site.
Outra funcionalidade útil no Framer é a capacidade de personalizar animações de rolagem. Por exemplo, podes especificar como os itens aparecem à medida que surgem durante a rolagem. Configurar a tua animação de rolagem permite-te controlar o tempo e o estilo de como os elementos são exibidos, melhorando a experiência do utilizador e o envolvimento com o teu conteúdo.
Um dos meus requisitos principais é a possibilidade de:
Desenhar rapidamente várias páginas de aterragem para otimização de SEO e campanhas de marketing. A rapidez é fundamental.
Atualizar frequentemente o conteúdo por minha conta. A tua página de produto deve refletir os desenvolvimentos mais recentes e o posicionamento atual do teu produto. Conteúdo desatualizado significa perder oportunidades de mercado e não estar em sintonia com as necessidades dos teus clientes.
No meu fluxo de trabalho anterior, cada vez que precisava atualizar o conteúdo, tinha de pedir a um engenheiro para fazê-lo ou submeter um pedido de pull eu mesmo. A nossa equipa de engenharia segue um processo rigoroso para garantir a qualidade do código, o que pode ser demorado e restringe a minha capacidade de fazer mudanças rápidas.
O Framer resolveu esse problema para mim. Agora, sempre que faço uma alteração e clico em publicar, ela é imediatamente refletida na produção ao vivo. Esta capacidade simplificou significativamente o processo, permitindo atualizações rápidas e uma maior autonomia na gestão de conteúdo.
Como está hospedado pelo Framer, não há necessidade de qualquer implementação ou trabalho técnico da nossa parte. Os nossos engenheiros precisaram de cerca de 10 minutos para integrá-lo com o resto do nosso site.
O nosso site atual consiste em 20-30 páginas; algumas são desenvolvidas usando o Framer, enquanto outras são criadas através de métodos tradicionais de desenvolvimento de software. Estamos a avaliar as melhores ferramentas para manter as nossas páginas. Por exemplo, para documentação de desenvolvedores, que é difícil de gerir com o Framer, usar uma framework de documentação amigável para desenvolvedores para hospedar o teu conteúdo é a escolha ideal. No futuro, avaliar-nos-emos as nossas necessidades e decidiremos se continuaremos a hospedar por conta própria ou a transitar completamente para o Framer.
Transformamos completamente o nosso fluxo de trabalho, tornando a produção de sites de marketing completamente sem esforço. É confiável, fácil de manter, e altamente eficiente.
Escrevi este blog para partilhar as melhores práticas. Se tens experiências com o Framer e projetos de sites bonitos, adoraria ouvir sobre elas. Vamos conversar e aprender uns com os outros.
Agora, é hora de descobrir o nosso produto! Visita-nos em logto.io.
