Capitulo 3 del Módulo 1 Cimientos del Proyecto Web

➜ Mockups e Identidad Visual

Creación de Mockups y Bosquejos del Proyecto Web | Antes de comenzar a programar, es crucial visualizar cómo se verá y funcionará nuestro sitio web. Crearemos mockups (bosquejos visuales) básicos que nos servirán de guía

Antes de comenzar a programar, es crucial visualizar cómo se verá y funcionará nuestro sitio web.
 En esta lección crearemos mockups (bosquejos visuales) básicos que nos servirán de guía para el diseño de las interfaces y la navegación.

¿Qué son los Mockups?

  • Representaciones visuales simples del diseño de cada página.
  • No son diseños finales, sino esquemas que muestran la estructura y distribución de los elementos.
  • Nos ayudan a definir qué secciones y funcionalidades tendrá cada vista.

Herramientas Sugeridas para Crear Mockups

  • Figma (gratuito con opción online)
  • Penpot (código abierto y gratuito)
  • Draw.io (rápido y sencillo para diagramas)
  • Papely lápiz (opción manual rápida y efectiva)

Mockups a Realizar

Páginas Principales:

  • Inicio:
    Estructura general de bienvenida, llamada a la acción, servicios destacados.
  • Diseño Portada
     
  • Empresa:
    Información de la empresa, misión, visión y valores.

  •  
  • Categorías → Servicios:
    Listado de categorías de servicios y dentro de cada categoría, los servicios asociados.
     
  • Blog:
    Listado de artículos recientes, categorías, vista de artículo individual.
     
  • Contacto:
    Formulario de contacto y datos de ubicación.

 


Panel de Administración:

  • Dashboard general.
  • Gestión de Perfil de Empresa.
  • Gestión de Categorías y Servicios.
  • Gestión de Posts del Blog.
  • Gestión de Mensajes de Contacto.
  • Gestión de Suscriptores.
     

Panel de Editor:

  • Dashboard limitado.
  • Gestión solo de Posts y Servicios.

 


Consideraciones para los Mockups

  • Diseño limpio y funcional.
  • Priorizar la usabilidad: Que sea fácil de navegar para el usuario final.
  • Pensar en versión móvil: El sitio será responsivo usando Tailwind CSS.

 

Identidad Visual 

🎨 Paleta de Colores Laratech

 

Uso Color Código HEX
Primario (Base) Teal Vivo #00BFA6
Secundario Azul Cielo Claro #66FFE8
Fondo Principal Azul Oscuro Profundo #0B0C1A
Texto Principal Blanco Puro #FFFFFF
Texto Secundario Gris Claro #B0BEC5
Botones de Acción (CTA) Verde Azulado Más Intenso #009688
Hover/Interacción Azul Cielo Suave #4DD0E1

🖋️ Fuentes Sugeridas

Para combinar con el estilo tecnológico y minimalista del logotipo, te sugiero:

  • Titulares (H1, H2, H3):

    • Poppins (bold o semi-bold) → Moderna y tecnológica.

    • Alternativa: Montserrat.

  • Texto de párrafos (body text):

    • Roboto (regular) → Altamente legible y amigable.

    • Alternativa: Open Sans.

  • Botones y Elementos UI:

    • Poppins (medium o semi-bold).


📋 Ejemplo de Uso de Colores

  • Navbar: Fondo azul oscuro (#0B0C1A) + texto blanco (#FFFFFF).

  • Botones: Fondo teal vivo (#00BFA6) + hover azul cielo suave (#4DD0E1).

  • Footer: Fondo azul oscuro, texto gris claro.

  • Secciones de Énfasis (Hero, Llamados a acción): Base azul oscuro con toques secundarios en azul cielo claro y verde azulado.

 

 


3054 visitas

Descarga el código del proyecto

Descarga el código fuente del proyecto adquiriendo el curso completo

Comprar

¡Qué aprenderás?

tooltip bs-tooltip-top bs-tooltip-end bs-tooltip-bottom bs-tooltip-start show fade tooltip-inner

Codea Applications

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú