La creación de prototipos es una etapa importante en el desarrollo web, que le permite identificar y formar el ADN de un proyecto en sus primeras etapas. En los últimos años, el número de servicios y herramientas en línea para la creación de prototipos ha crecido significativamente. Esta revisión presenta 10 servicios para crear mapas visuales del sitio.

Antes de continuar con la descripción de las herramientas, no será superfluo comprender la terminología.

Un mapa del sitio es la estructura de las páginas del sitio presentadas en un modelo jerárquico. Tal esquema ayuda a evaluar el volumen de páginas que forman un sitio, así como a comprender la lógica de su relación. A veces, estos son esquemas primitivos en organización y estructura. Y a veces muy complejo con tarjetas de anidamiento de varios niveles. Los sitios ayudan a planificar la distribución de contenido y la mecánica de navegación para un sitio futuro.

Considere tres tipos de mapas de sitio:

Los mapas de sitio visuales se utilizan como elemento auxiliar en la planificación, análisis y creación de prototipos de proyectos. Hoy es difícil imaginar el inicio del trabajo en un proyecto sin una planificación previa. El mapa del sitio ayudará a comprender mejor la mecánica de la navegación futura, para evaluar la cantidad de contenido necesario. El mapa visual del sitio es un elemento importante en la construcción de la comunicación dentro del equipo de desarrollo. Gracias a la estructura visual del sitio, la discusión, evaluación y asignación de recursos se simplifica enormemente.

Las plantillas de sitios web HTML están diseñadas para ayudarlo a navegar por su sitio. La tradición de crear una página separada con un mapa del sitio se considera obsoleta, pero, sin embargo, este enfoque no será superfluo si el proyecto tiene una estructura compleja y anidamiento multinivel.

Los mapas de sitio XML están ocultos para los usuarios, pero son importantes. Al describir la estructura del sitio y la relación de las páginas, los paquetes de sitio XML facilitan que los motores de búsqueda analicen el sitio. Por lo tanto, un efecto positivo en el ranking. En los sitios XML, la claridad de la descripción de la estructura y la sintaxis utilizada son importantes, porque los rastreadores de los motores de búsqueda no toleran la inconsistencia y la flojedad del código. El mapa del sitio XML reemplazó el método anterior de "descarga directa a motores de búsqueda" en una página separada dedicada. Ahora el mapa del sitio se está cargando directamente, o los desarrolladores solo esperan hasta que el motor de búsqueda encuentre el archivo por sí mismo. Al actualizar el archivo de mapa del sitio con una nueva estructura, proporciona una indexación más rápida de las páginas en comparación con el procedimiento estándar del motor de búsqueda automático.

¿Por qué necesitamos mapas de sitio visuales?

La planificación y creación de prototipos de sitios web ha sido durante mucho tiempo el estándar de la industria. Muy a menudo, el mapa mental del proyecto se construye primero. Esto se hace para determinar los elementos principales y secundarios del sitio futuro, así como las tareas que resolverá el sitio o el servicio.

En la siguiente etapa, una jerarquía detallada de páginas, se planifica su estructura. Esta etapa requiere reflexión y discusión. Por lo tanto, dicho prototipo debería ser claro para todos los participantes en el proceso (programadores, diseñadores, desarrolladores, gerentes de contenido). La estructura formalizada del sitio (mapa del sitio) se convierte en el punto de partida.

Pulpo.do

Un servicio con un enfoque minimalista y fresco para el diseño de interfaces, lanzado en 2019. Sin detalles y complementos innecesarios, Octopus funciona rápidamente y un lenguaje visual limpio lo hace funcionar.

La idea básica del diseño del sitio web Octopus es formar páginas a partir de bloques. Tales diseños son claros y están diseñados para dar una idea detallada de la estructura de la página futura.

Prueba Octopus.do sin registro. Solo tendrá que registrar un perfil cuando se guarde el proyecto.

La interfaz intuitiva no está sobrecargada de elementos y animación. Aunque los iconos individuales pueden parecer un poco pequeños. Crear y agregar bloques es rápido y fácil con una mecánica obvia.

Hay una forma más conveniente de agregar un bloque: simplemente presione Entrar y aparecerá un nuevo bloque en la parte inferior de la página. Este método le permite completar rápidamente el contenido con un solo teclado. Drag'n'drop se ejecuta de forma predecible y rápida.

A los bloques se les pueden asignar colores de una paleta de colores dada:

Los usuarios de suscripción paga de Octopus.do pueden exportar mapas de sitio de exportación en PNG y PDF. Con una suscripción gratuita, puede compartir un enlace directo al proyecto. Al mismo tiempo, los usuarios externos podrán realizar cambios en el mapa del sitio, lo que simplifica el trabajo en equipo.

La organización de las capas y secciones de información del servicio se abre en ventanas emergentes ordenadas. Esto da la impresión de que el usuario no abandona el espacio de trabajo de un editor minimalista.

La función de agregar una descripción de texto a los bloques será útil para planificar el contenido de un proyecto. Se abre una ventana emergente haciendo clic en el icono del documento en el lado derecho del bloque:

En el proceso de ensamblaje de contenido, a menudo es necesario evaluar rápidamente la ubicación de los materiales visuales (fotografías, ilustraciones). La función de agregar imágenes ayudará a hacer frente a esta tarea:

Por cierto, al agregar imágenes a la estructura, puede insertar diseños de diseño de página completos cuando estén listos.

Una característica distintiva de Octopus es la presencia de la función Estimate. La interfaz se implementa en forma de un panel móvil, que contiene una tabla de calculadora para estimar el costo del trabajo. Y con una tarifa por hora conocida para un examen específico, puede estimar los costos de tiempo y el presupuesto del proyecto.

Los usuarios tienen la opción de duplicar páginas en una jerarquía y crear una copia del proyecto. Control sobre el diseño del mapa del sitio: estilos de borde de página personalizables y estilo para marcos de teléfonos inteligentes, así como un mecanismo mejorado de trabajo en equipo.

Resumen

Un conjunto racional de herramientas y un diseño de interfaz inteligente que cumple con el espíritu de los tiempos. Las actualizaciones periódicas y las mejoras funcionales del equipo de Octopus hacen que el servicio sea atractivo y, por supuesto, útil.

Costo, suscripción : un plan gratuito incluye 1 proyecto activo. Suscripciones pagas desde $ 8 por mes.
Facilidad de uso: para principiantes y usuarios intermedios.
Diseño : ★★★★ ☆
Trabajo en equipo : ✓
Exportar : enlace, PDF y PNG (solo usuarios pagos)

Gloomaps

No es necesario registrarse es una ventaja del servicio Gloompas. El usuario se encuentra inmediatamente en un entorno de trabajo con un diseño minimalista. La interfaz es intuitiva y le ayuda a involucrarse en el proceso con bastante rapidez. Agregar y eliminar bloques del mapa del sitio ocurre con una mecánica comprensible y predecible.

La capacidad de personalizar el color de cada bloque individual, establecer el tamaño de fuente es una característica conveniente que ayuda a crear acentos en el mapa del sitio.

Por separado, vale la pena señalar la configuración de vista: Vista de mapa, Vista de matriz y Esquema. Dependiendo de la estructura y la escala del proyecto, puede elegir cómo mostrar el mapa del sitio.

En proyectos con una estructura engorrosa y anidamiento multinivel, será conveniente colapsar y expandir un grupo de páginas. Gloomaps es un servicio gratuito, pero no sin limitaciones. El enlace al proyecto se almacena durante 14 días, y cada nueva visita a la página del proyecto amplía la disponibilidad del enlace para los próximos 14 días. Hasta donde se sabe, no se pueden crear proyectos privados. No se proporciona la funcionalidad para la generación automática de mapas de sitio.

Para aquellos que usarán el servicio regularmente, es útil usar accesos directos, que se describen en la barra de menú de salida. Y las funciones de exportación en varios formatos amplían la capacidad de compartir el mapa del sitio creado.

Resumen
Un servicio gratuito con un conjunto óptimo de funciones y amplias posibilidades para exportar un proyecto terminado.

Costo, suscripción : gratis
Facilidad de uso : adecuado para principiantes
Diseño : ★★★ ☆☆
Trabajo en equipo : ✓
Exportar : enlace, PNG, PDF, XML

Flowmapp

Intuitivo y rico en plantillas, Flowmapp ayuda a crear mapas de sitio visuales y a planificar los flujos de usuarios.

Primero debes registrarte. El proyecto puede:

empezar desde cero
importar desde archivo xml
expandir plantilla existente

Hay tres tipos de proyectos en las plantillas preparadas: comercio electrónico, proyecto corporativo y portal de noticias.

En el proceso de conocer el servicio, las recomendaciones y consejos útiles sobre herramientas y características del entorno de trabajo aparecerán regularmente en la esquina inferior derecha.

Las animaciones y reacciones de los elementos de la interfaz ayudan a involucrarse en el proceso y aprender manipulaciones básicas. Implementación de grupo de páginas convenientemente implementada para eliminar o cambiar la etiqueta.

Una de las principales ventajas son las plantillas de página visual. La biblioteca de plantillas cubre la mayoría de los patrones de información posibles, una característica indispensable y clara en la preparación y planificación de contenido para el sitio futuro.

Y para aquellos que están interesados principalmente en la estructura, puede cambiar a una vista compacta con solo encabezados.

En cuanto a la navegación, se ha agregado una mecánica bastante conveniente, Project Map, al conjunto de características estándar. Project Map combina tanto el valor visual como el mecánico: se simplifica el movimiento alrededor de la estructura de grandes proyectos.

En cada una de las páginas del proyecto, puede agregar una descripción ampliada y adjuntar archivos individuales. Esta característica es útil en el proceso de llenar el sitio con contenido.

Las amplias opciones de exportación en formatos SVG y PNG le permiten elegir la mejor opción e incluso establecer la resolución de la imagen en la salida.

Resumen
Servicio con un conjunto de funciones bien pensado y una interfaz agradable. En una suscripción gratuita, las funciones están disponibles en una amplia gama. Adecuado para la presentación efectiva y de alta calidad de proyectos de mapa del sitio.

Costo, suscripción : el plan gratuito proporciona 1 proyecto activo y 100 MB de espacio, sin restricción para los colaboradores. Suscripciones pagas desde $ 8 por mes para pago anual.
Facilidad de uso : para principiantes y usuarios intermedios.
Diseño : ★★★★★
Trabajo en equipo : ✓
Exportar : enlace, PNG, SVG, PDF, DOCX

Escribir mapas

Relativamente simple en la organización Writemaps ayuda a diseñar mapas del sitio y planificar el contenido del proyecto. Para probar el servicio, debe registrarse.

Desde el punto de vista del diseño, la interfaz se puede describir como "folk" o simple. Un plan gratuito proporciona acceso a parte de la función: 3 mapas de sitio activos con 50 páginas. Las funciones restantes están disponibles para usuarios pagos.

Parte de la funcionalidad paga incluye la capacidad de resaltar las páginas del proyecto en color, combinarlas y agregarles contenido, crear secciones, compartir el proyecto y exportar mapas del sitio a PDF. Aunque para planes gratuitos, se proporciona exportación a CSV y XML.

Vale la pena señalar que el cambio entre el mapa del sitio y el contenido se implementa de manera conveniente y clara. Una lista de atajos ayudará a acelerar el trabajo.

Resumen
"Solo lo más necesario" es exactamente cómo puede caracterizar el enfoque de la funcionalidad de la versión gratuita. Una suscripción paga es adecuada para usuarios que planean distribuir contenido, además de la estructura general del sitio.

Costo, suscripción : el plan gratuito incluye 3 proyectos activos con un límite de 50 páginas. Suscripciones pagas desde $ 14.99 por mes.
Facilidad de uso : para principiantes y usuarios intermedios.
Diseño : ★★ ☆☆☆
Trabajo en equipo : ✓
Exportación : CSV, XML, PDF y enlace (solo usuarios pagos)

La raarquía

La versión beta del proyecto tiene un conjunto modesto de características. El mapa del sitio se construye desde cero y en un orden generativo utilizando el enlace al sitio.

En el momento de la publicación de la revisión, la mecánica de agregar páginas se organiza de la siguiente manera: debe llamar al menú contextual haciendo clic en los bloques de página.

No se proporcionan configuraciones de visualización de bloque adicionales. Sin embargo, drag'n'drop funciona de manera comprensible. Y los formatos de visualización del esquema le permiten cambiar el proyecto a un esquema biomórfico. Quizás este punto de vista parece claro y apropiado.

En el momento de la publicación, solo está disponible la exportación a un archivo CSV. No puedes compartir un enlace directo.

Costo, suscripción : gratis
Facilidad de uso : para principiantes
Diseño : ★★ ☆☆☆
Trabajo en equipo :
Exportar : CSV

Visual sitemaps

En el servicio Visual Sitemaps, los sitemaps se crean sobre la base de proyectos ya lanzados automáticamente. La herramienta rastrea la estructura del sitio y toma capturas de pantalla de tamaño completo de las páginas. Al mismo tiempo, el usuario determina la cantidad de capturas de pantalla y la profundidad de rastreo en los niveles. Los usuarios de suscripción gratuita tienen acceso a una profundidad de no más de 2 niveles.

El proceso de rastreo es relativamente rápido. Pero si el proyecto es voluminoso, será aconsejable comenzar el proceso y distraerse con otras tareas, y el servicio notificará automáticamente la disponibilidad del sitio por correo. El proyecto se exporta a PDF.

En el momento de la publicación, no hay tantas funciones adicionales, pero se han anunciado comentarios sobre capturas de pantalla de páginas, la capacidad de reorganizar la estructura del proyecto y proteger los proyectos con una contraseña.

Resumen
Visual Sitemaps será conveniente para el análisis preliminar del proyecto. Especialmente si es necesario mirar y evaluar el diseño de las páginas.

Costo, suscripción : un plan gratuito proporciona el registro de un usuario y 50 capturas de pantalla con una limitación de la profundidad del rastreo a dos niveles. Suscripciones pagas desde $ 29 por mes.
Facilidad de uso : para principiantes y usuarios intermedios.
Diseño : ★★★★ ☆
Trabajo en equipo : ✓
Exportar : enlace, PDF

Plan Slick

El servicio multifuncional Slickplan incluye un diseñador de mapas del sitio, un diagrama y una herramienta de creación de flujo. Una amplia gama de herramientas de planificación de contenido y plantillas de diseño.

El entorno es lógico, el área de trabajo está claramente separada de los elementos de navegación. Y la barra de navegación hereda la lógica de las aplicaciones de escritorio clásicas. Puede crear un mapa del sitio desde cero o importarlo: es posible utilizar archivos XML y de texto, así como un rastreador incorporado.

La mecánica de la manipulación de bloques es intuitiva. Agregar nuevas páginas es rápido, y los objetos de arrastrar y soltar le permiten cambiar el orden y la jerarquía. Las configuraciones para cada elemento (página, bloque) del mapa del sitio incluyen:

Agregar contenido (texto y multimedia)
Agregar notas
Selección de tipo de página
Plantilla de diseño de distribución
Gráficos
Agregar enlace

En Slickplan, puede estilizar un mapa del sitio no solo con la ayuda de esquemas de color preparados, sino también individualmente. La configuración se puede encontrar en la pestaña Estilos de la barra de herramientas superior.

El trabajo en equipo se implementa en detalle. Además de los usuarios con derechos de editor, puede conectar usuarios cuyos derechos se limitan a ver el proyecto. Una sección con comentarios ayudará a llevar a cabo discusiones sobre el proyecto en línea.

El servicio proporciona la conexión de Google Analytics. Esta es una característica distintiva y útil de Slickplan. Una integración con servicios de terceros (Basecamp, Slack y otros) le permite compartir el proyecto en un formato conveniente. El proyecto puede estar protegido con contraseña.

Por supuesto, con este conjunto de características no debe esperar suscripciones gratuitas. Un período de prueba de 30 días conducirá a la selección de un plan adecuado desde $ 9.99 por mes.

Resumen
Rico conjunto de funciones e interfaz inteligente. Un gran conjunto de características y configuraciones de exportación.

Costo, suscripción : período de prueba de 30 días. Suscripciones pagas desde $ 9.99 por mes.
Facilidad de uso : para usuarios de niveles intermedio y avanzado
Diseño : ★★★★ ☆
Trabajo en equipo : ✓
Exportar : Enlace, PDF, EPS, HTML, CSV, TXT, DOCX, Slickplan Sitemap XML

Dynomapper

Para mirar alrededor en Dynomapper tendrás que crear una cuenta. Un período de prueba de 14 días está disponible. El conocimiento del servicio comenzará con un explorador de video visual.

Al igual que en los servicios avanzados de mapeo visual del sitio, se invita al usuario a comenzar el proyecto desde cero o usar la exportación. Crowling, por cierto, también está allí.

Vale la pena señalar que el diseño del entorno es moderado y conservador. Y el proceso de crear un mapa del sitio es más como una interacción clásica con Explorer (Win) o Finder (Mac). La estructura del sitio, en contraste con los servicios descritos anteriormente, se muestra en un formulario que se asemeja a un árbol de archivos.

Compacto y atraerá a aquellos que están acostumbrados a tal interacción. Aunque el modo Vista previa ya se muestra en forma de diagrama de flujo, y proporciona 4 tipos adicionales de visualización.

La configuración de las propiedades y funciones de los elementos está convenientemente ubicada en el panel derecho de pestañas:

Página (Información de página extendida)
Contenido (planificación (adición) de texto y contenido multimedia)
Analítica
Comentario

El proyecto privado estará disponible solo para los usuarios conectados a la cuenta.

Las opciones flexibles de exportación a PDF le permiten elegir el formato (tamaño) antes de guardar. Además, el usuario define y limita el número de niveles de anidación para la exportación.

Manipulaciones y acciones separadas requieren un estudio más detallado de la sección de ayuda.

Resumen
La herramienta causa una impresión profunda y probablemente implica un estudio más profundo de los proyectos y el trabajo con contenido.

Costo, suscripción : período de prueba de 14 días. Suscripciones pagas desde $ 49 por mes.
Facilidad de uso: para usuarios de niveles intermedio y avanzado
Diseño : ★★ ☆☆☆
Trabajo en equipo : ✓
Exportación : enlace, PDF, CSV

Mapeador visual del sitio

Rastreador gratuito, genera un mapa del sitio de un sitio existente automáticamente. El resultado del rastreo es un diagrama de los enlaces de las páginas del sitio. Y en algunos casos, el resultado puede ser a gran escala.

Los creadores del servicio publicaron el código fuente en Github ( https://github.com/alentum ). El rastreador almacena cuidadosamente el historial de solicitudes.

Costo, suscripción : gratis
:
: ★★☆☆☆