Transcrições
1. Introdução: Imagine que você pudesse criar
um protótipo de aplicativo em apenas algumas horas, em vez de
semanas. Muito legal, certo? OK. Como você está
neste curso, uma boa suposição é
que você já é designer de UX ou está prestes a se tornar um Nesse caso, este curso foi
desenvolvido para você. Isso também significa que
você entende que criar wireframes para testes de usabilidade às vezes
pode se tornar
uma Estou aqui para dizer
que tenho a solução perfeita para
você. Kits de wireframing Esses kits são ferramentas que você pode implementar
em seu fluxo de trabalho, tornando seu processo de enquadramento de fios mais fácil e empolgante
possível Meu nome é Y, sou instrutor de design AUX
UI. Eu estudei e
pratiquei design por anos. Atualmente, dou aulas para mais de 70 estudantes de design orientando-os sobre como iniciar
suas carreiras em tecnologia Estou muito empolgada em dar
essa aula porque acho que kits de
wireframing são ferramentas muito
subestimadas
em qualquer conjunto de ferramentas em qualquer A capacidade de você criar um protótipo completo e
funcional em questão
de horas é muito
notável e fortalecedora Mal posso esperar para levá-lo
do iniciante ao mestre no uso e implementação desses
kits de estrutura de arame em seu processo Discurso, abordaremos uma base muito prévia do
que é o enquadramento de arame e apresentarei a ideia de kits de enquadramento de arame Esses são componentes de
interface de usuário pré-fabricados que
incluem botões, controles deslizantes, ícones,
formulários, etc Imagine um conjunto de
blocos de construção que você pode misturar e combinar para criar o layout do seu produto
digital. Abordarei tudo o que você
precisa saber sobre como encontrar, baixar, personalizar e utilizar esses kits
em seus projetos Vamos aprender
tudo usando o Figma, um poderoso
software de prototipagem que permite aproveitar ao máximo os kits de
estrutura de fios Se você não conhece
o Figma, não se preocupe. Vou
guiá-lo no uso
eficaz do Figma com instruções
passo a passo A beleza de usar kits de
enquadramento de arame é a eficiência. Você não está desperdiçando
seu tempo criando cada elemento
do zero Em vez disso, você arrasta,
solta e voa. Você tem um layout funcional, pronto para testes e feedback. Junte-se e vamos dar vida às
suas visões de design.
2. O que é o Wireframing: Talvez você já saiba
tudo sobre estruturas de arame como parte do seu processo de
design Mas, por precaução, vamos falar
sobre isso neste vídeo rápido. Imagine que você está construindo uma casa. Você não começaria a colocar
tijolos aleatoriamente, certo? Você precisaria
primeiro de um projeto aproximado em seu design x. Os wireframes são como
esses projetos. Eles são guias
visuais simbólicos que representam o esqueleto
do seu produto digital, seja um
site ou um aplicativo wireframing ajuda você a
organizar a estrutura e layout do seu design antes de começar a adicionar todos
os recursos. É tudo uma questão de
focar na funcionalidade e experiência
do usuário
sem se distrair com cores, fontes e outros elementos de
design As molduras Wi são diferentes
das maquetes finais que você
cria para o seu produto Os quadros Wi são a fase de
transição entre suas ideias e
o produto final Eles têm uma
natureza experimental, já que você os cria, testa e depois
repete neles. Agora que você sabe
o que são wireframes, você também deve saber que nem
todos os wireframes Existem diferentes níveis
de fatalidade em wireframes,
variando de baixa
a alta fidelidade variando de baixa Fidelidade é
basicamente uma palavra chique, referindo-se ao nível de detalhe e realismo
no design Vamos dar uma olhada. Primeiro, temos wireframes de baixa fidelidade Esses são esboços básicos desenhados
à mão geralmente feitos com papel e caneta Eles também podem ser digitais, mas incluem uma quantidade muito
limitada de detalhes. Eles são rápidos de
criar e muito úteis para comunicar ideias
iniciais Pense neles como rabiscar seus primeiros pensamentos em um Em seguida, chegamos aos wireframes de média
fidelidade. Geralmente são digitais e criados usando ferramentas
como sketch ou Figma Eles ainda são básicos
e aproximados, mas incluem
mais detalhes do que estruturas de arame de baixa fidelidade. Esse nível é ótimo
para definir ideias e preparar seu protótipo para testes e receber feedback Finalmente, existem wireframes de alta
fidelidade. Eles quase funcionam como o produto final com layouts
mais completos
e um design bem elaborado. Estruturas de arame de alta fidelidade são frequentemente usadas para
testes de usabilidade, pois fornecem uma imagem muito mais clara de como será
a aparência do produto final
e como funcionará Em poucas palavras, o enquadramento é uma etapa fundamental
no processo de design As molduras em Y fornecem uma planta, com foco na estrutura
e no layout do seu produto Este curso visa
tornar esse processo de enquadramento em
Y o mais fácil e
agradável possível
3. O que são kits de reformulação de fio: No vídeo anterior,
falamos sobre o enquadramento de fios. Agora é hora de apresentar nosso tópico principal, os kits de enquadramento Wi Um kit de estrutura de arame é uma coleção de componentes de interface de usuário
refeitos Pense nisso como um
conjunto de peças de lego. Essas peças incluem elementos como botões,
campos de entrada, ícones ou até mesmo
layouts salariais completos que você pode usar para redigir rapidamente o esqueleto
do seu site ou aplicativo A ideia é simples. Ao construir
suas estruturas de arame, você pode utilizar esses kits
como uma biblioteca de componentes. Arraste e solte facilmente os elementos em
seus Mas por que você deveria
usar esses kits? Bem, há muitas razões. Os principais são velocidade, eficiência, consistência
e um pouco de diversão. Outro motivo para usar kits de
wireframing é que eles ajudam a manter
você focado na funcionalidade
do seu
produto, sem perder
tempo ou se distrair com aspectos
de Digamos que você esteja trabalhando
no design de um aplicativo de comida. Você quer criar
um fluxo de checkout. Você gasta 5 minutos elaborando o esboço para o
layout dessas telas Mas então você passou 2 horas apenas aperfeiçoando essas telas e
fazendo com que parecessem consistentes Apenas para descobrir
que, após o teste, você precisa quase alterar todo
o design novamente. Isso não é ótimo, não
é? Em vez de começar do zero
todas as vezes, você pode começar com um conjunto de componentes
prontos para uso. Tempo economizado significa que
você pode iterar mais rápido, testar suas ideias mais cedo e melhorar a usabilidade do
seu design neste Também é divertido. A criatividade geralmente prospera sob algumas restrições E ter a capacidade de usar um conjunto de elementos pode, na verdade,
gerar novas ideias Simplesmente porque
você não está
preocupado em criar esses
elementos do zero. Você pode brincar com eles, reorganizá-los e
ver como eles se encaixam. É como uma
caixa de areia digital para você. A eficiência entra em jogo
quando você trabalha em equipe. Se todos estiverem
usando o mesmo kit, todos
vocês falam a
mesma linguagem de design. Isso minimiza
mal-entendidos e reduz o tempo
gasto Além disso, garante que produto final tenha uma aparência
unificada. Agora você pode estar se
perguntando: É ético eu usar
esses kits de wireframing Alguns designers
podem se sentir desconfortáveis, pensando que usar componentes
pré-fabricados pode alguma forma, ser considerado roubo
ou menos original Mas esse não é o
caso. É absolutamente ético usar kits de wireframing Equipes de design em todo o
mundo, use-as o tempo todo. É uma prática padrão
e oferece os benefícios. É fácil
usá-los em seus projetos. Uma coisa a ter
em mente é que você precisa de uma ferramenta de prototipagem
para usar essas crianças mais populares incluem sketch, Figma e WXT Cada uma dessas ferramentas
oferece todos os recursos necessários para importar e
usar esses kits de wireframing Essas ferramentas permitem que seus filhos
se integrem
perfeitamente aos seus projetos, facilitando ainda mais arrastar, soltar e personalizar de acordo
com suas necessidades
4. Como usar o Figma neste curso: Para realmente começar a projetar seus wireframes e
poder usar o kit de wireframes, você precisa Para este curso, escolhemos uma
ferramenta de design muito poderosa, que é a Figma O fGMA é uma ferramenta de design
que permite
projetar seus wireframes e
criar seus protótipos Além disso, ajuda
você a facilitar seus testes de
usabilidade O que faz a FGMA se destacar no mundo
da experiência do usuário é a natureza
colaborativa Você e sua equipe podem trabalhar
em um design simultaneamente, fazendo atualizações em tempo real, sem mais enviar
arquivos por e-mail ou lidar com pesadelos de
controle de versão Também é uma ferramenta baseada em nuvem. Tudo o que você precisa fazer é
entrar na sua conta
em qualquer dispositivo e você terá acesso a
todos os seus arquivos de qualquer lugar, de sua casa, do seu escritório, sua
cafeteria favorita, etc. Como designer de UX, eventualmente, você precisa ser
proficiente no uso Há muitos tutoriais
e recursos on-line. Você pode aprender isso à medida que avança. No entanto, a beleza de usar kits de
arame é que você não precisa ser um
especialista em Figma Qualquer usuário iniciante
pode facilmente usar um kit de estrutura de arame para começar a
montar um design No figma, realizaremos
ações específicas que você pode realizar ao usar e
personalizar kits de enquadramento de arame Mas há duas características principais que você precisa conhecer
antes de mergulhar. Esses recursos são
componentes e estilos. Um componente é algo
que você pode criar e depois reutilizar em seu
design repetidamente. Com todos os usos, ainda vincule
ao componente principal. Um estilo é semelhante ao
componente em teoria. Você cria um estilo para
tipografia ou cor. Aplique-o a diferentes
elementos do seu design e todos esses elementos
permanecerão vinculados. Se você alterar o estilo
original, todos os
elementos conectados seguirão. Por exemplo, um design de botão. Você pode criar seu botão uma vez e depois usá-lo
em qualquer lugar do design. Por exemplo, se você quiser alterar essa cor
do ponto e depois, você só precisa alterar
o componente principal e todas as instâncias
seguirão. A principal diferença
entre componentes e estilos é que
os estilos geralmente são mais simples, visando
propriedades específicas dos Enquanto um componente é
uma unidade mais complexa. Um componente carrega forma, cor, tipografia e
muitos outros atributos É importante que
você entenda os componentes e estilos
antes de começarmos. Porque um kit de estrutura de arame, em sua essência, é um conjunto
de componentes e estilos preparados e
montados para você inverter e começar a
usar em seu projeto
5. Como encontrar o kit de reformulação de fio certo: Tudo bem Para começar
com sua estrutura de arame, você precisa encontrar o kit de estrutura de arame
certo. Antes de fazer isso, pergunte a si mesmo qual é o escopo do meu projeto? Você está criando uma página de destino
simbólica ou um aplicativo móvel complexo, ou talvez um site completo Saber disso o
guiará até o kit que se alinha aos requisitos
específicos do seu projeto Por exemplo, se você estiver
criando um aplicativo móvel, talvez
precise de um
kit que inclua componentes como barras de navegação, barras de
guias e vários modelos de
tela. Por outro lado, se você estiver
criando um projeto web, procure kits ricos
em elementos focados em digtop Como variação de cabeçalho, designs de
rodapé e seções de
conteúdo Com isso dito, a
maioria dos kits de wireframing inclui elementos para aplicativos de
desktop e móveis A segunda coisa que você
quer determinar é o nível de fidelidade dos seus
wireframes No início do projeto, os kits de
baixa fidelidade são excelentes para debater ideias e obter Posteriormente, à medida que o design
se torna mais refinado, você deseja mudar para kits
de alta fidelidade. Depois de decidir sobre o tipo de
kit de estrutura de arame de que você precisa, você está pronto para começar a
procurar o kit de estrutura de arame certo. Como estamos usando o
Figma e o Discourse, a comunidade Figma é lugar perfeito para você
procurar o Para começar, clique
na guia Comunidade explorada na página principal A comunidade Figma está
repleta de vários ativos e
um lugar para seu design Comece digitando algumas palavras-chave, use termos como kits de enquadramento wi, componentes de
interface do usuário ou kit de enquadramento wi de baixa
fidelidade, dependendo do que
você está procurando Uma rápida etapa profissional: preste atenção à classificação e ao
número de downloads Kits com classificações mais altas
e mais downloads geralmente
são mais confiáveis e têm uma
comunidade mais forte. Depois de encontrar alguns kits
que chamem sua atenção, abra o breviw para
ver o que está dentro Esse kit inclui todos os
componentes de que você precisa? É o
nível certo de fidelidade? Parece apropriado
para o seu projeto? Se isso acontecer, tudo o
que você precisa
fazer é clicar no
botão Abrir Figma Isso criará uma duplicata do
arquivo
dos kits de wireframing em seus rascunhos e
abrirá automaticamente o Esse é o primeiro passo para adotar esse
kit de wireframing para
6. Como projetar com kits de reformulação de fio: Agora que você encontrou o melhor kit de
wireframing
para seu projeto Vamos começar a usá-lo para
começar a abrir o arquivo
que você duplicou
e, em seguida, selecionar a
moldura certa para o seu projeto, seja uma estrutura de deck stop, uma moldura móvel ou
o que quer que seja, dependendo do tipo de
produto que você está projetando Depois disso, você pode acessar os elementos do kit
de wireframing pelo lado esquerdo Selecione a guia ativos
e, a partir daí, você verá todos os
componentes do arquivo,
categorizados e organizados, cada um com seu próprio nome Você pode ver a lista e
verificar o que precisa, ou pode usar a barra de pesquisa na parte superior e digitar o nome do
que está procurando. Ele aparecerá se existir. A ideia é símbolo. Tudo o que você precisa fazer é arrastar o que precisar e
soltá-lo em seu design. Precisa de um botão, arraste-o,
precisa de um campo de entrada de texto, arraste-o. É simples assim. Você pode esboçar rapidamente
a estrutura básica do seu aplicativo e site
organizando esses elementos Você não precisa se
preocupar com os detalhes exatos no palco, e pronto. Em apenas alguns segundos, você tem um layout
funcional de símbolos que pode ser facilmente
ajustado e repetido Digamos que você esteja criando
uma tela de login com símbolos. Primeiro, arraste um espaço reservado
para servir como título. Em seguida, adicione dois campos de entrada, um para o nome do usuário e
outro para a senha. Por fim, arraste um botão
para a ação de login. A maioria dos componentes também tem algumas configurações que você pode ajustar no painel lateral direito Para esse
campo de entrada, por exemplo, como é para a senha, podemos adicionar um ícone
no lado direito. Tudo o que precisamos fazer é usar essa opção
no painel do lado direito e o ícone que
queremos aparecerá. É importante ter em
mente que a estrutura do
fio tem tudo a
ver com ser aproximada Esses kits ajudam você a
criar estruturas de arame com representação aproximada
do seu produto final. Eles não são necessariamente perfeitos
ou estilizados em
Exel para combinar com sua visão
final de design Pense neles como um esqueleto
da sua interface de usuário. Então, enquanto você arrasta
e solta elementos, eles podem não ficar
exatamente como você gostaria que fossem no
final, mas tudo bem O objetivo aqui é focar na estrutura e
no layout,
não na aparência final. A beleza dos
kits de enquadramento de fogo. Está na eficiência. Ao usar componentes pré-fabricados, podemos economizar inúmeras
horas que, de outra forma, você gastaria criando
elementos do zero. Essa velocidade permite que você
repita rapidamente seus
designs, obtenha feedback e faça melhorias sem se atrasar com os detalhes
de estilo
7. Como personalizar kits de reformulação de Wi-Fi: Até agora, abordamos
o básico do wireframing,
exploramos diferentes kits de wireframing e começamos a
usar e No entanto, como a ideia é confiarmos em um kit de wireframing
pré-fabricado, espera-se que
o kit que escolhemos não corresponda
a 100%
dos nossos requisitos É por isso que é muito importante
que você saiba como
personalizar e projetar
componentes adicionais para seu kit. Digamos que temos
um botão em nosso kit. É um botão
retangular bastante padrão com um leve arredondamento dos cantos entanto, para o tipo de produto que
estamos projetando, é crucial usar cantos
totalmente arredondados. Podemos fazer essa alteração em todo
o kit de wireframes com muita facilidade Para fazer isso, preciso encontrar o componente que
preciso alterar primeiro. Como precisamos alterar
o componente do botão, procurarei uma página chamada botões no painel lateral esquerdo. Em seguida, selecionarei todos
os botões de uma vez
e, no painel do lado direito, verei uma opção
para o raio do canto Vamos mudar isso
10-36. Lá vamos nós. Agora, nosso botão
tem aqueles cantos lisos e
totalmente arredondados que correspondem à finalidade
do nosso produto. Depois de alterar o
componente principal dessa forma, todas as instâncias
desse componente serão atualizadas
automaticamente. Você pode fazer isso
com qualquer componente, alterando qualquer propriedade,
cor, fonte, tamanho. Você também precisa se lembrar de ter cuidado com essas mudanças para manter a consistência
do estilo geral
deste kit de estrutura de arame Além de alterar algumas propriedades nos componentes existentes. Às vezes, o
kit pré-fabricado simplesmente não tem
algo de que precisamos. Talvez precisemos de um
componente exclusivo, como um controle deslizante de página, por exemplo, mas não
encontramos nenhum lugar neste kit Felizmente, você pode
criar isso do zero. Para começar, procurarei a página apropriada para
esse componente adicional. Essa fita é apenas para fins
organizacionais. Depois disso, você cria
seu novo componente. Aqui está um controle deslizante básico que eu estava perdendo. Eu já o desenhei. Agora, criamos um controle deslizante personalizado que
atende perfeitamente às nossas necessidades, mas ainda não terminamos Precisamos converter
esse novo design em um componente reutilizável, para que não precisemos
recriá-lo toda vez Tudo o que você precisa fazer
é clicar com o botão
direito e selecionar a opção
criar componente. Também podemos adicionar
variantes diferentes para esse componente. Por exemplo, posso criar variantes
diferentes para
páginas diferentes que estão ativas. Criarei essas
diferentes variantes aqui e mudarei a cor
dos diferentes aplicativos de página que indicam qual
página está ativa. Agora, esse novo componente deslizante estará disponível em
seu painel de ativos, pronto para ser arrastado e
solto sempre que você precisar Além disso, qualquer
alteração futura que você fizer
no componente original
atualizará automaticamente todas as
instâncias do seu projeto. Super eficiente,
aí está. Personalizar e
criar novos componentes é algo que
você quase
sempre fará em seu fluxo Quanto mais você experimenta
a personalização. Quanto melhor você conseguir fabricar seus kits
de fiação, refletirá
verdadeiramente a visão
do seu projeto
8. Como importar kits como biblioteca na Figma: Até agora, você deve ter
um bom domínio sobre wireframes e
kits de personalização para seu projeto Mas até agora, a única maneira de
usá-los é trabalhando diretamente
no arquivo de kits. No entanto, para maior eficiência e uso de kits de wireframing em todo o
seu potencial, podemos usá-los como bibliotecas de componentes para nossos projetos Ao centralizar seus
componentes e estilos, você garante que todos
estejam na mesma página, tornando seu processo de design
mais rápido e organizado Além disso, é mais fácil atualizar e manter a consistência
em todo o seu projeto. Acredite em mim, no seu futuro eu e nos
membros da sua equipe, agradecemos. Vamos passo a passo
no processo de
publicação de um
kit de enquadramento de arame como uma biblioteca na Figma Primeiro, você precisa ter uma pasta de
equipe para o seu projeto. Eu já criei um aqui. Você criou a partir do botão na parte inferior e
seguindo o processo. Dentro da pasta da equipe, você precisa ter
uma pasta do projeto. É aqui que todos os arquivos relacionados ao
projeto, como o kit de
enquadramento de fios, ficarão armazenados. Você pode criar quantos
projetos precisar. Agora, a próxima etapa é mover
o arquivo dos kits de enquadramento de fios que você duplicou
da
comunidade Figma para a pasta do seu
projeto Você pode fazer isso facilmente clicando com o botão
direito do mouse no arquivo, selecionando a opção mover arquivo e escolhendo o destino
apropriado. Ou você pode escolher minha
forma favorita, que é arrastar e soltar o arquivo na pasta do projeto de
destino Sua próxima etapa é publicar
seu arquivo como uma biblioteca. Abra seu arquivo e, na parte superior da
barra lateral esquerda, vá para ativos. Em seguida, clique na
biblioteca aqui. Você verá uma opção para publicar seus
componentes e estilos. Clique em publicar e o
Figma exibirá uma lista mostrando todos
os componentes e estilos que você pode publicar Revise tudo para ter certeza de que está tudo pronto e
clique em publicar novamente. Você pode acessar a
mesma opção na pequena seta
ao lado do nome do arquivo. Você também pode publicar sua
biblioteca a partir daí. Assim, sua biblioteca
agora está publicada para que toda
a equipe
possa usá-la
. Para garantir que todos os membros da sua equipe também possam usá-la, você precisa habilitá-la em
um arquivo de design específico. Vou criar um novo arquivo de design na mesma pasta do projeto. Digamos que esse seja o
arquivo principal em que estamos criando. Tudo o que preciso fazer é acessar
a opção de
biblioteca no menu de ativos e adicionar a biblioteca que acabei de
publicar a esse arquivo. Então você publicou
sua primeira biblioteca. Mas o que acontece quando você faz alterações no kit de moldura de sua
esposa Não se preocupe, também é muito
simples. Sempre que você fizer alterações no kit
de moldura de sua esposa, FDMA solicitará que você publique
atualizações Basta seguir os mesmos passos. Acesse ativos, clique
no ícone da biblioteca
e, em seguida, clique para publicar
a atualização da sua biblioteca. Sua equipe também receberá
uma notificação para atualizar sua versão
da biblioteca . É simples assim. Por fim, assim como adicionamos
esse kit ao nosso projeto, saiba que você pode adicionar vários kits no mesmo projeto. Ao fazer isso, seja cuidadoso e organizado e adicione um nome
distinto para cada kit. Isso facilita muito a identificação de uma troca entre
diferentes conjuntos de componentes. No entanto, é muito
aconselhável usar um kit vez, pois as coisas
podem se misturar com muita facilidade e você corre o risco de perder a
consistência em seus designs.
9. Resumo: Essa foi minha aula sobre kits de
arame. Esse conhecimento me
ajudou a acelerar meu processo de design e foi essencial para mim
quando comecei. Espero que seja útil
para você também. Neste curso, você
aprendeu como escolher, usar e personalizar kits de arame
no Figma Você também aprendeu
como
implementá-las como bibliotecas
em seus projetos. Mas é claro que isso é
só o começo. Eu adoraria que você continuasse praticando e compartilhando a estrutura de
arame que você cria Qualquer coisa inspirada nessa aula na seção de projetos de classe. Comece trabalhando
em pequenos projetos. Talvez redesenhe o blog de um amigo ou o site do seu próprio portfólio Pequenos projetos
oferecem espaço para experimentar e cometer erros
sem muita pressão. Uma coisa que adoro em ser designer
de U XUI é uma curva de aprendizado
infinita Sempre surgem novas técnicas, ferramentas e métodos, mantendo as coisas muito empolgantes. Eu encorajo você a
adotar uma mentalidade de aprendizado
contínuo,
fazer cursos adicionais, ler blogs de UX, participar de
webinars e me seguir aqui e também nas mídias sociais para se manter atualizado com
meus Se você gosta deste curso
e o acha útil, uma análise sobre compartilhamento de habilidades
significaria muito para mim. Isso ajuda os alunos a
descobrir esse curso e me permite continuar criando conteúdo
valioso para você. Muito obrigado por fazer
essa jornada comigo.
Yousef Shehabi, UXUI Designer | Educator
