Aprender diseño web desde cero puede parecer una montaña imposible de escalar. Te sueltan palabras como HTML, CSS, UX, responsive, wireframes… y dices “¡¿Pero eso que es?!” Literalmente te dan ganas de cerrar el portátil y dedicarte a la papiroflexia. Pero espera, te voy a proponer otra cosa:
¿Y si pudieras entenderlo sin jerga confusa ni cosas raras? ¡Quizá podrías verlo con otros ojos!
De modo que, si te interesa el diseño, te gusta hacer cosas visuales, tienes curiosidad por cómo se construyen las páginas web o simplemente estás buscando una habilidad que te abra puertas en el mundo digital, este puede ser un camino muy bonito y creativo. Y tranquilo: no necesitas ser programador experto ni tener conocimientos previos.
Empecemos por el principio: el diseño web es lo que ves cuando entras en una web: los colores, los botones, las tipografías (letras), la distribución del contenido, cómo se comporta el menú… Todo eso conforma el diseño. Pero, ¿Qué pasa con esto? Que el diseño no debe ser bonito y ya está: debe ser útil y funcionar en condiciones. Piénsalo; seguro que alguna vez te has topado con una web que no había por donde cogerla y te has ido por donde viniste ¿A que sí? Pues eso era porque su diseño web estaba mal planteado, así que ya puedes imaginar cómo de importante es si logró que te fueras sin más.
Paso a paso.
¿Cómo funciona una web? Lo cierto es que debemos saberlo para poder aplicar el diseño. No hace falta entrar en lo técnico desde el principio, pero sí viene bien tener una idea general.
Una página web es como una casa: necesita estructura (el HTML), decoración (el CSS) y cierta inteligencia para que funcione bien (el JavaScript, aunque eso puedes aprenderlo más adelante).
La clave al principio no es aprenderlo todo de golpe, sino entender la lógica:
Puedes empezar con HTML y CSS, que son las herramientas básicas para cualquier diseño web. Hay montones de cursos gratuitos que te pueden explicar cómo aplicarlo con diferentes ejemplos prácticos. Al principio parecerá que estás haciendo cosas muy simples, pero con un poco de práctica vas a poder crear diseños bastante chulos.
Una vez te familiarices con este tipo de herramientas, podemos seguir con los entresijos del diseño web.
Lograr que el diseño se adapte a los dispositivos.
Una de las cosas que más se repite en el mundo del diseño web es el concepto de «responsive design”, y aquí vamos a explicar qué es.
Imagínate que montas una página increíble en tu ordenador, pero cuando alguien entra desde el móvil se ve todo descuadrado, los botones son imposibles de pulsar, el texto sale diminuto… ¿Y qué crees qué va a hacer esa persona? Pues irse, por desgracia, ya que una web que no se adapta a diferentes tamaños de pantalla ofrece una imagen descuidada y poco profesional (además de que hace que se pierdan visitas y por ende, posibles clientes).
Por eso está bien seguir el consejo de DCM web y entender que nuestra web debe adaptarse a todos los dispositivos: debemos tener en mente que nuestro diseño debe funcionar igual de bien en un móvil pequeño que en una pantalla grande. Y esto no es complicado: con CSS y herramientas como Flexbox puedes lograr que el contenido se reorganice automáticamente según el tamaño del dispositivo. Así que, si estás empezando, tenlo en cuenta desde ya.
Haz pruebas en tu móvil, gira la pantalla, cambia el tamaño de la ventana… y fíjate si todo sigue funcionando bien. Esa será la diferencia entre un diseño que simplemente se ve bonito y uno que de verdad está bien pensado.
Empieza por copiar (y luego ya crearás lo tuyo).
Aunque suene raro, una de las mejores formas de aprender es copiar ¡Y no me refiero a plagiar! Sino más bien a fijarte en diseños que te gustan e intentar replicarlos por tu cuenta (de hecho, éste es un ejercicio muy útil para entender cómo están construidos dichos diseños).
De esta forma vas entrenando el ojo y aprendiendo sin darte cuenta. Luego, poco a poco, irás cogiendo seguridad y empezarás a probar cosas propias. Pero al principio, copiar estructuras y estilos te ayuda a familiarizarte con las herramientas y a comprender cómo se combinan.
La diferencia entre diseño web y desarrollo web.
Esto es algo que genera confusión, así que vamos a aclararlo cuanto antes.
- El diseño web es la parte visual, la que se encarga de cómo se ve y se usa una web.
Trabaja con herramientas como Figma, Sketch o Adobe XD (para los prototipos), y con HTML y CSS cuando toca montar la parte visible.
- El desarrollo web es la parte técnica, la que hace que todo funcione por detrás.
Trabaja con lenguajes como JavaScript, PHP, Python, etc., que permiten añadir funcionalidades, bases de datos, formularios, sistemas de usuarios, etc.
Hay quien se centra solamente en el diseño puro y duro, y hay quien se mete también en el desarrollo ¡Tú decides! Aunque, si estás empezando, lo mejor es que empieces por el diseño y luego ya verás si quieres dar el salto técnico.
Herramientas que te van a facilitar la vida.
Una vez que tengas claros los conceptos básicos, te conviene familiarizarte con algunas herramientas que usan todos los diseñadores web. Algunas son gratuitas, otras tienen versión limitada, pero todas son muy útiles:
- Figma.
Es una de las más populares ahora mismo. Sirve para hacer diseños, prototipos y colaborar con otras personas; además, cuenta con una versión gratuita muy completa.
- Canva.
Aunque Canva no está indicada para el diseño web como tal, puedes usarla para hacer bocetos rápidos, elegir combinaciones de colores o preparar elementos gráficos.
- Google Fonts.
Para elegir tipografías gratuitas y que carguen rápido en tu web.
- Unsplash o Pexels.
Bancos de imágenes gratuitas con fotos de buena calidad que puedes usar en tus diseños.
¿Qué hay del diseño centrado en el usuario?
Aquí entra en juego un concepto importante: la experiencia de usuario, o UX. Aquí no solo estás diseñando para que algo se vea bonito, sino para que sea fácil de usar, intuitivo y cómodo.
A veces, un diseño puede ser precioso pero confuso, o puede tener animaciones geniales, pero tardar mucho en cargar. Entonces, el secreto está en encontrar el equilibrio entre lo visual y lo práctico, y eso se aprende observando cómo la gente usa las webs, haciendo pruebas, preguntando y ajustando.
Cuando vayas avanzando, te interesará aprender sobre usabilidad, accesibilidad (que la web sea usable por personas con distintas capacidades), jerarquía visual y comportamiento del usuario. Son cosas que parecen muy teóricas, pero que luego se traducen en decisiones prácticas: por qué poner un botón aquí y no allá, qué tamaño de letra elegir, cómo destacar la información importante…
¿Hace falta saber programar?
¡No necesariamente! Si solo quieres diseñar y montar páginas visuales, con HTML y CSS puedes hacer muchísimas cosas; ahora bien, si quieres que tus webs tengan más interactividad, te tocará aprender algo de JavaScript.
Pero no te agobies, porque el diseño web no es programación pura, y además cada día salen más herramientas visuales que permiten crear páginas completas sin necesidad de escribir código, como Wix o incluso WordPress. Eso sí, cuanto más entiendas el funcionamiento interno, más libertad vas a tener para hacer lo que quieras.
La práctica hace al diseñador.
Nadie nace sabiendo, y el diseño web se aprende haciendo, equivocándose y probando. Así que, si esperas a tenerlo todo claro antes de empezar, no vas a empezar nunca. Nosotros te recomendamos ponerte manos a la obra con lo que ya sabes y aprender sobre la marcha.
Puedes empezar por diseñar tu propio porfolio, una web personal, un blog ficticio, una landing para un producto inventado… Da igual si no tienes aún clientes ni proyectos reales: lo importante es practicar. Y si puedes compartir lo que haces en redes, mejor, porque eso te puede abrir puertas y ayudarte a recibir críticas constructivas.
Recursos para seguir aprendiendo.
Una vez que entres en este mundillo, vas a ver que hay una comunidad enorme, con muchísima información. A continuación, podrás contar con algunos recursos fiables y actualizados que te vendrán bien:
- Diseño Web en MDN es muy buena base técnica para aprender desde cero.
- Kevin Powell en YouTube (explica CSS de maravilla).
- Awwwards (para inspirarte con diseños increíbles).
- UI Design Daily (ideas de diseño sencillas y aplicables).
- CSS Tricks (para consejos y curiosidades de CSS).
Paso a paso y sin miedo.
¿Qué te ha parecido el artículo? No podemos enseñarte a diseñar desde cero, pero sí podemos animarte y darte recursos para ello, y eso es justo lo que esperamos haber conseguido: que se te quite el miedo a empezar y que puedas contar con recursos que te inspiren. La clave está en no tener prisa, en disfrutar el proceso y en no compararse con quien lleva años en esto.
Además, hoy más que nunca encontrarás que aprender diseño web es una puerta abierta a oportunidades laborales, proyectos personales o simplemente a pasártelo bien creando ¡Así que nunca sentirás que estás perdiendo el tiempo!
