A prototipagem é uma etapa significativa no desenvolvimento da Web, que permite identificar e formar o DNA de um projeto em seus estágios iniciais. Nos últimos anos, o número de serviços e ferramentas on-line para prototipagem aumentou significativamente. Esta revisão apresenta 10 serviços para a criação de sitemaps visuais.
Antes de prosseguir com a descrição das ferramentas, não será supérfluo entender a terminologia.
Um mapa do site é a estrutura das páginas do site apresentadas em um modelo hierárquico. Esse esquema ajuda a avaliar o volume de páginas que formam um site, bem como a entender a lógica de seu relacionamento. Às vezes, esses são esquemas que são primitivos em organização e estrutura. E, às vezes, muito complexo com cartões de aninhamento de vários níveis. Os sites ajudam a planejar a distribuição de conteúdo e a mecânica de navegação para um site futuro.
Considere três tipos de sitemaps:
Os sitemaps visuais são usados como um elemento auxiliar no planejamento, análise e prototipagem do projeto. Hoje é difícil imaginar o início do trabalho em um projeto sem planejamento prévio. O mapa do site ajudará a entender melhor a mecânica da navegação futura, a avaliar a quantidade de conteúdo necessário. O mapa visual do site é um elemento importante na construção da comunicação dentro da equipe de desenvolvimento. Graças à estrutura visual do site, a discussão, avaliação e alocação de recursos é bastante simplificada.
Os modelos de site em HTML foram criados para ajudá-lo a navegar no site. A tradição de criar uma página separada com um mapa do site é considerada obsoleta, mas, no entanto, essa abordagem não será supérflua se o projeto tiver uma estrutura complexa e aninhamento em vários níveis.
Sitemaps XML estão ocultos dos usuários, mas importantes. Ao descrever a estrutura do site e o relacionamento das páginas, os XML sitepamps facilitam os mecanismos de pesquisa que analisam o site. Portanto, um efeito positivo no ranking. Nos sites XML, a clareza da descrição da estrutura e a sintaxe usada são importantes, porque os rastreadores dos mecanismos de pesquisa não toleram inconsistência e folga do código. O XML do mapa do site substituiu o método mais antigo de "download direto para mecanismos de pesquisa" em uma página separada dedicada. Agora o sitemap está carregando diretamente, ou os desenvolvedores aguardam até que o mecanismo de pesquisa encontre o arquivo por conta própria. Ao atualizar o arquivo de mapa do site com uma nova estrutura, você fornece uma indexação mais rápida das páginas em comparação com o procedimento padrão do mecanismo de pesquisa automática.
Por que precisamos de sitemaps visuais?
O planejamento e a criação de protótipos de sites são há muito o padrão do setor. Na maioria das vezes, o mapa mental do projeto é construído primeiro. Isso é feito para determinar os elementos principais e secundários do site futuro, bem como as tarefas que o site ou serviço resolverá.
No próximo estágio, uma hierarquia detalhada de páginas, sua estrutura é planejada. Esta etapa requer reflexão e discussão. Portanto, esse protótipo deve ser claro para todos os participantes do processo (programadores, designers, desenvolvedores, gerenciadores de conteúdo). A estrutura formalizada do site (sitemap) se torna o ponto de partida.
Um serviço com uma abordagem minimalista e inovadora do design de interface, lançado em 2019. Sem detalhes e complementos desnecessários, o Octopus funciona rapidamente, e uma linguagem visual limpa o faz funcionar.
A idéia básica do design do site Octopus é formar páginas a partir de blocos. Esses projetos são claros e projetados para fornecer uma idéia detalhada da estrutura da página futura.
Teste o Octopus.do sem registro. Você só precisará registrar um perfil quando o projeto for salvo.
A interface intuitiva não está sobrecarregada com elementos e animação. Embora os ícones individuais possam parecer um pouco pequenos. Criar e adicionar blocos é rápido e fácil com a mecânica óbvia.
Existe uma maneira mais conveniente de adicionar um bloco - basta pressionar Enter e um novo bloco aparecerá na parte inferior da página. Este método permite que você preencha rapidamente o conteúdo usando apenas um teclado. O Drag'n'drop é executado de forma previsível e rápida.
É possível atribuir aos blocos cores de uma determinada paleta de cores:
Usuários de assinatura paga Octopus.do podem exportar sitemaps de exportação em PNG e PDF. Com uma assinatura gratuita, você pode compartilhar um link direto para o projeto. Ao mesmo tempo, usuários externos poderão fazer alterações no mapa do site, o que simplifica o trabalho em equipe.
A organização das camadas e seções de informações do serviço é aberta em pop-ups organizados. Isso dá a impressão de que o usuário não sai da área de trabalho de um editor minimalista.
A função de adicionar uma descrição de texto aos blocos será útil para o planejamento de conteúdo em um projeto. O pop-up é chamado clicando no ícone do documento no lado direito do bloco:
No processo de montagem do conteúdo, muitas vezes é necessário avaliar rapidamente a localização dos materiais visuais (fotografias, ilustrações). A função de adicionar imagens ajudará a lidar com esta tarefa:
A propósito, adicionando imagens à estrutura, você pode inserir layouts de design de página completos quando estiverem prontos.
Uma característica distintiva do Octopus é a presença da função Estimativa. A interface é implementada na forma de um painel de viagem, que contém uma tabela de calculadora para estimar o custo do trabalho. E com uma taxa horária conhecida para um exame específico, você pode estimar os custos de tempo e o orçamento do projeto.
Os usuários têm a opção de duplicar páginas em uma hierarquia e criar uma cópia do projeto. Controle sobre o design do sitemap: estilos de borda de página personalizáveis e estilo para quadros de smartphone, bem como um mecanismo aprimorado de trabalho em equipe.
SumárioUm conjunto racional de ferramentas e um design de interface inteligente que atende ao espírito da época. Atualizações regulares e melhorias funcionais da equipe Octopus tornam o serviço atraente e, é claro, útil.
Custo, assinatura : um plano gratuito inclui 1 projeto ativo. Assinaturas pagas a partir de US $ 8 por mês.
Facilidade de uso: para usuários iniciantes e intermediários
Design : ★★★★ ☆
Trabalho em equipe : ✓
Exportar : link, PDF e PNG (somente usuários pagos)
Gloomaps
Não é necessário se registrar é uma vantagem do serviço Gloompas. O usuário imediatamente se encontra em um ambiente de trabalho com um design minimalista. A interface é intuitiva e ajuda você a se envolver no processo rapidamente. A adição e remoção de blocos de sitemap ocorre com mecânicas compreensíveis e previsíveis.
A capacidade de personalizar a cor de cada bloco individual e definir o tamanho da fonte é um recurso conveniente que ajuda a criar detalhes no mapa do site.
Separadamente, vale a pena observar as configurações de exibição: Visualização de mapa, Visualização de matriz e Estrutura de tópicos. Dependendo da estrutura e escala do projeto, você pode escolher como exibir o mapa do site.
Em projetos com uma estrutura complicada e aninhamento em vários níveis, o recolhimento e a expansão de um grupo de páginas será conveniente. Gloomaps é um serviço gratuito, mas não sem limitações. O link para o projeto é armazenado por 14 dias, e cada nova visita à página do projeto aumenta a disponibilidade de links para os próximos 14 dias. Tanto quanto se sabe, projetos privados não podem ser criados. A funcionalidade para geração automática de sitemaps não é fornecida.
Para quem usará o serviço regularmente, é útil usar atalhos, descritos na barra de menus que sai. E as funções de exportação em vários formatos expandem a capacidade de compartilhar o mapa do site criado.
SumárioUm serviço gratuito com um conjunto ideal de funções e amplas possibilidades para exportar um projeto finalizado.
Custo, assinatura : grátis
Facilidade de uso : adequado para iniciantes
Design : ★★★ ☆☆
Trabalho em equipe : ✓
Exportar : link, PNG, PDF, XML
Intuitivo e rico em modelos, o Flowmapp ajuda a criar sitemaps visuais e planejar fluxos de usuários.
Você deve primeiro se registrar. O projeto pode:
- começar do zero
- importar do arquivo xml
- expandir modelo existente
Existem três tipos de projetos nos modelos preparados: comércio eletrônico, projeto corporativo e portal de notícias.
No processo de conhecer o serviço, recomendações e dicas úteis sobre ferramentas e recursos do ambiente de trabalho aparecerão regularmente no canto inferior direito.
Animações e reações dos elementos da interface ajudam a se envolver no processo e a aprender manipulações básicas. Alocação conveniente de páginas em grupo para excluir ou alterar o rótulo.
Uma das principais vantagens são os modelos de página visual. A biblioteca de modelos abrange a maioria dos padrões de informações possíveis - um recurso indispensável e claro na preparação e planejamento de conteúdo para o site futuro.
E para aqueles que estão interessados principalmente na estrutura, você pode mudar para uma visualização compacta apenas com cabeçalhos.
Quanto à navegação, uma mecânica bastante conveniente, o Mapa do Projeto, foi adicionada ao conjunto de recursos padrão. O Mapa do Projeto combina valor visual e mecânico - a movimentação na estrutura de grandes projetos é simplificada.
Para cada uma das páginas do projeto, você pode adicionar uma descrição estendida e anexar arquivos individuais. Esse recurso é útil no processo de preenchimento do site com conteúdo.
As amplas opções de exportação nos formatos SVG e PNG permitem escolher a melhor opção e até definir a resolução da imagem na saída.
SumárioServiço com um conjunto de funções bem pensado e uma interface agradável. Em uma assinatura gratuita, os recursos estão disponíveis em uma ampla variedade. Adequado para a apresentação eficaz e de alta qualidade de projetos de sitemap.
Custo, assinatura : o plano gratuito fornece 1 projeto ativo e 100 MB de espaço, sem restrição de colaboradores. Assinaturas pagas a partir de US $ 8 por mês para pagamento anual.
Facilidade de uso : para usuários iniciantes e intermediários
Design : ★★★★★
Trabalho em equipe : ✓
Exportação : link, PNG, SVG, PDF, DOCX
Relativamente simples na organização, o Writemaps ajuda a criar sitemaps e planejar o conteúdo do projeto. Para testar o serviço, você precisa se registrar.
Do ponto de vista do design, a interface pode ser descrita como "folclórica" ou simples. Um plano gratuito fornece acesso a parte da função: 3 sitemaps ativos com 50 páginas. Os demais recursos estão disponíveis para usuários pagos.
Parte da funcionalidade paga inclui a capacidade de destacar as páginas do projeto em cores, combinar e adicionar conteúdo a elas, criar seções, compartilhar o projeto e exportar mapas do site para PDF. Embora para planos gratuitos, a exportação para CSV e XML seja fornecida.
Vale a pena notar que a alternância entre o mapa do site e o conteúdo é implementada de forma conveniente e clara. Uma lista de atalhos ajudará a acelerar o trabalho.
Sumário“Somente o mais necessário” é exatamente como você pode caracterizar a abordagem da funcionalidade da versão gratuita. Uma assinatura paga é adequada para usuários que planejam distribuir conteúdo, além da estrutura geral do site.
Custo, assinatura : o plano gratuito inclui 3 projetos ativos, com um limite de 50 páginas. Assinaturas pagas a partir de US $ 14,99 por mês.
Facilidade de uso : para usuários iniciantes e intermediários
Design : ★★ ☆☆☆
Trabalho em equipe : ✓
Exportação : CSV, XML, PDF e link (somente usuários pagos)
Raarchy
A versão beta do projeto tem um conjunto modesto de recursos. O mapa do site é construído do zero e em uma ordem generativa usando o link para o site.
No momento da publicação da revisão, a mecânica da adição de páginas é organizada da seguinte maneira - você precisa chamar o menu de contexto clicando nos blocos de páginas.
Nenhuma configuração adicional de exibição de bloco é fornecida. No entanto, o drag'n'drop funciona de maneira compreensível. E os formatos de exibição do esquema permitem que você mude o projeto para um esquema biomórfico. Talvez essa visão pareça clara e apropriada.
No momento da publicação, a exportação apenas para um arquivo CSV estava disponível. Você não pode compartilhar um link direto.
Custo, assinatura : grátis
Facilidade de uso : para iniciantes
Design : ★★ ☆☆☆
Trabalho em equipe :
Exportação : CSV
No serviço Visual Sitemaps, os sitemaps são criados com base em projetos já lançados automaticamente. A ferramenta rastreia a estrutura do site e tira capturas de tela em tamanho real das páginas. Ao mesmo tempo, o usuário determina o número de capturas de tela e a profundidade do rastreamento nos níveis. Usuários de assinatura gratuita têm acesso a uma profundidade de não mais de 2 níveis.
O processo de rastreamento é relativamente rápido. Mas se o projeto for volumoso, será aconselhável iniciar o processo e se distrair com outras tarefas, e o serviço notificará automaticamente a disponibilidade do site por correio. O projeto é exportado para PDF.
No momento da publicação, não havia muitas funções adicionais, mas foram anunciados comentários em capturas de tela de páginas, a capacidade de reorganizar a estrutura do projeto e proteger projetos com uma senha.
SumárioOs Sitemaps visuais serão convenientes para a análise preliminar do projeto. Especialmente se houver a necessidade de examinar e avaliar o layout das páginas.
Custo, assinatura : um plano gratuito prevê o registro de um usuário e 50 capturas de tela com uma limitação da profundidade do rastreamento a dois níveis. Assinaturas pagas a partir de US $ 29 por mês.
Facilidade de uso : para usuários iniciantes e intermediários
Design : ★★★★ ☆
Trabalho em equipe : ✓
Exportar : link, PDF
Slickplan
O serviço multifuncional do Slickplan inclui um designer de mapa do site, um diagrama e uma ferramenta de criação de fluxo. Uma ampla variedade de ferramentas de planejamento de conteúdo e modelos de design.
O ambiente é lógico, a área de trabalho é claramente separada dos elementos de navegação. E a barra de navegação herda a lógica dos aplicativos de desktop clássicos. Você pode criar um mapa do site a partir do zero ou importá-lo: é possível usar arquivos XML e de texto, além de um rastreador interno.
A mecânica da manipulação de blocos é intuitiva. A adição de novas páginas é rápida e os objetos arrastar e soltar permitem alterar a ordem e a hierarquia. As configurações para cada elemento (página, bloco) do mapa do site incluem:
- Adicionando conteúdo (texto e multimídia)
- Adicionar notas
- Seleção de tipo de página
- Modelo de Design de Distribuição
- Gráficos
- Adicionar link
No Slickplan, você pode estilizar um mapa do site não apenas com a ajuda de esquemas de cores preparados, mas também individualmente. As configurações podem ser encontradas na guia Estilos da barra de ferramentas superior.
O trabalho em equipe é implementado em detalhes. Além de usuários com direitos de editor, você pode conectar usuários cujos direitos estão limitados à exibição do projeto. Uma seção com comentários ajudará a conduzir discussões sobre o projeto online.
O serviço fornece a conexão do Google Analytics. Esse é um recurso distinto e útil do Slickplan. Uma integração com serviços de terceiros (Basecamp, Slack e outros) permite compartilhar o projeto em um formato conveniente. O projeto pode ser protegido por senha.
Obviamente, com esse conjunto de recursos, você não deve esperar assinaturas gratuitas. Um período de avaliação de 30 dias levará à seleção de um plano adequado de US $ 9,99 por mês.
SumárioRico conjunto de recursos e interface inteligente. Um enorme conjunto de recursos e configurações de exportação.
Custo, assinatura : período de avaliação de 30 dias. Assinaturas pagas a partir de US $ 9,99 por mês.
Facilidade de uso : para usuários de níveis intermediário e avançado
Design : ★★★★ ☆
Trabalho em equipe : ✓
Exportação : Link, PDF, EPS, HTML, CSV, TXT, DOCX, XML do mapa do site do Slickplan
Para dar uma olhada no Dynomapper, você precisará criar uma conta. Um período de avaliação de 14 dias está disponível. O conhecimento do serviço começará com um visual video explorer.
Como nos serviços avançados de mapeamento visual de sites, o usuário é convidado a iniciar o projeto do zero ou usar a exportação. Aglomerar-se, aliás, também existe.
Vale a pena notar que o design do ambiente é contido e conservador. E o processo de criação de um mapa do site é mais como uma interação clássica com o Explorer (Win) ou o Finder (Mac). A estrutura do site, em contraste com os serviços descritos anteriormente, é exibida em um formulário semelhante a uma árvore de arquivos.
Compacto e apelará para aqueles que estão acostumados a essa interação. Embora o modo de visualização já seja exibido na forma de um fluxograma, e forneça 4 tipos adicionais de exibição.
As configurações para as propriedades e funções dos elementos estão convenientemente localizadas no painel direito das guias:
- Página (informações estendidas da página)
- Conteúdo (planejando (adicionando) texto e conteúdo multimídia)
- Google Analytics
- Comente
O projeto privado estará disponível apenas para usuários conectados à conta.
Opções flexíveis de exportação para PDF permitem escolher o formato (tamanho) antes de salvar. Além disso, o usuário define e limita o número de níveis de aninhamento para exportação.
Manipulações e ações separadas requerem um estudo mais detalhado da seção de ajuda.
SumárioA ferramenta causa uma impressão completa e, provavelmente, implica um estudo mais profundo dos projetos e trabalho com o conteúdo.
Custo, assinatura : período de avaliação de 14 dias. Assinaturas pagas a partir de US $ 49 por mês.
Facilidade de uso: para usuários de níveis intermediário e avançado
Design : ★★ ☆☆☆
Trabalho em equipe : ✓
Exportar : link, PDF, CSV
Rastreador gratuito, gera um mapa do site de um site existente automaticamente. O resultado do rastreamento é um diagrama dos links das páginas do site. E, em alguns casos, o resultado pode ser em larga escala.
Os criadores do serviço postaram o código-fonte no Github (
https://github.com/alentum ). O rastreador armazena cuidadosamente o histórico de solicitações.
Custo, assinatura : grátis
Facilidade de uso : para iniciantesDesign : ★★ ☆☆☆Creatly
Criou cuidadosamente um ambiente de demonstração para testar o serviço sem registro. A criação de sitemaps é apenas parte da funcionalidade da ferramenta. O Creatly é projetado para visualizar várias estruturas de informações.Um projeto de demonstração já foi criado no ambiente de teste para a criação de sitemaps. Um exemplo foi criado para ajudar a entender a mecânica básica e lidar com esta tarefa.
Drag'n'drop é visual: arrastar e soltar elementos é acompanhado por links visuais entre páginas e objetos. Editar páginas, excluir objetos e conectar linhas funciona como em um editor de vetores familiar. Portanto, para os designers, a mecânica será compreensível e próxima.
O painel direito expansível contém configurações de estilo e informações adicionais. A grade e a ligação a ela são um recurso conveniente. É possível selecionar fontes, determinar o alinhamento do texto em um bloco, etc. Uma paleta rica em estilo ajudará a definir acentos no mapa do site.
O tamanho do documento em pixels é um recurso curioso. O usuário está sempre ciente da resolução da imagem antes de exportá-la. O
resumoda mecânica da Creately é o mais próximo dos editores gráficos. As funções do serviço permitem criar não apenas mapas de site, mas também muitos outros diagramas e fluxogramas.Custo, assinatura : o plano gratuito inclui 5 documentos públicos e a capacidade de adicionar até 3 colaboradores. Assinaturas pagas a partir de US $ 5 por mês.Facilidade de uso: para usuários de níveis intermediário e avançadoDesign : ★★★★ ☆Trabalho em equipe : ✓Exportação : link, PNG, JPG, SVG********************* **************PS
Para facilitar a escolha, aqui está uma tabela de comparação para todos os serviços (no final) e mais algumas capturas de tela.