➜ 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. 
- 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
Capítulo 4 – Instalación de Laravel y autenticación »
Descarga el código del proyecto
Descarga el código fuente del proyecto adquiriendo el curso completo
Comprar