Specialization in No-Code Web Design

Influencias | Mónica Durán

En esta lección te quiero compartir algunos de los diseñadores webs especializados en Squarespace que sigo muy de cerca. También te enseñaré algunos libros y blogs sobre diseño y diseño web en general que me han sido de mucha ayuda en mi proceso de formación, y que sigo consultando de manera frecuente.

Para mí es superimportante tener referentes creativos con los que inspirarme a diario y estar en constante aprendizaje. En esta lección te enseñaré cuáles son los estudios y diseñadores que más me flipan hoy en día.

Influencias | Isa Macías

Módulo 2

¿Listo para descubrir cómo la narración puede dar forma al diseño? Juan Mora, con experiencia en Google, Amazon y YouTube, te muestra cómo las técnicas narrativas pueden transformar una simple landing page en una experiencia inolvidable. Trabaja directamente con Figma y empieza a crear diseños que no solo se vean bien, sino que realmente conecten con los usuarios.

14 lecciones (1h 46m)

Tipos de landing pages

En esta lección conocerás diferentes tipos de landing pages y te enseñaré a identificar cuál es el más adecuado para el proyecto que vayas a realizar.

¿Qué es un buen landing page?

Ahora te voy a explicar con varios ejemplos cómo identificar los elementos que componen un sitio web efectivo.

¿Qué es la jerarquía en el contenido?

En esta lección te contaré cómo jerarquizar contenidos y su importancia en el storytelling de un landing page.

Contraste, balance visual y la regla de los 3 segundos

Por último, vamos a analizar el papel que juegan el contraste y el balance en la navegación de un lading page. También veremos cómo utilizar a nuestro favor la regla de los 3 segundos.

El brief y cómo investigar

El brief es el documento que nos sirve para entender las necesidades del clliente. En esta lección, te enseñaré a investigar a partir de la interpretación de un brief.

Estructura de contenido para un landing page

Ahora te enseñaré a organizar el contenido para contar una historia a partir de la investigación realizada previamente.

Cómo hacer un mood board

En esta lección vamos a ver cómo crear un mood board como una herramienta de análisis, inspiración y depuración.

La tipografía adecuada

Finalmente, te voy a hablar de la importancia de la tipografía y te explicaré cómo seleccionarla de forma adecuada para que se ajuste lo mejor posible al proyecto que tengas entre manos.

Creación de la historia

En esta lección aprenderás a tener en cuenta el comportamiento de las personas cuando interactúan con un producto, sistema o servicio. También cómo usar esta información como base para la organización de tu historia junto con la estructura planteada en la planeación.

¡Pon todo el material en el canvas!

Es momento de colocar en el canvas todos los elementos que has recogido durante el curso para iniciar el diseño de tu landing page. En esta lección te explico cómo hacerlo.

Crea los assets que necesites para tu landing page

Por último, te voy a contar cómo crear tus propios assets a partir del material que encuentres en internet. Te recomendaré también dónde buscarlos.

En esta lección te enseñaré a crear la guía de estilo para darle forma a tu landing page. Tendremos que definir elementos gráficos y tipográficos para dar consistencia y unidad al diseño.

Definición del diseño

Pulir tu diseño: feedback

Es momento de buscar retroalimentación sobre lo que hemos hecho hasta ahora. Así podremos ajustar los detalles necesarios para obtener el diseño final del proyecto del curso.

Presentación al cliente

En esta lección te mostraré cómo presentar tu proyecto a tu cliente y qué debes tener en cuenta para explicar las decisiones que tomaste para mostrar lo que hiciste.

Módulo 3

¿Sientes que tu flujo de trabajo creativo se desordena demasiado rápido? Esta es tu oportunidad de darle claridad y consistencia a tus proyectos. Descubre cómo los sistemas de diseño pueden optimizar tu proceso y mejorar el diseño de tus sitios web. Con Figma como herramienta principal, explorarás estructuras inteligentes que te ahorrarán tiempo y harán que tu trabajo destaque.

20 lecciones (4h 51m)

Introducción a los sistemas de diseño

En esta lección, presentaré una breve descripción general de qué son los sistemas de diseño y cómo se utilizan normalmente. También explicaré cómo funciona mi proceso exacto y por qué ha sido beneficioso para mí.

Cómo los sistemas de diseño pueden ayudarlo a acelerar su flujo de trabajo

A continuación, le daré algunos ejemplos rápidos de cómo los sistemas de diseño pueden ayudarlo a aumentar su eficiencia, repasando cómo los estilos y componentes globales son útiles.

Introducción al proyecto y enfoque

¡Repasemos ahora el proyecto en el que trabajaremos! Crearé un desglose general de lo que necesitamos para tener un comienzo exitoso.

Configuración del archivo Figma y comienzo de las primeras exploraciones 1

Primero, repasaré cómo se pueden crear sistemas de diseño en Figma. Luego, comenzaré las primeras exploraciones y recopilaré algunos componentes iniciales.

Configuración del archivo Figma y comienzo de las primeras exploraciones 2

Con estas exploraciones iniciales de diseño, podemos jugar con todas y cada una de las ideas que se nos ocurran. ¡Veamos un poco más!

Expansión del sistema de exploraciones y diseño 1

Seguiré ampliando mis diseños y maquetaciones, así como el propio sistema de diseño. Verá cómo utilizo componentes y diseños automáticos, para que tenga una idea de cómo funciona.

Expansión del sistema de exploraciones y diseño 2

Una vez que tenemos una idea más clara de en qué dirección preferiríamos llevar el proyecto, revisamos algunas de nuestras elecciones iniciales y actualizamos nuestros estilos globales en todos los diseños. ¡A ver cómo evoluciona mi proyecto!

Organización de las páginas del sistema de diseño 1

En esta lección, repasaré los componentes y estilos que he creado y comenzaré a colocarlos en páginas dedicadas para tener una idea inicial de la estructura.

Organización de las páginas del sistema de diseño 2

Continuaré refinando los archivos de mi sistema de diseño. Recuerde, poder refinar una biblioteca de sistema de diseño en estas etapas iniciales puede reducir el tiempo que tomará al final del proyecto cuando estemos preparando todo para la entrega final.

Exploración de variantes al crear componentes

En esta lección, profundizaremos un poco más en los componentes; comprenderá cómo podemos usar variantes para hacer crecer aún más nuestro conjunto de herramientas. También obtendrá una mejor idea de cómo las convenciones de nombres entran en juego dentro de Figma y dónde puede explorar para ver qué características le gustaría resaltar y tener fácil acceso.

Refinar el sistema de diseño con una página ensamblada 1

En esta lección, repasaremos un diseño más desarrollado. Ahora, en esta etapa, he pasado por algunas iteraciones en mis exploraciones y he aterrizado en una dirección con la que estoy bastante satisfecho. A partir de aquí, profundizaremos en la creación de componentes y diseños automáticos. También veremos cómo la combinación de estas herramientas puede ayudarnos a crear flujos y diseños más dinámicos.

Refinar el sistema de diseño con una página ensamblada 2

Continuaré refinando el sistema de diseño. Cuando trabajo con sitios web que tienen mucho contenido repetitivo, índices de contenido o archivos en general, me resulta extremadamente útil anidar varios diseños, componentes e instancias automáticos entre sí.

Refinar el sistema de diseño con una página ensamblada 3

Dedicar un poco más de tiempo a crear un diseño único con componentes y diseño automático lo ayudará a ver cómo los diferentes formatos de contenido pueden funcionar en diferentes instancias. En caso de que después de algunos ajustes nos demos cuenta de que el contenido con el que estamos trabajando en realidad no está de acuerdo con nuestra visión inicial, podemos modificar varias instancias de diferentes piezas de contenido al mismo tiempo para tener una mejor idea de cómo funciona nuestro concepto. se puede utilizar en un entorno del mundo real. Veamos cómo se estructurará este sistema de diseño y sitio web.

15m

Configuración de nuevas páginas con el sistema de diseño completo 1

Ahora ampliaré los diseños web con algunas páginas nuevas: un archivo de blog, una página de contacto y una galería de productos. El siguiente paso será poner a prueba el sistema de diseño y ver qué elementos funcionan, qué se debe cambiar y qué se debe agregar.

Configuración de nuevas páginas con el sistema de diseño completo 2

Después de crear un archivo de blog y una publicación de blog, le mostraré cómo crear una página de contacto. Esto nos permite ver cómo el sistema de diseño que hemos creado puede ayudarnos a crear rápidamente estos nuevos elementos.

Configuración de nuevas páginas con el sistema de diseño completo 3

Aquí verás cómo creo la página adicional final, que es la página de la tienda o galería de productos.

Cómo abordar la creación de documentación para el sistema de diseño

En esta lección, repasaré dos ejemplos de creación de documentación para un sistema de diseño, utilizando Notion y zeroheight.

Limpieza y uso de un diseño automático

Nos tomaremos un poco de tiempo en estas etapas finales para revisar el sitio web y el sistema de diseño y asegurarnos de que todo esté configurado correctamente y esté usando nuestras notas estándar.

Utilización del diseño en otros elementos de la marca

Nuestro sistema de diseño no tiene que detenerse en un sitio web. En esta lección, le mostraré algunos ejemplos del uso del sistema de diseño que he creado como punto de partida para crear elementos de marca adicionales, como publicaciones en redes sociales y papelería.

¡Y eso es una envoltura! En esta lección, repasaré algunos pensamientos adicionales sobre todo este proceso.

Pensamientos finales

Módulo 4

Olvídate de las líneas de código: Webflow te abre la puerta a crear sitios web elegantes y funcionales solo con diseño visual. Guiado por Jan Losert, pasarás de una página en blanco a un sitio de marketing completamente desarrollado, aprendiendo a crear experiencias digitales impactantes para cualquier marca utilizando herramientas intuitivas y sin necesidad de programar.

21 lecciones (5h 0m)

Introducción a No-Code

En esta lección, analizaré cómo se crean los sitios web y explorará Webflow y la biblioteca de recursos en Webflow University.

Funciones principales de flujo web

Exploremos todos los paneles y características que proporciona Webflow y creemos un proyecto en blanco para comenzar el viaje creativo de este curso.

Examinaremos el diseño y discutiremos en qué es esencial centrarse antes del inicio del proyecto. Luego, cubriré dónde obtener imágenes libres de regalías para su proyecto.

Diseño

Guía de estilo

En esta lección, discutiré por qué establecer una base al comienzo de cada proyecto y agregar fuentes al proyecto en blanco.

Creación de guía de estilo 1

¡En esta lección, comenzamos a crear! Primero, configuraremos todos los elementos iniciales, como los botones y la tipografía.

Creación de guía de estilo 2

Ahora continuaremos explorando algunos botones y clases combinadas.

Comencemos creando la sección superior de nuestro sitio web con un teléfono y una fila de imágenes.

Sección de héroe

En esta lección, le explicaré cómo crear el menú de navegación para el sitio web y cómo hacerlo receptivo. Diseñaremos el componente llamado Navbar.

Navegación

Secciones de caso de estudio 1

Ahora, crearemos tarjetas ilustradas que representen estudios de casos del estudio y secciones con estadísticas de un negocio.

Secciones de caso de estudio 2

Continuaremos agregando elementos al bloque de casos de estudio.

Te enseñaré cómo crear una sección de collage con imágenes y testimonios en esta lección.

Collage Sección 1

Reutilizaremos la sección de tres columnas para crear un bloque con los principales valores del negocio.

Collage Sección 2

Sección de clientes y formulario sencillo de newsletter

Esta lección analizará la creación de una sección de clientes "trabajamos con".

Es hora de construir la sección final del sitio: el pie de página.

Pie de página

En esta lección, prepararemos el sitio para ventanas gráficas más pequeñas, comenzando con la vista de tableta. También compartiré algunos consejos para facilitarle la vida al usar reglas más estrictas para el ancho de nuestra clase de contenedor y envoltura.

Vista de la tableta

Vista horizontal y vertical móvil

Haremos que todo sea aún más estrecho y nos aseguraremos de que el sitio se vea bien en modo vertical y horizontal para dispositivos móviles.

Exploraremos los formularios aún más y diseñaremos los estados de éxito y error. Y luego, le mostraré dónde encontrar los envíos de formularios y qué puede hacer con ellos.

Formularios de prueba

Interacciones

Finalmente, hagamos que el sitio sea más divertido agregando interacciones sutiles para la sección principal. Luego, cubriré la diferencia entre las interacciones "Carga de página" y "Desplazarse en la vista".

Optimización SEO y hosting

En esta lección, veremos cómo configurar sus etiquetas de SEO favicon y luego poner nuestro sitio en vivo con un plan de alojamiento Webflow.

Panel de mantenimiento, editor y activos

Hablemos de mantenimiento. Le mostraré cómo preparar el sitio si desea trabajar con más personas en el futuro y mantener su proyecto ordenado y organizado.

Explorar el CMS

Le mostraré cómo funciona CMS en el kit de herramientas de Webflow en un blog simple. Luego, discutiré cómo crear colecciones y usar los datos dinámicos en páginas estáticas en comparación con las plantillas de colección.

Definiendo el objetivo y la estructura de nuestra web P1

Módulo 5

Color, estructura y estrategia se unen mientras Mónica Durán te guía por la libertad creativa de construir tu propio sitio web con Squarespace. Con su orientación, explorarás cómo dar forma a un espacio digital que se sienta personal y profesional, sin necesidad de código. Descubre herramientas y técnicas para diseñar un portafolio que hable por tu trabajo y atraiga al público adecuado.

28 lecciones (6h 13m)

Para diseñar una sitio web funcional (además de atractivo) es importante tener muy claro qué objetivo queremos que nos ayude a conseguir, porque en función de éste será que organizaremos la estructura de la web y de cada una de las páginas.

Definiendo el objetivo y la estructura de nuestra web P2

En esta lección vamos a ver ejemplos de cómo se corresponden estos objetivos con decisiones de diseño dentro de la web y los elementos que decidimos incluir en nuestro diseño (cuáles y cómo).

El estilo general de nuestro sitio

Ahora que ya tenemos creada la estructura de la web vamos a definir a grandes rasgos el estilo visual que queremos que tenga. Vamos a ver, de manera muy sencilla, cómo combinar tipografías y colores, y te voy a poner ejemplos de cómo los puedes usar para crear un estilo visual para tu web. También te voy a dar algunos recursos en donde puedes buscar inspiración.

Creación, organización y preparación de los archivos gráficos

Ya tenemos todos los recursos gráficos que usaremos en nuestra web, y un esquema general del diseño de cada página… ahora toca preparar todos los archivos que utilizaremos para que estén optimizados para su uso en la web, y organizados para que podamos encontrarlos fácilmente cuando estemos diseñando en Squarespace.

Cambios en la interfaz de bloques de contenido de Squarespace

En esta lección te explico brevemente algunos cambios recientes en Squarespce para que conozcas las diferencias entre lo que verás en la interfaz de las siguientes lecciones, y la interfaz que verás en tu sitio de Squarespace cuando lo estés creando.

Cómo escoger la plantilla para tu web

En esta lección vamos a dar un recorrido por las diferentes plantillas que encontramos en Squarespace cuando vamos a crear un sitio web nuevo. Veremos qué características tienen y qué debes tener en cuenta a la hora de escoger la adecuada para tu proyecto.

Configuraciones iniciales en Squarespace

Con la cuenta creada haremos un recorrido por toda el panel de administración de Squarespace para que te familiarices con las diferentes secciones: Páginas, Diseño, Commerce, Marketing, Analytics, Comentarios, Configuración y Ayuda. [textbox type=alert]Nota importante: después de haber grabado las lecciones de este curso, Squarespace lanzó una nueva sección en el panel de administración, llamada Profiles o Perfiles. Esta sección no es especialmente relevante para los contenidos del curso, pero vale la pena que la explores un poco ya que desde aquí podrás ver y gestionar los perfiles de: - Clientes: personas que hayan comprado en tu web, si tienes configurada una tienda online (y que es algo que no vemos en el curso). - Suscriptores: personas que se suscriban a tu lista de correo si utilizas la opción nativa de Squarespace. Si utilizas una herramienta de email marketing externa (como Mailchimp o Mailerlite) no los podrás gestionar desde aquí. Puedes consultar más información sobre esta nueva sección del panel de administración de Squarespace en este enlace.[/textbox]

Creación de páginas en Squarespace: sus propiedades y ajustes

En esta lección te voy a explicar los diferentes tipos de elementos que tenemos en Squarespace para crear la “arquitectura” del sitio web: Páginas, Colecciones (o Páginas de Colección), Carpetas y Enlaces, ya que cada una tiene funciones y características diferentes.

Los bloques de contenido en Squarespace

Ahora que ya sabes cómo funciona la estructura general de un sitio web en Squarespace, vamos a ver cómo se crea la estructura de cada una de las páginas y para explicarte mejor vamos a crear una página a la que añadiremos diferentes Bloques de contenido, que son los elementos que van conformando el diseño de cualquier página en Squarespace.

Las secciones de páginas en Squarespace

Ahora que ya conocemos cuáles son los bloques de contenido que tenemos en Squarespace, vamos a ver cómo integrarlos con secciones de páginas para ir creando el diseño de cada una de las páginas de la web.

Diseño y configuración de las páginas de Inicio, Servicios, Sobre mí y Contacto P1

A partir de los bocetos que hicimos en la Unidad 2 y del contenido que añadimos en nuestro cuaderno de trabajo, vamos a crear las páginas Inicio, Sobre mí, Servicios y Contacto, con todas sus secciones, textos e imágenes.

Diseño y configuración de las páginas de Inicio, Servicios, Sobre mí y Contacto P2

Por el momento no te preocupes por los colores o las tipografías, ya que eso lo ajustaremos más adelante: ahora lo importante es crear la estructura de las páginas.

Diseño y configuración de las páginas de Inicio, Servicios, Sobre mí y Contacto P3

En la página de contacto te enseñaré cómo añadir un formulario y qué debes hacer para que incluya el texto y la casilla necesarios para cumplir con el RGPD (Reglamento General de Protección de Datos).

Configuración de la página de Portafolio P1

En esta lección veremos cómo añadir a la web un portafolio con proyectos. Te enseñaré las diferentes opciones de diseño que tienes para tu página principal del portafolio, cómo añadir proyectos nuevos y los diferentes ajustes que puedes hacer a los proyectos particulares.

Configuración de la página de Portafolio P2

Configuración del Blog P1

Ahora veremos cómo configurar un Blog para tu web. Te enseñaré las diferentes opciones de diseño que tienes para la página principal del Blog, cómo añadir publicaciones nuevas y los diferentes ajustes generales que debes hacer a cada entrada antes de publicarla.

Configuración del Blog P2

Configuración del Blog P3

Creación del Footer y ajustes a la navegación principal

En esta lección te voy a enseñar a configurar el pie de página de la web (footer) para que incluya todo lo que definimos en la Unidad 2. Verás que es muy sencillo y muy flexible hacer cambios en el footer de tu sitio, ahora que ya dominas bien las secciones y los bloques de contenido de Squarespace.

Configuración de tipografías y colores del sitio P1

En esta lección te voy a enseñar las diferentes opciones que tienes para definir el estilo de los títulos, subtítulos y cuerpo de texto del sitio. Aprenderás a cambiar las fuentes que trae la plantilla por defecto, y a hacer algunos ajustes adicionales para modificar estilos de manera diferente a como están predeterminados.

Configuración de tipografías y colores del sitio P2

Configuración de las imágenes y otros ajustes

Con colores y tipografías listos, vamos a encargarnos ahora de hacer los ajustes de imágenes y demás detalles como animaciones generales del sitio, espaciados, botones, icono del navegador (favicon), imagen para redes sociales, estilos de páginas especiales, entre otros.

Extra: Estilos de la web en Squarespace 7.0

Esta lección está dirigida solo a quienes tienen Squarespace en su versión 7.0. Aquí veremos cómo realizar ajustes de tipografías, colores y demás elementos de la web en un sitio diseñado en la versión antigua de Squarespace.

Vamos a ver los elementos que tenemos dentro del panel de Marketing de Squarespace y te enseñaré a configurar una barra de anuncios para la web, así como una ventana emergente ( Pop-up) que podrás utilizar para promocionar alguna información o captar suscriptores.

Ajustes de marketing

Ajustes generales de privacidad

En esta lección te enseñaré a crear las páginas legales del sitio y a vincularlas en el footer. También te mostraré cómo configurar la barra de anuncio de cookies y los ajustes que debes hacerle, y te daré una opción alternativa en caso de que necesites una barra de cookies más avanzada si vas a cargar cookies adicionales en tu web.

Hagamos el sitio público P1

Finalmente, veremos los pasos necesarios para poder hacer público tu sitio web: los diferentes planes de pago que tiene Squarespace, sus características, y cuál recomiendo para una web como la que haremos en el curso.

Hagamos el sitio público P2

Seguimiento de analíticas del sitio

Finalmente exploraremos el panel de Analytics del sitio: te daré un recorrido por sus apartados y te daré mis recomendaciones para sacarle el mejor partido.

Referencias visuales: dónde buscar inspiración

Módulo 6

Lleva tus ideas al mundo digital con personalidad y propósito mientras Isa Macías te guía a través de su enfoque creativo para el diseño web. Comenzando en Figma y pasando a WordPress con Elementor, aprenderás a construir sitios web dinámicos, sin código, que reflejen tu estilo y, al mismo tiempo, sean prácticos y fáciles de gestionar.

18 lecciones (3h 23m)

En esta lección te quiero contar lo importante que es para mí buscar referencias visuales que me sirvan de inspiración a la hora de desarrollar un proyecto de diseño web. También te hablaré de dónde encuentro y guardo yo esas referencias para tenerlas siempre presentes durante todo el proceso de diseño del sitio.

Mapa del sitio y guía de estilo

Ahora voy a enseñarte a trazar el recorrido que hará el usuario una vez que aterrice en tu web, eso te dará una idea más clara sobre qué páginas tienes que diseñar y cómo se vinculan entre ellas. También veremos cómo elaborar una pequeña guía de estilo en la que reunir los elementos y estilos generales que queremos para la web.

Elaboración de la propuesta de diseño 1

Una vez que ya hemos creado todo el concepto visual de la web, vamos a elaborar la propuesta de diseño ¡Esta es una de las partes más emocionantes del proceso! Comenzaré diseñando la cabecera, el pie de página y mi página de inicio.

Elaboración de la propuesta de diseño 2

Continúo diseñado en Figma el resto de secciones que definí en el mapa del sitio web. Durante este proceso, ¡recuerda tener en cuenta tus referencias!

Primeros pasos en WordPress

En esta lección voy a enseñarte cómo instalar WordPress y cuál es su funcionamiento básico. Así podrás ir familiarizándote con todo el potencial de este software.

Ahora vamos a instalar Elementor, que es la herramienta con la que vamos a construir todo el diseño web sin necesidad de escribir ni una sola línea de código.

Instalar Elementor

Conociendo Elementor 1

Vamos a trasladar a Elementor todos los elementos y estilos generales que definimos en la guía de estilo. Como ya lo tenemos todo pensado y definido en nuestra guía ¡el proceso va a ser facilísimo!

Conociendo Elementor 2

Ahora voy a hacer un breve resumen de las configuraciones que te mostré en el anterior vídeo. Después, continuaremos configurando y personalizando otras opciones como el conjunto tipográfico.

En esta lección te voy a explicar qué es el maquetador de temas de Elementor y por qué soy tan fan de él. Además, te enseñaré cómo utilizarlo para diseñar el header o cabecera de tu web.

Header y footer 1

Ahora te voy a mostrar cómo construyo el pie de página de mi web con Elementor. ¿Ves qué rápido es trabajar con este programa?

Header y footer 2

Es momento de diseñar la primera sección de la web. La homepage es, probablemente, la primera página que verán de tu sitio, por eso aquí es donde más creativa y visual me gusta ser siempre.

Homepage

Plantilla para los proyectos 1

En esta lección vamos a trabajar con las opciones de plantillas de Elementor para crear el diseño de la página individual de proyectos. Y, de paso, incluiré también tooodos los proyectos de mi porfolio.

Plantilla para los proyectos 2

Ahora te voy a mostrar cómo me pongo manos a la obra con la versión responsive de mi plantilla de proyectos.

Lo siguiente que te voy a enseñar a diseñar es la página principal del porfolio, que es dónde quedarán archivados todos los proyectos que subamos a la web.

Archivo de proyectos

"About" y "Contacto"

Por último, vamos a trabajar en dos secciones imprescindibles en cualquier sitio web: la página de "About" y la página "Contacto".

15m

Páginas secundarias: privacidad, 404 y mantenimiento

En esta lección te voy a hablar de algunas secciones secundarias de tu sitio, que a priori no son visibles, pero que igualmente están ahí. Y te enseñaré también a poner tu web en modo mantenimiento.