{"id":222,"count":0,"description":"","link":"https:\/\/cortecerto.com\/es\/glossary\/wireframe\/","name":"Wireframe","slug":"wireframe","taxonomy":"glossaries","parent":0,"meta":{"status":["1"],"order":["0"],"glossary_term_description":["

Wireframe \u00e9 o prot\u00f3tipo de uma interface. \u00c9 uma ideia visual de como poderia ficar determinada tela de um programa de computador para atender aos requisitos solicitados. Mais frequentemente usado em refer\u00eancia ao desenvolvimento de websites, \u00e9 um termo t\u00e9cnico comum tamb\u00e9m para qualquer tipo de aplicativo.<\/span><\/p>\n

Pode-se dizer que o wireframe serve adicionalmente de escopo visual das tarefas que o desenvolvedor do programa ter\u00e1 pela frente, mas j\u00e1 considerando aspectos como o da usabilidade, atrav\u00e9s da distribui\u00e7\u00e3o racional de bot\u00f5es, menus de intera\u00e7\u00e3o e outros objetos. A coer\u00eancia gr\u00e1fica com o todo \u00e9 outro desses aspectos levados em conta, mesmo sendo um desenho b\u00e1sico, que dever\u00e1 ainda passar pelo trabalho de um designer.<\/span><\/p>\n

 <\/p>\n

<\/p>\n

Como prot\u00f3tipo, o wireframe \u00e9 pass\u00edvel de ser rejeitado, sendo, nesse caso, essa a sua grande utilidade: a de expor por antecipa\u00e7\u00e3o um erro, uma inconformidade, uma inadequa\u00e7\u00e3o que, futuramente, poderia trazer transtornos diversos e retrabalho.<\/span><\/p>\n

 <\/p>\n

No exemplo abaixo uma ideia em Wireframe para o visualizador dos planos de corte do Corte Certo que foi rejeitada:<\/span><\/p>\n

\"wireframe\"<\/div>\n

A inten\u00e7\u00e3o era que as diferentes etapas de corte pudessem ser identificadas por cores, mas com prot\u00f3tipo ficou f\u00e1cil concluir que a solu\u00e7\u00e3o n\u00e3o era a ideal, entre outras raz\u00f5es, porque em placas com bem mais etapas come\u00e7ariam a faltar cores claramente diferentes.<\/span><\/p>\n

Simples l\u00e1pis\/caneta e papel t\u00eam sido as ferramentas mais usuais na cria\u00e7\u00e3o de wireframes, e mesmo quando disp\u00f5e de softwares espec\u00edficos para essas tarefas, grande parte dos desenvolvedores de interfaces prefere come\u00e7ar pelos esbo\u00e7os em papel para primeira valida\u00e7\u00e3o. Alguns especialistas preferem referir-se a esses esbo\u00e7os como \u201cprot\u00f3tipos em papel\u201d ou \u201cprototipagem em papel\u201d, dando a entender assim que o wireframe seria algo que j\u00e1 se pode avaliar em tela, eventualmente com alguma funcionalidade, mesmo que b\u00e1sica, como a de links clic\u00e1veis e op\u00e7\u00e3o de arrastar objetos.<\/span><\/p>\n

Em comum esses especialistas t\u00eam a opini\u00e3o de que wireframe n\u00e3o \u00e9\u00a0layout<\/em>, no sentido de que tem por objetivo mostrar a funcionalidade e n\u00e3o o aspecto gr\u00e1fico de uma aplica\u00e7\u00e3o. \u00c9 por isso que esses mesmos especialistas recomendam usar as cores com parcim\u00f4nia, evitando que o foco da an\u00e1lise do wireframe (a intera\u00e7\u00e3o do usu\u00e1rio com os elementos presentes na p\u00e1gina) se desprenda para a prefer\u00eancia por esta ou aquela cor.<\/span><\/p>\n

Claro que cada caso \u00e9 um caso, como bem demonstra o exemplo da tela do Corte Certo. Veja tamb\u00e9m:\u00a0Interface\u00a0e\u00a0Usabilidade.<\/span> <\/p>\n"]},"yoast_head":"\nWireframe archivos - Corte Certo - Software para Otimiza\u00e7\u00e3o de Planos de Corte<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cortecerto.com\/es\/glossary\/wireframe\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Wireframe archivos - Corte Certo - Software para Otimiza\u00e7\u00e3o de Planos de Corte\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cortecerto.com\/es\/glossary\/wireframe\/\" \/>\n<meta property=\"og:site_name\" content=\"Corte Certo - Software para Otimiza\u00e7\u00e3o de Planos de Corte\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"CollectionPage\",\"@id\":\"https:\\\/\\\/cortecerto.com\\\/es\\\/glossary\\\/wireframe\\\/\",\"url\":\"https:\\\/\\\/cortecerto.com\\\/es\\\/glossary\\\/wireframe\\\/\",\"name\":\"Wireframe archivos - Corte Certo - Software para Otimiza\u00e7\u00e3o de Planos de Corte\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/cortecerto.com\\\/es\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/cortecerto.com\\\/es\\\/glossary\\\/wireframe\\\/#breadcrumb\"},\"inLanguage\":\"es\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/cortecerto.com\\\/es\\\/glossary\\\/wireframe\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/cortecerto.com\\\/es\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Wireframe\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/cortecerto.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/cortecerto.com\\\/es\\\/\",\"name\":\"Corte Certo - Software para Otimiza\u00e7\u00e3o de Planos de Corte\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/cortecerto.com\\\/es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/cortecerto.com\\\/es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/cortecerto.com\\\/es\\\/#organization\",\"name\":\"Corte Certo - Software para Otimiza\u00e7\u00e3o de Planos de Corte\",\"url\":\"https:\\\/\\\/cortecerto.com\\\/es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/cortecerto.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/cortecerto.com\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/logo-corte-certo-branco.png\",\"contentUrl\":\"https:\\\/\\\/cortecerto.com\\\/wp-content\\\/uploads\\\/2022\\\/10\\\/logo-corte-certo-branco.png\",\"width\":2560,\"height\":293,\"caption\":\"Corte Certo - Software para Otimiza\u00e7\u00e3o de Planos de Corte\"},\"image\":{\"@id\":\"https:\\\/\\\/cortecerto.com\\\/es\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Wireframe archivos - Corte Certo - Software para Otimiza\u00e7\u00e3o de Planos de Corte","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cortecerto.com\/es\/glossary\/wireframe\/","og_locale":"es_ES","og_type":"article","og_title":"Wireframe archivos - Corte Certo - Software para Otimiza\u00e7\u00e3o de Planos de Corte","og_url":"https:\/\/cortecerto.com\/es\/glossary\/wireframe\/","og_site_name":"Corte Certo - Software para Otimiza\u00e7\u00e3o de Planos de Corte","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"CollectionPage","@id":"https:\/\/cortecerto.com\/es\/glossary\/wireframe\/","url":"https:\/\/cortecerto.com\/es\/glossary\/wireframe\/","name":"Wireframe archivos - Corte Certo - Software para Otimiza\u00e7\u00e3o de Planos de Corte","isPartOf":{"@id":"https:\/\/cortecerto.com\/es\/#website"},"breadcrumb":{"@id":"https:\/\/cortecerto.com\/es\/glossary\/wireframe\/#breadcrumb"},"inLanguage":"es"},{"@type":"BreadcrumbList","@id":"https:\/\/cortecerto.com\/es\/glossary\/wireframe\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/cortecerto.com\/es\/"},{"@type":"ListItem","position":2,"name":"Wireframe"}]},{"@type":"WebSite","@id":"https:\/\/cortecerto.com\/es\/#website","url":"https:\/\/cortecerto.com\/es\/","name":"Corte Certo - Software para Otimiza\u00e7\u00e3o de Planos de Corte","description":"","publisher":{"@id":"https:\/\/cortecerto.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cortecerto.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/cortecerto.com\/es\/#organization","name":"Corte Certo - Software para Otimiza\u00e7\u00e3o de Planos de Corte","url":"https:\/\/cortecerto.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/cortecerto.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/cortecerto.com\/wp-content\/uploads\/2022\/10\/logo-corte-certo-branco.png","contentUrl":"https:\/\/cortecerto.com\/wp-content\/uploads\/2022\/10\/logo-corte-certo-branco.png","width":2560,"height":293,"caption":"Corte Certo - Software para Otimiza\u00e7\u00e3o de Planos de Corte"},"image":{"@id":"https:\/\/cortecerto.com\/es\/#\/schema\/logo\/image\/"}}]}},"glossary_term_description":"<p style=\"text-align:start;\"><span style=\"color: rgb(51,66,85);background-color: rgb(252,252,252);font-size: 15px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\">Wireframe \u00e9 o prot\u00f3tipo de uma interface. \u00c9 uma ideia visual de como poderia ficar determinada tela de um programa de computador para atender aos requisitos solicitados. Mais frequentemente usado em refer\u00eancia ao desenvolvimento de websites, \u00e9 um termo t\u00e9cnico comum tamb\u00e9m para qualquer tipo de aplicativo.<\/span><\/p>\n<p style=\"text-align:start;\"><span style=\"color: rgb(51,66,85);background-color: rgb(252,252,252);font-size: 15px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\">Pode-se dizer que o wireframe serve adicionalmente de escopo visual das tarefas que o desenvolvedor do programa ter\u00e1 pela frente, mas j\u00e1 considerando aspectos como o da usabilidade, atrav\u00e9s da distribui\u00e7\u00e3o racional de bot\u00f5es, menus de intera\u00e7\u00e3o e outros objetos. A coer\u00eancia gr\u00e1fica com o todo \u00e9 outro desses aspectos levados em conta, mesmo sendo um desenho b\u00e1sico, que dever\u00e1 ainda passar pelo trabalho de um designer.<\/span><\/p>\n<p style=\"text-align:start;\"> <\/p>\n<p style=\"text-align:start;\"><\/p>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(51,66,85);background-color: rgb(252,252,252);font-size: 15px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\">Como prot\u00f3tipo, o wireframe \u00e9 pass\u00edvel de ser rejeitado, sendo, nesse caso, essa a sua grande utilidade: a de expor por antecipa\u00e7\u00e3o um erro, uma inconformidade, uma inadequa\u00e7\u00e3o que, futuramente, poderia trazer transtornos diversos e retrabalho.<\/span><\/p>\n<p style=\"margin-left:0px;\"> <\/p>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(51,66,85);background-color: rgb(252,252,252);font-size: 15px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\">No exemplo abaixo uma ideia em Wireframe para o visualizador dos planos de corte do Corte Certo que foi rejeitada:<\/span><\/p>\n<div style=\"text-align:left;\"><img src=\"https:\/\/cortecerto.com\/wp-content\/uploads\/2014\/11\/wireframe-300x244.jpg\" alt=\"wireframe\" style=\"height: auto;width: \"\/><\/div>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(51,66,85);background-color: rgb(252,252,252);font-size: 15px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\">A inten\u00e7\u00e3o era que as diferentes etapas de corte pudessem ser identificadas por cores, mas com prot\u00f3tipo ficou f\u00e1cil concluir que a solu\u00e7\u00e3o n\u00e3o era a ideal, entre outras raz\u00f5es, porque em placas com bem mais etapas come\u00e7ariam a faltar cores claramente diferentes.<\/span><\/p>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(51,66,85);background-color: rgb(252,252,252);font-size: 15px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\">Simples l\u00e1pis\/caneta e papel t\u00eam sido as ferramentas mais usuais na cria\u00e7\u00e3o de wireframes, e mesmo quando disp\u00f5e de softwares espec\u00edficos para essas tarefas, grande parte dos desenvolvedores de interfaces prefere come\u00e7ar pelos esbo\u00e7os em papel para primeira valida\u00e7\u00e3o. Alguns especialistas preferem referir-se a esses esbo\u00e7os como \u201cprot\u00f3tipos em papel\u201d ou \u201cprototipagem em papel\u201d, dando a entender assim que o wireframe seria algo que j\u00e1 se pode avaliar em tela, eventualmente com alguma funcionalidade, mesmo que b\u00e1sica, como a de links clic\u00e1veis e op\u00e7\u00e3o de arrastar objetos.<\/span><\/p>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(51,66,85);background-color: rgb(252,252,252);font-size: 15px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\">Em comum esses especialistas t\u00eam a opini\u00e3o de que wireframe n\u00e3o \u00e9\u00a0<em>layout<\/em>, no sentido de que tem por objetivo mostrar a funcionalidade e n\u00e3o o aspecto gr\u00e1fico de uma aplica\u00e7\u00e3o. \u00c9 por isso que esses mesmos especialistas recomendam usar as cores com parcim\u00f4nia, evitando que o foco da an\u00e1lise do wireframe (a intera\u00e7\u00e3o do usu\u00e1rio com os elementos presentes na p\u00e1gina) se desprenda para a prefer\u00eancia por esta ou aquela cor.<\/span><\/p>\n<p style=\"margin-left:0px;\"><span style=\"color: rgb(51,66,85);background-color: rgb(252,252,252);font-size: 15px;font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\">Claro que cada caso \u00e9 um caso, como bem demonstra o exemplo da tela do Corte Certo. Veja tamb\u00e9m:\u00a0Interface\u00a0e\u00a0Usabilidade.<\/span> <\/p>\n","_links":{"self":[{"href":"https:\/\/cortecerto.com\/es\/wp-json\/wp\/v2\/glossaries\/222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cortecerto.com\/es\/wp-json\/wp\/v2\/glossaries"}],"about":[{"href":"https:\/\/cortecerto.com\/es\/wp-json\/wp\/v2\/taxonomies\/glossaries"}],"wp:post_type":[{"href":"https:\/\/cortecerto.com\/es\/wp-json\/wp\/v2\/docs?glossaries=222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}