O que é um Wireframe? //UXNOW
Vložit
- čas přidán 12. 09. 2024
- No último vídeo, sobre Arquitetura de Informação, conversamos sobre a importância da organização do conteúdo de um Web Site.
O papel da Arquitetura de Informação é ajudar o usuário de um site a encontrar o que ele está procurando e o seu principal entregável é o Wireframe.
Se você ainda não assistiu o vídeo de Arquitetura de Informação, assista aqui: • O que é Arquitetura de...
O Wireframe é o esqueleto de um Web Site (ou aplicativo) e serve para ilustrar, de maneira simplificada, onde a informação fica numa página, qual a posição da navegação, conteúdo, e outras características de Arquitetura de Informação.
Uma característica fundamental de um Wireframe é que ele aparenta mostrar algo incompleto. Isso é proposital e tem como objetivo focar a discussão na função e organização do conteúdo e não em sua aparência.
Um Wireframe serve para auxiliar o seu projeto de três maneiras principais: Entendimento, Comunicação e Documentação.
Para cada contexto de uso o Wireframe tem uma quantidade de detalhes - ele pode ser simples, rabiscado num guardanapo ou complexo e interativo, feito em softwares como o Axure.
Livros recomendados para estudar sobre UX:
➽ uxnow.com.br/li...
---------------------------------------
Lembre-se de assinar o canal para assistir todos os vídeos da série 'Fundamentos de UX'. :)
---------------------------------------
/ NO FACEBOOK: / uxnow /
/ E TAMBÉM: WWW.UXNOW.COM.BR /
📢 Conheça o curso UX & Research Essencial:
Fundamentos de UX, pesquisas, personas, entrevistas, questionários, ideação, protótipos, testes e um monte de coisas importantes para você SOMAR conhecimentos na sua vida e carreira.
➽ bit.ly/curso-ux-essencial
Esse cara é a simplificação em pessoa. Transforma linguagem alienígena em humana. Parabéns !
👽➡️➡️➡️😎
Valeu!! Amei o elogio! 🥰
Verdade, né? Eu to começando a pegar gosto pela area de ux/ui e grande parcela disso é pela explicação simples dele! A professora do curso mencionou uma vez o canal dele e eu anotei e cá estou quase toda manha assistindo vídeo dele 😅
@@stephanieverissimo3985 - ai meu deussss! Vcs são lindos!
Justamente o que eu pensei!!! Fantástico, muito bom mesmo!!!
Eu sempre vo o UX como algo fora do comum, povo que trabalha com isso valoriza demais, enche de termos técnicos pra valorizar,
Só agora que fui cair aqui e você tem esse conteúdo desde 2016!!! Parabéns Daniel, assunto instigante, conteúdo gostoso de consumir, linguagem bacana pra aprender... tô seguindo a série desde o inicio, sou gerente de projetos e atuo em consultoria empresarial, muitos destes temas eu já aplico mas você tá me trazendo uma ordem simples, logica, e dinâmica e eu hjá vi que posso melhorar muito... MUITO OBRIGADO parabéns pelo trabalho!!!
Estou fazendo um protótipo de tela segundo IHC para a faculdade, com pesquisas que tenho que fazer parei em seu vídeo, muito bom, fácil de entender, exemplos muito bons, grande abraço!
+Bernardo da Silva Constantin, Está fazendo no papel ou computador??
Valeu e boa sorte no protótipo!!
Gostei. Tu é brabo, continue assim
Muito obrigado pelo curso
Excelente vídeo, parabéns.
Melhor canal sobre o assunto em Português. Na verdade, é o melhor canal que eu conheço ha hah. Informativo e entretente.
Aeeeeeeee! Valeu, Lucas!! Já curtiu a página do FB também?? Vou divulgar uns horários de Lives lá. :)
Oi , se não for muito incômodo você poderia fazer um vídeo explicando a diferença entre Mockups , Protótipo e Wireframe ?
Cara. Que raiva que tenho do CZcams. Escrevi uma resposta gigante para você e deu pau na hora de publicar. Aff.
Versão curta:
1 - Prótipo é qualquer objeto feito antes do objeto original para provar/comprovar/reprovar alguma coisa. Ele pode ter vários níveis de fidelidade (baixa, média e alta). Por exemplo uma cadeira feita de madeira para testes antes da versão em metal.
2 - Um Wireframe pode ser, então, um protótipo de baixa fidelidade. Ele pode também ser um protótipo de média fidelidade (dependendo do contexto). Vai ter gente que fala que não é a mesma coisa (que wireframe não é protótipo).
Particularmente eu discordo porque depende do nível de detalhes do Wireframe. Como expliquei no vídeo você pode pegar papel, rabiscar e fazer até testes de usabilidade. Assim como um wireframe pode ter interatividade feita em software. (só para ver como é discutível: no mesmo site - designmodo - falam que são coisas diferentes e também falam que são a mesma coisa).
3 - Um mockup é o layout de algo com aparência em alta fidelidade (tem cara de produto pronto). Não necessariamente ele tem interações, por exemplo. Por curiosidade - já vi um mockup de sorvete com 10x o tamanho original sendo usado para fotografia.
Aqui no meu trampo, na wezen, fazemos as três coisas, mais ou menos nessa ordem/entregável/objetivos
Wireframes em papel ou software para discutir a arquitetura ou ideia de um projeto.
Mockups (que aqui só chamamos de UI) para mostrar para alguém como a coisa vai ficar entes de virar código.
Protótipos de Alta Fidelidade feitos em HTML/CSS/JavaScript para usarem para testes ou darem continuidade no projeto em alguma linguagem X (java, php, .net).
Já vi algumas empresas chamarem isso de Protótipo Vivo, pois ele não vai ser descartado e sim reaproveitado. Tem gente que chama isso também de Front-End.
Vou fazer um vídeo sobre protótipos depois e explico melhor. Curte lá a página do Facebook para ficar sabendo antes quando vai entrar vídeo. facebook.com/uxnow/
PS - Dessa vez dei um CTRL+C em tudo. Seguro morreu de velho. ;)
Oi Fábio... O Daniel explicou super bem a diferença. Conheci o canal esta semana, então ainda estou me atualizando dos vídeos hehehe mas vi seu comentário e posso recomendar um workshop pra você aprender mais sobre protótipos digitais, mockups e wireframe focado em UX. É esse aqui com a Carla de Bona, na próxima terça-feira :) www.sympla.com.br/workshop-prototipacao-em-ux__97899
A Carla é super legal, Fábio! :)
Descobri seu canal sem querer e agora peguei lá do primeiro vídeo pra acompanhar a coisa toda. Sou um desenvolvedor Front-End mas queria me enterar mais sobre essa parte de UX.
Parabéns pelo canal, vc apresenta bem o conteúdo e ainda tem a dose de humor.
Faaaaaaala, meu caro! Você parte do meu público favorito - hoje em dia, com toda a complexidade de Front-End que entramos, com frameworks malucos, componentes complexos e interações 'do futuro' é mesmo muito importante entender bem de UX. Que bom que gostou e humor não pode faltar não. Huahuaha!
Apesar de ter 5 anos esse vídeo mas foi exatamente o que tava procurando... parabéns 👏
caraa, você explica muito bem!
Cara, quando eu vi o Daniel no workshop da Aela, me apaixonei! (com todo o respeito! Kkkkk). Virei fã de carteirinha! O cara é absurdamente didático, e o melhor: Usa uma linguagem que fica MUITO, MUITO mais fácil de entender!
Obrigado, Andrea!!! Eu AMO ensinar!!
Cara, to fazendo um trabalho na faculdade e seu vídeo me ajudou pra caramba.
Aeeeeeeeeeee! Não esquece de curtir o canal! Rumo aos 5 mil!!
Muito bom Daniel, sou aluno do 7º semestre do curso de Sistemas de Informação e estou desenvolvendo minha monografia sobre a importância do ux para o e-commerce e seus vídeos estão me ajudando bastante, parabéns e obrigado.
Oi, Xará! Depois quero ver sua monografia! Já deu uma olhada no conteúdo do Baymard? Vale a pena! :) - baymard.com/
caiu como uma luva cara !! valeu !
Aeeeeeeeeeee! Que bom, cara! TMJ!
Muito bom o canal e conteúdo. Iniciei do Zero e está me ajudando muito.
Eu sinto falta de uma parte prática as vezes, mostrar um wireframe por exemplo (nesse vídeo ainda tem), ou uma persona que foi construída (mesmo sendo fake). Claro que talvez esse não seja o intuito do canal, mas para quem está começando ajudaria muito no entendimento.
Oi Guilherme! Tudo blz??? Desculpa a demora em responder. Você chegou a ver o vídeo "Como fazer uma persona"? Nesse eu tentei mostrar um pouco mais do processo. E usei LEGOS! :)
@@UXNOW Assisti sim, ficou bem lúdico... Parabéns pelo conteúdo.
Seu canal eh show de bola, muito bom ter conteúdos assim no YT.
Obrigadoooo, Rodrigo! Depois dá uma olhada na quinta aula que fiz ao vivo - mostro como fazer um protótipo de papel interativo!
Show de bola... Explicação direta e eficaz... Entendi muito mais com suas explicações do que com as da faculdade! Obrigado.
Obrigada por simplificar, tem esclarecido muito!
Muito bons seus vídeos... acabei perdendo um trampo por não estar tão por dentro de UX... e seus videos ensinam pacas. Vlw
Legal, sua camisa combinou com sua logo.
+Diogo Cesar - hahahahaha. É tudo cena isso. Diretor de figurino e designer - tudo em um!
Vc é um gêniiiiooooooo cara. Muito Obrigado, a partir de Angola. Já sou inscrito.
Vivaaaaaaaaaaaaaaaaldo! Obrigado obrigado e obrigado! Desculpe a demora em responder. :)
Gostei muito da explicação, muito clara, direta e descontraída. Sucesso!
Aeeee! Valeu valeuuu!
bicho engraçado da poxa 😄😄, menos de 6 segundo, já fiquei feliz, haha 😂
Muito bom, achei seu canal através do site design culture, pocha muito bacana seu canal só conteúdo que eu tava procurando!
Aeeee, Luis! bom que gostou!!
Eu estou gostando DEMAIS do seu canal, voce explica muito bem, sério!!!
Vídeo sensacional.. Muito claro! Conheci o canal hoje e já estou adorando.
Oi Jaqueline!! Que máximo que está gostando! Desculpe a demora em responder. :)
Como todos os vídeos, SENSACIONAL
+Jose Vicente Sousa - obrigado obrigado obrigado!
Top, irmão! Obrigado pela explicação.
EXCELENTE seu vídeo!
Obrigado, Samuel!!
Fiz um wireframe simplificado na aula 5 de fundamentos de UX ao vivo. Chegou a ver???
Parabéns pelo canal! Seus vídeos são ótimos e estão me ajudando muito com o fácil e rápido entendimento sobre o assunto. Ótimo trabalho! Adorei 😊
+Tais Silva - aeeeeee. Obrigado! Não esquece de curtir a página do Facebook. É lá que coloco a agenda de lives e palestras. :)
Muito bom o vídeo! bem divertido e explicativo kkskk
Muito bom
Olá, Daniel! Parabéns por simplificar assuntos tão complexos em designer! Vou prestar concurso em comunicação social, e o conteúdo coloca os três elementos: wireframe, taxionomia e inventário de conteúdo. Gostaria de saber a co-relação entre eles....help!😳
do caralho esse canal kk parabens irmao.
Daniel, show de bola.
O mais legal dos teus vídeos e que tem sido bem interessante são os exemplos que tem usado, mas não você não somente fala dos exemplos, você mostra exemplos visuais durante a explicação, essa sacada é matadora cara ... kkkkk ... brincadeiras a parte, o roteiro e a dinâmica que tem usado acredito serem o seu principal diferencial. Vamos lá, continua que tá show cara!
+Lucas Almeida valeu! Hoje estou fazendo mais um - o primeiro de interfaces. :)
Sensacional, parabéns pelo ótimo vídeo e didática.
Vendo dois vídeos desse canal percebe-se que ele é foda :v GOXTEI
Valeu valeu! Quais dois vídeos você assistiu? E como veio parar aqui?? Hahaha! :)
Muito bom. Parabéns pelo conteúdo. Melhor canal de UX aqui no youtube. descomplicado e direto. Parabéns. Vc tem algum curso?
vc ensina melhor q os professores da minha faculdade kkkkk eu faço design grafico e to no inicio, tava mais perdido q cego em tiroteio
Boa explicação.
ótimo canal, bem didático !!!
Obrigado, Alexandre! Diz ai, o que aprendeu de legal nesse vídeo??
@@UXNOW entendi de fato a importância e o "modus operandi" do wireframe.
Gostei da expressão! Hahahha
Fiquei feliz que capturou a essência! :)
Aprendi muito! Obrigado.
Excelente!!
Seu canal está me ajudando muito. Ótimo conteúdo. Vlw!!!
Rsrs muito bom!
Muito bom! Parabéns!
vídeo legal!
obrigada pelo conteúdo :))))
Aeee! Obrigado!! Se tiver alguma dúvida não esquece de perguntar! :)
Daniel, sendo o wireframe um entregável de baixa fidelidade, a gente pode dizer que ele é a esquematização visual da Arquitetura da Informação? Já que nele levamos em consideração todos os elementos da página e começamos a definir a hierarquia do conteúdo?
Oi Clarissa! Sim, podemos pensar assim!
Uma coisa importante é entender o nível de detalhes que você vai colocar no wireframe - vai ter os botões com nomenclatura correta? Os textos são os de verdade? Todas as páginas já foram mapeadas? Etc etc. :)
show!!!
+Lucas Magno Cardeal - valeuuuuu!
cê é foda, daniel! valeu demais e sempre
Bem explicado e objetivo
Obrigado, Alex! Feliz que curtiu!
Grande Daniel, arrebenta mano!
Bora quebrar tudo, Sergio!!
Simbora mano, estudando pra chegar a seu level
Caraca tava muito perdido nesse assunto, me ajudou bastante pra faculdade!
Então wireframe é tipo o esboço de um desenho? Achei mais facil pensar assim, mas não sei se esta correto.
Isso! Um wireframe (nesse caso) é o esboço de uma interface. Pode ser de um site, de um aplicativo ou de um sistema web! :)
Muito bom o conteúdo, me ajudou muito.
Só uma sugestão: Quando falar nomes de aplicativos, colocar o nome do mesmo como um "subtitle", para facilitar a pesquisa. Obrigado
Oi!! Obrigado pelo comentário! Vou dar uma conferida no que coloquei na descrição do vídeo. É difícil lembrar de tudo que falo! Hahahaha!
muito bom!
Parabéns explicou muito bem, com tom de graça kkk
Oi Franey! Feliz que você curtiu! :)
Paguei um curso que não chega na metade da qualidade e competência das informações passadas nesse vídeo.
Beleza Daniel e bem explicado. E o bom é que não precisa aumentar a velocidade do vídeo, porque voce fala na velocidade que deixa todo mundo acordado.
+marcos furtado - hahahaha. Verdade, eu falo no 2x! Hahahhahaa!
Que bom que gostou!
Hahaha eu deixei no 1:50X hahahahahahaha
ahhh se eu tivessse visto essse video a 3 anos...
na arquitetura chamamos de croqui
Daniel, qual o melhor software para criação de wireframes de sistemas web ?
Oi Abimael! Se as interações forem 'simples' (apenas navegação por links/botões) você pode fazer no Figma, Adobe XD, Marvel ou Invision. Se for algo mais complicadão, com lógica e decisões de fluxo, ai precisa ser o Axure.
Eu, particularmente, acabo fazendo no papel e depois apresento para clientes versões já com "acabamento".
Se for para escolher um em software diria Figma. :)
UXNOW Vlw, Daniel, estou no caminho certo então
Mano, eu agradeceria se tu fizesse uma série abordando o processo (briefing, pesquisa, mapas de conteúdo, AI, wireframe, etc.) de sistemas web
Daí cada vídeo da série seria um projeto diferente ex: sites de ecomerce, bancos, portais, hotspots, etc..
Eu agradeceria muito, tem pouca informação na net sobre o assunto
Tenho uma pergunta que não tem muito haver com oque foi explicado... Na minha época designs tinham tatuagens, mas agora com essa nova área de ux e ui ficou mais profissional, conversas com clientes, pesquisas com usuarios e etc. Fiquei curioso se a imagem pessoal ficou muito cobrada? Tipo tatuagens, cabelo e etc, isso anda pesando na equipe ou ate na entrevista ou so as skills que contam?
"Como se fosse uma planta de um imóvel" -ahhh tá!
Wireframe não seria prototipação?
Isso, Cláudio! Wireframe é um tipo de prototipação. Geralmente com mais baixa fidelidade. :)
Wireframe é como se fosse a plana do software?
+israel batera consagração - é! Como se fosse a planta baixa de um site, software ou aplicativo!
9:18 🤣
Eu faço uns RABISCOFRAMES. hehe
São meus favoritos! Hahaha!
Para ajudar o meio ambiente, comprem um tablet de mão, específico pra desenho e só apaguem com a borracha digital mesmo. ; )
3:54 kkk somos
Chiques!
você tá conversando com alguma outra pessoa que não é você uhashusahuashuashusa
o bom e velho...rascunho 🤥
Muito bom!
Aeeee! Bom que gostou! :)