{"id":4162,"date":"2012-11-09T14:33:54","date_gmt":"2012-11-09T14:33:54","guid":{"rendered":"http:\/\/www2.internetinnovation.com.br\/?p=4162"},"modified":"2012-11-09T14:33:54","modified_gmt":"2012-11-09T14:33:54","slug":"ferramentas-para-criacao-de-wireframe-online","status":"publish","type":"post","link":"https:\/\/www.internetinnovation.com.br\/blog\/ferramentas-para-criacao-de-wireframe-online\/","title":{"rendered":"Ferramentas para cria\u00e7\u00e3o de wireframe online"},"content":{"rendered":"

A maneira mais simples de apresentar o projeto de uma p\u00e1gina de internet, software ou aplicativo \u00e9 sem d\u00favida por meio de um desenho. Voc\u00ea pode fazer isso a partir de alguns rabiscos feitos em papel ou lan\u00e7ando m\u00e3o de softwares mais sofisticados, mas necessariamente o planejamento de um site passa pela estrutura\u00e7\u00e3o desse \u201cdesenho\u201d, ou wireframe<\/strong> como \u00e9 conhecido esse instrumento do web design.
\n

\"\"
Flickr.com\/baldiri<\/a><\/span> Com os softwares dispon\u00edveis na internet \u00e9 poss\u00edvel criar wireframes mesmo sem familiaridade com ferramentas web design.<\/figcaption><\/figure>
\nTrata-se da representa\u00e7\u00e3o visual respons\u00e1vel por esquematizar a disposi\u00e7\u00e3o dos elementos presentes em uma p\u00e1gina de internet como imagens, textos, v\u00eddeos, links, entre outros. Um wireframe \u00e9 um instrumento que se diferencia dos prot\u00f3tipos e layouts de websites por n\u00e3o ser funcional e por n\u00e3o ter o seu foco nos elementos gr\u00e1ficos e de tipografia.
\nA elabora\u00e7\u00e3o do conceito visual de uma p\u00e1gina geralmente envolve a participa\u00e7\u00e3o de diversos profissionais, desde especialistas em arquitetura da informa\u00e7\u00e3o e usabilidade, al\u00e9m dos web designers, designers e desenvolvedores. Mas isso n\u00e3o impede que voc\u00ea tamb\u00e9m se aventure e fa\u00e7a voc\u00ea mesmo o seu site ou e-commerce. O importante \u00e9 ter em mente que um dos objetivos de qualquer site, aplicativo ou software tamb\u00e9m \u00e9 proporcionar a melhor experi\u00eancia para o usu\u00e1rio.
\nA internet oferece uma grande variedade de servi\u00e7os voltados \u00e0 cria\u00e7\u00e3o de wireframes e mesmo aqueles usu\u00e1rios que t\u00eam pouca familiaridade com os softwares de web design podem experimentar compor visualmente suas p\u00e1ginas. Veja alguns exemplos de ferramentas para cria\u00e7\u00e3o de wireframes online:
\nWireframe.cc<\/strong>
\nSimples \u00e9 a palavra que melhor define o Wireframe.cc e seu conjunto de funcionalidades. Basta entrar no site<\/a> para come\u00e7ar a elaborar seu projeto. A ferramenta gratuita pode ser usada para criar wireframes de diferentes plataformas, como tablets e smartphones.
\nCada um dos projetos salvos gera uma URL, dessa forma voc\u00ea tamb\u00e9m pode compartilhar seu wireframe e modific\u00e1-lo. Voc\u00ea pode acessar e editar cada um dos seus wireframes sempre que quiser, onde voc\u00ea estiver.
\nMockingbird<\/strong>
\nOutra ferramenta bastante amig\u00e1vel e intuitiva para criar wireframes \u00e9 o Mockingbird. Sua interface baseada no sistema Drag and Drop<\/em> permite que voc\u00ea facilmente desenvolva projetos arrastando os elementos que deseja utilizar em sua p\u00e1gina. O Mockingbird d\u00e1 a voc\u00ea a possibilidade de linkar os diversos wireframes desenvolvidos, simulando a navega\u00e7\u00e3o em diversas p\u00e1ginas.
\nNo site gomockingbird.com<\/a> voc\u00ea pode testar gratuitamente a ferramenta e seus recursos, criando um projeto. O Mockingbird oferece planos que variam entre US$ 9 e US$ 85 por m\u00eas e todos eles permitem que voc\u00ea tenha um n\u00famero ilimitado de colaboradores e de projetos salvos.
\nMockflow<\/strong>
\nUma das ferramentas gratuitas e mais completas para cria\u00e7\u00e3o de wireframes \u00e9 o Mockflow. A grande quantidade de componentes dispon\u00edveis para inclus\u00e3o em projetos, como banners e diferentes estilos de menu faz esse aplicativo ser um dos mais procurados pelos web designers. A versatilidade de suas fun\u00e7\u00f5es permite que voc\u00ea fa\u00e7a o link entre os wireframes criados, os organize usando um mapa do site e construa praticamente um prot\u00f3tipo funcional do seu site.
\nO Mockflow se sobressai em rela\u00e7\u00e3o \u00e0s demais por ser uma ferramenta voltada para projetos colaborativos e uma plataforma h\u00edbrida, podendo ser utilizada mesmo sem acesso \u00e0 internet. Sua interface bem organizada, com funcionamento pelo sistema Drag and Drop<\/em>, torna a utiliza\u00e7\u00e3o ainda mais simplificada. Voc\u00ea pode come\u00e7ar a us\u00e1-lo criando uma conta no site<\/a>.
\nGoogle Drawings<\/strong>
\n\u00c9 sempre interessante poder contar com a conveni\u00eancia dos servi\u00e7os gratuitos oferecidos pelo Google. Pois bem, incorporado ao pacote de servi\u00e7os do Google Drive existe o Drawings, um simp\u00e1tico aplicativo para cria\u00e7\u00e3o de desenhos. Obviamente n\u00e3o se trata de uma ferramenta especificamente desenvolvida para cria\u00e7\u00e3o de wireframes, mas as vantagens relacionadas a ele podem fazer voc\u00ea considerar utiliz\u00e1-lo.
\nA possibilidade de poder navegar em meio a todas as altera\u00e7\u00f5es realizadas em um Wireframe salvo em seu disco ou compartilhado por voc\u00ea tamb\u00e9m \u00e9 bastante interessante. Para usar a ferramenta basta acessar o painel do Google Drive<\/a> com a sua conta de usu\u00e1rio e clicar no bot\u00e3o Criar e em seguida em Desenho.<\/p>\n","protected":false},"excerpt":{"rendered":"

A maneira mais simples de apresentar o projeto de uma p\u00e1gina de internet, software ou aplicativo \u00e9 sem d\u00favida por meio de um desenho. Voc\u00ea pode fazer isso a partir de alguns rabiscos feitos em papel ou lan\u00e7ando m\u00e3o de softwares mais sofisticados, mas necessariamente o planejamento de um site passa pela estrutura\u00e7\u00e3o desse \u201cdesenho\u201d, […]<\/p>\n","protected":false},"author":1,"featured_media":12172,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[],"class_list":["post-4162","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ferramentas"],"_links":{"self":[{"href":"https:\/\/www.internetinnovation.com.br\/blog\/wp-json\/wp\/v2\/posts\/4162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.internetinnovation.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.internetinnovation.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.internetinnovation.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.internetinnovation.com.br\/blog\/wp-json\/wp\/v2\/comments?post=4162"}],"version-history":[{"count":0,"href":"https:\/\/www.internetinnovation.com.br\/blog\/wp-json\/wp\/v2\/posts\/4162\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.internetinnovation.com.br\/blog\/wp-json\/wp\/v2\/media\/12172"}],"wp:attachment":[{"href":"https:\/\/www.internetinnovation.com.br\/blog\/wp-json\/wp\/v2\/media?parent=4162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.internetinnovation.com.br\/blog\/wp-json\/wp\/v2\/categories?post=4162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.internetinnovation.com.br\/blog\/wp-json\/wp\/v2\/tags?post=4162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}