{"id":46,"date":"2019-09-11T10:56:40","date_gmt":"2019-09-11T10:56:40","guid":{"rendered":"http:\/\/www.webolto.com\/pt\/?p=46"},"modified":"2020-05-21T19:30:58","modified_gmt":"2020-05-21T19:30:58","slug":"criando-modelos-de-seu-site","status":"publish","type":"post","link":"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/","title":{"rendered":"Criando modelos para o seu site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface"},"content":{"rendered":"<p><img decoding=\"async\" style=\"margin: 5px 0px 0px 20px\" src=\"\/wp-content\/uploads\/2019\/07\/mockup-wireframe.png\" alt=\"Exemple wireframe Balsamiq\" width=\"380\" align=\"right\" \/><\/p>\n<div style=\"text-align: justify\">\n<p>O design de maquetes\/ modelos \u00e9 uma etapa cr\u00edtica na cria\u00e7\u00e3o do seu site. Dessa forma, para que o website seja agrad\u00e1vel, \u00e9 necess\u00e1rio prestar especial aten\u00e7\u00e3o ao design gr\u00e1fico, mas tamb\u00e9m \u00e0 efici\u00eancia desse mesmo site. Precisar\u00e1 de criar um layout inteligente, que seja adequado ao seu p\u00fablico-alvo e responda \u00e0s suas necessidades.<\/p>\n<p>Assim, a realiza\u00e7\u00e3o de modelos para websites deve passar por v\u00e1rias etapas, desde o design funcional, a preto e branco, at\u00e9 ao design gr\u00e1fico, integrando a sua identidade e as cores. Logo, neste artigo, forneceremos todas as chaves para ter sucesso nesta etapa fundamental, que est\u00e1 presente em todos os projetos de cria\u00e7\u00e3o de sites de alta qualidade.<\/p>\n<p>Quem dever\u00e1 preparar o modelo do site? Voc\u00ea, uma ag\u00eancia profissional ou o seu estagi\u00e1rio (m\u00e1 ideia!). N\u00e3o se esque\u00e7a que ter ideias claras sobre o o seu projeto online \u00e9 muito \u00fatil para orientar a fase de design da maquete, iniciando assim o seu projeto do website.<\/p>\n<\/div>\n<div class=\"spacer1\"><\/div>\n<p>&nbsp;<\/p>\n<div class=\"bloc-tips\">\n<p><i class=\"fa fa-book\"><\/i><span class=\"title is-5\">Vis\u00e3o Geral<\/span><\/p>\n<ul>\n<li><a href=\"#h2_1\" rel=\"noopener\">A prepara\u00e7\u00e3o de modelos de p\u00e1gina, uma etapa fundamental na cria\u00e7\u00e3o do site <\/a><\/li>\n<li><a href=\"#h2_2\" rel=\"noopener\">Escolha a melhor ferramenta para criar modelos do site <\/a><\/li>\n<li><a href=\"#h2_3\" rel=\"noopener\">Da exibi\u00e7\u00e3o em \u00e1rvore aos modelos do Photoshop dos sites <\/a><\/li>\n<li><a href=\"#h2_4\" rel=\"noopener\">Conclus\u00e3o<\/a><\/li>\n<\/ul>\n<\/div>\n<div class=\"spacer1\"><\/div>\n<h2 id=\"h2_1\" align=\"left\">Prepara\u00e7\u00e3o de modelos de p\u00e1gina, uma etapa fundamental na cria\u00e7\u00e3o do site<\/h2>\n<h3>Wireframe, layout ergo, maquete ou interface gr\u00e1fica: do que estamos a falar exatamente?<\/h3>\n<div style=\"text-align: justify\">Os profissionais de Web geralmente s\u00e3o criativos, em termos de sem\u00e2ntica. Existem cerca de dez termos diferentes para descrever modelos de um site. O mais popular \u00e9 provavelmente o wireframe, mas j\u00e1 ouviu falar de um layout ergo ou de um modelo wireframe, por exemplo? Contudo, essa riqueza sem\u00e2ntica n\u00e3o deve ocultar o essencial: o termo maquete engloba duas realidades, que s\u00e3o completamente distintas.<\/div>\n<h4>O modelo funcional (estrutura wireframe)<\/h4>\n<div style=\"text-align: justify\">\n<p>Este modelo \u00e9 a defini\u00e7\u00e3o do layout da p\u00e1gina em preto e branco, bem como da organiza\u00e7\u00e3o de v\u00e1rios elementos, at\u00e9 aos seus textos principais. \u00c9 esse tipo de modelo que chamamos de wireframe, layout ergo ou de mock-up. O termo mock-up qualifica precisamente um modelo funcional de escala 1 para 1. O termo \u201czoning\u201d refere-se a um modelo funcional, que \u00e9 constitu\u00eddo apenas por blocos, send este o primeiro est\u00e1gio do wireframe.<\/p>\n<p>O wireframe fornecido aqui foi preparado, ap\u00f3s ser usado o software Balsamiq.<\/p>\n<\/div>\n<h4>Artwork model &#8211; Modelo art\u00edstico (Photoshop)<\/h4>\n<div style=\"text-align: justify\">Uma extens\u00e3o do modelo funcional, o modelo de artwork, com as cores e a identidade da sua empresa. \u00c9 uma representa\u00e7\u00e3o precisa da p\u00e1gina da web, que mais tarde precisar\u00e1 de ser integrada (= codificada em HTML\/ CSS) pelos desenvolvedores. Com exce\u00e7\u00e3o, por vezes, dos textos, que geralmente ainda s\u00e3o textos fict\u00edcios (lorem ipsum). Geralmente, os modelos de artwork s\u00e3o produzidos atrav\u00e9s do Adobe Photoshop (ou pelo Illustrator).<\/div>\n<h3>Porque necessita de preparar cuidadosamente as maquetes do seu site?<\/h3>\n<div style=\"text-align: justify\">\n<p>Alterar o lay out da p\u00e1gina, ou a identidade gr\u00e1fica de um site, n\u00e3o \u00e9 uma decis\u00e3o f\u00e1cil ou r\u00e1pida. Assim, mesmo que o site esteja a ser constru\u00eddo com a ajuda de um software de cria\u00e7\u00e3o de sites, este \u00e9 um trabalho bastante dif\u00edcil.<\/p>\n<p>Logo, como podemos obter modelos gr\u00e1ficos eficazes e funcionais? Primeiro, reserve um tempo para criar corretamente modelos funcionais, para todas as p\u00e1ginas principais. Idealmente, dever\u00e1 interagir com esses modelos funcionais: preparar uma primeira vers\u00e3o, pedir uma opini\u00e3o, refazer o wireframe, pedir opini\u00f5es novamente e assim por diante.<\/p>\n<p>Esta quest\u00e3o tem um significado diferente, dependendo da maneira como o site \u00e9 desenvolvido. Se a cria\u00e7\u00e3o do site for confiada a um prestador de servi\u00e7os, a ag\u00eancia da web deve ser convidada a preparar modelos funcionais, bem antes de iniciar o desenvolvimento do site.<\/p>\n<p>Ao contr\u00e1rio do que se possa pensar, as ag\u00eancias profissionais na constru\u00e7\u00e3o de sites tentam realizar projetos o mais rapidamente poss\u00edvel, para n\u00e3o estarem a trabalhar em muitos projetos simultaneamente. Consequentemente, o wireframing \u00e9 feito de forma r\u00e1pida, com uma \u00fanica comunica\u00e7\u00e3o com o cliente.<\/p>\n<p>Por isso mesmo, se est\u00e1 a desenvolver o site, a dificuldade \u00e9 de for\u00e7ar a preparar os modelos funcionais, antes de criar a p\u00e1gina com a ajuda da interface do CMS. Muitas vezes, temos a impress\u00e3o de ter uma ideia suficientemente clara do lay out da p\u00e1gina, para poupar o trabalho de wireframing. Contudo, a menos que seja um designer experiente em UX, os retornos que podem ser obtidos, com base num modelo funcional simples, s\u00e3o de extrema import\u00e2ncia.<\/p>\n<\/div>\n<h2 id=\"h2_2\" align=\"left\">White Paper, Visio, Powerpoint, Photoshop ou Balsamiq: qual \u00e9 o melhor para criar modelos de sites?<\/h2>\n<h3>Solu\u00e7\u00f5es tradicionais<\/h3>\n<div style=\"text-align: justify\">Para criar os modelos funcionais de um site, muitas ag\u00eancias ainda usam solu\u00e7\u00f5es que podem ser descritas como tradicionais, na era do software SaaS. Essas solu\u00e7\u00f5es t\u00eam a desvantagem de n\u00e3o facilitarem o gerenciamento de propor\u00e7\u00f5es, o que \u00e9 sempre restritivo quando precisa de pensar no lay out da p\u00e1gina, envolvendo muitos formatos de dispositivos, como o celular\/ telem\u00f3vel, por exemplo.<\/div>\n<ul>\n<li><b>Papel:<\/b> embora a m\u00e9dia de idades dos profissionais de web esteja entre 30 a 50 anos, ainda existem muitos defensores fervorosos de modelos funcionais no papel. R\u00e1pidas, acess\u00edveis, flex\u00edveis, estas s\u00e3o as vantagens do papel para o wireframing, entre muitas outras.<\/li>\n<li><b>Microsoft Visio:<\/b> integrado no Office Pro, este software permite a prepara\u00e7\u00e3o de diagramas comerciais complexos. \u00c9 amplamente utilizado por empresas de servi\u00e7os de software e computa\u00e7\u00e3o, para representar arquiteturas de engenharia de software (DB, Servidores, diagrama UML, etc&#8230;). Algumas ag\u00eancias de web utilizam este software para criarem a visualiza\u00e7\u00e3o em \u00e1rvore (wireframe) das p\u00e1ginas, ou at\u00e9 os modelos funcionais. Pessoalmente, n\u00e3o recomendar\u00edamos, pois \u00e9 bastante pesado e n\u00e3o \u00e9 muito adequado na sua utiliza\u00e7\u00e3o.<\/li>\n<li><b>Microsoft Powerpoint:<\/b> o famoso software tamb\u00e9m pode ser usado para produzir modelos funcionais, principalmente porque existem bibliotecas de componentes adicionais, projetados para wireframing, como por exemplo, o PowerMockup. Embora o PowerPoint (ou Keynote) n\u00e3o tenha sido projetado para este fim, a flexibilidade e a simplicidade da ferramenta, especialmente na manipula\u00e7\u00e3o de formatos simples, tornam-na numa ferramenta adequada para estruturas de wireframe simples.<\/li>\n<\/ul>\n<h3>Software de wireframes\/ modelos<\/h3>\n<div style=\"text-align: justify\">\n<p>Convidamo-lo a descobrir a <a href=\"http:\/\/socialcompare.com\/fr\/comparison\/mockup-wireframing-design-tools\" target=\"_blank\" rel=\"noopener noreferrer\">tabela com o resumo<\/a>, preparada pelo SocialCompare, para descobrir os principais softwares de wireframes do mercado:<\/p>\n<ul>\n<li><b><a href=\"https:\/\/cacoo.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Cacoo<\/a><\/b>: um software SaaS orientado para a colabora\u00e7\u00e3o. O Cacoo est\u00e1 dispon\u00edvel numa vers\u00e3o gratuita para o testar ao m\u00e1ximo. Muito f\u00e1cil de usar, o Cacoo permite a cria\u00e7\u00e3o de todos os tipos de wireframes e diagramas para o seu site.<\/li>\n<li><b><a href=\"http:\/\/balsamiq.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Balsamiq<\/a><\/b>: dispon\u00edvel para dektops (US$ 79) ou na vers\u00e3o web (US$ 12\/ m\u00eas), o Balsamiq \u00e9 uma refer\u00eancia no mundo da cria\u00e7\u00e3o de sites. Simples e poderoso ao mesmo tempo, o Balsamiq permite que qualquer pessoa crie modelos funcionais, de p\u00e1ginas bastante complexas.<\/li>\n<li><b><a href=\"http:\/\/www.axure.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Axure RP<\/a><\/b>: Provavelmente o software mais completo e poderoso para wireframing e cria\u00e7\u00e3o de prot\u00f3tipos de interfaces de web, no mercado. \u00c9 normalmente usado por ag\u00eancias de alto n\u00edvel ou designers freelancers. A vers\u00e3o padr\u00e3o do software est\u00e1 dispon\u00edvel por US$ 249.<\/li>\n<\/ul>\n<\/div>\n<h3>Software gr\u00e1fico<\/h3>\n<div style=\"text-align: justify\">\n<p>\u00c9 tempo de passar para a fase dos prot\u00f3tipos gr\u00e1ficos. Se os softwares de wireframes s\u00e3o muito f\u00e1ceis de aceder, esse n\u00e3o \u00e9 o caso nos softwares gr\u00e1ficos e, principalmente, com o pacote Adobe.<\/p>\n<p>Naturalmente, n\u00e3o se conseguir\u00e1 tornar um web designer numa noite, bastando abrir o Adobe Photoshop para ficar provado. Este software \u00e9 o mais capaz, no campo do design gr\u00e1fico. Poderoso, flex\u00edvel e adequado para a fase de corte, necess\u00e1ria para a integra\u00e7\u00e3o em HTML \/ CSS, o Photoshop \u00e9 o software para design de interface do utilizador.<\/p>\n<p>Entre as alternativas, pode-se mencionar o <a href=\"https:\/\/www.gimp.org\/downloads\/\" target=\"_blank\" rel=\"noopener noreferrer\">Gimp<\/a> (c\u00f3digo-fonte aberto) ou o Paint Shop Pro. Por\u00e9m, o dom\u00ednio do Adobe Photoshop, nessa \u00e1rea, \u00e9 tal que o formato de arquivo associado, .PSD, tornou-se um substantivo para a maioria dos profissionais de web.<\/p>\n<\/div>\n<h2 id=\"h2_3\" align=\"left\">Da exibi\u00e7\u00e3o em \u00e1rvore, aos modelos do Photoshop do seu site<\/h2>\n<div style=\"text-align: justify\">Estamos prestes a abordar as etapas principais, para ajud\u00e1-lo a organizar a fase de implementa\u00e7\u00e3o das maquetes. Obviamente, essa organiza\u00e7\u00e3o precisar\u00e1 de ser adaptada \u00e0s necessidades espec\u00edficas do seu projeto e neg\u00f3cio.<\/div>\n<h3>Etapa 1 &#8211; Exibi\u00e7\u00e3o em \u00e1rvore<\/h3>\n<div style=\"text-align: justify\">\n<p>Antes de pensar no lay out das p\u00e1ginas, dever\u00e1 ter uma vis\u00e3o geral muito boa do site idealizado. \u00c9 muito importante poder identificar os \u201cmodelos\u201d da p\u00e1gina, ou mais precisamente, os lay outs comuns \u00e0s v\u00e1rias p\u00e1ginas. Como por exemplo, os modelos de \u201cpostagem no blog\u201d ou na \u201cp\u00e1gina do produto\u201d.<\/p>\n<p>Obviamente, dever\u00e1 sempre come\u00e7ar a estudar e a analisar modelos de p\u00e1gina, antes mesmo de trabalhar em p\u00e1ginas espec\u00edficas, como a p\u00e1gina inicial. Assim, al\u00e9m de ser interessante para a produ\u00e7\u00e3o de wireframes, a exibi\u00e7\u00e3o em \u00e1rvore \u00e9 muito \u00fatil para projetar processos eficazes do cliente e para preparar redes de p\u00e1ginas internas, com perfeita conformidade com os padr\u00f5es corretos de SEO.<\/p>\n<p>Essa fase \u00e9 muito \u00fatil para levantar quest\u00f5es interessantes com todos os membros da a sua equipa, pois a exibi\u00e7\u00e3o em \u00e1rvore deixa claro muitos pontos-chave do projeto de cria\u00e7\u00e3o de sites. Logo, recomendamos que trabalhe na exibi\u00e7\u00e3o em \u00e1rvore desde o in\u00edcio do planeamento do seu projeto ou neg\u00f3cio web.<\/p>\n<\/div>\n<h3>Etapa 2 &#8211; Wireframes das p\u00e1ginas principais<\/h3>\n<div style=\"text-align: justify\">\n<p>Antes de tudo, recomendamos que crie apenas os wireframes relacionados \u00e0s p\u00e1ginas principais, ou aos modelos de p\u00e1gina principal. Duas raz\u00f5es justificam este conselho. A primeira \u00e9 que isso ajudar\u00e1 a identificar os componentes gr\u00e1ficos que pode usar novamente nas p\u00e1ginas secund\u00e1rias.<\/p>\n<p>Na nossa experi\u00eancia, \u00e9 comum que a visualiza\u00e7\u00e3o em \u00e1rvore inicial seja alterada, ap\u00f3s a cria\u00e7\u00e3o dos modelos de p\u00e1ginas principais. \u00c9 por isso que \u00e9 recomend\u00e1vel que trabalhe nos wireframes de maneira muito interativa, para facilitar melhorias cont\u00ednuas. Na pr\u00e1tica, isso significaria fazer um desenho r\u00e1pido das 3 p\u00e1ginas principais do processo do cliente, procurar conselhos e refazer essas 3 p\u00e1ginas, detalhando um pouco mais e pedindo opini\u00f5es novamente para reformular as 3 p\u00e1ginas e adicionando mais 3 e assim por diante.<\/p>\n<\/div>\n<h3>Etapa 3 &#8211; Defini\u00e7\u00e3o de componentes e wireframes detalhados<\/h3>\n<div style=\"text-align: justify\">\n<p>Depois de validados os wireframes das p\u00e1ginas principais, recomendamos que aproxime todas as p\u00e1ginas para identificar o conjunto de &#8220;componentes gr\u00e1ficos&#8221;, que s\u00e3o partilhados entre as p\u00e1ginas.<\/p>\n<p>Por &#8220;componente&#8221;, queremos dizer blocos, tabelas ou guias, todos os objetos gr\u00e1ficos que poder\u00e1 usar novamente. O objetivo deste trabalho \u00e9 tentar reutilizar os mesmos componentes, sempre que o poss\u00edvel. N\u00e3o reduzir\u00e1 apenas o trabalho para os desenvolvedores, pois tamb\u00e9m criar\u00e1 uma experi\u00eancia de utilizador forte e harmoniosa, com uma verdadeira consist\u00eancia entre as p\u00e1ginas.<\/p>\n<p>Agora \u00e9 tempo de entrarmos em detalhes e trabalhar em modelos de p\u00e1ginas secund\u00e1rias. A esse n\u00edvel, a quest\u00e3o principal \u00e9, frequentemente, o equil\u00edbrio entre discutir cada detalhe e aceitar o primeiro design proposto pelo webdesigner.<\/p>\n<p>Obviamente, isso depende do web designer. com o qual voc\u00ea est\u00e1 a trabalhar. Na nossa experi\u00eancia no desenvolvimento e cria\u00e7\u00e3o de sites, geralmente, damos alguns detalhes nas primeiras p\u00e1ginas ao web deisnger e depois modificamos, com base nos primeiros modelos gr\u00e1ficos entregues.<\/p>\n<\/div>\n<h3>Etapa 4 &#8211; Maquetes de p\u00e1ginas gr\u00e1ficas<\/h3>\n<div style=\"text-align: justify\">\n<p>Durante a fase de prot\u00f3tipo funcional, \u00e9 o dono do projeto, que conhece ao detalhe o seu p\u00fablico-alvo e o seu mercado. Logo, dever\u00e1 ser este o respons\u00e1vel por liderar o trabalho de wireframing, mesmo que n\u00e3o seja este a criar os wireframes.<\/p>\n<p>Contudo, o prot\u00f3tipo gr\u00e1fico \u00e9 diferente, pois haver\u00e1 mais criatividade e mais liberdade, que dever\u00e3o ser assumidas pelo web designer. Como cliente, deve fornecer inspira\u00e7\u00f5es gr\u00e1ficas, bem como explicar claramente o posicionamento da sua marca\/ empresa e tamb\u00e9m deve prestar aten\u00e7\u00e3o para n\u00e3o restringir a criatividade do web designer, por estar a fornecer instru\u00e7\u00f5es muito detalhadas.<\/p>\n<p>Se possui bons wireframes funcionais e um resumo criativo espec\u00edfico, ser\u00e1 um cliente perfeito para qualquer web designer. O seu designer ter\u00e1 todos as possibilidades nas suas m\u00e3os e, muitas vezes, mais motiva\u00e7\u00e3o para oferecer \u00f3timos designs de interface para o utilizador e para o seu potencial cliente!<\/p>\n<\/div>\n<h2 id=\"h2_4\" align=\"left\">Conclus\u00e3o<\/h2>\n<div style=\"text-align: justify\">\n<p>Em conclus\u00e3o, esperemos que tenha percebido a import\u00e2ncia de investir tempo na fase de implementa\u00e7\u00e3o de maquetes do seu futuro site. Este \u00e9 um passo fundamental para criar um site que seja agrad\u00e1vel e eficaz, respondendo \u00e0s suas necessidades e aos gostos do seu p\u00fablico-alvo.<\/p>\n<p>Assim, e para tornar o seu site realmente adequado ao seu objetivo final, ser\u00e1 sempre muito \u00fatil mostrar os seus modelos, para as pessoas fora do projeto entenderem na perfei\u00e7\u00e3o o que pretende. Criar uma forte experi\u00eancia do utilizador dever\u00e1 ser a sua prioridade, trabalhando com as diferen\u00e7as possibilidades acima analisadas.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>O design de maquetes\/ modelos \u00e9 uma etapa cr\u00edtica na cria\u00e7\u00e3o do seu site. Dessa forma, para que o website seja agrad\u00e1vel, \u00e9 necess\u00e1rio prestar especial aten\u00e7\u00e3o ao design gr\u00e1fico, mas tamb\u00e9m \u00e0 efici\u00eancia desse mesmo site. Precisar\u00e1 de criar um layout inteligente, que seja adequado ao seu p\u00fablico-alvo e responda \u00e0s suas necessidades. Assim, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[1],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Criando modelos para o site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface<\/title>\n<meta name=\"description\" content=\"Criando modelos para o seu site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface, as diferentes maquetes para construir um site profissional.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/\" \/>\n<meta property=\"og:locale\" content=\"pt_PT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Criando modelos para o site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface\" \/>\n<meta property=\"og:description\" content=\"Criando modelos para o seu site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface, as diferentes maquetes para construir um site profissional.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/\" \/>\n<meta property=\"og:site_name\" content=\"Webolto\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-11T10:56:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-05-21T19:30:58+00:00\" \/>\n<meta name=\"author\" content=\"webolto\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"webolto\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo estimado de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/\"},\"author\":{\"name\":\"webolto\",\"@id\":\"https:\/\/www.webolto.com\/pt\/#\/schema\/person\/d2b6a203f4643bc4880814494c657280\"},\"headline\":\"Criando modelos para o seu site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface\",\"datePublished\":\"2019-09-11T10:56:40+00:00\",\"dateModified\":\"2020-05-21T19:30:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/\"},\"wordCount\":2222,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webolto.com\/pt\/#organization\"},\"articleSection\":[\"Uncategorized\"],\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/\",\"url\":\"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/\",\"name\":\"Criando modelos para o site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface\",\"isPartOf\":{\"@id\":\"https:\/\/www.webolto.com\/pt\/#website\"},\"datePublished\":\"2019-09-11T10:56:40+00:00\",\"dateModified\":\"2020-05-21T19:30:58+00:00\",\"description\":\"Criando modelos para o seu site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface, as diferentes maquetes para construir um site profissional.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/#breadcrumb\"},\"inLanguage\":\"pt-PT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webolto.com\/pt\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Criando modelos para o seu site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webolto.com\/pt\/#website\",\"url\":\"https:\/\/www.webolto.com\/pt\/\",\"name\":\"Webolto\",\"description\":\"Centro de recursos para projetos da web\",\"publisher\":{\"@id\":\"https:\/\/www.webolto.com\/pt\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webolto.com\/pt\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-PT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webolto.com\/pt\/#organization\",\"name\":\"Webolto\",\"url\":\"https:\/\/www.webolto.com\/pt\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/www.webolto.com\/pt\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webolto.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/header-logo.png\",\"contentUrl\":\"https:\/\/www.webolto.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/header-logo.png\",\"width\":3237,\"height\":667,\"caption\":\"Webolto\"},\"image\":{\"@id\":\"https:\/\/www.webolto.com\/pt\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webolto.com\/pt\/#\/schema\/person\/d2b6a203f4643bc4880814494c657280\",\"name\":\"webolto\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-PT\",\"@id\":\"https:\/\/www.webolto.com\/pt\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/31a65b7142b50bb5b6b280f3fba9d6db?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/31a65b7142b50bb5b6b280f3fba9d6db?s=96&d=mm&r=g\",\"caption\":\"webolto\"},\"sameAs\":[\"http:\/\/webolto.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Criando modelos para o site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface","description":"Criando modelos para o seu site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface, as diferentes maquetes para construir um site profissional.","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:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/","og_locale":"pt_PT","og_type":"article","og_title":"Criando modelos para o site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface","og_description":"Criando modelos para o seu site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface, as diferentes maquetes para construir um site profissional.","og_url":"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/","og_site_name":"Webolto","article_published_time":"2019-09-11T10:56:40+00:00","article_modified_time":"2020-05-21T19:30:58+00:00","author":"webolto","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"webolto","Tempo estimado de leitura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/#article","isPartOf":{"@id":"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/"},"author":{"name":"webolto","@id":"https:\/\/www.webolto.com\/pt\/#\/schema\/person\/d2b6a203f4643bc4880814494c657280"},"headline":"Criando modelos para o seu site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface","datePublished":"2019-09-11T10:56:40+00:00","dateModified":"2020-05-21T19:30:58+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/"},"wordCount":2222,"commentCount":0,"publisher":{"@id":"https:\/\/www.webolto.com\/pt\/#organization"},"articleSection":["Uncategorized"],"inLanguage":"pt-PT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/","url":"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/","name":"Criando modelos para o site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface","isPartOf":{"@id":"https:\/\/www.webolto.com\/pt\/#website"},"datePublished":"2019-09-11T10:56:40+00:00","dateModified":"2020-05-21T19:30:58+00:00","description":"Criando modelos para o seu site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface, as diferentes maquetes para construir um site profissional.","breadcrumb":{"@id":"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/#breadcrumb"},"inLanguage":"pt-PT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.webolto.com\/pt\/blog\/criando-modelos-de-seu-site\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webolto.com\/pt\/"},{"@type":"ListItem","position":2,"name":"Criando modelos para o seu site. Da exibi\u00e7\u00e3o em \u00e1rvore ao design da interface"}]},{"@type":"WebSite","@id":"https:\/\/www.webolto.com\/pt\/#website","url":"https:\/\/www.webolto.com\/pt\/","name":"Webolto","description":"Centro de recursos para projetos da web","publisher":{"@id":"https:\/\/www.webolto.com\/pt\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webolto.com\/pt\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-PT"},{"@type":"Organization","@id":"https:\/\/www.webolto.com\/pt\/#organization","name":"Webolto","url":"https:\/\/www.webolto.com\/pt\/","logo":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.webolto.com\/pt\/#\/schema\/logo\/image\/","url":"https:\/\/www.webolto.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/header-logo.png","contentUrl":"https:\/\/www.webolto.com\/pt\/wp-content\/uploads\/sites\/3\/2020\/05\/header-logo.png","width":3237,"height":667,"caption":"Webolto"},"image":{"@id":"https:\/\/www.webolto.com\/pt\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webolto.com\/pt\/#\/schema\/person\/d2b6a203f4643bc4880814494c657280","name":"webolto","image":{"@type":"ImageObject","inLanguage":"pt-PT","@id":"https:\/\/www.webolto.com\/pt\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/31a65b7142b50bb5b6b280f3fba9d6db?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/31a65b7142b50bb5b6b280f3fba9d6db?s=96&d=mm&r=g","caption":"webolto"},"sameAs":["http:\/\/webolto.com"]}]}},"featured_image_src":null,"featured_image_src_square":null,"author_info":{"display_name":"webolto","author_link":"https:\/\/www.webolto.com\/pt\/blog\/author\/thefabrique\/"},"_links":{"self":[{"href":"https:\/\/www.webolto.com\/pt\/wp-json\/wp\/v2\/posts\/46"}],"collection":[{"href":"https:\/\/www.webolto.com\/pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webolto.com\/pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webolto.com\/pt\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webolto.com\/pt\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":0,"href":"https:\/\/www.webolto.com\/pt\/wp-json\/wp\/v2\/posts\/46\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.webolto.com\/pt\/wp-json\/wp\/v2\/media?parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webolto.com\/pt\/wp-json\/wp\/v2\/categories?post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webolto.com\/pt\/wp-json\/wp\/v2\/tags?post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}