{"id":81051,"date":"2024-08-07T19:54:27","date_gmt":"2024-08-07T19:54:27","guid":{"rendered":"https:\/\/mailrelay.com\/glossary\/mockup\/"},"modified":"2024-08-07T19:55:44","modified_gmt":"2024-08-07T19:55:44","slug":"mockup","status":"publish","type":"glossary","link":"https:\/\/mailrelay.com\/pt\/glossario\/mockup\/","title":{"rendered":"Mockup"},"content":{"rendered":"

O mockup \u00e9 uma amostra pr\u00e9via de como ser\u00e1 o design de um site ou produto antes de ele ser finalmente projetado. Seu principal uso \u00e9 mostrar ao cliente como ser\u00e1 o produto final antes de ser conclu\u00eddo.<\/p>\n

No web design, os mockups s\u00e3o usados na fase inicial do design para definir os conceitos e as ideias com base nos quais o site ser\u00e1 projetado e incluem a estrutura de navega\u00e7\u00e3o e outros elementos que fazem parte do design, em detalhes.<\/p>\n

Em geral, os mockups s\u00e3o criados com base em modelos e elementos predefinidos de programas de design gr\u00e1fico, al\u00e9m de ferramentas espec\u00edficas que permitem adicionar determinados elementos de controle e fun\u00e7\u00f5es simples de navega\u00e7\u00e3o.<\/p>\n

1. diferen\u00e7a entre wireframe e mockup<\/h2>\n

\u00c9 muito comum confundir os dois termos, wireframe e mockup, por isso \u00e9 interessante esclarecer cada um deles.<\/p>\n

Um wireframe \u00e9 um esbo\u00e7o de baixa qualidade. Trata-se de um conjunto de caixas cinzas e textos que s\u00e3o usados para, em um relance, ver como as informa\u00e7\u00f5es est\u00e3o organizadas na tela. Isso ajuda a ter uma ideia do que cada se\u00e7\u00e3o do site conter\u00e1 e sua estrutura em um n\u00edvel b\u00e1sico.<\/p>\n

Por outro lado, um mockup oferece maior qualidade e detalhamento, o layout \u00e9 muito mais detalhada com v\u00e1rios elementos gr\u00e1ficos, tipografias corretas e o uso de cores \u00e9 aplicado. \u00c9 um est\u00e1gio avan\u00e7ado do design.<\/p>\n

2. fases de elabora\u00e7\u00e3o de um mockup<\/h2>\n

O processo normalmente usado para criar um mockup de um site consiste em v\u00e1rias fases, que s\u00e3o:<\/p>\n