360€
Presentación
En la actualidad, el diseño web se ha convertido en un componente esencial para el éxito de cualquier empresa o proyecto. La capacidad de crear sitios web atractivos, funcionales y accesibles es fundamental para garantizar una experiencia positiva del usuario y lograr los objetivos comerciales.
El diseño web y la usabilidad son aspectos cruciales en la creación de sitios web efectivos. Este Curso en Diseño Web aborda en detalle los principios y elementos básicos del diseño, incluyendo la tipografía, el color, los iconos, las formas, las imágenes y el contenido audiovisual. Además, se explora la importancia de la composición visual y se analizan las teorías de la percepción para comprender cómo los usuarios interactúan con los diseños.
Universidades colaboradoras
Para qué te prepara
Este Curso en Diseño Web te prepara para convertirte en un diseñador web competente y versátil. Aprenderás a aplicar los principios del diseño web y la usabilidad en la creación de sitios web atractivos y funcionales. Obtendrás habilidades prácticas en el uso de herramientas como Adobe XD para diseñar interfaces de usuario de alta calidad y dominarás Bootstrap 4 para desarrollar sitios web responsivos.
Objetivos
- Comprender los principios del diseño web y su aplicación en la creación de sitios atractivos y funcionales.
- Aplicar los elementos básicos del diseño, como la tipografía, el color, los iconos y las imágenes.
- Dominar el proceso de diseño web, desde la investigación inicial hasta el prototipado.
- Mantenerse actualizado sobre las guías de estilo y las tendencias digitales para crear diseños modernos y atractivos.
- Diseñar interfaces de usuario intuitivas y atractivas utilizando Adobe XD.
- Desarrollar sitios web responsivos utilizando Bootstrap 4 y las diferentes utilidades que ofrece.
- Aplicar los principios del diseño responsive para garantizar que los sitios web sean accesibles y funcionales.
A quién va dirigido
Este Curso en Diseño Web es adecuado tanto para principiantes que desean adquirir conocimientos fundamentales como para diseñadores y desarrolladores web que deseen ampliar sus habilidades en diseño UI, prototipado y desarrollo web responsivo. No se requieren conocimientos previos de diseño o programación, ya que el curso aborda los conceptos desde los fundamentos.
Salidas Profesionales
Las salidas laborales de este Curso en Diseño Web son muy amplias y diversas. Podrás trabajar como diseñador web en agencias digitales, estudios de diseño, departamentos de marketing o como profesional independiente. También podrás trabajar como diseñador UI/UX, creando interfaces de usuario intuitivas y atractivas e incluso ofrecer tus servicios como freelance.
Temario
MÓDULO 1. DISEÑO WEB Y USABILIDAD
UNIDAD DIDÁCTICA 1. INTRODUCCIÓN AL DISEÑO WEB
- Breve historia del diseño
- Comunicación y publicidad
- Teoría de la percepción
- Elementos básicos que intervienen en el diseño
- La composición
- Fases del diseño
- Diseño digital
UNIDAD DIDÁCTICA 2. ELEMENTOS BÁSICOS PARA EL DISEÑO WEB
- Tipografía
- Color
- Iconos
- Formas
- Imágenes
- Contenido audiovisual
- Efectos (sombras, D, flat y otros)
UNIDAD DIDÁCTICA 3. LAYOUT
- ¿Qué es el Layuot?
- Rejilla
- Composición
- Elementos
- Espacios vacíos
- Coherencia y consistencia
UNIDAD DIDÁCTICA 4. PROCESO
- Introducción al proceso de diseño web
- Aproximación e Investigación inicial
- Idear
- Bocetos
- Arquitectura de la información
- Card Storing
- User flow o diagrama de flujo de usuario
- Wireframing
- Prototipado
- Planificación
UNIDAD DIDÁCTICA 5. DIRECTRICES Y TENDENCIAS DIGITALES
- Guías de estilo
- Ventajas y Desventajas
- Apple IOS Human Interface Guidelines
- Google Material Design
- Tendencias digitales
- Tendencias del diseño UX/UI
UNIDAD DIDÁCTICA 6. DISEÑO EN DISPOSITIVOS
- Patrones de diseño y navegación
- Especificaciones para móviles
- Sitios, sitios par amóviles y apps
- Diseñar para pantallas pequeñas
- Eltimpo de respuesta y carga
- Tablets y E-Readers
UNIDAD DIDÁCTICA 7. LENGUAJE HTML
- Textos en HTML
- Enlaces
- Listas en HTML
- Imágenes y Objetos
- Tablas
- Formularios
- Marcos
- Estructuras y layout
- Otras etiquetas
UNIDAD DIDÁCTICA 8. WIREFRAMES Y PROTOTIPOS
- ¿Qué son los wireframes?
- Objetivos del wireframe
- Relación con la UI
- Clasificación de los wireframes
- Arquitectura de la información
- Wireframe para una app
MÓDULO 2. DISEÑO UI CON ADOBE XD
UNIDAD DIDÁCTICA 1. PRIMEROS PASOS EN ADOBE XD
- Introducción a Adobe XD
- Instalación y configuraciones principales
- Menú Herramientas
- Generación de Artboards y guía
- Ejercicios
UNIDAD DIDÁCTICA 2. HERRAMIENTAS BÁSICAS
- Formas: creación, modificación, colores, gradiantes y paletas
- Textos: propiedades, línea o área, alineación, color y estilos
- Imágenes y exportación: importanción, modificaciones y exportación de artboards
- Ejercicios
UNIDAD DIDÁCTICA 3. ORGANIZACIÓN DE ELEMENTOS I
- Organización de capas nombres y grupos
- Bloqueo y fusión
- Tipos de máscaras y aplicación en proyectos
- Ejercicios
UNIDAD DIDÁCTICA 4. ORGANIZACIÓN DE ELEMENTOS II
- Alineación de elementos, márgenes y distribución de formas
- Funcionalidad de repetición
- Aplicación y configuración de componentes
- Ejercicios
UNIDAD DIDÁCTICA 5. CUADRÍCULAS
- Creación y aplicación
- Diseño de páginas
- Prototipo
- Adaptación a mobile
- Ejercicios
UNIDAD DIDÁCTICA 6. INTERFACES
- Constantes y variables de una interfaz
- Header, footer y menú
- Botones y galerías
- Ejercicios
MÓDULO 3. BOOTSTRAP 4: DESARROLLO WEB RESPONSIVE
UNIDAD DIDÁCTICA 1. INTRODUCCIÓN A CSS
- Introducción CSS
- Soporte de CSS en navegadores
- Especificación oficial
- Funcionamiento básico de CSS
- ¿Cómo incluir CSS en la Web?
- Estilo básico
- Medios CSS
- Comentarios
- Sintaxis de la definición
UNIDAD DIDÁCTICA 2. CSS: SELECTORES, UNIDADES DE MEDIDA Y COLORES
- Selectores CSS
- Unidades de medida
- Colores
UNIDAD DIDÁCTICA 3. CSS: PSEUDOCLASES Y PSEUDOELEMENTOS CSS
- Pseudoclases
- Pseudo-elementos
- Otras pseudoclases y pseudoelementos
UNIDAD DIDÁCTICA 4. CSS: MODELOS DE CAJA, POSICIONAMIENTO Y VISUALIZACIÓN
- Modelo de cajas
- Propiedades de las cajas
- Margen, relleno, bordes y modelo de cajas
- Posicionamiento y visualización
- Posicionamiento
- Visualización
UNIDAD DIDÁCTICA 5. CSS: FLEXBOX
- En qué cosiste
- Visualización: Display
- Contenedores flexibles: flex e inline-flex
- Orientación: flex-box, flex-direction y flex-wrap
- La propiedad order
- Alineación de los elementos flexibles
- Soporte de los navegadores
UNIDAD DIDÁCTICA 6. CSS: HOJAS DE ESTILOS
- Crear y vincular hojas de estilos
- Estructura
- Propiedades CSS
- Selectores
- Posición y tamaño
- Texto
- Imágenes
- Listas, tablas, formularios
UNIDAD DIDÁCTICA 7. RESPONSIVE DESIGN
- Introducción
- Definición de Diseño Web Responsive
- ¿En qué consiste el diseño responsive?
- Ventajas del diseño responsive
- SEO y diseño responsive
UNIDAD DIDÁCTICA 8. INTRODUCCIÓN A BOOTSTRAP 4
- Introducción a Bootstrap 4
- Diferencias entre Bootstrap 3 y Bootstrap 4
- Generalidades de Bootstrap 4
- Descarga e instalación de Bootstrap 4
UNIDAD DIDÁCTICA 9. CARACTERÍSTICAS Y USO DEL LAYOUT
- Uso de container y Media Queries (Responsive breakpoints)
- Utilidades dentro de nuestro layout: flexbox, margin, padding and visibility
- Estructura básica del Grid
- Posibilidades de personalización del Grid
UNIDAD DIDÁCTICA 10. CREACIÓN DE ELEMENTOS HTML CON BOOTSTRAP 4
- Tablas
- Jumbotron
- Alertas
- Barras de progreso
- Paginación
- Listas de grupos
- Desplegables
- Barras de navegación
- Formularios
- Carruseles
- Modales
UNIDAD DIDÁCTICA 11. PERSONALIZACIÓN DE ELEMENTOS CON BOOTSTRAP 4
- Tipografía
- Colores
- Imágenes
- Botones
- Formularios personalizados
UNIDAD DIDÁCTICA 12. UTILIDADES AVANZADAS DE PERSONALIZACIÓN
- Bordes: color, posición y radio
- Uso de Clearfix
- Colores de fondo con grado de intensidad
- Uso del atributo Display
- Uso del sistema Flex
- Fijación de elementos mediante posiciones
- Modificaciones avanzadas del texto
- Ejemplos combinados del uso de Bootstrap en nuestra página
Titulación
Titulación Universitaria:
Solicitar información