Diseño Web Básico con Webflow

Hoy en día existen básicamente tres filosofías a la hora de hacer diseño web:

1. Escribir el código a mano (debes saber programar);

2. Utilizar un gestor de contenidos de código abierto, como WordPress;

3. Usar una solución SaaS, Software-como-Servicio, como Webflow.

Este curso es para ti si crees en la filosofía SaaS por encima de las otras dos.

Webflow es una solución SaaS que permite una flexibilidad total al hacer diseño web. Es como programar un sitio web pero sin la necesidad de saber programación.

Bajo mi punto de vista, es la mejor herramienta que existe hoy en día para hacer diseño web.

En este curso no vamos a programar pero siempre es comveniente preguntarse cómo funcionan las cosas en un nivel fundamental y por qué.

HTML y CSS son los ladrillos de la Web (Word Wide Web) tal como la conocemos en la actualidad. La inmensa mayoría de sitios web del mundo está hechos de HTML y CSS; también, a veces, de otros lenguajes como Javascript o Ruby, pero casi siempre las bases son HTML y CSS. Por eso es conveniente saber qué son y qué función tiene cada uno de ellos.

El modelo de cajas es la idea de que un sitio web está compuesto de cajas dentro de cajas dentro de cajas. Esa es la realidad: una web es eso.

Con el modelo de cajas en mente será más fácil diseñar un sitio web: se estructura mejor, se concibe mejor, y se mantiene mucho más eficazmente.

Webflow hace muy sencillo trabajar con el modelo de cajas ya que disponemos de un menú lateral en el cual editar el CSS de cualquier elemento HTML.

Las clases son básicas al hacer diseño web.

Con Webflow no es necesario saber qué significan las clases porque las crea automáticamente. Pero es altamente recomendable saber qué son las clases y cómo manejarlas correctamente dentro de Webflow porque eso hará que el código de tu sitio web sea limpio y no redundante.

Una web sin menú principal de navegación no es nada.

Así que empezamos con eso.

Los inicios son importantes así que presta atención y luego replica lo que yo hago.

¡A por ello!

En esta lección te enseño la estructura básica de un sitio web. Esta estructura la encuentras en casi todas las webs del mundo, de una u otra forma: desde la web de Apple, a Airbnb, o Tribu Olaf :)

Una vez que aprendas esto, verás que el diseño web es un conjunto de procesos bien ordenados y secuenciales.

Ha llegado la hora de crear el contenido de una página web propiamente dicho.

Lo más difícil es crear la primera página web: una vez superado ese reto, hacer más páginas webs es simplemente una cuestión de seguir los mismos métodos empleados o, incluso, copiar/pegar (aunque no se lo digas a nadie...).

El pie de página, o footer, es otro de los elementos indispensables de un sitio web.

Normalmente el pie de página es un elemento aburrido pero no tiene por qué serlo.

¡Pon a trabajar tu imaginación!

Los símbolos te van a ahorrar mucho tiempo al diseñar tu sitio web.

Apréndelo bien y te aseguro que tendrás un momento Matrix.

La buena noticia es que Webflow se encarga de todo para que el diseño se vea bien en todo tipo de dispositivos. Pero siempre hay que verificar si el diseño se ve bien en tablet y teléfono.

Con la funcionalidad de cambio de puerto de Webflow, hacer un diseño web adaptativo es como un juego de niños. En esta lección te explico cómo hacerlo.

¡Enhorabuena! ¡Has completado el curso de diseño web básico con Webflow!

Y debes sentirte satisfecho por ello. Has dado un gran paso para crear un sitio web único y distinto al de cualquier otro negocio. Así que celébralo.

Pero recuerda que diseño web debe ser un trabajo constante; no diario pero sí constante: pequeños cambios aquí, eliminar/añadir objetos allá. Es cierto que el esfuerzo inicial es el mayor pero recuerda mantener todo ese trabajo que has realizado y no permitas que tu web deje de funcionar o se quede obsoleta con el paso del tiempo.

Vuelve a estas lecciones para refrescar y recordar los conocimientos aprendidos.

¡Por ahora, te deseo los mejores éxitos con tu sitio web! ¡El cielo es el límite!