Cómo crear una landing page para tu proyecto universitario

En muchas carreras de ingeniería en Honduras — especialmente en la UNAH, UNITEC y CEUTEC — los proyectos de clase o de graduación requieren un componente web funcional. Una landing page bien diseñada puede ser tu entregable principal o el complemento visual de tu sistema. Aquí aprenderás a crear una desde cero, sin experiencia previa en diseño.

Qué es una landing page y por qué la necesitas

Una landing page es una página web independiente diseñada con un objetivo específico: informar sobre tu proyecto, captar usuarios de prueba o simplemente presentar tu trabajo de forma profesional.

A diferencia de un sitio web completo con múltiples secciones, la landing page tiene una sola página con un flujo claro de arriba hacia abajo.

Usos en proyectos universitarios:

• Presentar tu app o sistema a evaluadores
• Captar usuarios para pruebas de usabilidad
• Documentar el alcance y funcionalidades del proyecto
• Demostrar competencias de desarrollo web

Estructura recomendada

Toda landing page efectiva sigue una estructura probada. Adáptala a tu proyecto:

1. Hero section (sección principal)

Lo primero que ve el usuario. Debe comunicar en 5 segundos qué hace tu proyecto.

Elementos obligatorios:

• Título claro y directo (máximo 10 palabras)
• Subtítulo que explique el beneficio principal
• Botón de acción (CTA) — "Probar demo", "Ver documentación", "Descargar"
• Imagen o captura del sistema

Ejemplo:

• Título: "Sistema de Gestión de Inventarios para PYMES"
• Subtítulo: "Controla tu stock en tiempo real desde cualquier dispositivo"
• CTA: "Probar demo gratuita"

2. Problema y solución

Explica brevemente qué problema resuelve tu proyecto y cómo lo hace. Usa un formato de antes/después o problema/solución.

Sin tu sistema	Con tu sistema
Control de inventario en Excel	Dashboard en tiempo real
Errores de conteo manuales	Escaneo de código de barras
Reportes mensuales a mano	Reportes automáticos diarios

3. Funcionalidades principales

Lista 3-5 funcionalidades clave con iconos o imágenes. No pongas todas — solo las que demuestran el valor de tu proyecto.

• Registro de productos — Agrega items con nombre, precio, cantidad y categoría
• Alertas de stock bajo — Notificación automática cuando un producto baja del mínimo
• Reportes exportables — Genera PDF con el estado actual del inventario

4. Capturas de pantalla o demo

Incluye 2-3 capturas de pantalla de tu sistema funcionando. Si es posible, un enlace a una demo en vivo o un video corto.

Las capturas deben mostrar flujos reales, no pantallas vacías. Carga datos de prueba realistas antes de tomar las capturas.

5. Sección técnica (opcional pero recomendada)

Para proyectos de ingeniería, una sección que mencione el stack tecnológico agrega credibilidad:

• Frontend: React + Tailwind CSS
• Backend: Node.js + Express
• Base de datos: PostgreSQL
• Deploy: Vercel + Railway

6. Call to action final

Cierra con una invitación clara: probar la demo, contactar al equipo, descargar la documentación.

Herramientas para crear tu landing page

Opción 1: Sin código (rápido, para no-programadores)

Herramienta	Ventaja	Costo
Carrd	Una sola página, rápido y limpio	Gratis (básico)
Google Sites	Integración con Drive	Gratis
Notion (publicado)	Si ya usas Notion para documentar	Gratis

Opción 2: Con código (recomendado para ingeniería)

Herramienta	Stack	Deploy gratuito
HTML + CSS + JS	Básico, sin frameworks	GitHub Pages
React + Vite	Moderno, componentes	Vercel
Next.js	SSR, optimizado para SEO	Vercel
Astro	Rápido, ideal para contenido estático	Netlify

Para un proyecto de ingeniería en sistemas, la opción con código es la esperada. Si usas HTML básico, al menos asegúrate de que sea responsive y tenga un diseño limpio.

Diseño: principios básicos

No necesitas ser diseñador para crear algo presentable. Sigue estas reglas:

Tipografía:

• Usa máximo 2 fuentes (una para títulos, otra para cuerpo)
• Google Fonts es gratuito. Recomendaciones: Inter, Poppins, Source Sans Pro

Colores:

• Elige un color primario y uno de acento. El resto en escala de grises
• Usa herramientas como Coolors.co para generar paletas

Espaciado:

• Deja espacio entre secciones. El whitespace no es desperdicio — es diseño
• Márgenes generosos hacen que todo se vea más profesional

Imágenes:

• Usa capturas reales de tu sistema, no stock photos genéricas
• Si necesitas iconos, usa Lucide Icons o Heroicons (gratis)

Ejemplo completo: estructura HTML básica

Si decides usar HTML puro, tu archivo index.html debería tener esta estructura:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mi Proyecto - Sistema de Inventarios</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <!-- Hero: titulo, subtitulo, CTA -->
  </header>
  <section id="problema">
    <!-- Problema y solucion -->
  </section>
  <section id="funcionalidades">
    <!-- 3-5 features principales -->
  </section>
  <section id="capturas">
    <!-- Screenshots del sistema -->
  </section>
  <section id="stack">
    <!-- Tecnologias utilizadas -->
  </section>
  <footer>
    <!-- CTA final y creditos -->
  </footer>
</body>
</html>

Cada sección debe tener un propósito claro. No agregues secciones solo para llenar espacio.

Errores comunes

1. No hacerla responsive — Si tu landing no se ve bien en celular, pierdes puntos. Usa media queries o un framework CSS como Tailwind
2. Demasiado texto — Una landing page no es un documento. Sé conciso
3. Sin CTA claro — Si no le dices al usuario qué hacer, no hará nada
4. Links rotos — Verifica cada enlace antes de presentar. Especialmente la demo
5. Diseño inconsistente — Mezclar 5 fuentes y 8 colores no es "creativo", es desorden

En Folium Labs diseñamos y desarrollamos landing pages profesionales para proyectos universitarios y emprendimientos. Solicita una cotización.

Deploy: cómo poner tu landing en línea

La forma más sencilla para un proyecto universitario:

1. Sube tu código a GitHub — Crea un repositorio y sube tus archivos
2. Conecta con Vercel o Netlify — Ambos ofrecen deploy gratuito desde GitHub
3. Configura un dominio personalizado (opcional) — Un .com cuesta aproximadamente $12/año

Si usas GitHub Pages:

1. Ve a Settings > Pages en tu repositorio
2. Selecciona la rama main y la carpeta raíz
3. Tu página estará en tunombre.github.io/tu-repositorio

Tener tu proyecto desplegado en una URL real le da un nivel de profesionalismo que impresiona a los evaluadores.

¿Necesitas ayuda para crear la página web de tu proyecto? Nuestro equipo de desarrollo te guía paso a paso. Conoce nuestros servicios.