30 consejos para aprender diseño web en 30 días

¿Aún no has empezado a aprender los conceptos básicos del diseño web? Hemos reunido 30 consejos y recursos para ayudarte a empezar a aprender diseño web este mes (¡e incluso a encontrar una nueva carrera profesional!).

Los diseñadores gráficos, los diseñadores de impresión y los creativos que quieran aprender algo nuevo o introducirse en un sitio web deben dejar de postergar las cosas. Cada día que no das el primer paso, te quedas un día más atrás que los demás.

Siga estos pasos para empezar a aprender a crear su primer sitio web, las mejores prácticas del sector y mucho más, ¡todo en 30 días!

Recursos de diseño

1. Crear un sitio web

La mejor manera de empezar a aprender diseño web es empezar a hacerlo. Ése es el consejo de David Kadavy, autor de Design Hackers.

Te recomiendo que empieces un blog. Yo empecé un blog sólo para tener un campo de juego de diseño web, y 7 años después, lancé un libro superventas sobre el tema. Tener un proyecto personal, como un blog, te da un lugar donde puedes probar cosas nuevas, y tu jefe no te despedirá si metes la pata.

No tienes que empezar con un sitio web enorme o un diseño loco; empieza poco a poco. Juega con el sitio web, averigua qué hace que las cosas funcionen. (Y asegúrate de inspeccionar el código, para empezar a familiarizarte con lo que hace que tu sitio web funcione).

Si quieres empezar rápidamente, lo primero que tienes que hacer es crear un mapa visual del sitio web. A continuación, un creador de sitios web como Wix puede ayudarte a empezar con un diseño web elegante, mientras empiezas a aprender los conceptos y los componentes básicos de un sitio web.

2. Lea todo lo que pueda

Empieza a leer. Como estás en este blog, probablemente estés acostumbrado a estar al tanto de lo que ocurre en el mundo del diseño. Siga leyendo.

Lee todo lo que puedas sobre diseño web, tendencias, técnicas y buenas prácticas. Sigue a diseñadores que admires en las redes sociales.

Lance también una amplia red para sus lecturas sobre diseño de sitios web. Lea sobre lo básico para aprender algo de código, lea sobre teoría del diseño y lea tutoriales y artículos de actualidad.

3. Ser un comunicador eficaz

Si no eres la persona más elocuente, repasa esas habilidades. Gran parte del diseño de un sitio web es comunicación.

Los diseñadores de páginas web tienen que comunicarse regularmente con los clientes para averiguar qué problema debe resolver el diseño; también tienen que comunicar esas soluciones y ponerlas en práctica.

4. Suscríbete a Tuts+ y Envato Elements

Considera la posibilidad de suscribirte a Envato Elements, que también te da acceso al excelente recurso de aprendizaje Tuts+.

Tuts+ publica cursos regulares sobre diseño gráfico y web, desde técnicas básicas hasta los últimos enfoques y desarrollos avanzados. Es completamente autodidacta, impartido por instructores expertos. También obtendrás acceso a Envato Elements, que es un gran recurso para encontrar gráficos, plantillas y mucho más para incorporar a tu trabajo de diseño web.

5. Piensa en HTML

HTML, o lenguaje de marcado de hipertexto, es la piedra angular del diseño de sitios web. HTML es el esqueleto que ayuda a crear la estructura de un sitio web y, una vez que sepa leer el lenguaje, el mundo del diseño de sitios web tendrá mucho más sentido.

W3Schools tiene un estupendo tutorial HTML para principiantes con cientos de ejemplos HTML con los que puedes jugar en la pantalla para ver qué ocurre y cómo funciona exactamente (puede que te resulte más intuitivo de lo que imaginabas).

6. Juega con el código en Codeacademy

Aunque HTML es un buen comienzo, puedes aprender casi cualquier lenguaje de programación en Codeacademy. Este conjunto gratuito de herramientas te enseña a programar mediante actividades y juegos interactivos.

Puedes elegir un curso de Codeacademy donde y cuando lo necesites y empezar y parar según sea necesario. Elige un tema para aprender - desarrollo web, programación, ciencia de datos - o lenguaje en el que centrarte - HTML & CSS (un gran lugar para empezar), Python, Java, SQL, Ruby, y más.

7. Aprende a entender CSS

CSS, u hojas de estilo en cascada, definen la presentación de un documento escrito en HTML, o XML y SVG.

Según la definición de Mozilla

CSS describe cómo deben representarse los elementos en pantalla, en papel, en voz alta o en otros soportes.

Mozilla también tiene una gran colección de recursos CSS para empezar, con una sólida introducción de cómo funciona CSS, incluyendo selectores y propiedades, escritura de reglas CSS, aplicación de CSS a HTML, cómo especificar longitud, color y otras unidades en CSS, cascada y herencia, fundamentos del modelo de caja y depuración de CSS. A continuación, los módulos pasan a explicar el estilizado de texto y cajas.

8. Aplica tus conocimientos de diseño a la Web

Si ya trabajas en un campo creativo o de diseño gráfico, piensa en las cosas que ya sabes y que puedes aplicar también al diseño de sitios web. Los principios que hacen que algo sea visualmente atractivo no cambian en función del medio y toda esa teoría del diseño será útil también en el espacio digital.

Aunque aprender a programar puede no resultar natural, tener conocimientos de diseño es una gran ventaja. ¿De qué sirve un sitio web bien programado si nadie quiere interactuar con él?

9. Presta atención a los sitios web que te gustan

Toma nota de los sitios web que más te gustan. ¿Qué hay en ellos que te atrae? (¿Y cómo puedes aprender a reproducir esos elementos?) Presta atención a:

• Tipografía
• Navegación
• Uso de imágenes y espacio
• Diseño de formularios
• Efectos de animación y desplazamiento
• Color

10. Dibujar una estructura metálica

El wireframing es la lluvia de ideas de un diseñador web.

En su forma más pura, un wireframe es un esbozo de lo que será el sitio web. No es un esquema de elementos estéticos, sino más bien un plano del sitio web. Dibujar un wireframe no tiene que ver realmente con el aspecto de este diseño, sino con la estructura de la información que contiene.

¿No está seguro de cómo crear un wireframe? Digital Telepathy tiene una guía de buenas prácticas para ayudarle a aprender.

11. Tómate tu tiempo para aprender Sketch

Sketch es una herramienta de dibujo vectorial para Mac que facilita la creación de elementos de diseño. Muchos diseñadores recurren a Sketch para crear elementos de interfaz de usuario y bloques de diseño repetitivos.

Está repleto de plugins y permite exportar código para facilitar su uso y acceso. Es una de las herramientas más potentes y populares que han aparecido desde Creative Suite de Adobe y merece la pena que le dediques tiempo.

12. Estar al día en tecnología

IA, RV, RA, vídeo de 360 grados, bots.

Puede ser difícil mantenerse al día con tantas nuevas tecnologías y tendencias, pero hay que esforzarse por estar al tanto de estos cambios.

Abórdalas de una en una y empiece por las tecnologías que estén más directamente relacionadas con su trabajo. Si tiene un sitio web con chat en línea, empiece por aprender sobre bots. O si utiliza mucho contenido de vídeo, juegue con el vídeo de 360 grados.

Elementos como la inteligencia artificial y la realidad virtual o aumentada son aún más complejos, pero es probable que con el tiempo se conviertan en partes integradas del paisaje del diseño de sitios web. Como mínimo, debería saber qué son y cuáles podrían ser sus usos potenciales.

13. Sentirse cómodo con el SEO

Aunque muchos diseñadores web piensan que un especialista en SEO puede encargarse de preparar un sitio web para que lo lean los motores de búsqueda, hay mucho trabajo de diseño relacionado con el SEO.

Desde la forma de cargar las imágenes hasta la creación de un código limpio y rápido, pasando por la inclusión de meta descripciones en páginas y elementos, el diseñador debe incorporar el pensamiento de búsqueda en su flujo de trabajo.

La mayoría de los clientes son lo suficientemente inteligentes como para pedir un sitio web optimizado para SEO. Si trabajas solo, necesitas saber lo suficiente como para crear un marco sólido que Google pueda leer (y ser capaz de remitir al cliente a un especialista en SEO si es necesario realizar más trabajo).

14. Jugar con un creador de sitios web

Un creador de sitios web puede ser una buena forma de familiarizarse con las mejores prácticas y con cómo empezar a crear y diseñar sitios web.

La mayoría de estas herramientas tienen multitud de plantillas y permiten personalizar elementos e incluso añadir fragmentos de código. Para sitios sencillos, muchos creadores de sitios web también tienen un plan gratuito en el que se puede crear una página de portafolio personal o un sitio web básico que sirva de patio de recreo para uno mismo.

A continuación, desmonte las piezas dentro del constructor de sitios web. Observe cómo están diseñadas y codificadas para hacerse una idea de cómo encaja todo. Se sorprenderá de lo que puede averiguar simplemente desmontando otro diseño.

15. Encontrar un mentor

¿Hay alguien a quien admires como diseñador web y con quien trabajes? Invítale a comer e intercambia impresiones sobre el sector.

Encontrar un mentor que esté dispuesto a trabajar contigo y a ayudarte a reflexionar sobre el campo y sobre cómo aprender diseño web por tu cuenta puede tener un valor incalculable. Y aunque probablemente puedas encontrar un mentor en una comunidad en línea, nada es mejor que una persona en vivo con la que puedas reunirte cara a cara periódicamente. (Quizá merezca la pena tener mentores en línea y en persona).

16. Únase a la comunidad CodePen

Una vez que empieces a sentirte cómodo con el código y la programación, querrás unirte a la comunidad CodePen, una comunidad de código abierto que te permite compartir y editar fragmentos de código en una especie de red social.

CodePen es un entorno de desarrollo social. En esencia, permite escribir código en el navegador y ver los resultados a medida que se construye. Se trata de una herramienta útil y liberadora para desarrolladores de cualquier nivel, y especialmente útil para las personas que están aprendiendo a programar. Nos centramos principalmente en lenguajes front-end como HTML, CSS, JavaScript y preprocesamiento.sintaxis que se convierten en esas cosas".

17. Toma una clase

Para algunos alumnos, lo mejor es una clase más formal.

Hay un montón de clases disponibles -en persona y en línea- para que aprendas los fundamentos del diseño web. Empieza por una universidad local o centros de aprendizaje en línea como Udemy o Coursera. Elige una clase de tu nivel actual y sigue avanzando.

18. ¿Quieres hacer algo? Búscalo en Google

Para los alumnos no tan tradicionales, buscar la respuesta al problema de diseño web en Google. Hay muchísimos tutoriales y vídeos disponibles que pueden guiarte a través de casi cualquier problema, y solución.

La clave está en buscar exactamente lo que necesitas saber y buscar la respuesta en una fuente acreditada. He aquí otro consejo cuando se trata de tutoriales y vídeos: el contenido más reciente probablemente te dará una respuesta mejor, más completa y más relevante. (Recuerda que algunas de estas cosas cambian con rapidez).

19. Preste atención a la experiencia del usuario

No hay nada que pueda hacer o deshacer un sitio web como el diseño de la experiencia del usuario. Hay que planificarlo y comprenderlo.

Así es como la Interaction Design Foundation describe el diseño UX:

El diseño de la experiencia del usuario (UX) es el proceso de crear productos que proporcionen experiencias significativas y personalmente relevantes. Esto implica el diseño cuidadoso tanto de la usabilidad de un producto como del placer que los consumidores obtendrán al utilizarlo. También se ocupa de todo el proceso de adquisición e integración del producto, incluidos los aspectos de marca, diseño, usabilidad y función.

Los diseñadores de UX, o diseñadores conscientes del proceso de formación de la experiencia, tratan de crear y dar forma deliberadamente a los factores que influyen en el proceso. Para ello, un diseñador de UX tendrá en cuenta el Por qué, el Qué y el Cómo del uso del producto.

20. Preste atención a las tendencias de diseño

¿Cómo es el diseño de un sitio web moderno? No es una pregunta capciosa. Para diseñar sitios web y experiencias de usuario modernos, necesitas saber qué quieren los usuarios y cómo interactúan con ellos. Si la última vez que descargaste una aplicación o miraste un sitio web en tu teléfono fue en 2016, tienes mucho terreno que recuperar.

Crear diseños de sitios web que tengan toques modernos y tendencias integradas en el diseño ayudará a que tus proyectos destaquen. ¿Cómo saber qué es tendencia? Sigue leyendo sitios como éste y presta atención a lo que hacen otros diseñadores. Toma nota de los colores, estilos y características que se incluyen en los sitios web que visitas con frecuencia.

21. Crear sin color

Empiece cada diseño sin color. Un gran diseñador me dijo una vez que si su diseño funciona en blanco y negro, será impecable en color.

Puede que no siempre sea así, pero es un buen punto de partida.

Al crear diseños en blanco y negro, puedes ver dónde contrastan los elementos y cómo juegan juntos. Has eliminado cualquier asociación emocional con el color o el movimiento ocular que se produce a causa de él. Esta forma más sencilla de diseño te dará una idea de si algo funciona como concepto antes de pasar a finalizarlo.

22. Aprende a amar Google Fonts

Google Fonts es tu amigo.

Independientemente de lo que pienses de Google, la posibilidad de buscar, clasificar y seleccionar tipos de letra que sabes que funcionarán en los diseños de sitios web es importante. No tienes que pensar en licencias o en si los tipos de letra son compatibles con navegadores específicos o no.

La limitación es que sólo tienes lo que hay en la biblioteca de Google Fonts para trabajar, pero si lo intentas puedes encontrar algo que se adapte a casi todos los proyectos. A la larga te ahorrará mucho tiempo.

23. Desmontar un kit de interfaz de usuario

Descárgate una interfaz de usuario o un kit de iconos y desmóntalo.

Del mismo modo que puede inspeccionar el código de un sitio web, fíjese en cómo se construyen los elementos de diseño para la web. Tome nota de la escala y la cuadrícula, fíjese en las mezclas de colores y en cómo se organizan los archivos dentro de Photoshop o Illustrator.

Busca un kit para descargar que incluya elementos en varios formatos para pantallas de alta resolución. (Descargar un montón de JPEG no te va a servir de mucho).

A continuación, intenta construir o personalizar uno o dos elementos por tu cuenta.

24. Conviértete en tipógrafo

El diseño de sitios web modernos se centra sobre todo en la tipografía... la buena tipografía. Desde cabeceras con palabras gigantes hasta capas de texto que atraen al usuario hacia el diseño, es vital comprender los principios de cómo combinar elementos tipográficos y construir bloques de texto atractivos.

Empiece con Thinking with Type, de Ellen Lupton (también hay un libro con el mismo nombre). Lupton es la autoridad en tipografía y su información le hará pensar como un tipógrafo en muy poco tiempo.

25. Saltar a JavaScript

Cuando empieces a sentirte bastante bien incursionando en el diseño web, desafíate de nuevo a aprender JavaScript. Después de HTML y CSS, es el lenguaje más importante de la web.

JavaScript es una herramienta que permite a los diseñadores implementar cosas complejas e interactuar en las páginas web. Es lo que hace que un deslizador se deslice o que esa animación parallax se anime.

Learn JS tiene un tutorial interactivo para ayudarte a empezar.

26. Actualice su cartera

Una vez que empieces a diseñar para la web, asegúrate de actualizar tu portafolio con proyectos de diseño web. Esta sencilla acción te ayudará a demostrarte a ti mismo... y a los demás... que el diseño web forma parte de tu repertorio.

Un portafolio actualizado puede ayudar a los clientes potenciales a ver cómo es tu "estilo". Asegúrate de mostrar diseños, colores, tipografía y diferentes técnicas que muestren lo que sabes hacer.

27. Desafíate a ti mismo

Con tantos atajos y fragmentos de código que te ayudarán a solucionar casi cualquier problema que tengas con tu sitio web, no te vuelvas perezoso. Recuerda desafiarte a ti mismo continuamente para aprender nuevas habilidades, nuevas tecnologías y seguir mejorando tu juego de diseño web.

Lo único que tiene este campo es que cambia constantemente; siempre hay algo nuevo que aprender o probar.

28. Maximice su experiencia

Sal ahí fuera y diseña. Tienes que empezar a diseñar sitios web para ser diseñador web.

Empieza poco a poco, pero emprende proyectos con otras personas. Pide participar en un proyecto con un equipo del trabajo. Encárgate de un pequeño sitio web para un amigo. Cuanta más experiencia tengas creando sitios web, mejor y más rápido lo harás.

¿A qué esperas? Deja de procrastinar.

29. Pedir opiniones

Utiliza tu red para recabar opiniones sobre tus proyectos de diseño web, por pequeños que te parezcan. Escucha esas opiniones, aunque no te gusten, y mira qué puedes aprender.

Aparte de las preferencias visuales, ¿ofreció la persona que dio su opinión sugerencias para mejorar el funcionamiento del sitio web? ¿Comprendió fácilmente el objetivo del diseño? ¿Conectó con el mensaje?

30. Sigue aprendiendo cosas nuevas

Para ser un gran diseñador de sitios web, sólo tienes que seguir jugando, probando y aprendiendo cosas nuevas. Intenta establecer contactos y comunicarte con otros profesionales del sector para estar al día de las técnicas y los cambios visuales más demandados.

Si está buscando aprender diseño de sitios web, probablemente ya sea algo que hace con regularidad. Pero este es un campo en evolución, y sigue cambiando casi todos los días. Sólo pregunte a cualquiera que se dedique a ello.