Protótipos perfeitos e desenhos de mão com Marvel

Sep 11, 2025
Como
A person sat in a cafe using Marvel on their laptop and displaying a finished prototype on their smartphone.

Com uma curva de aprendizagem mais curta do que a Invision App e as novas ferramentas de design de design de design para equipes corporativas, não há melhor momento para explorar como a Marvel pode ser uma solução rápida e sem esforço para prototipagem da Web e aplicativos móveis em equipes.

Marvel ajuda as equipes a tomar seus projetos (feitos em esboço ou se maravilharão) da ideia esboçada para inicializar o conceito testado. Suas ferramentas colaborativas incentivam as partes interessadas não apenas para dizer, mas fazer parte do fluxo de trabalho de design.

01. Crie seu primeiro projeto da Marvel

Marvel's new design screen, indicating the locations of the buttons to create new designs.

Depois de pegar seu projeto, clique em um dos dois botões para iniciar o processo de design

Inscreva-se na Marvel para começar, onde apenas o seu nome e endereço de e-mail são necessários. Escolha projeto de projeto ou projeto de protótipo. Um projeto de protótipo é quando você carrega telas que você já projetou (geralmente no esboço). Um projeto de design é quando você está começando do zero e gostaria de usar as próprias ferramentas de design da Marvel para criar um maquete de baixa fidelidade (esta é uma opção incrível para rápida iteração e brainstorming).

Escolha o projeto de projeto e, em seguida, dê um nome e escolha o iPhone X e clique no botão Criar projeto. A partir daqui (vamos chamar isso do painel do projeto daqui), clique no botão Design no lado esquerdo ou no botão Iniciar projetar no meio da janela.

02. Projetar protótipos de baixa fidelidade

Marvel's protoyping screen, showing how easy it is to add mocked up components, include smartphone camera screens.

Você pode usar e adaptar componentes prontos, como esta tela da câmera

Nosso objetivo principal aqui é visualizar nossas idéias rapidamente sem desperdiçar muito tempo se preocupando com o que o resultado final será. A partir daqui, somos capazes de criar formas, imagens, texto, componentes prontos, como barras de tabulação, e até mesmo componentes inteiros de tela inteira, como esta tela da câmera (que foi selecionada a partir da barra lateral esquerda e restyled usando a mão direita Barra Lateral).

Desenho de formas, criando camadas de texto e fazendo alterações visuais simples é bastante fácil para um desenhista, embora designers experientes vão adorar a rapidez com que eles são capazes de jogar uma ideia juntos e clicar no botão Adicionar ao Projeto.

Embora você não possa esperar desenho vetorial, mascaramento e outras ferramentas de design complexas, esta interface, no entanto, se sentirá bastante familiar se você é um desenho, o usuário do Adobe XD ou FIGMA (na verdade, discutiremos a importação de desenhos de maior fidelidade do esboço em um momento). O que você pode esperar é zoom, alinhamento, agrupamento, ferramentas básicas de design visual, controles do mouse, como arrastando, redimensionando e girando e alguns atalhos de teclado acessíveis.

03. Receber comentários

No entanto, Marvel não é apenas para designers. Embora possa exigir que um designer crie o design final em um aplicativo de design padrão do setor, as ideias devem (e fazer) vêm de todos os tipos de stakeholders (gerentes, clientes, desenvolvedores e assim por diante).

Não importa qual seja o seu papel principal em uma equipe, deve ser super fácil de dizer: "Ei, isso poderia ser uma ideia?", E então demonstre que visualmente. Marvel's. Pop Aplicativo móvel reduz a barreira da entrada ainda mais, trazendo essas ferramentas de design simplificadas para dispositivos móveis, porque, vamos enfrentá-lo, as ideias podem nos vir nos mais estranhos dos tempos. Idéias esboçadas no papel podem ser convertidas em uma tela de maravilha interativa usando a câmera do dispositivo. O design precisa ser democratizado, onde qualquer um pode ter uma diga sem ser restrito a usar aplicativos de design complexos.

04. Integrar maravilhoso com esboço

Depois de dar forma produtiva ideias de baixa fidelidade com sua equipe, você vai querer zombar da primeira iteração em seu aplicativo de design de escolha. Enquanto você pode fazer upload totalmente exportado png telas de qualquer aplicativo de design, o esboço é o aplicativo recomendado porque há um plugin dedicado de esboço que automatiza o processo (e até mesmo sedie o design para que ele possa ser inspecionado pelos desenvolvedores mais tarde). O suporte do Photoshop for Design Handoff virá mais tarde, no entanto A Adobe não está mais atrasando o Photoshop para o design da interface do usuário, já que criou o Adobe XD.

Do painel, clique em Configurações e GT; Integrações & GT; Plugin de esboço e, em seguida, baixar o plugin. Depois de instalar, e seu arquivo de design abre, pressione a sincronização selecionada ou sincronize todos os botões na barra da Marvel (aparece acima da lista de camadas) para começar a escolher um projeto da Marvel para sincronizar as telas.

05. Interações Prototype

Marvel screen showing how you can create interactions, for example placing your thumb on the thumbprint scanner to progress to the next screen.

Arrastar regiões para criar hotspots para vincular uma tela para outra

Mas é claro que não podemos testar protótipos se não tivermos interações para eles, então vamos fazer isso agora. Voltando para o painel da Marvel, onde você verá as telas que sincronizamos, clique em Exibir em qualquer uma das telas para entrar no modo de tela.

A partir daqui, ainda podemos navegar pelas telas usando as setas esquerda e direita em ambos os lados da janela, clique em Timer para ter o ciclo da Marvel através das telas após um certo número de segundos (úteis para apresentações!), Ou clique em Nenhum comentário para adicionar seu primeiro comentário ou anotação na tela.

Provavelmente a primeira coisa que você notará é o cabeçalho fixo e os botões de rodapé fixo que aparecem perto dos cantos superior esquerdo e esquerdo da tela, respectivamente. Estes botões são arrastados e também podem ser movidos para marcar a região de corte de uma seção de cabeçalho que é para ficar fixada no topo de uma viewport rolável. Você também pode usar os campos de texto no canto superior direito e direito para especificar esse valor manualmente.

Mas como nós realmente vínculos uma tela a outra? Simples: Com o mouse, arraste, selecione uma região na tela que é vincular a outra tela (isso é chamado de 'hotspot'). Depois de ter feito isso, uma interface aparecerá na parte inferior da janela que permite personalizar onde o usuário é realizado, qualquer transição que acontece durante a interação e que gesto é necessário para ativar essa interação (Tap, deslize, etc. ).

E, claro, podemos usar essas ferramentas de prototipagem mesmo em maquetes de baixa fidelidade. Na verdade, é recomendável que você faça, o mesmo usando os recursos de comentário para discutir e reiterar.

06. entregando desenhos para os desenvolvedores

A screen grab of Marvel showing how easy it is for developers to access detailed information from handed off designs, such as the positions and sizes of each element.

Handoff de design torna fácil para o design e desenvolvedor trabalhar uns com os outros

Quando sua equipe mantém a plena confiança no design final, validado usando as ferramentas de teste de comentário e usuário, é hora de entregá-lo aos desenvolvedores que podem então inspecionar e codificar. É importante lembrar que um designer não é 'feito' uma vez que o design é entregue e que os designers e desenvolvedores devem sempre se comunicar em harmonia para supervisionar o desenvolvimento até sua conclusão. O desenvolvedor também pode ter algumas perguntas, então aqueles recursos de comentário ainda devem ser muito ativos.

Clique no botão Reproduzir e clique em HANDOFF no canto inferior esquerdo para abrir a interface do HANDOFF de design. A partir daqui, os desenvolvedores poderão clicar nos elementos de design e inspecionar os estilos individuais que os tornam o que são, usando a barra lateral no lado direito (muito parecido com a interface do inspetor no esboço, Figma ou Adobe XD). A única diferença aqui é que os desenvolvedores são capazes de clicar no botão Copiar para copiar os estilos como código para a área de transferência.

Este artigo foi originalmente publicado em questão 301 da rede, a revista mais vendida do mundo para web designers e desenvolvedores. Comprar Edição 301. ou Inscreva-se na Net. .

Obter mais insight sobre prototipagem iterativa

Generate NYC 2018 runs from the 25th-27th April 2018

Marisa Morby está dando a sua conversa Descubra como o teste de protótipo iterativo ajudará você a criar um design vencedor, toda vez em gerar Nova York de 25 a 27 de abril de 2018

Quando a maioria das empresas precisa criar um novo design web, o processo geralmente começa com idéias de arremesso, move-se para projetar, então o desenvolvimento e, em seguida, vive. Mas e se não funcionar? Isso é muito tempo, esforço e dinheiro para gastar apenas para descobrir que uma ideia realizada mal.

Felizmente, em sua conversa em Gere Nova York de 25-27 de abril de 2018 , Marisa Morby, chefe de pesquisa na Clearhead, mostrará uma maneira melhor de criar e validar novos projetos que é mais rápido, mais fácil e menos dispendioso do que o processo de design tradicional usando prototipagem e teste iterativo.

Gerar Nova York ocorre de 25 a 27 de abril de 2018. Obtenha seu ingresso agora .

Artigos relacionados:

  • 10 ferramentas de prototipagem superior
  • As 18 melhores ferramentas de wireframe
  • Como evitar prototipagens armadilhas

Como - Artigos mais populares

Comece com a plataforma de animação Greensock

Como Sep 11, 2025

A plataforma de animação Greensock (GSAP) permite animar qualquer coisa que você possa acessar com JavaScript, incluindo Dom, ..

Alimente seus menus usando animação com CSS

Como Sep 11, 2025

É através da animação que fazemos sentido do mundo: as portas se abrem, os carros dirigem para seus destinos, os lábios se e..

Design Graphics SVG no seu navegador

Como Sep 11, 2025

O Editor VECTEEZY. é uma suíte de edição de vetor livre que é executada no seu navegador. Este tutorial cobre..

Como começar a pintura a óleo

Como Sep 11, 2025

Pintura com óleos é uma maneira emocionante de criar arte. No entanto, muitas pessoas podem ser intimidadas pelo meio de tintas a óleo, quando, na verdade, proporciona a maneira ideal de a..

Textura Um Authentically Worn K-2SO Droid

Como Sep 11, 2025

Pagina 1 de 2: Página 1 Página 1 Pági..

5 dicas para esculpir em tempo duplo rápido

Como Sep 11, 2025

Esculpir uma criatura 3D realmente detalhada pode levar dias - mas ainda é incrível quão longe você pode chegar em uma hora. Este modelo de Nubian ibex foi esculpido por Krystal S..

Criar cópias digitais de qualidade da sua arte

Como Sep 11, 2025

A arte não é apenas para criar, também é sobre compartilhar. Uma vez que você fez um belo trabalho, você é orgulhoso, é natural que você vai querer que os outros também vêem. Exist..

5 maneiras de gerenciar o fluxo de caixa efetivamente

Como Sep 11, 2025

Controlar seu fluxo de caixa é a chave para o sucesso freelance, e há algumas regras duras e rápidas para garantir que você f..

Categorias