1659650400
Uma Introdução Ao Wireframe Com O Figma
Neste artigo, exploraremos o que é wireframing e por que vale a pena fazê-lo com o Figma - a ferramenta de design de interface do usuário mais usada no mercado atualmente.
Vamos mergulhar profundamente no Figma e aprender como projetar interfaces de usuário com ele - investigando wireframes à medida que avançamos.
BTW: se você der uma olhada na Pesquisa de Ferramentas de Design de 2020 , o Figma venceu na maioria das categorias: Fluxos de usuário, Design de interface do usuário, Prototipagem, Handoff, Sistemas de design, Versionamento e até “mais empolgado para experimentar em 2021”.
Estrutura de arame
Wireframes são diagramas que descrevem a estrutura de um design e podem ser de baixa fidelidade (para pesquisa de usuário) ou média fidelidade (para pesquisa de UX). Estaremos nos concentrando no último (pesquisa de UX), e os visuais não serão uma preocupação para nós aqui, porque tudo o que queremos fazer neste estágio é descobrir o conteúdo e o layout (também conhecido como “arquitetura da informação”) .
O que estamos fazendo wireframes?
Primeiro, um pouco de fundo sobre a interface do usuário que estaremos construindo. Será uma estrutura semelhante a uma tabela mostrando várias ferramentas de design de UX e em qual etapa do fluxo de trabalho de design de UX cada ferramenta é usada. Os dados serão enviados pelo usuário, portanto, o objetivo é ver qual fluxo de trabalho de design de UX é melhor, em vez do exagerou “qual ferramenta de design de interface do usuário é melhor?”
O wireframe me ajudará a descobrir a melhor forma de estruturar essa interface sem perder tempo em descobrir os pequenos detalhes visuais. Não vai ficar incrível, mas tudo bem; ele só precisa ser bonito o suficiente para que os usuários possam me oferecer algum feedback.
Sim, é uma interface de usuário real. No momento estou chamando de “Toolflows”.
Vamos começar!
Etapa 1: configurar a prancheta
A maioria dos usuários do meu site são usuários de desktop, então faz sentido fazer o wireframe do meu design em uma prancheta de desktop. Pressione A no teclado e clique em Design > Desktop > MacBook na barra lateral direita do Figma.
Etapa 2: reunir requisitos funcionais
Supondo que você ou outra pessoa fez alguma pesquisa de usuário em algum momento, precisaremos nos referir a isso para criar nosso wireframe. Ao realizar pesquisas com usuários ( especificamente, entrevistas com usuários, grupos focais e testes de usuários com wireframes de baixa fidelidade ), teríamos sido informados de quaisquer requisitos funcionais.
Os nossos são:
- filtrar por ferramenta
- número de usuários de fluxo de trabalho
Vamos começar o wireframe!
Etapa 3: criar texto e formas
Em primeiro lugar, existem kits de wireframe Figma disponíveis, mas eu não sou exatamente fã deles. Eles me fazem sentir constrangido a trabalhar apenas com o que está disponível no kit, então isso atrapalha a criatividade.
Em vez disso, faremos o wireframe usando texto e formas.
Como aprendemos antes com a prancheta, a maneira mais fácil de criar qualquer coisa no Figma é abusar dos atalhos de teclado:
- T: Texto
- O: Elipse
- R: Retângulo
- ⇧⌘K: Imagem
- ⇧L: Flecha
- L: Linha
Depois disso, basta clicar na prancheta aproximadamente onde você gostaria que o objeto aparecesse e, em seguida, você pode usar o mouse e as teclas de seta para ajustar o tamanho e o alinhamento.
Atalhos úteis:
- ⌘-/+ para Zoom.
- ⌘D para Duplicar objetos selecionados.
- ⌘G para agrupar objetos selecionados (⌘rc para selecionar dentro).
- Segure ⌘ ao redimensionar o mouse para girar objetos.
- Segure ⇧ ao redimensionar o mouse para manter a proporção.
- Use as teclas de seta para mover objetos em 1px (Segure ⇧ para 10px).
- Teclas de seta + ⌘ para redimensionar em 1px (Segure ⌘⇧ para 10px).
Em seguida, vamos passar para o estilo.
Etapa 4: estilo, mas não estilo
Usando a barra lateral Design (espero que ainda esteja visível) , podemos alterar os estilos dos objetos em nossa prancheta, tanto esteticamente quanto para especificar o dimensionamento e o alinhamento deles com mais precisão.
Se você estiver usando a barra lateral Design ou as teclas de seta para dimensionar/alinhar, segure ⌥ (opção) para medir a distância entre os objetos.
Lembre-se, não projete muito além de dimensionar e alinhar. Dê cantos arredondados aos botões (para que possamos ver claramente que são botões), títulos em negrito, etc. Clareza, não estética.
E é isso; agora temos um wireframe. Dito isto, para projetos que exigem interação, queremos demonstrar como exatamente nosso projeto funcionaria, então, sem mais delongas, vamos para a prototipagem . A prototipagem é a etapa em que tornamos o design interativo (ou seja, sentimos como se fosse a coisa real).
Etapa 6: criar transições
O conceito por trás desta etapa é duplicar nossa prancheta, demonstrar como queremos que nosso design fique no final da interação e, em seguida, definir o gatilho (animação opcional) que iniciará a transição entre os dois “estados”.
Comece duplicando a prancheta (⌘D) e, em seguida, altere o que precisar ser alterado nessa nova prancheta. No meu caso, quero mostrar o menu suspenso, que filtra os fluxos de trabalho por ferramenta.
Em seguida, mude para a barra lateral Protótipo antes de selecionar o objeto que será o gatilho para sua interação. Para mim, este é o menu suspenso fechado da prancheta original.
Uma vez selecionado, deve haver um ícone + circular arrastável . Arraste este círculo para a segunda prancheta para criar uma “conexão”.
Etapa 7: definir animação (opcional)
Em seguida, devemos definir alguma animação para a interação para que os usuários possam ver mais facilmente o que mudou entre os dois estados.
As animações não precisam ser extravagantes, já que estamos apenas projetando com fidelidade média no momento, portanto, na caixa de diálogo Detalhes da interação que se revelou após a criação da conexão, defina a Animação como Animação inteligente . A animação inteligente anima camadas que não existiam na “prancheta de acionamento”. Inteligente, hein?
Se você estiver prototipando com wireframes de média fidelidade, não precisará mexer em nenhuma das outras opções, mas é legal saber como criar conexões animadas agora.
Etapa 8: teste, teste, teste
Em seguida, vamos querer testá-lo, primeiro para garantir que todas as conexões funcionem, depois para obter o que considero “feedback de baixo nível” das partes interessadas. Obviamente, o valor real vem dos testes com usuários, mas isso não significa que nossos stakeholders não tenham nada a contribuir. Talvez perdemos alguma coisa?
Para compartilhar com as partes interessadas, clique no botão Compartilhar no canto superior direito. As partes interessadas poderão deixar alguns comentários.
Para seus próprios testes (que eu recomendo fazer antes de enviar compartilhamento com qualquer outra pessoa), você deve baixar o Figma Mirror para iOS ou Android . Ao projetar para desktop, basta clicar no ícone de reprodução no canto superior direito para entrar no modo “Presente”.
Etapa Bônus 9: Realize testes de usabilidade
Se você deseja obter um feedback mais qualitativo sobre seu design (taxa de conclusão da tarefa, tempo para conclusão etc.), aplicativos como Maze e Useberry (que funcionam com o Figma) o ajudarão a fazer exatamente isso. Afinal, é por isso que estamos fazendo wireframes, certo? Para tornar nosso design mais útil.
Conclusão: Figma tem tudo
O Figma tem tudo, incluindo uma comunidade próspera e dedicada composta por designers de macOS e Windows, e até mesmo aqueles que simplesmente desejam projetar em seu navegador da Web (portanto, Linux também!).
E agora? Bem, você pode explorar a comunidade Figma , ver o que eles estão fazendo e talvez até baixar alguns plugins Figma para estender e automatizar seu fluxo de trabalho de design de interface do usuário.
What is GEEK
Buddha Community
1659650400
Uma Introdução Ao Wireframe Com O Figma
Neste artigo, exploraremos o que é wireframing e por que vale a pena fazê-lo com o Figma - a ferramenta de design de interface do usuário mais usada no mercado atualmente.
Vamos mergulhar profundamente no Figma e aprender como projetar interfaces de usuário com ele - investigando wireframes à medida que avançamos.
BTW: se você der uma olhada na Pesquisa de Ferramentas de Design de 2020 , o Figma venceu na maioria das categorias: Fluxos de usuário, Design de interface do usuário, Prototipagem, Handoff, Sistemas de design, Versionamento e até “mais empolgado para experimentar em 2021”.
Estrutura de arame
Wireframes são diagramas que descrevem a estrutura de um design e podem ser de baixa fidelidade (para pesquisa de usuário) ou média fidelidade (para pesquisa de UX). Estaremos nos concentrando no último (pesquisa de UX), e os visuais não serão uma preocupação para nós aqui, porque tudo o que queremos fazer neste estágio é descobrir o conteúdo e o layout (também conhecido como “arquitetura da informação”) .
O que estamos fazendo wireframes?
Primeiro, um pouco de fundo sobre a interface do usuário que estaremos construindo. Será uma estrutura semelhante a uma tabela mostrando várias ferramentas de design de UX e em qual etapa do fluxo de trabalho de design de UX cada ferramenta é usada. Os dados serão enviados pelo usuário, portanto, o objetivo é ver qual fluxo de trabalho de design de UX é melhor, em vez do exagerou “qual ferramenta de design de interface do usuário é melhor?”
O wireframe me ajudará a descobrir a melhor forma de estruturar essa interface sem perder tempo em descobrir os pequenos detalhes visuais. Não vai ficar incrível, mas tudo bem; ele só precisa ser bonito o suficiente para que os usuários possam me oferecer algum feedback.
Sim, é uma interface de usuário real. No momento estou chamando de “Toolflows”.
Vamos começar!
Etapa 1: configurar a prancheta
A maioria dos usuários do meu site são usuários de desktop, então faz sentido fazer o wireframe do meu design em uma prancheta de desktop. Pressione A no teclado e clique em Design > Desktop > MacBook na barra lateral direita do Figma.
Etapa 2: reunir requisitos funcionais
Supondo que você ou outra pessoa fez alguma pesquisa de usuário em algum momento, precisaremos nos referir a isso para criar nosso wireframe. Ao realizar pesquisas com usuários ( especificamente, entrevistas com usuários, grupos focais e testes de usuários com wireframes de baixa fidelidade ), teríamos sido informados de quaisquer requisitos funcionais.
Os nossos são:
- filtrar por ferramenta
- número de usuários de fluxo de trabalho
Vamos começar o wireframe!
Etapa 3: criar texto e formas
Em primeiro lugar, existem kits de wireframe Figma disponíveis, mas eu não sou exatamente fã deles. Eles me fazem sentir constrangido a trabalhar apenas com o que está disponível no kit, então isso atrapalha a criatividade.
Em vez disso, faremos o wireframe usando texto e formas.
Como aprendemos antes com a prancheta, a maneira mais fácil de criar qualquer coisa no Figma é abusar dos atalhos de teclado:
- T: Texto
- O: Elipse
- R: Retângulo
- ⇧⌘K: Imagem
- ⇧L: Flecha
- L: Linha
Depois disso, basta clicar na prancheta aproximadamente onde você gostaria que o objeto aparecesse e, em seguida, você pode usar o mouse e as teclas de seta para ajustar o tamanho e o alinhamento.
Atalhos úteis:
- ⌘-/+ para Zoom.
- ⌘D para Duplicar objetos selecionados.
- ⌘G para agrupar objetos selecionados (⌘rc para selecionar dentro).
- Segure ⌘ ao redimensionar o mouse para girar objetos.
- Segure ⇧ ao redimensionar o mouse para manter a proporção.
- Use as teclas de seta para mover objetos em 1px (Segure ⇧ para 10px).
- Teclas de seta + ⌘ para redimensionar em 1px (Segure ⌘⇧ para 10px).
Em seguida, vamos passar para o estilo.
Etapa 4: estilo, mas não estilo
Usando a barra lateral Design (espero que ainda esteja visível) , podemos alterar os estilos dos objetos em nossa prancheta, tanto esteticamente quanto para especificar o dimensionamento e o alinhamento deles com mais precisão.
Se você estiver usando a barra lateral Design ou as teclas de seta para dimensionar/alinhar, segure ⌥ (opção) para medir a distância entre os objetos.
Lembre-se, não projete muito além de dimensionar e alinhar. Dê cantos arredondados aos botões (para que possamos ver claramente que são botões), títulos em negrito, etc. Clareza, não estética.
E é isso; agora temos um wireframe. Dito isto, para projetos que exigem interação, queremos demonstrar como exatamente nosso projeto funcionaria, então, sem mais delongas, vamos para a prototipagem . A prototipagem é a etapa em que tornamos o design interativo (ou seja, sentimos como se fosse a coisa real).
Etapa 6: criar transições
O conceito por trás desta etapa é duplicar nossa prancheta, demonstrar como queremos que nosso design fique no final da interação e, em seguida, definir o gatilho (animação opcional) que iniciará a transição entre os dois “estados”.
Comece duplicando a prancheta (⌘D) e, em seguida, altere o que precisar ser alterado nessa nova prancheta. No meu caso, quero mostrar o menu suspenso, que filtra os fluxos de trabalho por ferramenta.
Em seguida, mude para a barra lateral Protótipo antes de selecionar o objeto que será o gatilho para sua interação. Para mim, este é o menu suspenso fechado da prancheta original.
Uma vez selecionado, deve haver um ícone + circular arrastável . Arraste este círculo para a segunda prancheta para criar uma “conexão”.
Etapa 7: definir animação (opcional)
Em seguida, devemos definir alguma animação para a interação para que os usuários possam ver mais facilmente o que mudou entre os dois estados.
As animações não precisam ser extravagantes, já que estamos apenas projetando com fidelidade média no momento, portanto, na caixa de diálogo Detalhes da interação que se revelou após a criação da conexão, defina a Animação como Animação inteligente . A animação inteligente anima camadas que não existiam na “prancheta de acionamento”. Inteligente, hein?
Se você estiver prototipando com wireframes de média fidelidade, não precisará mexer em nenhuma das outras opções, mas é legal saber como criar conexões animadas agora.
Etapa 8: teste, teste, teste
Em seguida, vamos querer testá-lo, primeiro para garantir que todas as conexões funcionem, depois para obter o que considero “feedback de baixo nível” das partes interessadas. Obviamente, o valor real vem dos testes com usuários, mas isso não significa que nossos stakeholders não tenham nada a contribuir. Talvez perdemos alguma coisa?
Para compartilhar com as partes interessadas, clique no botão Compartilhar no canto superior direito. As partes interessadas poderão deixar alguns comentários.
Para seus próprios testes (que eu recomendo fazer antes de enviar compartilhamento com qualquer outra pessoa), você deve baixar o Figma Mirror para iOS ou Android . Ao projetar para desktop, basta clicar no ícone de reprodução no canto superior direito para entrar no modo “Presente”.
Etapa Bônus 9: Realize testes de usabilidade
Se você deseja obter um feedback mais qualitativo sobre seu design (taxa de conclusão da tarefa, tempo para conclusão etc.), aplicativos como Maze e Useberry (que funcionam com o Figma) o ajudarão a fazer exatamente isso. Afinal, é por isso que estamos fazendo wireframes, certo? Para tornar nosso design mais útil.
Conclusão: Figma tem tudo
O Figma tem tudo, incluindo uma comunidade próspera e dedicada composta por designers de macOS e Windows, e até mesmo aqueles que simplesmente desejam projetar em seu navegador da Web (portanto, Linux também!).
E agora? Bem, você pode explorar a comunidade Figma , ver o que eles estão fazendo e talvez até baixar alguns plugins Figma para estender e automatizar seu fluxo de trabalho de design de interface do usuário.
1594770710
How To Succeed In Mobile App Wireframe Design?
In the world of overrated terms “web development”, a mobile app wireframe design is one of the most underrated terms. The design of wireframes is considered when people look for the bigger picture.
While designing the UI-UX, people forget the simple norm of general to specific shifting. As the complexity increases and so does the approach become more difficult, this is where the designing of the wireframes comes in handy.
Before diving into the “How to”, let’s first see why we need them in the first place.
What are mobile app wireframes?
Wireframes are the skeletal layouts of an application or a website that is being designed. The specificity comes into play, the elements and the features have to be placed at specific locations. Take a building, in the process of making it, first the foundation is laid and then pieces are fitted together from the skeleton structure on a piece of paper, wireframes do the same for the website or application structure such as a smart home application.
The designing of wireframes is commonly known as wireframing. For the construction of a building, the framework or the skeletal structure is important while designing a web application or mobile application, wireframing is important to make it user-friendly. This entirely and solely works to make the journey smooth and destination easy to reach.
As for the building, the layers of cementing and painting is done later to increase the visual appeal, the visual contents and appealing stuff are added after wireframing. The simpler it sounds after the definition, the complex it gets when it is being done.
It is a very goal-oriented procedure, one has to keep in mind is the goal of the product or the destination of the service. The main focus should be on UX. The arrangement of the elements and their interaction with each other and with the user is the utmost important task in mobile app wireframing.
What not to do while designing the mobile app wireframe?
- Do not even think of skipping the process.
- Do not beautify (visually appealing designs added first) and then get into the wireframing business).
- Do not do it just for the sake of doing it.
One has to keep in mind that skipping this entirely can lead to the failure of the entire process of web and mobile app development at the end.
Again taking the example of the construction of a building, the foundation must be laid first based on the skeletal framework that has been prepared, then only you can jump to beautify your building, as a designer one has to understand and follow the steps where designing the mobile app wireframe comes first and then the visually appealing content is added next not the other way round.
For the most part, people do not understand the importance and come up with some trashy design of wireframes and the main foundation becomes faulty, hence the entire designing at later stages becomes faulty. If one wants to skip the reworking part, mobile app wireframing must never be ignored.
#android app #ios app #minimum viable product (mvp) #mobile app development #app designing #mobile app wireframe designing #mobile app wireframing #mobile application wireframing #mobile wireframing #web app wireframing #wireframe designing
1618254581
Activate a Device - Netflix.com/activate, roku.com/link, amazon.com/mytv
geeksquad.com/chat-with-an-agent
walmart.capitalone.com/activate
#netflix.com/activate #roku.com/link #amazon.com/mytv #primevideo.com/mytv #samsung.com/printersetup
1611609121
Quick Pay Portal | www.quickpayportal.com | www.quickpayportal.com
Pay Medical Bills your bills @https://sites.google.com/view/www-quickpayportal-com/
It is really very easy to pay your bills at [priviabillpay.com](https://sites.google.com/view/www-quickpayportal-com/ "priviabillpay.com"). First of all, patients will have to go to the official Privia Medical Community Online portal . Patients can use the quick pay code of priviabillpay.com to make a one-time payment. On the first page of your statement, the QuickPay code is found. Using Priviabillpay to follow a few steps to get paid.
First of all, you must visit the official portal at [www.priviabillpay.com](https://sites.google.com/view/www-quickpayportal-com/ "www.priviabillpay.com")
In the box, fill out the QuickPay Code and tap Make a Payment.
You will be redirected to a page showing all your current rates.
Now select the fees you want to pay and click the check box that you want to accept quickly.
Finally, click on the payment option button.
Your payment details will be asked on the screen.
Fill out the field required and submit your payment.
Our Official Website : https://sites.google.com/view/www-quickpayportal-com/#www.priviabillpay.com #www-quickpayportal-com #quickpayportal.com #www.quickpayportal.com. #quickpayportal.com.
1620761928
Figma design kit built to integrate with Tailwind CSS
Hey everyone ✌🏻
Together with my friend, we developed a design kit in Figma specifically to be integrated with Tailwind CSS, a trending new utility first CSS framework.
You can find more information about the Tailwind CSS Figma design kit on Flowbite.
It’s open source 💙
#tailwind #figma #tailwind-figma #tailwind-ui #figma-ui #figma-ui-kit