Diseña la estructura de una página web con Figma

Marketing Digital

Ciclo Superior Marketing y Publicidad

Antes de construir una página web es necesario pensar qué información contendrá y cómo se organizará. En esta actividad crearás una lluvia de ideas, seleccionarás los apartados más importantes y los ordenarás mediante una estructura jerárquica en Figma.

No vas a diseñar todavía el aspecto final de la web. El objetivo es aprender a organizar sus contenidos para que las personas usuarias puedan entenderla y navegar por ella con facilidad.

Esta es la primera actividad práctica de Marketing Digital del Ciclo Superior de Marketing y Publicidad. Puedes aplicarla a un proyecto simulado elegido por tu equipo, utilizarla para planificar la web que construirás más adelante o trabajar sobre un proyecto real de clase. El caso original fue marquetingchabas.es, cuya estructura se planificó antes de crear la web.

Índice de la actividad

1. Descripción de la actividad

2. Pasos que debes seguir

3. Entregables

4. Variantes y relación con Marketing Digital

Descripción de la actividad

Imagina que debes preparar una nueva página web. Puedes inventar un proyecto, trabajar con la empresa o entidad simulada que elija tu equipo, comenzar a planificar la web que construirás en una evaluación posterior o participar en un proyecto real de clase. También puedes utilizar como referencia el caso del proyecto de Agencia Simulada marquetingchabas.es.

Tu equipo deberá decidir qué contenidos necesita esa web y cómo se relacionan entre sí.

• Identificar el objetivo y el público principal de una web.
• Proponer contenidos mediante una lluvia de ideas.
• Diferenciar páginas principales, páginas secundarias y contenidos dinámicos.
• Recordar los tipos de estructuras web estudiados en Marketing Digital.
• Organizar los apartados mediante una jerarquía clara.
• Representar visualmente la estructura con Figma.

Figma es una herramienta de diseño digital que permite crear esquemas, interfaces y prototipos de páginas web y aplicaciones. En esta primera actividad la utilizaremos de una forma sencilla: como un espacio visual donde colocar cajas, textos y líneas para representar la estructura de una web.

Puedes consultar Figma para la educación para conocer las opciones educativas de la herramienta. Para realizar esta actividad no necesitas utilizar funciones avanzadas de prototipado.

Pasos que debes seguir

Antes de empezar la lluvia de ideas, responde brevemente:

1. ¿Qué organización, negocio o proyecto representa la web?
2. ¿Cuál es su objetivo principal?
3. ¿A qué público se dirige?
4. ¿Qué debería poder encontrar o hacer una persona al visitarla?

Resume la web en aproximadamente 30 o 40 palabras.

En el proyecto de Agencia Simulada aparecieron propuestas como información sobre el ciclo, módulos, salidas profesionales, Erasmus+, FP Dual, FCT, proyectos, testimonios de antiguos estudiantes, noticias, revista, calendario, preguntas frecuentes y contacto.

Esta lista puede utilizarse como ejemplo. Cada equipo debe seleccionar, adaptar, añadir o eliminar contenidos según las necesidades de su propia web.

Revisa la lluvia de ideas y agrupa los contenidos relacionados. Elimina las repeticiones y las propuestas que no ayuden a cumplir el objetivo de la web.

Pregúntate si cada contenido es útil para el público, si merece una página propia, si puede incluirse dentro de otro apartado, si repite otra idea y si falta algún contenido importante.

Clasifica las ideas seleccionadas en:

• Páginas principales: apartados importantes que suelen aparecer en el menú.
• Páginas secundarias: contenidos incluidos dentro de una página principal.
• Secciones: bloques que forman parte de una página y no necesitan una URL independiente.
• Contenidos dinámicos: noticias, artículos o novedades que se publican periódicamente, normalmente en un blog.

Antes de continuar, consulta los apuntes de la Unidad 4 «Diseño y Gestión de Páginas Web».

Repasa los tres tipos de arquitectura explicados en los apuntes de Marketing Digital:

• Horizontal: las páginas se enlazan de forma directa desde el inicio y existe poca profundidad.
• Vertical: los enlaces profundizan desde la página de inicio hacia niveles inferiores.
• En silo: los contenidos se dividen y agrupan en categorías y subcategorías relacionadas.

Decide cuál se ajusta mejor a tu proyecto y escribe una justificación breve. Puedes combinar características si las necesidades de la web lo requieren.

La estructura elegida debe permitir que las personas usuarias encuentren la información con facilidad. En muchos proyectos será útil partir de una organización jerárquica: una página de inicio conduce a los apartados principales y estos, cuando sea necesario, a páginas secundarias.

Ordena los contenidos en tres niveles:

1. Página de inicio.
2. Apartados principales.
3. Páginas secundarias o subapartados.

Inicio
├── Quiénes somos
├── Servicios
│   ├── Servicio 1
│   └── Servicio 2
├── Proyectos
├── Blog
└── Contacto

1. Crea un archivo nuevo en Figma.
2. Escribe el nombre del proyecto y el objetivo de la web.
3. Coloca la página de inicio en la parte superior.
4. Añade debajo los apartados principales.
5. Sitúa las páginas secundarias bajo el apartado correspondiente.
6. Une los elementos con líneas para mostrar la relación jerárquica.
7. Utiliza formas, colores y tipografías de manera coherente.
8. Comprueba que el esquema pueda entenderse sin una explicación adicional.

Puedes emplear un color diferente para distinguir páginas, secciones y contenidos dinámicos. Incluye una pequeña leyenda si utilizas códigos de color.

A través de todas las entregas de los estudiantes, se decidió esta estructura final para la web marquetingchabas.es.

Entregables

Variantes y relación con Marketing Digital

La misma propuesta puede realizarse con una tienda de proximidad, una academia, una asociación, una ONG, un evento, un centro educativo, una empresa de emprendimiento, la Agencia simulada o marquetingchabas.es.

La estructura web influye en la navegación, la experiencia de usuario, la organización de contenidos y el posicionamiento en buscadores. Esta actividad constituye el primer paso del módulo y puede tener continuidad en Agencia simulada o en el proyecto Crea tu página web de la tercera evaluación. Más adelante se podrán desarrollar el diseño, los contenidos, el SEO y la construcción con WordPress.