Transcrições
1. Fundamentos de prototipagem com Figma Make, ChatGPT e Lovable: Existe um futuro para gerentes de
produto que não
conseguem trabalhar com IA? Honestamente, não. Acabamos de entrar em uma era
totalmente nova de PM com inteligência artificial, uma geração diferente
que se move mais rápido, é mais inteligente e
transforma ideias em protótipos em
poucas Se você quiser se destacar, se
quiser permanecer relevante e se quiser liderar, você precisa desse conjunto de habilidades. Eu criei esse curso logo
depois que dois diretores de duas
empresas diferentes me disseram que meus protótipos de IA
parecem trabalhos de agência E tudo isso foi feito em um dia sem desenvolvedores
e sem esperar. Isso me deu a coragem de compartilhar tudo o que
aprendi com você. Esse curso não é teórico. Isso não é uma estrutura de reciclagem
e, definitivamente, não é
algo que você
encontrará em um livro. Isso é real. Isso é prático. E é a vantagem que separa os melhores
PMs de todos E eu fiz isso para você.
Assim, você pode se tornar o tipo de
gerente de produto que as equipes desejam, startups precisam e
as demandas futuras.
2. Crie seus padrões de GPT e UX: Tudo bem. Bem-vindo
a esta palestra. A primeira de criar
um protótipo com ferramentas de IA. E qual é o melhor
lugar para começar? Claro, é uma janela de pesquisa
do Google. Portanto, para
começarmos, precisamos colocar o HantPT
em forma para nos
fornecer boas instruções sobre
Lovable ou Figma E não há
maneira mais fácil de fazer isso do que primeiro
baixar
Lovable Prompting Aqui está. Você pode ver
que isso é muito importante. Mas com o Controle A, o Controle C
, acessar o ChatGPT é a primeira coisa
que você precisa fazer Agora, em seguida, vamos
criar um GPT
no Cha GPT . Isso
está em Explorar. Em seguida, criamos, chamaremos Figma e Flower, ambas
prototipando O que você pode fazer é
carregar arquivos para criar o conhecimento
para o GPT Mas acho que podemos
pular isso e criá-lo. Só eu para essa
coisa e depois segura. Vamos esperar alguns segundos, ver o GPT e agora vamos começar
a treinar nosso GPT A primeira coisa que
vamos dizer é que você é um especialista experiente em UX, proficiente e que
leu os livros mais
sofisticados de Entendi? Me dá uma lista
de livros de UX proeminentes. Você precisa pensar
nisso enquanto conversa com
uma criança e aprende a lutar no modo Speed Em seguida, contamos agora, obtemos três boas práticas
cada e me
damos explicações longas e detalhadas sobre obtemos três boas práticas
cada e me
damos
explicações longas e detalhadas sobre
elas. Espere um pouco. Diga isso a esta loja
em seu conhecimento. Ok, então temos que pensar que vamos
solicitar, que tipo de produto. E para este
exercício, podemos criar uma ferramenta rápida de observabilidade baseada nas ferramentas de rastreamento Datadog e Grafana
e Então, o que vamos dizer
ao GPT é analisar Datadog Grafana, traços de
Dina, padrões de UX,
examinar formulários e isolar os
melhores padrões de UX, navegação, recursos e capacidade de descoberta Experimente e formule-o em uma bíblia de UX de observabilidade Seja extremamente detalhado
ao explicar
esses dois pré-graduados distraídos em UX com bom
entendimento de UX, mas com um tempo de
atenção limitado que pode facilmente se desviar.
Lembremos de lembrar a parte
fácil de se afastar, porque é assim que vamos tratar
a E esses são ajudantes fantásticos
para a construção de protótipos. Eles se distraem
facilmente, e você precisa fornecer a eles uma quantidade
suficiente de detalhes antes eles comecem a entender
o que estão fazendo Então é exatamente isso que
estamos dizendo aqui. Vamos ver o que o
GPT virá. E aqui está nossa Bíblia de UX. Ela nos diz exatamente o que uma solução de observabilidade deve fazer em termos de experiência do usuário, então pode ser mesquinha Essa é uma boa solução
de observabilidade pelos usuários que a usam Vamos esperar que o GPT
termine e, novamente, vamos pedir que ele armazene
os dados em seu conhecimento Vou rolar lentamente, para que você possa parar o vídeo e ver
o que o GPT está fazendo Estou lendo em tempo real,
e o som é bastante decente para Lovable e
Figma para fazer uma boa prototipagem, então vamos
esperar Veja, alucine isso aqui. Sendo parte do
campo de observabilidade, isso é ouro. Ok, agora dizemos classificar
de acordo com seu conhecimento. Lá vamos nós. Em seguida, vamos para
a Bíblia inspiradora Lovable Vamos dizer ao GPT que esta é
a Bíblia inspiradora adorável Guarde-o com seu conhecimento
e sempre siga essas melhores práticas
quando solicitado a
criar um prompt para Lovable Dev ou Figma Make Como não conheço o mesmo tipo de
Bíblia do Figma Make, vou pedir novamente
ao GPT que leia fóruns
e artigos, etc E crie-o sozinho. Lá vamos nós. É um documento
longo Mas você pode simplesmente clicar. E isso deve ser feito
em alguns segundos. Agora, o que vamos
pedir é ler este e outros formulários para especialistas que deram bons conselhos sobre Figma Make e como criar
as melhores instruções para Crie o mesmo estilo
de inspirar
a Bíblia que você tem em seu conhecimento.
Ok, então vamos avisar. Para pensar
por um tempo e soletrar a Bíblia
inspiradora do Figma Make levará
um pouco de tempo para gerar o grande
documento e armazená-lo, e então estaremos
quase prontos para começar. Tudo bem. Agora isso acabou. Você tem oficialmente as duas bíblias
de punting
armazenadas em seu Este é o seu monstrinho
para construir suas calças, e você precisa tratá-lo
com cuidado e nutri-lo Então, toda vez que você lê um livro ou tem um bom artigo, venha aqui e dê ao seu GPT um pouco de amor
e mais alguns artigos, para que ele se torne ainda mais inteligente Ok, agora, depois de
terminarmos com isso, podemos começar a construir nosso primeiro. Essa é a coisa mais
estratégica. Então, só para recapitular, o que
fizemos foi criar um GPT, mandamos ele buscar os melhores padrões,
conhecimentos e boas práticas de UX Em seguida, adicionamos a Lovable
Prompting Bible a ela. Pedimos que ela criasse
a Bíblia inspiradora Figma, do mesmo estilo, pedimos que ela
guardasse tudo nela Em seguida, escolhemos
o campo a partir do qual
criaremos produtos. Então, atualmente, isso será observabilidade, mas talvez sejam
algumas ferramentas de negócios Talvez isso possa ser um aplicativo de escuta de
música. Talvez isso possa ser algo para criar sites pessoais
para pessoas diferentes. Você precisa descobrir
o melhor que eles são. E peça ao GPT que
analise esses sites, obtenha as melhores práticas
e os melhores padrões, armazene-os em seu
conhecimento, para
que ele saiba o que ver e como
criar o prompt, para que seja realmente bom Quando tudo estiver em
nosso conhecimento agora, podemos começar criando
nosso primeiro prompt. Então, para começar, vou reunir alguns links e muitas capturas de tela
de coisas que eu gosto O que vamos criar é um aplicativo para monitorar naves espaciais Então, o que vou
fazer é procurar os melhores aplicativos de pesquisa que existem
e alimentar o GPT com eles Tudo bem, então eu encontrei alguns artigos que falam
sobre missões
de espaçonaves
e monitoram sobre missões
de espaçonaves diferentes Então, eu coloquei os
links deles aqui primeiro. Em seguida, coloquei artigos
diferentes e imagens para monitoramento de
naves espaciais como Ds no Grafana,
isso no data Dub, esse software de controle espacial para essas pessoas, mais
software para naves espaciais, ainda
mais software para naves espaciais Tudo isso está aqui. Esse não é.
Também foi adicionado. E agora vem o prompt, que é o seguinte: você está criando um primeiro prompt do Figma
Make Ele precisa ser detalhado
e fornecer tanto que um pré-graduado nos EUA possa seguir em frente sem se
distrair O que estamos construindo
é um protótipo de uma ferramenta de monitoramento de naves espaciais com
o tema Gufan É
muito importante escolher uma equipe
e dizer ao GPT Você precisa analisar o Grafana,
sua estrutura, sua UX,
sua UI em detalhes e dizer ao iGMA Make como
criar o O protótipo terá
essencialmente três telas, uma para visão geral, uma para análise operacional e outra para análise de lançamento
e pouso Certifique-se de fornecer uma quantidade
excessiva de detalhes, para que não ocorram erros E aqui está uma dica que eu
quero te mostrar 100%. Ao fazer isso,
certifique-se de fazer uma pesquisa profunda. Atualmente, eu coloquei
isso no pensamento. Vamos dizer que isso é ainda mais parecido com um pensamento estendido. Agora vamos
criar nosso primeiro prompt, que é super estratégico
e sem ele, como eu disse no começo, seu protótipo pode se
afastar muito. Então, isso é o
que você precisa fazer. Às vezes, são necessárias
várias execuções em que você solicita que o ChatGPT o
crie e depois o leia Em seguida, imprima novamente,
leia novamente e edite, para que você finalmente tenha
o que precisa. Então, vamos ver o que
acontece. Tudo bem. E agora, depois de
pensar um pouco, novamente, se você tiver
a opção aqui de não apenas usar o pensamento
estendido, mas de fazer uma análise profunda ,
você pode fazer
isso com certeza, e será melhor. Mas agora temos o
que precisamos, e esse é nosso primeiro aviso, conteúdo, tarefas,
diretrizes, tudo.
3. Aperfeiçoando a bíblia para fazer protótipos no Figma: Os critérios de sucesso estão em branco, então isso precisa ser certo, mas no que vou fazer, e se você quiser, você também pode fazer isso como um quilômetro a mais. Você pode copiar isso daqui, começar um gráfico normal
do Chan GPT,
clicar aqui, dizer Deep
Research e contar Faça uma pesquisa profunda,
certifique-se de que está em conformidade com
os mais altos padrões de UX e IA, solicitando ser
mímico Verifique seu conhecimento para
garantir que ele cumpra os critérios de
sucesso
que abrangerão fácil descoberta e Você cola o grande tanque e ele fará uma pesquisa
profunda sobre isso. Você está procurando um prompt
detalhado do Figma Make? Sim, um expatriado completo. Sim. Layout de fema simulado. Não. E reinicie a pesquisa,
vai demorar um pouco. Mas o aviso
será ainda melhor. Então, vamos esperar pela pesquisa. Depois que a pesquisa estiver concluída, uma vez concluída a solicitação, vamos aplicá-la de
fato. Veja o que o Figma Make
vai fazer com ele. E, claro,
então teste e, adorável, veja qual será
a diferença Mas espere um pouco
e, em seguida, iremos
para nossa próxima palestra, onde daremos
vida a
esse aviso e faremos com que aconteça Esta será sua
primeira tela para nossa ferramenta perfeita de monitoramento de aeronaves por satélite e naves espaciais Fique ligado.
Nos vemos na próxima palestra.
4. A mentalidade de prototipagem de PM: Você pode obter um
protótipo sólido da IA sem fornecer
o contexto adequado Exatamente. Você pode. Nesta palestra,
vamos nos concentrar
na parte mais importante
do processo E isso é criar seu prompt de protótipo
principal. Aquele que criará
o primeiro visual, aquele que atua como base para
tudo o que se segue, seu sucesso mais estratégico em todo o processo de
criação. Este é o seu resumo.
Se você errar, seu protótipo estará em
todo lugar e flutuará cada vez mais a cada próxima
solicitação Mostrarei como usar o Cha
GPT como um assistente inteligente, como fornecer os ingredientes
certos
e como garantir
que ele se comporte mais como um pensador sênior de UX
do que como um adolescente distraído Vamos preparar seu protótipo para
o sucesso. Vamos pegar seu prédio.
Nos vemos lá dentro.
5. A estratégia principal “Visual e lógica”: sincronização de propostas e imagens com a IA.: Ok, agora, após
a pesquisa profunda, temos nosso prompt principal. Esse é o Santo Graal. Nós apenas pegamos, Oop, até o fundo
, copiamos e pronto No lado esquerdo,
isso é adorável. No lado direito,
isso é figma make. Vamos ver o que vai
acontecer quando colocarmos o prompt principal e
algumas capturas de tela Então, vamos colocar o grande
aviso nos dois lugares e anexar as capturas Concordamos que o que estamos fazendo é fazer um protótipo de
grafana Então, reuni cinco boas
capturas de tela do Grafana. Tão adorável e que Figma faz. Seremos capazes de entender
: Oh, teremos que
fazer isso um por um. Ok, um, dois, três. Ok, aí está nossa
primeira diferença. Aqui você pode adicionar até três, aqui você pode adicionar até cinco. Então você está pronto para
ver nossa primeira tela? Novamente, eu tenho as capturas de tela mais importantes e
representativas, o enorme prompt principal, três, dois, um,
vamos lá. E vamos embora. Vamos ver o que acontece
depois que isso for feito. Ambos os sistemas estão funcionando.
Iterações de design da lovable No lado direito,
Figmme escrevendo o código. Vamos ver quem faz isso primeiro. Vamos ver quem faz isso
melhor. Lá vamos nós. Lovable foi a primeira. Vamos
esperar pela Figma feita agora E agora, a hora da verdade. Vamos ver o que acontece com Figma em apenas mais
alguns segundos. Lá vamos nós. Eu diria que
isso é bem parecido. Agora, quando olhamos para
isso dos dois lados, parece realmente muito semelhante. Fornece um painel de controle. Vamos expandir, vamos
expandir e ver tudo. Sim, essa é adorável. E esse é o Figma. Eu diria que, de alguma forma, a figma se parece um
pouco mais com grafana,
mas, portanto, está bem errada e não há absolutamente
nada Vamos experimentar alguns camarões, só para sentirmos como
as coisas vão. Vamos ver. Vamos trazer Chan chi PT novamente. Acesse nosso
gerador de prompts e diga quero um prompt que torne
o protótipo aplicável, semelhante à
estrutura de cenas do Pana Certifique-se de me dar uma fachada adorável
que seja razoável Anote os menus, todos os
meus povos e gráficos. Vamos ver com o que o Cha GPT
virá. Certifique-se de enriquecer
o aviso pedindo que o tipo de
manifestante de polo seja mais divertido Agora, enquanto esperamos, quero dar uma olhada em uma
dessas capturas de tela
que eu mais gosto, para que eu possa mostrar como
imagem significa 1.000 palavras Vamos ver qual deles devemos escolher. É sempre o último. Ok, vamos copiar isso postado
nos dois lugares aqui, adorável. E vamos pegar o da
missão espacial real
da Grafana,
este, postado aqui,
postado aqui.
Acho que perdi um. OK. E esquecemos de nos alimentar
de forma adorável Aqui está, adorável. E agora vamos pegar esse Brant,
que é inti Vá lá, o GPT.
Páginas, painéis Vá imediatamente, adorável. Vamos ativar o microfone Figma. Agora, isso deve nos dar
uma quantidade suficiente de clicabilidade em torno
dos Vamos ver como é
vetar o pensamento. E agora, só para recapitular, aqui temos o status do espaço, a comunicação,
o sistema térmico, o controle de altitude Temos biografias e
séries temporais, assim como a Igufan
tirou a ideia de todas as diferentes
maquetes e forneceu
o sistema de
energia e o monitoramento
térmico, um bom painel Aqui, é quase o mesmo, mas tive a
estranha sensação de que ele realmente queria apenas
imitar o preto E, novamente, é uma energia térmica comum para a
saúde. Essencialmente, ele
sabe o que visualiza, mas existem alguns desvios Isso se
inspirou muito mais Grafana e é muito semelhante, embora
esse tipo
de design de vidro líquido não seja meu favorito, mas vamos
solicitá-lo um pouco mais e ele fornecerá uma visualização
muito melhor Tenho quase certeza de que, com esse aviso, isso
vai acontecer. Caso contrário, vamos perguntar mais um pouco,
para ver o que acontece a seguir. Ok, a Volvo está pronta. E, novamente, revisando
as últimas, vamos lá. Eu os tenho, mas realmente
não parece clicável. Nada é clicável e
não consigo escolher
nada interessante Vamos ver o que Figo fará. Dê outro aviso
enquanto espera. Dê-me uma seleção, menu
suspenso, filtro na parte superior. Isso me dará a capacidade de
escolher entre os quatro nomes de
espaçonaves Além disso, torne o filtro interativo e capaz de
filtrar os painéis abaixo, fazer com que a bateria, o SOC, geração
P e as
outras caixas na parte superior sejam
clicáveis e permitam redefinir os painéis fictícios redefinir Veja se Figma fez alguma coisa, ou se ainda está pensando Lá vamos nós. Existe
até um guia de protótipos Tudo parece
bom. Talvez seja Oh, veja, é clicável
e vai para algum lugar As coisas à direita
são instáveis. Interessante. Isso o matou. Tem algum tipo
de serviço no topo. Vamos reverter. OK. Agora, aqui, como temos tudo isso,
eles são todos clicáveis. Quando clico,
tenho outro painel,
o que é incrível. Me dê um botão Voltar no
estilo de vidro líquido no meio extremidade
inferior da música para que eu possa
ir para a tela anterior. Teremos mais a
ver com o protótipo Figma
make Normalmente, fico muito
feliz com figma make. Hoje, acho que confundi
isso com o prompt mais recente. Pronto, e quando eu clicar, vai ser bom apertar
o botão Voltar. Aí está. O
pequeno botão traseiro. Fantástico. Então, terminamos com o adorável para esta sessão Acho que desta vez
, proporcionou uma experiência
muito boa. Agora, vamos nos concentrar
na fabricação do Figma e
ver o que acontece lá, se ele vai
sair do coma Tudo bem, agora é branco. Eu
gosto mais quando é branco. Organize tudo melhor. Siga a navegação lateral do Kafana, da qual eu
lhe darei uma captura de tela E então eu pauso o mesmo
prompt na navegação lateral. Ou podemos fazer outra coisa. Jogue dog krafana.com, abra-o. Navegação lateral aberta.
Vamos fazer isso. Vamos dar isso no primeiro
menu no espaço aéreo esquerdo. E esse painel deveria ser isso. Por fim, siga a visão geral e o estilo da
grafana. Então, ele descasca e navega
como uma captura de tela de grafana, duas. Agora, vamos dar outra. Vamos fazer granadas. Sim. OK. Isso bastará. Não imite o texto
e as medidas. Você está apenas estilizando. Vamos ver como vai agora.
Deveria ser muito melhor. Às vezes, é preciso um
pouco mais de convencimento. Uma reinicialização um pouco
forçada. E aí está.
É mais parecido com isso. Se Finger Make realmente gosta de mais capturas de tela e de
dizer o que fazer E mais uma vez, você vê, quando você clica, ele tem
o pequeno botão Voltar. Ele fornece visualizações
exatamente no estilo Grafana Tudo isso está aqui. Isso é maravilhoso. Então,
com isso em mãos, temos nossa primeira página e podemos prosseguir com ela. Em nossa próxima palestra,
veremos qual escolher Qual é a melhor,
embora,
ei, sejam ferramentas
fenomenais, ferramentas
fenomenais, e ter bom conhecimento de como
criar protótipos seja Mas lá vamos nós. Nós
cobrimos uma base. Tenha sua tela principal. Você
tem seu protótipo principal Agora vamos ver se
vamos usar Figma make all over bow em
nossas próximas sessões, e qual é a diferença Quais são as semelhanças
e como seguir em frente. Nos vemos na próxima palestra.
6. Como criar sua proposta principal e recapitular o método.: Agradável. Essa foi a parte
mais importante de todo o processo de construção. Agora você sabe como esculpir seu primeiro aviso com
precisão e não com suposições Você viu como
combinar recursos visuais, links e lógica para orientar Cha GPT a fazer
exatamente o que você precisa E lembre-se, lixo que entra é igual
a lixo que sai. Um ótimo protótipo
conta com uma IA inteligente e
bem alimentada. Na próxima palestra, transformaremos essa mensagem
em telas reais usando imagens
ousadas e instruções inteligentes.
Vamos.
7. Figma Make vs. Lovable: o confronto: Agora você tem muito mais controle, e tenho certeza que pode sentir isso. Ao combinar recursos visuais e instruções
detalhadas, você dirige a IA como um diretor criativo e
não apenas como um redator rápido Essa abordagem ajuda
você a criar fluxo, manter a consistência
e obter telas que parecem
o mesmo produto. seguir, falaremos sobre
qual ferramenta usar, se Figma mak ou lovable, e quais são as
diferenças e Então fique ligado e nos
vemos lá dentro.
8. A comparação definitiva na prática: E estamos de volta à
tela da adorável figma, adorável no lado direito,
Figma make Agora, esta palestra é
sobre como escolher uma ferramenta. E eu realmente estou aqui
para lhe dizer que independentemente de
qual você
escolher , você
escolherá o certo. Essas duas são ferramentas fantásticas de prototipagem
aérea e têm muito em comum, mas também existem
algumas diferenças Então, mesmo agora, quando você
olha para a tela, você pode ver que, à esquerda, o Figma make parece
um
pouco mais estruturado, um pouco mais
profissional com um design
incorporado É limpo e é
compatível com Figma, com certeza. Sim, mais uma vez, pode ser
necessário convencer, como você viu, que tivemos que fazer mais
uma ou duas instruções de
protótipo Mas, no final, o resultado
é muito, muito impressionante. É um pouco mais lento. Demora um pouco mais de
tempo para descobrir as coisas. Mas quando ele descobre as coisas, você pode ver que é
muito fácil de usar. E para mim, e daqui para frente, Figma provavelmente
será minha escolha para continuar o
curso, mas adorável Lá vamos nós. Aqui é adorável. Ovable é incrível
porque tem uma mente própria. É extremamente rápido
porque se baseia em padrões de
design que são amplamente aplicáveis e
emocionais Eles são como os
padrões de design de sua própria coisa. Lovable sempre tem
sua própria coisa, que é muito próxima
do que você pede dela Mesmo assim, é
realmente adequado para suas ideias visuais e rápidas de IA. Novamente, é emocional e
fornece resultados muito, muito rápidos, tão
próximos do que você pede
e, às vezes, extremamente
profissionais. Ambos estão funcionando
muito bem. Ma cha GPT, como você viu, mas você nunca deve esquecer que o adorável tem essa fantástica Bíblia
inspiradora que você precisa obter e alimentar seu GPT, para ele
saiba como E o melhor ainda
é que a
Bíblia inspiradora de adorável
funciona tanto para adorável para Figma make Finalmente, o
conhecimento de UX por trás de tudo isso. Você viu que, quando
começamos a ensinar nosso GPT, fornecemos links
diferentes e capturas de tela diferentes,
não apenas relacionados à solicitação de IA, mas também
para uma boa experiência de usuário E vou deixar você com isso. Você sempre precisa estimular
seu GPT com coisas como o livro adorado pelo Silicon Valley Product
Group, que tem uma quantidade
realmente enorme de
conhecimento sobre UX e como
criar produtos que
seus usuários
adorem ou qualquer outra coisa que
esteja disponível que você goste, que goste, a teoria disso Basta obter capturas
de tela desses livros, obter citações desses livros e enviá-las ao seu GPT Depois, a escolha
das ferramentas é fácil porque o FigmoMCN, todo adorável, misturado com cha GPT, e os artigos corretos e o conhecimento
correto são
a sagrada trindade da
prototipagem de IA desse
período realmente interessante da civilização humana,
que é a parte da história da IA que Então, a partir de hoje, partir desta palestra, usaremos o Figma
make para continuar nossa experiência de prototipagem e nossa jornada de prototipagem Fique ligado onde tornamos esse
protótipo de espaçonave ainda melhor Nos vemos na próxima palestra.
9. Quem ganha e o que usar?: Você já construiu um
protótipo a partir de uma ferramenta de IA? Isso meio que funciona, mas realmente não parece certo. Isso acontece quando você trabalha apenas
com textos ou apenas imagens. Nesta palestra,
vamos combinar os dois. Você aprenderá como ativar as ferramentas de IA tela por
tela usando capturas e instruções detalhadas
para obter exatamente o que você precisa sem deixar a IA flutuar É aqui que seu protótipo começa a se tornar real. Vamos embora.
10. Como criar protótipos fluidos de UA com o Figma Make: Você já ficou tão preso
em seu protótipo que a IA constrói telas estranhas e sempre as amarra mal, e você precisa reverter
e
retrabalhar com tanta frequência que finalmente desiste você precisa reverter
e
retrabalhar com tanta frequência que finalmente desiste retrabalhar com tanta frequência Isso geralmente significa que ele foi criado primeiro na tela,
em vez de fluir primeiro. E nesta palestra,
usaremos ferramentas para mapear as jornadas
reais do usuário para que seu
protótipo possa Você aprenderá como
criar um fluxo vez e como conectar telas com base em interações
reais sem adivinhar o que
o usuário deve fazer Essa etapa é a ponte entre a
estratégia e a execução. Então, vamos fazer você
construir, nos vemos lá dentro
11. Criação de fluxos de usuários para ajudar você a criar um protótipo abrangente: Bem-vindo à próxima coisa
que faremos com nossa coisa fantástica: criar protótipo da ferramenta de
observabilidade da espaçonave Agora, embora
tenhamos alguns gráficos e algumas interações
com os botões, queremos tirar ainda
mais proveito disso Não queremos que
seja tão estático e que seja
interativo e, na verdade nos
forneça muito mais detalhes sobre essa espaçonave e como
vamos observá-la Pegue isso com um grão de
sal e pense nisso. Há todos os outros
protótipos que você vai fazer em
que os usuários podem interagir de uma maneira diferente com o produto que
você está criando Precisa conhecer estrategicamente e saber tecnicamente o que
acontecerá quando um usuário
clicar aqui ou ali, para
onde ele será conduzido e qual será a jornada
do usuário Então, por hoje, faremos três jornadas diferentes clicando
em
diferentes recursos como bateria térmica comum de
energia de saúde Além disso,
solicitaremos alguns botões
nesses gráficos que nos
mostrarão
previsões para os
diferentes recursos Por fim, tornaremos
o cronograma do evento clicável para que possamos ver mais detalhes
dos No entanto, mesmo que tenhamos
essa ideia vaga em nossa cabeça, o que podemos fazer para que possamos
nos acalmar e ter um bom visual é aqui no
Mirror, podemos começar um quadro Existe um quadro muito bom
e pronto para uso
, chamado template de
site. Esse, que é o fluxograma
do site e o wireframe do site Para isso, vou usar o fluxograma
do site. Vamos
usá-lo pré-preenchido. E agora vamos manter as
coisas super simples. Vou excluir algumas coisas
só para facilitar as coisas. Esses nós não precisamos desses. OK. Pronto,
não preciso desses. Só precisamos da primeira tela. Então, nossa primeira tela é
como se estivesse sentada aqui, eu só vou copiá-la. Aqui vamos nós. Coloque-o aqui. E dissemos que
teríamos três
conexões diferentes. Um está aqui. Vamos dar
um pouco de cor para que fique mais visível e dê um
pouco de peso. Lá vamos nós. Qual cor é a
melhor, essa. Então esse vai pra cá, esse vai pra cá, e esse vai pra cá. Vá lá. Aqui, quando clicamos, podemos colocar algum texto, então é mais fácil para nós. Quando um usuário clica
em um cartão acima, você deve ser capaz de ver
um subconjunto de painéis e alertas relacionados à saúde, energia e energia
comuns O que era isso e térmico? E muito mais. Agora, estamos aqui
e sabemos que atualmente o protótipo está
abrindo esse painel No entanto, temos apenas coisas
aleatórias e queremos
torná-las mais acionáveis e fornecer dados reais
que sejam úteis para as pessoas Então, não vamos
voltar a ser amáveis, vamos para ChenEpt Vamos até nosso amigo, o adorável
protótipo inventivo.
Vou perguntar alguma coisa. Vamos pedir que ele
me forneça métricas e
visualizações viáveis com limites ou espaçonaves que Qual foi o
outro? Saúde geral, energia
elétrica e térmica,
potência, energia e temperatura, elas serão usadas protótipo de observabilidade no
Figma.
Me dê
um aviso cinza,
assim como fizemos antes, ou
um estudante assim como fizemos antes, ou de UX de pré-graduação O gráfico construído a partir
deles mostrará em uma visualização incorporada uma gaveta quando clicado em um determinado cartão
na parte superior do design Vamos ver o que
vai acontecer. Enquanto aguardamos
a solicitação, podemos fazer algo ainda melhor. Como dissemos, imagens
valem 1.000 palavras, então queremos ver
o tipo de gráfico. Então, vamos ver
se podemos fazer o seguinte. Podemos ver o
painel da gaveta, as imagens e, por causa disso,
podemos simplesmente procurar algo que
gostemos delas Eu diria que isso
é bom o suficiente. E é tão simples
quanto fazer isso. Nós vamos copiá-lo.
Nós vamos voltar aqui. Mas veja qual aviso temos. Copie e cole para avisar. Mas na figma M, e espere por isso. Então, isso vai abrir a
partir de tudo isso aqui. Aqui, há um
truque que eu quero mostrar a vocês, e vamos nos livrar das telas
a partir de agora, só para que possamos liberar
espaço para o nosso texto. Quando você adicionar as telas posteriormente
, elas ficarão
melhores, se você quiser. Mas em eventos, o que
você deseja ver quando um evento
é aberto e quando está relacionado a um recurso térmico geral de saúde
ou energia, você basicamente precisa vincular a mesma visão interna e abrir
uma gaveta ao clicar em Estou pronto com esse aviso. Podemos prosseguir e verificar
se cada cartão
deles precisa ser clicável E quando você clica no
cartão e aparece dentro de você, mas quando você clica no
evento, aparece uma gaveta Esses dois serão
interligados. E esse é esse
tipo de relacionamento que eu quero mostrar aqui e o fato de que você precisa
criar essa
árvore de jornada do usuário para ter sucesso nos melhores lugares para fazer isso visualmente aqui no Mirror. Com isso em mente, agora podemos voltar novamente ao nosso
protótipo e
ver o que vai acontecer Quando isso acontecer,
podemos tentar
criar o pequeno prompt de eventos. Então eu recebo o que eu tinha anteriormente. Vejo que a linha do tempo de eventos
é o cabeçalho do cartão, então definitivamente preciso solicitar CHANGPT crie visualizações de
insights para que o
CHANGPT crie visualizações de
insights para
a guia de eventos e
certifique-se de sempre colocar o nome correto
no widget da linha do tempo do evento Em seguida, publicamos o prompt inicial. Digamos novamente que, quando um evento é
aberto e está relacionado a uma
das três cartas no topo, ele deve estar vinculado a uma gaveta Precisamos dar ao HAGPT a essência por trás
da jornada de uso Quando um usuário clica em um evento, ele deve abrir um painel enquanto, ele deve ser um
painel predefinido, como o M, para que possa
ter boas visualizações Ele deve fornecer alguns
KPIs para esses eventos
e, depois,
vamos vinculá-lo às visualizações de insights
dos quatro cartões acima Então, vamos ver o que
vai acontecer agora. Conseguir isso, colar chat GPT, para fazer um baile de formatura muito bom e longo, tanto por saúde geral quanto por bateria, que possamos ter Então, vou seguir
a solicitação anterior porque essa
será a solicitação de vinculação, e vou deixar
o fato de que o Figma make precisa criar essas
visualizações internas na guia de eventos Depois, faremos
a vinculação. Então você está pronto? Clicamos nele e Chad GPT nos
dá a solicitação. Veja o que a Figma make está
fazendo durante esse período. Ainda está funcionando. Então, vamos ver como isso acontecerá depois que
o prompt for concluído.
12. Crie um protótipo abrangente conectando fluxos de usuários: Ok, agora Figma
Make está pensando. E o que precisamos
fazer aqui agora é baile de formatura do Chan GPT que
fizemos anteriormente Portanto, os KPIs
nas quatro cartas principais ou nas visualizações de insights são semelhantes aos que criaremos
para eventos posteriores Nossa combinação aqui é para as quatro
melhores cartas em termos de energia térmica, saúde, bateria, etc Seja clicável e, para abrir
uma visão interna que
veremos posteriormente, link para
cronogramas de eventos à direita Agora, o Figma Make está quase pronto
e, uma vez concluído, vamos
solicitá-lo com os KPIs Novamente, pense nisso como uma árvore. Vamos vincular partes das visualizações internas
dos cartões na parte superior às
partes
da linha do tempo dos eventos para que possamos
ter um evento quando
um determinado limite
da visão interna Lá vamos nós. Agora, quando clicamos
nele, oh, há um erro. Espere um segundo. Tente novamente. Quando clicamos nele. Aí estamos. Essas são as vistas internas. Mas, mais uma vez, eles não mostram os mesmos KPIs que queremos Então, o que vamos fazer é solicitar ao Figma
Make que garanta que as diferentes visualizações sigam os mesmos KPIs que
fornecemos anteriormente Colamos um grande prompt do Chan GPT com todos os Lambdas,
todos os limites, e
ele Veja, todos os
diferentes KPIs que
podemos vincular a um evento quando um
determinado limite é E é fácil de entender, certo? Se uma espaçonave ficar superaquecida
ou perder bateria, deve
haver um
evento nos dizendo: Ei, ela pode cair ou, ei,
algo ruim pode acontecer Ok, Figma Make está terminando agora, só um pouco mais Um isqueiro que
vai se consertar sozinho. Talvez um pouco mais de tempo. Mas agora, quando
terminar, você verá que os mesmos KPIs
que tínhamos no ChatGPT estarão nos painéis para
a visualização de insights painéis para
a visualização Ok, terminando
agora. Quase lá. E está feito. Vamos clicar nele. E eles têm isso. Podemos ver
os KPIs que queríamos Podemos ver o cronograma do evento no painel de insights e estamos prontos para conectá-los. Uma coisa que realmente me irrita é essa situação de
rastreamento terrestre Eu queria ter um mapa com
uma pequena maquete dentro, para que não fosse aquela janelinha
preta Quero ver a
espaçonave e para onde ela está indo dentro desse widget,
para que seja muito mais E podemos ver sua posição. Portanto, faça um mapa da situação do Ground
Track com uma pequena maquete de aeronave
e mostre sua posição E, novamente, vamos
avisá-lo como se fosse humano. É muito bom que, depois ter uma boa solicitação inicial, você possa começar a
conversar com Figma de uma forma legível por humanos E dentro do milagre do tempo, agora
ele deve nos
fornecer uma visão muito melhor, e veremos nossa aeronave em um pequeno mapa
neste widget em 21 Lá vamos nós. Aqui está nossa pequena aeronave
e para onde ela pode ir, onde está muito
melhor, tão visualmente agradável. Agora, a última coisa
que precisamos fazer é começar
a criar
nossa guia de eventos. E quando estamos fazendo
isso, queremos a gaveta. Sim, já
criamos o prompt
para a gaveta e o que ela
precisa fazer com o ChatGPT Novamente, copiamos o prompt e o entregamos ao Figma
Make para que ele possa tornar os eventos clicáveis e abrir uma gaveta da esquerda para
a direita Eles precisam abrir as pequenas gavetas
predefinidas que podemos vincular às
quatro cartas principais quando um limite é excedido Então, vamos ver o que
acontece quando o Figma Make termina de trabalhar
nessas gavetas, e essa será a
última etapa antes vincularmos as duas e termos uma jornada de
uso real Figma Make está finalizando um pequeno erro que
precisamos corrigir Tudo bem, vamos ver
agora o que aconteceu com nossa linha do tempo de eventos,
e eles são clicáveis Eles são clicáveis, mas não
parecem clicáveis. Veja que a gaveta se abre um
pouco. Eu realmente queria que eles
parecessem mais clicáveis, e é isso que vou
sugerir ao Figma. Quero que os eventos
pareçam clicáveis,
destacados em azul como hiperlinks, e
também que a gaveta se abra mais à esquerda
, no meio da página E, novamente, por meio
da magia do fgnomc para entender os humanos, poderemos ver se
ele é capaz de fazer isso simplesmente estimulando-o Vamos ver no que vai dar. Nosso argumento principal é sólido, e acho que a Figma
Make agora entende o que está fazendo e para onde
estamos indo com isso Vamos ver. O Figma
Make está finalizando E sim, lá vamos nós. Eles são azuis. Eles
parecem clicáveis e a gaveta se abre
no meio da tela com todos os KPIs que
queríamos Esse é um ótimo resultado. Nos
vemos na próxima palestra.
13. Parabéns! Você conseguiu! Em seguida, vamos ter tudo!: É assim que você mantém
seu protótipo baseado no comportamento real do usuário Agora você tem um plano funcional para o que seus usuários
realmente experimentam, que torna cada tela que
você cria a seguir mais fácil, rápida e focada Na próxima palestra,
juntaremos tudo isso e passaremos do branco
para um protótipo funcional Vamos construí-lo. Nos vemos lá dentro.
14. Criar sua marca, estratégia e proposta de domínio: Você já se perguntou como é
realmente passar do
zero ao protótipo funcional
em horas, não em dias Bem, é isso. Nesta palestra,
mostrarei todo
o processo de combinação de solicitação inicial
com
seu visual e instruções
extras em seus fluxos. Todas as ferramentas de IA, o
pigmmic Holy Trinity, Lovable, tinha GPT Você verá como tudo o que
falamos realmente se
junta passo a passo. Essa é a mágica
que acontece. Vamos embora.
15. Passando de 0 a 1 para seu site pessoal com Lovable: Novamente, estamos na
tela de Lovable e protótipo
do
controle da missão AK Mas hoje, não vamos
falar sobre isso. Vamos fazer
algo totalmente
diferente para que possamos explorar
não apenas o Figma Make, mas também explorar superpoderes
adoráveis O que vamos fazer hoje
é criar seu próprio site, criar sua marca e criar
sua presença on-line. Isso é extremamente
importante porque todo grande profissional emictalmente
tem seu próprio site. E agora, do início ao fim, vamos ter uma experiência completa de Lovable e de tudo o que aprendemos nas palestras
anteriores Oh, sem mais delongas, como dissemos, não
vamos fazer isso. Vamos até o Dashboard e começaremos
algo totalmente diferente. Mas, como aprendemos,
primeiro precisamos planejar. E é por isso que eu planejei. Agora, Miro. Eu tenho
esse mapa mental de como o site de alguém
deveria ser e o que eu queria ter. Essa é a árvore de experiências, a árvore da jornada do usuário sobre a qual estamos falando. É simplificado porque,
no final das contas, não
há muitas
coisas que você possa fazer na um gerente de
produto ou página de
um gerente de
produto ou consultor de produto. Então aqui está. Primeiro, temos uma página de empréstimo com meu
boneco favorito, imagens, um logotipo e um nome, que se divide em três
capítulos principais do Um deles são os botões de call to
action, que estão em primeiro lugar,
os serviços segundo e
os contatos em terceiro. Nos botões de ação,
temos LinkedIn, medium e Substack,
onde as pessoas podem me ver e
me seguir no Eles podem ler meus
artigos no Medium e assinar tanto o
Medium quanto o Substack, dependendo de sua preferência Nos serviços,
é aqui que se ganha dinheiro. Se pensarmos em quais serviços, digamos, eu forneço, isso é auxílio à contratação
de empresas, ajudando-as a contratar os melhores BMs, auxílio de
treinamento para
empresas e pessoas Bem, estamos neste curso de
treinamento, então estou fornecendo
esse serviço para você. E, finalmente, adaptar currículos para aspirantes a
gerentes de produto para que eles possam alcançar seu
primeiro ou Em contato, duas
coisas ou qualquer agendador de reuniões que
você queira usar e um e-mail, para as pessoas
possam enviar e-mails para você Então, com isso, tenho uma ideia geral do que
meu site deve fazer, que é a primeira coisa.
É muito importante. Mas então, além do
que deve fazer, precisamos saber
como deve ser. E eu estava pensando:
devo preparar alguns links antes das
pessoas que eu gosto, etc Mas isso seria super
tendencioso e super subjetivo. Então, o que eu pensei em fazer
e o que vamos fazer agora é uma super improvisação,
junto com Então, vamos ao ChatGPT. Queremos contar isso, eu
comecei a pensar, então isso me dá respostas melhores. E agora vamos pensar
estrategicamente. O objetivo principal deste
site é o marketing. Não é gerenciamento de produtos. Portanto, se pensarmos nos
componentes desse site, o melhor lugar para procurar
é alguém que seja um ótimo profissional de marketing e tenha
seu site pessoal, alguém que seja um
ótimo gerente de produto e tenha um site próprio
e um site pessoal extremamente influente Então é com isso que vou solicitar
ao ChatGPT. Então me dê três sites. Um para o famoso Market Make que tem o maior
tráfego de visitantes. Três sites pessoais pessoais. pessoas, uma para um profissional de marketing
agrícola, uma para um famoso gerente de produto ou
consultor de gerenciamento de produtos e uma pessoa superinfluente no YouTube que tem uma profissão
bem conceituada Quero que esses sites
tenham o maior tráfego e influência entre
seu grupo-alvo e sejam amplamente reconhecidos Lá vamos nós. Três pessoas. Nós perguntamos, veja aonde isso leva. Vamos ver agora para onde
vai. Tem um bom
padrão de pensamento, e vamos ver. Aqui vamos nós. Essas são
as três pessoas, Neil Patel, gerente de produto,
Marty Keegan, Andy Torsa Ali Abdaal. Se você ainda não assistiu aos podcasts do Lee,
eles são muito bons Ok. Nós temos esses três. Deixe-me ver se os links
funcionam. Sim, eles têm Um VPG está funcionando. Vamos ver.
Tudo bem. Bom. Surpreendente. Portanto, agora sabemos aproximadamente a aparência do
nosso site
e o que ele fará. Então, agora eu vou
fazer mais uma coisa. Eu vou pegar isso. Eu quero fazer uma captura de tela, só para tentar economizar algum trabalho Eu vou
novamente para Chan GPT. Ah, fale, explique
a estrutura de um site e o texto que
mais tarde usaremos para nossa adorável bomba
. Lá vamos nós. Fantástico. O GPT
explicou exatamente o que tínhamos no Mockup Agora, o que vamos fazer no GPT
é reparar o Lovable Prompt, como se você estivesse conversando com
um pré-graduado de uma escola secundária que é um
pouco qualificado em UX, mas é extremamente Certifique-se de que segue
a Lovable dot Dev
Prompting Bible. É extremamente detalhado
e o resultado é um site de marca
própria perfeito. Um consultor de gerenciamento de produtos. Use a estrutura deste site. Copiamos a
estrutura do site como exemplos de posicionamento e
, em sua aparência, usamos uma combinação dos
seguintes sites. Dissemos que Nopatel SVPGF o boneco se transforma em cada um
dos links a seguir, e eu vou Essas são coisas que
eu mesmo fiz, mais ou menos com a ajuda, é
claro, de algum GPT Mas, essencialmente, esses são os bonecos
que eu adoro usar. Eles fazem parte da minha marca, e eu gosto deles o suficiente para colocá-los no meu site. Vou colocar aqui uma pesquisa
profunda à medida que fazemos
, para que ela possa ter uma
pesquisa mais profunda e uma marca melhor. E agora vamos ver qual mágica vai acontecer. Ah, mais uma coisa. Certifique-se de usar as cores dos
bonecos para o site. Tudo bem. Bem, vamos
ver o que acontece então. Ok, antes de começarmos, quais são os apelidos que devem ser usados e
o logotipo? Tudo bem Então o nome é Seal
calf e F. Você pode gerar um logotipo que
consiste nas iniciais Você quer um tom e uma sensação? Use o tom e a sensação dos
três sites que visitei, ou seja, serei
extremamente
diretivo, para que ele não pense
em outra coisa. Se eu escrever um aviso, supondo que o site seja construído em um
enquadrador ou código Webflow, o site será construído em adorável ponto Dv. Qualquer slogan específico o site será construído em um
adorável ponto Dv. Qualquer slogan específico que você
queira usar em seu nome,
gere o slogan e
inspire-se em set, Godin, purple inspire-se Ok. Achamos que somos bons?
Isso vai ser interessante. Vamos ver agora onde
a pesquisa finalmente começará. Ótimo. Diz: Onde
vou conseguir isso, a cor dos meus temas
com os bonecos, gere o slogan,
gere o logotipo Vamos. Vamos ver no
que vai dar. Fantástico. Agora, finalmente, após 13 minutos pensando e molhos
de lata, temos o aviso Lovable Eu li e está muito,
muito bom, assim
como ontem à noite. Oh, nós temos um plano de carro. Hora de fazer isso acontecer é o que diz
um GPT. Nós vamos para Lovable. Nós o avisamos, mas eu também
adicionaria várias
capturas de tela, porque a imagem tem 1.000 palavras Vamos compor um conjunto
rápido de imagens. Você pode fazer isso no
No, imediatamente Nuro. Vou pegar os
que eu mais gosto. Opa. Então vamos. Vou compor uma imagem de todas elas para ver
se ela vai
voar, apenas para não excedermos
o limite de três imagens Acho que temos um bom
subconjunto de imagens de figueiras. Espaço na prancha? Ok.
As imagens estão prontas. Lovable está aqui. Ah, então vamos pegar duas imagens. Vamos fazer Aileen. E, finalmente, S VPG. Ok. Agora, quando tivermos as
três capturas de tela, o prompt, vamos ver
o que vai acontecer Lovable começa a trabalhar agora. E quando estiver pronto, espero
que tenhamos um site pessoal
muito bom para mim, com bonecos
e uma boa funcionalidade, tudo em um só lugar.
Vamos ver no que vai dar. R. É um pouco chocante, uma vez que Lovobo revelou algo E, oh, meu Deus, eu vi isso e fiquei
tipo, Este é o fim. Esse é o fim do curso. Lovo não está fazendo o que
eu estou pedindo que ele faça. Mas quando rolamos para baixo, vemos que ele realmente fez um site decente seguisse meu trabalho. Diz o boletim informativo Linked in
media. Diz suporte de contratação, treinamento e workshop, coaching de carreira
civil Ele fornece coisas
muito, muito boas. Agende uma chamada com integração do
meu calendário
diretamente nela. Me mande um e-mail. Vou
verificar isso mais tarde. Mas o
site geral é fantástico. Temos essas coisas, que são extremamente feias Agora, o que vamos fazer é voltar
ao
ChatGPT e dizer a ela Vamos fazer três sites pessoais
com páginas de destino fenomenais campo de atuação é gerenciamento de
produtos,
marketing e consultoria. Mas com um
pouco mais de estímulo, tenho certeza de que vai
acabar neste lindo site Vamos ver o que o ChatGPT
fornecerá a você. Quais são esses três sites
pessoais que têm
páginas de destino fenomenais, de acordo com o ChatGPT Ok. E com a
magia do tempo, temos nossos competidores O primeiro, Não. Segundo. E, novamente, essa
é minha preferência pessoal. Realmente depende como você queria
ser. Esse era melhor. Ah, Lenny. Ali está o Lenny Fantástico. Quero me inspirar em
Lenny, como sempre faço Se você não segue Lenny,
sabe o que fazer. Tudo bem. Então,
diremos à Lovable que crie a página de destino com um nome semelhante e a mistura
dessas duas capturas de Este é um e eu gosto
de April Dun fold, com certeza. Você pode usar algumas
dessas figuras**** em vez
da que você criou Eu também faço capturas de tela. O que vou fazer é voltar ao Miro,
baixá-los um por um Ok. Feito. Vamos ver se isso
vai ser melhor, e vamos esperar que seja melhor. Isso é um pouco melhor, mas o texto acabou de ser roubado. E acho que V está ainda melhor. Vamos voltar ao NGPT. Vamos usar nossa prototipagem
, e eu vou contar. Quero uma página imediatamente adorável, mas que ajuste apenas
a página de destino um
site pessoal
para que seja semelhante
às capturas de tela e gere o boneco em vez
do humano na foto Ele precisa usar os
frequentadores e bonecos, semelhantes às capturas de tela.
Vou dar uma olhada
simples, Vou dar mas as pessoas
querem rolar para baixo Ok, vamos tentar
isso mais uma vez. Desta vez,
examinaremos primeiro o animal de estimação de Chachi, esses e aquele Ah, mais uma coisa.
Certifique-se de seguir o
conhecimento bíblico e de ser muito
detalhado ao detalhado explicar para um graduado da
pré-escola com uma compreensão
limitada de UX, que é facilmente explicadab Ok, vamos fazer isso mais
uma vez. Tudo bem. Nós temos o aviso. Lá vamos nós. Vamos copiá-lo. Vamos copiá-lo e
ver o que acontece. Tudo bem, muito melhor. Agora, talvez possamos
simplesmente fazer isso, editar o espaçamento. Não, isso é bom, mas acolchoado. Ok, vamos tentar outra coisa, N. Vamos deletar os
espaços em branco vazios do King acima e abaixo
da página de destino mais fina Portanto, os botões de posicionamento, preocupação
e estratégia estão quase tocando o
topo da página. Confirme.
16. Armadilhas e coisas a serem conhecidas ao aprimorar protótipos para produtos: Ok, agora é hora
de algo engraçado. Saímos no
ponto em que tínhamos isso, com tanto ritmo
na parte superior e inferior, que era difícil rolar Vou te contar um segredo escondido. Quando terminei
a palestra, tentei editá-la e fiquei tipo, pegando ferramentas
visuais e vendo que não havia
nada que eu pudesse fazer Veja, quando eu
clico nele, não consigo excluir os espaços vazios atrás. Escrevi tudo o que pude
e, acidentalmente,
entrei e vi que
estava com 90% de zoom Então, essencialmente, isso parecerá assim, em vez do que
eu mostrei anteriormente. Então, a maior parte da
história é que existem muitas partes móveis,
então cuide disso. Vamos ver o que podemos fazer agora. Talvez possamos adicionar um pouco de preenchimento. Não, não podemos. Isso não foi bom. Então, vamos descartá-lo.
Acho que podemos deixar
isso de lado por
enquanto, mais uma tentativa. E vamos ver
algo diferente. Aumentar isso
e aumentar a fonte é o que
queremos fazer. Incrível. Ok, isso parece fantástico agora. O que temos que fazer agora é mudar o texto,
criar esses botões. Essa é a cor errada, então
podemos fazer as edições visuais e começar a fazer isso uma por
uma , para que possamos ter instruções
mais direcionadas Faça este botão
com o estilo rosa de todos os outros botões
e passe o mouse sobre ele Ok, agora é rosa, mas ainda assim faça com que seja
igual ao médio. Vamos deixar
isso de lado. Edições visuais, crie o mesmo estilo do botão
atrás do meio Vamos ver como ele
vai reagir. Não, isso não é o que queríamos, então veremos
reverter a última alteração, torná-la rosa escuro uma vez em Dv OK. Aprendi como funcionava. O botão parece mais
clicável e parecido com um Faça com que pareça o oposto
de trabalhar com o botão malvado. Portanto, há algum contraste. Então eu vou começar a
solicitá-lo para essa coisa. As histórias
de posicionamento precisam ser botões e precisam ser chamadas. Ajudo você com isso. Entre em contato, eles precisam vincular as respectivas partes
da página de acordo com
l. Ok, eu gosto. Então, essas coisas
devem mudar agora. Eu gosto mais disso
do que do que está aqui. Então, aprenda como funciona. Mesmo estilo dos botões. Eu ajudo você a atender e frontar para que possamos
ter alguma consistência Sim. Ok, muito bom. Quero que o pergaminho
veja como eu ajudo a ousar. OK. Bom. Agora podemos alterar o texto, cavar isso, acessar o Chat
GPT e contar Este é o título
do meu site. Torne-o mais influente,
mais curto e mais forte. E o fato de ser uma consultoria
de gerenciamento de produtos. Clique em
Consultoria de gerenciamento de produtos do Word. Eu gosto disso. Vamos mudar isso. Clique em Consultoria de
gerenciamento de produtos do Word. OK. Você pode até mesmo chamá-lo de clique em Worth
product management. O
gerenciamento de produtos da Click Worth está bem. Latas para serem mais curtas e afiadas. Novamente, você pode fazer o que
quiser com o texto. É extremamente importante. Mas você pode fazer, como fizemos o adorável GPT, prototipagem Vá em frente e ensine isso. Conhecimento de marketing,
ensine-o a fazer com que essas frases tenham sucesso. Eu transformo produtos complexos
em um posicionamento que vende. Eu ajudo você a
transformar produtos complexos em um posicionamento simples. Eu ajudo fundadores e
líderes a transformar o complexo em um posicionamento que vende.
Ok, vamos usar isso. E, novamente, isso é principalmente
para fins de teste, então tudo ficará bem. Então podemos descer.
São ruídos Não gosto do fato de
eles não serem clicáveis. Portanto, esclareça a posição e comunique os botões
que abrem pop-ups com texto e, em seguida, gere
um bom texto pop-up que forneça detalhes sobre
o subtítulo e A ideia é que, ao
clicar como usuário, eu receba mais informações
sobre como eu ajudo você. Vamos ver no que
vai dar. Aqui vamos nós. Fantástico. Faça com que os
ícones apareçam em rosa, como em d in, e nas mídias abaixo
, para que possamos ter consistência Os ícones são rosa. Torne-os rosa escuro quando o
usuário passar o mouse sobre eles, assim como passar o mouse sobre o ícone médio ajuda a
ser ainda mais Não, nada. Vamos
tentar mais uma vez. Faça com que apareçam no estilo
da captura de tela
ao passar o mouse sobre Às vezes, pequenas coisas
exigem muitos cliques. Ok, eu fiz alguma coisa.
Sim, isso o torna mais escuro,
não é da mesma cor, mas se eu
perguntar várias vezes, isso vai acontecer.
Vamos tentar fazer
coisas
mais importantes antes continuarmos solicitando,
se quisermos Então, agora eu quero
adicionar os links para meu meio e meu
boletim informativo atrás dos botões e o
link a seguir para o botão médio. Então, quando eu clico, ele se abre em uma nova umidade. Vamos colocar eu estou lá e colocar o seguinte link atrás do botão
do boletim informativo,
onde ele se abre. Eu abro, subestaco na minha subpilha ou apenas nesta por
uma questão de Vamos ver no que vai dar.
Tudo bem. Vamos ver. Ele abre? Sim.
Carta de notícias. Sim. Funciona. Serviços.
Agora, eu pediria que, ao clicar em treinamentos e
workshops de
apoio à contratação e currículo e carreira, abrisse um bom pop-up com texto
adicional que
explica como eu faço isso Ok, legal e até mesmo mudar o estilo do
jeito que eu queria. Então, quando eu clico, vá
para entrar em contato. Quando eu clico, ele entra em contato e quando eu clico,
ele entra em contato. Eu vou te dizer que, sempre que
alguém clica em Entrar em contato, sempre deve
abrir o link agendar uma ligação
galantemente **** no
Street away Book link agendar uma ligação
galantemente **** no
Street away Vamos ver. Então,
teremos que corrigir os botões abaixo.
Isso seria bom. E talvez esses
botões estejam prontos. Este será um novo site em
fases. Ok, está feito. Vamos
ver. Reserve uma companhia. Fantástico. Isso é coisa boa. Agora, faça com que os botões e
envie-me um e-mail de forma ativa, pareçam com os
botões “Trabalhe comigo” com estilo e passe o mouse Na verdade, começo a gostar desses aqui, pois eles têm um estilo diferente
porque avançam. Na verdade, eles estão
redirecionando você. Então, eu estou bem com isso. Faça com que o botão “
envie-me um e-mail” do tamanho do botão do livro. Opa, finalmente. Tudo bem. Tudo bem, certo, certo. Bom. Acho que, com isso, estamos muito prontos para ver
como eu ajudo seus serviços. Agende uma ligação dizendo que estamos bem. É assim que você basicamente usa lovable
para criar seu próprio site E quando você clica em Publicar,
você pode adicionar sua URL e torná-la pública.
Isso é fantástico. Muito obrigado por ficar comigo durante essas
várias palestras. Tenho
certeza absoluta de que você vai acabar com a
prototipagem de IA a partir de agora e que você entende
muito bem como relação entre
o adorável Figmamk de
Chan GPT está sendo feita e o quão bem
você pode se comunicar com todas essas três ferramentas para gerar Nos vemos na próxima palestra.
17. PARABÉNS!VOCÊ DESBLOQUEOU A ALAVANCAGEM INFINITA. VÁ CONSTRUIR O FUTURO!: E assim, você constrói um protótipo funcional
usando IA em pouco tempo Esse é o novo padrão. Agora você sabe como resumir a
IA, estruturar fluxos de usuários e transformar ideias em produtos tangíveis e
testáveis Se você está se
preparando para uma apresentação, apoiando o design ou
validando uma ideia, esse fluxo de trabalho oferece uma vantagem Você não está apenas usando ferramentas. Você está usando estratégia. Feliz prototipagem e até
breve. Trabalho incrível.
Vasil Kaftandzhiev, null
