() translation by (you can also view the original English article)
Si eres nuevo en el diseño web y no sabes aún cómo se diseña una página web, este curso de diseño web gratis para principiantes te enseñará todo lo que necesitas saber.
“Cómo seleccionar tipografías, cómo eliges colores, qué diablos es el espacio en blanco, y cómo posiciono y redimensiono los elementos adecuadamente?”
Estas son solo algunas de las cuestiones que trataremos en este épico curso de diseño web gratis para principiantes.
En cuanto a los fundamentos del diseño web, aprenderás sobre el color, la tipografía, el espaciado, las dimensiones, y el diseño responsive. Debatiremos la teoría, las mejores prácticas, y algunas herramientas que puedes usar para facilitarte el trabajo.
En cuanto a los patrones habituales de diseño, aprenderás sobre los elementos que puedes emplear para diseñar una página web, como por ejemplo, cabeceras, áreas héroe, botones, galerías de imagen, formularios de contacto, y mucho más. Veremos la definición y los casos de uso de cada uno de estos elementos, y después aplicaremos estos conocimientos a un proyecto de demostración, un sitio web de portafolio formado por tres páginas y diseñado en concreto para este curso. ¡Sigue leyendo y aprende cómo se diseña una página web!
Recursos de diseño web disponibles en Envato Elements
Encontrarás algunas de las mejores plantillas web premium en Envato Elements. Entre estos recursos premium se incluyen características de calidad que te ayudarán a diseñar y construir sitios web rápida y fácilmente. Gracias a tu suscripción a Envato Elements obtendrás acceso a ilimitados kits de UI, plantillas web, fuentes, temas para WordPress y otros útiles recursos para diseñadores web.
Completo curso de diseño web gratis para principiantes
Se trata de un amplio curso de diseño web gratis (5:20 horas de duración) que está dividido en 36 lecciones. Descubrirás que es un excelente recurso al que volver a consultar una y otra vez para aprender cómo se diseña una página web, así que asegúrate de marcar como favoritos los fragmentos que más te interesen.
Descarga el briefing del proyecto y los recursos del curso de diseño web gratis para continuar, y echa un vistazo al siguiente contenido de las lecciones para comprobar en detalle qué se cubre.
Curso de diseño de páginas web gratis: Introducción
1. ¡Bienvenidos al curso de diseño de páginas web gratis!
Así que quieres convertirte en un diseñador web, pero no tienes ni idea de por dónde empezar ni sobre cómo se diseña una página web. ¡No te preocupes! No es tan difícil como parece, aunque requiere tiempo y esfuerzo para aprender. En este curso, te guiaré a través de los pasos básicos para convertirte en un diseñador web. Aprenderás un montón de cosas, por ejemplo, la diferencia entre diseño de UI y UX o sobre cómo entender los briefings de proyectos y crear wireframes. Aprenderás sobre la tipografía, el color, el espaciado, las dimensiones y el uso de imaginería.
Este curso sobre fundamentos del diseño web también tiene una parte práctica que puedes realizar para consolidar todo lo aprendido en él. A través de ella aprenderás a emplear algunos de los patrones más habituales en el diseño web creando un sitio web de portafolio.
2. Proyecto y parte práctica del curso de diseño web gratis
Bien, como he mencionado anteriormente, en este curso de diseño de páginas web gratis trabajaremos con un proyecto de demo y tareas prácticas que puedes realizar. No lo concibas como deberes para casa porque a nadie le gustan, tómatelo como una oportunidad de poner en práctica lo aprendido durante el curso, ¿te parece bien?
Así que, permíteme empezar con el proyecto del curso de diseño de páginas web gratis y después hablaremos un poco sobre las tareas.
Enlaces relacionados:
3. Diseño UI vs. diseño UX vs. Diseño Web
Veamos qué significan todos estos acrónimos. UI, UX, diseñador web… ¿De qué tratan? ¿En qué se diferencia un diseñador UI de un diseñador UX? ¿Son ambos diseñadores web o es esto último algo totalmente distinto? Descubrámoslo.
Fundamentos del diseño web: Briefings, wireframes y herramientas del proyecto
4. Aprender a trabajar con los briefings de proyecto
Cada proyecto de diseño web debería empezar por el diseño UX, ¿cierto? La experiencia de usuario, porque en eso es en lo que nos vamos a centrar. Antes incluso de pensar en las fuentes y los colores, necesitamos tener una clara estructura del contenido y debemos saber para quién estamos diseñando.
Y aquí es donde resulta realmente útil un briefing de proyecto. Así que para esta aplicación, imaginemos que somos el diseñador UX y que acabamos de tener una charla con el cliente. Basándonos en ella hemos elaborado un briefing de proyecto.
5. Trabajar con wireframes
Vale, hablemos sobre wireframes. Estos son versiones de baja fidelidad del diseño final. Puedes concebirlos como bocetos.
El objetivo de un wireframe consiste en presentar el contenido final así como su estructura. Pero, haciéndolo de tal manera que obviamos cualquier decisión estética. Esto significa que un wireframe no tiene en cuenta los colores, las tipografías o los espacios. Versa totalmente sobre el contenido, cómo fluye y cómo está organizado este.
Volviendo ahora a nuestro proyecto, y siguiendo con la parte del diseño de la UX. Estamos buscando todavía cosas como la perspectiva del usuario y dado que tenemos un briefing de proyecto listo, podemos empezar con el wireframe.
Para ahorrar algo de tiempo para este tutorial de diseño web, hemos avanzado y creado el wireframe para explicártelo.
6. Seleccionar la herramienta de diseño adecuada
Bien, como estamos entrando poco a poco en la parte del diseño UI de este curso diseño web gratis, es el momento de decidir qué software usar en adelante, y estoy seguro de que es una de las principales preguntas que te estarás haciéndote como principiante.
Y, aunque es relativamente sencillo aprender a usar software de diseño UI, siempre resulta útil aprender sus ventajas y desventajas antes de empezar de forma que tengas la mejor información disponible cuando tomes la decisión.
Enlaces relacionados:
Fundamentos del diseño web: Color y accesibilidad
7. Teoría del color
En cuanto a la teoría del color, existe un montón de información y si has realizado anteriormente algún proyecto de diseño, probablemente conozcas los aspectos básicos. Pero si no es así o necesitas recordarlos, la siguiente lección de nuestro tutorial diseño web los explica.
Intentaré proporcionarte una guía rápida sobre el uso de los colores en el diseño web, sin complicar demasiado las cosas. Empecemos.
8. Armonías, psicología del color, y herramientas
Trabajar con el color puede resultar en ocasiones desafiante, especialmente para un principiante, ya que obviamente conoces la teoría, pero, ¿sabes ponerla en práctica? ¿Cómo eliges los colores más adecuados para tu proyecto y que además funcionen bien juntos?
Para dar respuesta a esto, exploremos la psicología del color o sus significados.
Enlaces relacionados:
- https://color.adobe.com/
- ColorSpace - Generador de paletas de color y herramienta para degradados
- Dribbble - Descubre los mejores diseñadores y profesionales creativos del mundo
- Colección de degradados gratuitos de itmeo.com
- Paletas de color para diseñadores y artistas - Color Hunt
- Generador de paletas de color - Crea atractivos esquemas de color
9. Crear una paleta de color para nuestro proyecto
Bien, ahora estamos en el ámbito del diseño UI. Tenemos un briefing de proyecto, tenemos un wireframe y una dirección clara. Ahora debemos crear un diseño basado en ese wireframe y la forma más sencilla de empezar es crear la paleta de colores.
Fundamentos del diseño web: Tipografía
10. Hablemos sobre la tipografía
Razonablemente, la tipografía es la parte más importante de cualquier diseño, dado que la mayoría del contenido suele consistir en texto. De modo que si no usas las tipografías, los tamaños de fuente, los grosores, etcétera, el resto del diseño fallará.
Da igual cuán bueno sea el aspecto del resto del sitio web. Si tu tipografía no lo tiene, esto se traducirá en una apariencia fallida en su totalidad.
Entonces, ¿cómo empezamos con la tipografía? Bien, existe un proceso de varios pasos que voy a simplificar para ti. Todo empieza eligiendo de dónde obtener tus fuentes.
Enlaces relacionados:
11. Creación de la tipografía para nuestro proyecto
Bien, sigamos ahora los pasos antes descritos en nuestro tutorial diseño web para principiantes y selecciona una tipografía con las características adecuadas para nuestro proyecto. Empecemos.
Enlaces relacionados:
- Escala tipográfica - Una calculadora visual
- Archetype, herramienta de diseño de tipografía digital de Our Own Thing, uso de las fuentes web de Google
Elementos básicos del diseño web: Espaciado, dimensiones e imaginería
12. Espaciado y tamaños en el diseño web
El espaciado y los tamaños en el diseño web hacen referencia a la cantidad de espacio que deberías dejar en el exterior y el interior de los elementos y en cuán grandes o pequeños deberían ser. Esto en ocasiones se solapa porque el tamaño final de un elemento también puede estar determinado por el espaciado interior, por ejemplo, en un botón.
Enlaces relacionados:
13. Uso de iconos e imágenes en el diseño web
Antes de empezar con los píxeles de pantalla, quiero darte algunas claves sobre cómo trabajar con iconos e imágenes.
No olvides consultar Envato Elements para descubrir recursos creativos de uso ilimitado, ¡entre ellos iconos para el diseño web!
Enlaces relacionados:
- Paquete de iconos vectoriales - Archivos PSD, AI, SVG, PNG - Iconos para cualquier caso de uso
- Iconos Bootstrap
- Font Awesome
- Heroicons
- Ionicons: Paquete premium de iconos para el framework Ionic
- Forge Icons - Combinación de 300 iconos en formato SVG para e-commerce, viajes, redes sociales, diseño de app y mucho más.
- Un ágil organizador y gestor de iconos SVG.
Elementos básicos del diseño web: Cabeceras, áreas héroe y botones
14. Definición y casos de uso de las cabeceras
Antes de diseñar una cabecera, veamos qué es.
15. Diseñemos una cabecera
Para diseñar nuestra cabecera usaremos el wireframe como punto de partida y dado que estoy trabajando con Figma, usaré bastante la característica de diseño automático. Pero no te preocupes, explicaré cómo funciona mientras la empleemos en este curso de diseño web para principiantes.
Enlaces relacionados:
- Todas las plantillas que puedes descargar
- Forge Icons - Combinación de 300 iconos en formato SVG para e-commerce, viajes, redes sociales, diseño de app y mucho más.
16. Definición y casos de uso de las áreas héroe
Las áreas héroe fueron consideradas como una tendencia obsoleta, pero se han mantenido en el diseño web y actualmente, casi todo sitio web tiene al menos una.
17. Diseñemos un área héroe
Bien, antes hemos diseñado la cabecera para el sitio web de Robert Fox. Y si nos fijamos en el wireframe, en la parte inferior tenemos un área héroe. Así que utilicémosla y hagamos algo de magia.
18. Definición y casos de uso de los botones
Creo que ya todo el mundo sabe qué es un botón. Pero por si acaso, recordémoslo.
19. Diseñemos algunos botones
Ahora mismo, mi área héroe está incompleta, ya que tenemos que diseñar el botón. Así que, mientras hago esto, también te ofreceré algunos consejos para diseñar atractivos botones. Empecemos.
Elementos básicos del diseño web: Galerías de imagen
20. Definición y casos de uso de las galerías de imágenes
Bien, hablemos sobre las galerías de imagen, el nombre de por sí es bastante explicativo.
21. Diseñemos una galería de imágenes
Según el wireframe para este curso de diseño de páginas web gratis, nuestro sitio web también tiene incluso una galería de imagen, aunque se asemeja más bien a una presentación de portafolio. Aunque, como estamos mostrando solo imágenes, podemos categorizarla como galería de imágenes.
Elementos básicos del diseño web: Pies de página
22. Definición y casos de uso de los pies de página
De acuerdo, es el momento de trabajar con los pies de página, pero primero, definamos qué son.
23. Diseñemos el pie de página
Es el momento de ponernos en marcha y hacer uso de nuestros conocimientos sobre los pies de página para crear uno propio. ¿Preparados?
Elementos básicos del diseño web: Testimonios
24. Definición y casos de uso de los testimonios
¿Qué son los testimonios? Bien, básicamente son los elogios que tú, como negocio o marca, recibes por parte de tus clientes.
25. Diseñemos algunos testimonios
Nuestro diseño web tiene dos secciones para testimonios: en la página de inicio y el la página sobre nosotros. Usaremos un estilo ligeramente distinto en cada una.
Elementos básicos del diseño web: Controles de pestaña
26. Definición y casos de uso de las pestañas
Hablemos ahora de las pestañas. Estoy seguro de que la mayoría de vosotros ya sabéis qué es un control de pestaña, pero por si no es así, aquí tienes una breve definición.
27. Diseñemos algunas pestañas
Según el wireframe, el control de pestaña que debemos diseñar está ubicado en la página sobre nosotros y su objetivo consiste en mostrar las herramientas que Robert Fox está usando para el diseño y el desarrollo.
Elementos básicos del diseño web: Controles de acordeón
28. Definición y casos de uso de los acordeones
Ok, hablemos sobre los acordeones. En el diseño UI, son muy similares a los controles de pestaña en el sentido de que el contenido es desglosado en múltiples paneles que pueden ser desplegados por los usuarios.
29. Diseñemos un acordeón
Según el wireframe, nuestro acordeón es para una sección de preguntas y respuestas ubicada dentro de la página de contacto. Así que, vamos a por ello.
Elementos básicos del diseño web: Formularios de contacto
30. Definición y casos de uso de los formularios de contacto
Estoy seguro de que no necesitamos una definición para esto, ¿cierto? Se explica por sí mismo. Se trata de un formulario web que la gente puede usar para ponerse en contacto contigo.
31. Diseñemos un formulario de contacto
Basándonos en el wireframe, el formulario de contacto está situado en la página de contacto. Imagínalo y empecemos.
Diseño web responsive
32. ¿Qué es un diseño web responsive?
Bien, hablemos de sitios web responsive, desearía empezar contándote una pequeña historia.
Enlaces relacionados:
33. Realizar cambios de maquetación para móviles y tabletas
Veamos primero a qué tipo de problemas se enfrentan nuestros diseños al ser representados en pantallas pequeñas y después pensaremos en las soluciones.
34. Hacer que un componente sea responsive
Conseguir que un sitio web sea responsive no es una tarea excesivamente compleja, pero de vez en cuando te encontrarás con un elemento UI que te dará algunos problemas, por ejemplo, una tabla.
En este diseño no tenemos ninguna tabla, pero tenemos pestañas. Y estas pueden resultar también problemáticas en ocasiones, así que en esta lección, te mostraré cómo conseguir que el componente de pestaña sea responsive.
Conclusione de este tutorial diseño web
Unas palabras rápidas sobre el prototipado
Entonces, ¿qué es un prototipo? Bien, básicamente se trata de un mockup o platilla interactiva de tu diseño. No consiste necesariamente en la versión final de tu diseño, sino de una versión que te permita visualizar mejor la funcionalidad y el flujo del usuario a través del sitio web.
36. Siguientes pasos y aportaciones
Este es un curso amplio, 36 lecciones, con una duración de alrededor de 3 horas y, esperamos, mucha útil información. Así que, felicidades por llegar a su final, ¡ya sabes básicamente cómo se diseña una página web! Espero que hayas aprendido algo nuevo y, si tienes alguna duda o feedback sobre este curso de diseño de páginas web gratis, deja un comentario a continuación, por favor.
