Diseño, desarrollo y publicación de una página web
Un curso de Javier Usobiaga FerrerDiseñador web
Un curso de Javier Usobiaga Ferrer, Diseñador web
Haz un recorrido completo por el proceso de creación y publicación de una web usando HTML, CSS y JavaScript
En el diseño web, una buena interfaz busca complacer y responder a cómo el cerebro humano actúa. Eso significa que tenemos en todos nosotros un diseñador, a veces inconsciente o dormido, que es capaz de ver algo que funciona, que es armónico, aunque no entienda por qué. Si quieres aprender los principios de diseño de una web y despertar a ese diseñador que llevas dentro, estás en el lugar indicado.
En este curso verás las dos caras de la creación de una web: por un lado verás las técnicas básicas para planificar una web, organizar la información en wireframes, y crear una gramática visual con tipografía, paletas de colores, espaciados, composición, ilustración. Después te adentrarás en la construcción de esa página usando HTML, CSS, y JavaScript, hasta el momento de publicar la página en internet.
Tu guía durante este proceso será Javier Usobiaga, diseñador web, fundador del estudio Swwweet y profesor de otros cursos en Domestika como Gráficos vectoriales SVG: ilustrar y animar con código, Layout web con CSS Grid, Flexbox y otras técnicas modernas, Introducción a la programación en JavaScript e [Introducción al Desarrollo Web Responsive con HTML y CSS](Introducción al Desarrollo Web Responsive con HTML y CSS), que pueden servirte como complemento a lo expuesto en este curso.
¿Qué aprenderás en este curso online?
27 lecciones & 33 recursos adicionales
¿Qué haremos en el curso?
1 minuto, 12 segundos
Objetivos del diseño, marco de trabajo y referencias
6 minutos, 50 segundos
Inventario de contenidos
6 minutos, 17 segundos
Arquitectura de la información
9 minutos, 56 segundos
Principios y herramientas
4 minutos, 9 segundos
Investigación visual
6 minutos, 32 segundos
¿Qué incluye este curso?
Empezarás el curso conociendo a Javier y a algunos diseñadores y desarrolladores que escriben artículos y hacen diversos experimentos sobre las tecnologías web a los que merece la pena seguirles la pista. Descubrirás también los contenidos del curso.
Aprenderás sobre los principios del diseño visual y los elementos que lo componen, y trabajarás principalmente los más fundamentales, como la tipografía, el color, la retícula y la ilustración.
Obtendrás tu primer acercamiento a un generador de HTML estático y su sistema de plantillas, así como a la organización de archivos y la creación de páginas maestras.
En la siguiente unidad, empezarás a pasar el sistema de diseño planteado al código front-end: la tipografía, el color, la retícula y otros componentes.
Añadirás más elementos de interacción al proyecto a través de diferentes librerías y funciones de JavaScript.
Verás cómo funcionan los gestores de versiones de código y, finalmente, usarás un servicio de publicación para dar a conocer tu web al mundo.
Software y herramientas recomendados para este curso
¿Cuál es el proyecto del curso?
Crearás, desarrollarás y publicarás una página web con tu porfolio de trabajo.
Proyectos de estudiantes del curso
¿A quién está dirigido este curso online?
A todas las personas que tengan interés en aprender los principios del diseño de una web y que quieran publicar su propia página web.
Requisitos y materiales
Sería recomendable tener unos conocimientos básicos de HTML y CSS. Si no dispones de ellos, se recomienda completar el primer curso de Javier en Domestika: Introducción al desarrollo web responsive con HTML y CSS.
Necesitarás un ordenador y un editor de código (Javier te propondrá algunos gratuitos). También puede ser interesante contar con un programa de diseño visual como Sketch, Figma o Adobe XD, aunque no son imprescindibles.
Opiniones
- hace 2 meses
I really enjoyed this course. I already had a website I needed to build and I was able to apply this to improve it so much. It’s comprehensive and well structured.
- hace 4 meses
Muy buen curso y muy buena explicación del profesor, como siempre. Perfecto para iniciarse en la creación de webs
- hace 6 meses
Excelente curso para tener las bases de animación con css
- hace 6 meses
Me gustó
- hace 7 meses
Excelente curso, viene muy ordenado y armado. Es un muy buen profesor
También disfruta mucho en su faceta como profesor de Diseño Web en workshops y escuelas de renombre como Elisava, IDEP.
Usobiaga entiende la web en su globalidad, no solo lo bonita que puede quedar en la pantalla del ordenador, sino su usabilidad en diferentes dispositivos y circunstancias.
En sus palabras “creo que tan importante como lo estética es lo rápido que cargue o lo bien que responda, y me parece que en nuestra industria nos olvidamos a menudo de eso”.
Contenidos
- U1
Introducción
- Presentación
- Influencias
- ¿Qué haremos en el curso?
- U2
Ideación de una web
- Objetivos del diseño, marco de trabajo y referencias
- Inventario de contenidos
- Arquitectura de la información
- U3
Diseño visual
- Principios y herramientas
- Investigación visual
- Composición tipográfica
- Paleta de colores en una interfaz
- Retícula y ritmo vertical
- Ilustración e iconografía
- U4
Sistema de plantillas
- Preparación del entorno y editores de código
- Estructura de archivos y funcionamiento
- Páginas maestras y creación de nuevas páginas
- Condicionales y parciales
- U5
Desarrollo frontend
- Organización del código
- Composición tipográfica y color
- Sistema de retícula
- Componentes de interfaz
- Completando la interfaz
- U6
Interacción web
- Menús interactivos y desplegables
- Implementando una galería
- Completando la interacción
- U7
Publicación de una web
- Gestión de versiones de código
- Servicios de publicación
- Recursos adicionales
- PF
Proyecto final
- Diseño, desarrollo y publicación de una página web
Qué esperar de un curso de Domestika
Aprende a tu ritmo
Disfruta aprendiendo desde casa, sin horarios y a tu ritmo. Tú decides cuándo seguir con cada unidad.
Aprende de los mejores profesionales
Aprende los métodos y técnicas más útiles con los mejores profesionales del sector creativo.
Conoce a profesores expertos
Cada profesor te transmitirá sus conocimientos con pasión, ofreciéndote explicaciones claras y una perspectiva profesional en cada lección.
Certificados
PLUSSi eres Plus, obtén un certificado personalizado y firmado por tu profesor. Compártelo en tu porfolio, en las redes sociales o donde quieras.
Ponte en primera fila
La alta calidad de los vídeos permitirá que no te pierdas ni un solo detalle. Gracias al acceso ilimitado, podrás ver las lecciones todas las veces que necesites para perfeccionar tus habilidades.
Comparte conocimientos e ideas
Pregunta, pide opinión y ofrece soluciones. Comparte tu experiencia de aprendizaje con otros estudiantes de la comunidad tan apasionados por la creatividad como tú.
Conecta con una comunidad creativa global
Esta comunidad cuenta con millones de usuarios de todo el mundo, personas curiosas y con ganas de explorar y expresar su creatividad.
Realiza cursos profesionalmente producidos
Domestika selecciona cuidadosamente los profesores y produce cada curso internamente para garantizar una experiencia de aprendizaje online excelente.
Preguntas frecuentes
El curso está orientado a personas con conocimientos básicos en HTML y CSS, pero no es necesario ser experto. Es ideal para quienes buscan profundizar en técnicas modernas de diseño web y desarrollo front-end.
Se recomienda tener conocimientos básicos de HTML y CSS. No es imprescindible experiencia avanzada, pero es útil entender la estructura básica de páginas web y edición de código.
Aprenderás a crear layouts responsivos, animaciones con CSS, gráficos SVG accesibles, arquitectura de la información, wireframes, prototipado, publicación de sitios web y a aplicar metodologías ágiles en proyectos digitales.
Necesitarás un editor de código (como VS Code), Node.js, una terminal, navegador web actualizado y acceso a herramientas como Figma, Keynote, PowerPoint o Notion para prototipado y organización.
Aprenderás a usar variables CSS para gestionar colores, tipografías y espaciados, facilitando la coherencia visual y permitiendo cambios globales eficientes en tus proyectos web.
Sí, practicarás el uso de CSS Grid y otras técnicas para crear estructuras web adaptables a distintos dispositivos, mejorando la experiencia del usuario final.
Sí, podrás desarrollar un proyecto propio, aplicando todos los conceptos de diseño, desarrollo y publicación web para armar un portafolio o sitio para clientes reales.