Como começar sozinho com o UXPin
À medida que nos movemos para o campo do design móvel, design de aplicativos e design responsivo, houve um foco crescente em experiência do usuário (UX) e wireframing, prototipagem interativa e maquetes. Há uma tonelada de ferramentas voltadas para esse nicho e elas percorrem toda a gama de gigantes complexos e carregados de recursos até escassos e pouco úteis. Uma das ferramentas que chamou minha atenção é o UXPin simplesmente porque foi desenvolvido por designers para designers.
Antes de avançarmos … uma advertência. Se o seu é uma organização que prefere possuir o software, então o UXPin não é para você. Todo o trabalho feito neste aplicativo é feito no navegador e os projetos que você salva são salvos em sua conta.
Para começar a usar o UXPin, você inicia um navegador e vai para o UXPin. A partir daqui você pode se inscrever para uma avaliação gratuita ou organizar um plano mensal com base na sua necessidade antecipada. O processo de inscrição é muito fácil e, depois de definir seu nome de usuário e senha, você está pronto para começar.
Como iniciar um projeto no UXPin
Quando você faz o login, chega ao Dashboard e, a partir daqui, pode decidir criar um novo wireframe, um novo projeto para dispositivos móveis ou um projeto Responsive Web Design. Também há plug-ins para o UXPin que permitem que você traga seus projetos do Photoshop ou do Sketch. Para isso, como vou criar um banner com algum texto e adicionar um botão de e-mail ao banner. Para conseguir isso, selecionei Criar um novo wireframe.
Como usar a interface UXPin
A superfície de design é dividida em quatro áreas. Na área preta à esquerda, há uma série de ferramentas que permitem retornar ao painel, abrir os Elementos que você usará, abrir o painel Elementos inteligentes, procurar elementos, adicionar anotações à página e adicionar membros da equipe. Na parte inferior, há um botão que abre um breve tutorial, outro que permite que você acesse sua conta e outro que acesse as Perguntas frequentes. Você faz perguntas e até mesmo fornece feedback.
Na área azul ao longo do topo, há uma série de ferramentas e propriedades. Os botões mais escuros no lado direito permitem que você faça uma iteração de seu design, ajuste as configurações do projeto, compartilhe a página e faça uma simulação da página no navegador.
O painel de elementos é onde você pega os bits e peças para o Design Surface, nomeie seu projeto e adicione ou remova páginas.
A biblioteca Elements é uma surpresa agradável para os designers de UX. Este pop-down permite que você escolha entre 30 bibliotecas que vão do iOS ao Android Lolipop. Você também tem acesso aos elementos Bootstrap e Foundation junto com os ícones Font Awesome, ícones de gestos para dispositivos móveis e uma coleção de Widgets sociais.
04 de 09Como adicionar um elemento a uma página UXPin
Para começar, arrastei o elemento Box para a superfície de design e, quando eu solto o mouse, Painel Propriedades abre. O botão Propriedades permite nomear o elemento e definir os valores de altura e posição da largura do elemento. Você também pode adicionar preenchimento ao elemento, arredondar os cantos e ajustar sua opacidade. Clicar no botão Cor do plano de fundo abre um seletor de cores RGBA.
Você também pode atribuir uma fonte, borda e padrão ao elemento selecionado. O Lightning Bolt permite adicionar interatividade a um elemento selecionado.
05 de 09Como adicionar e formatar texto no UXPin
Para adicionar texto, arraste o elemento de texto para a superfície de design e insira seu texto. Clique na propriedade de texto botão para abrir as propriedades da fonte e formatar o seu texto. Se você precisar de um bloco de texto fictício, adicione um elemento de texto e clique no GERAR LOREM IPSUM botão nas propriedades da fonte.
06 de 09Como adicionar uma imagem a uma página UXPin
Existem algumas maneiras de realizar essa tarefa. Você pode usar o Ferramenta de Imagem na barra de ferramentas, adicione um elemento Image da Biblioteca ou simplesmente arraste e solte uma imagem de sua área de trabalho no elemento na superfície de design, como mostrado acima.
07 de 09Como adicionar um botão a uma página UXPin
Embora exista um elemento Button, digite “ Botão " no Procurar área, como mostrado acima, abre todos os botões encontrados em todas as bibliotecas. Arraste o que funciona para você na superfície de design e use as Propriedades para alterar a cor, a fonte e até mesmo o raio da Borda. Para alterar o texto dentro do botão, clique uma vez no texto e insira o novo texto.
08 de 09Como adicionar interatividade a uma página UXPin
Isso não é tão complicado quanto pode aparecer pela primeira vez. Para a entrada de email, adicionei um elemento de entrada, redimensionei, inseri o texto e formatei o texto. Com o elemento de entrada selecionado clique no botão Propriedades e, quando o Propriedades do elemento aparecer clique no Visibilidade botão - o globo ocular - no canto superior direito do painel.
Selecione o botão e clique no Botão de interações - o relâmpago nas propriedades. Quando o painel Interactions for aberto, selecione New Interaction. Selecione Clique no pop-up Disparador. Na área de ação, selecione Show Element. Você será perguntado agora qual Elemento exibir. Clique uma vez no gunsite e clique no elemento Input. Com o elemento identificado, você pode agora determinar se deseja ou não animar o elemento. Neste caso, decidi mostrar a caixa de entrada com facilidade e usei o valor de duração padrão de 300 ms.
Eu também quero que o botão mova cerca de 65 pixels para a direita quando for clicado. Selecionei o botão, abri o painel Interações e selecionei Nova interação. Eu usei estas configurações:
- DesencadearClique
- Açao: Mover por
- Mover Direção: 65 px no eixo x
- Animação: Linear
- Duração: 300 ms
Para remover uma interação, selecione o elemento e abra o painel Interações. Selecione a interação no painel e clique na Lixeira para excluí-la.
09 de 09Como testar sua página no UXPin
Devido ao fato de você estar trabalhando no navegador, o teste é muito simples. Clique no Simular design botão. A página será aberta no navegador e você poderá testar o caminho. Haverá também um painel adicionado ao lado esquerdo da página que permite Comentários, um Mapa do Site se houver várias páginas, Teste de Usabilidade, Compartilhamento ao Vivo, Edição e um retorno ao Painel.
Na parte inferior da página há outro pequeno painel que permite mostrar os elementos interativos, mostrar ou ocultar comentários e compartilhar o link do projeto com outras pessoas.
