Como crear una landing page para tu proyecto universitario

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

Que es una landing page y por que la necesitas

Una landing page es una pagina web independiente diseñada con un objetivo especifico: informar sobre tu proyecto, captar usuarios de prueba o simplemente presentar tu trabajo de forma profesional.

A diferencia de un sitio web completo con multiples secciones, la landing page tiene una sola pagina 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. Adaptala a tu proyecto:

1. Hero section (seccion principal)

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

Elementos obligatorios:

• Titulo claro y directo (maximo 10 palabras)
• Subtitulo que explique el beneficio principal
• Boton de accion (CTA) — "Probar demo", "Ver documentacion", "Descargar"
• Imagen o captura del sistema

Ejemplo:

• Titulo: "Sistema de Gestion de Inventarios para PYMES"
• Subtitulo: "Controla tu stock en tiempo real desde cualquier dispositivo"
• CTA: "Probar demo gratuita"

2. Problema y solucion

Explica brevemente que problema resuelve tu proyecto y como lo hace. Usa un formato de antes/despues o problema/solucion.

Sin tu sistema	Con tu sistema
Control de inventario en Excel	Dashboard en tiempo real
Errores de conteo manuales	Escaneo de codigo de barras
Reportes mensuales a mano	Reportes automaticos diarios

3. Funcionalidades principales

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

• Registro de productos — Agrega items con nombre, precio, cantidad y categoria
• Alertas de stock bajo — Notificacion automatica cuando un producto baja del minimo
• 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 vacias. Carga datos de prueba realistas antes de tomar las capturas.

5. Seccion tecnica (opcional pero recomendada)

Para proyectos de ingenieria, una seccion que mencione el stack tecnologico 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 invitacion clara: probar la demo, contactar al equipo, descargar la documentacion.

Herramientas para crear tu landing page

Opcion 1: Sin codigo (rapido, para no-programadores)

Herramienta	Ventaja	Costo
Carrd	Una sola pagina, rapido y limpio	Gratis (basico)
Google Sites	Integracion con Drive	Gratis
Notion (publicado)	Si ya usas Notion para documentar	Gratis

Opcion 2: Con codigo (recomendado para ingenieria)

Herramienta	Stack	Deploy gratuito
HTML + CSS + JS	Basico, sin frameworks	GitHub Pages
React + Vite	Moderno, componentes	Vercel
Next.js	SSR, optimizado para SEO	Vercel
Astro	Rapido, ideal para contenido estatico	Netlify

Para un proyecto de ingenieria en sistemas, la opcion con codigo es la esperada. Si usas HTML basico, al menos asegurate de que sea responsive y tenga un diseño limpio.

Diseño: principios basicos

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

Tipografia:

• Usa maximo 2 fuentes (una para titulos, 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
• Margenes generosos hacen que todo se vea mas profesional

Imagenes:

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

Ejemplo completo: estructura HTML basica

Si decides usar HTML puro, tu archivo index.html deberia 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 seccion 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. Se conciso
3. Sin CTA claro — Si no le dices al usuario que hacer, no hara 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 cotizacion.

Deploy: como poner tu landing en linea

La forma mas sencilla para un proyecto universitario:

1. Sube tu codigo 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 raiz
3. Tu pagina estara 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 pagina web de tu proyecto? Nuestro equipo de desarrollo te guia paso a paso. Conoce nuestros servicios.