https://www.storyboardthat.com/pt/create/wireframes-vs-mockups

Wireframes vs Mockups


Comece seu Design

Wireframes vs Mockups

Ao projetar uma nova página da web ou adicionar um novo recurso ao seu produto, é importante criar wireframes e mockups - mas qual é a diferença? Em suma, um wireframe é uma abordagem minimalista e de baixa fidelidade a um conceito de design. Ele se concentra no layout central e apresenta uma nova página, mas deixa todo o flash para o modelo. Os modelos são de maior fidelidade e incluem ícones de cores, idiomas reais e verdadeiros. Um wireframe decide como uma maquete vai parecer, e uma maquete deve ser uma representação precisa e estática do produto final.


Wireframes


Crie um Design  






Mockups


Crie um Design  







3 Diferenças entre Wireframes e Mockups

  1. Cor

    A primeira grande diferença entre wireframes e mockups é a exibição de cores. Quando wireframing, é melhor intencionalmente ser sombrio com o seu esquema de cores, ou melhor ainda, mantê-lo totalmente preto e branco. Deixar a cor fora dos seus wireframes ajuda a evitar distrações ao planejar e focar no layout e design gerais da página. Para maquetes, faça o oposto. Jogue com esquemas de cores diferentes e encontre o que você deseja usar com o produto final. Cores de maquete devem aparecer e atrair o usuário.

  2. Estilo

    A próxima grande diferença é o estilo geral. Os wireframes tendem a ser muito orientados para a grade, com a maioria dos objetos sendo do mesmo tamanho ou proporcionais uns aos outros. Embora ainda seja bom seguir a abordagem da grade geral ao criar uma maquete, não há problema em soltar as regras um pouco. Confie em seus olhos e o que você acha que parece melhor. No geral, os wireframes devem seguir as diretrizes de estilo estritas, enquanto os mockups podem ter mais leniência para o que o designer acha que é o melhor ajuste.

  3. Língua

    Finalmente, a principal diferença entre wireframes e mockups é a linguagem usada. Quando wireframing, é melhor usar linguagem falsa ou de lugar como Lorum Ipsum . Novamente, o motivo para fazer isso é para que a equipe de desenvolvimento de produtos não seja distraída pela cópia da página da Web e, em vez disso, se concentre no design geral. Para maquetes, inclua a cópia real que você deseja que apareça na página. Ao incluir uma cópia real em maquetes, você dá a si mesmo e à equipe de desenvolvimento uma ideia de como o texto deve realmente renderizar no produto final e quanto espaço ele ocupa.

Crie um Design  


Preços

Apenas por mês por usuário!

/mês

cobrado anualmente

Veja a Página Completa de Preços



Eu não Posso Desenhar!

What if I can't draw?

  • Não se preocupe, nem nós podemos.
  • Temos mais de 1200 cenas pré-fabricadas e personagens para você usar!
  • Todas as nossas cenas e personagens são personalizáveis ​​e fáceis de editar!

Não Tenho Tempo!

What if I have No Time?

  • Nós sabemos! Estamos super ocupados também!
  • Criar com nossa plataforma é rápido e fácil com o nosso trabalho de arrastar e soltar.
  • Quando você se inscreve em uma conta, pode salvar seu trabalho e voltar e editá-lo a qualquer momento.

Eu Gosto de Comer Crayons!

I Like to eat crayons!

  • Não se preocupe, os pastéis não são tóxicos!
  • Se você encontrou essa piada, pelo menos sabemos que você está lendo isso ...
  • O que significa que você definitivamente vai querer uma avaliação gratuita de duas semanas


Crie um Design  

Storyboard That!


Procurando por Mais?

Verifique para fora o resto de nossos artigos e recursos do negócio!

Todos os recursos empresariais | Recursos de estratégia de negócios | Recursos de Marketing | Recursos de Design Gráfico | Recursos de desenvolvimento de produto | Recursos de treinamento e RH | Recursos de filme | Recursos de marketing de vídeo


Edições Especiais


NegóciosDesenvolvimento de ProdutoPersonasMapas de Jornada do ClienteWireframesInfográficosMarketing de VídeoFilmeQuadrinhos

Iniciar o meu Teste Gratuito
Iniciar o meu Teste Gratuito
https://www.storyboardthat.com/pt/create/wireframes-vs-mockups
© 2019 - Clever Prototypes, LLC - Todos os direitos reservados.
Explore Nossos Artigos e Exemplos

Recursos de filmes

Recursos de CinemaMarketing de Vídeo

Guias ilustrados

NegóciosEducação
Experimente os Nossos Outros Sites!

Photos for Class - Pesquisar School-Safe, Creative Commons Photos! ( Ele mesmo cita para você! )
Quick Rubric - Facilmente fazer e compartilhar grandes rubrics olhando!
Prefere um idioma diferente?

•   (English) Wireframes vs. Mockups   •   (Español) Wireframes vs Maquetas   •   (Français) Wireframes vs. Mockups   •   (Deutsch) Wireframes vs. Mockups   •   (Italiana) Wireframe vs. Mockup   •   (Nederlands) Wireframes Versus Mockups   •   (Português) Wireframes vs. Mockups   •   (עברית) Wireframes לעומת Mockups   •   (العَرَبِيَّة) Wireframes مقابل نماذج بالحجم الطبيعي   •   (हिन्दी) वायरफ्रेम बनाम मॉकअप   •   (ру́сский язы́к) Каркасы Против Макетов   •   (Dansk) Wireframes vs Mockups   •   (Svenska) Wireframes vs Mockups   •   (Suomi) Wireframes vs. Mockups   •   (Norsk) Wireframes vs Mockups   •   (Türkçe) Wireframe'ler ve Maketler   •   (Polski) Modele Szkieletowe a Makiety   •   (Româna) Wireframe vs. Mockups   •   (Ceština) Drátové Modely vs Mockups   •   (Slovenský) Drôtové Modely vs Mockups   •   (Magyar) Wireframes vs. Mockups   •   (Hrvatski) Wireframes vs Mockups   •   (български) Wireframes Срещу Mockups   •   (Lietuvos) Wireframes vs Mockups   •   (Slovenščina) Wireframes vs Mockups   •   (Latvijas) Wireframes vs Mockups   •   (eesti) Wireframes vs Mockups