¿Sigue aprendiendo los conceptos básicos del diseño web en tu lista de «algún día»? ¿Por qué no has empezado todavía? Hemos reunido 30 consejos y recursos para ayudarte a comenzar a aprender diseño web este mes (¡y tal vez incluso a encontrar una nueva carrera profesional!)

Los diseñadores gráficos, los diseñadores de impresión y los creativos que buscan aprender algo nuevo o entrar en el sitio web deben dejar de procrastinar. ¡Cada día que no das ese primer paso te deja un día más atrás de todos los demás!

Siga estos pasos para comenzar a aprender cómo crear su primer sitio web, las mejores prácticas de la industria y mucho más, ¡todo en 30 días!

Inicie un sitio web

La mejor manera de comenzar a aprender diseño web es comenzar a hacerlo. Ese es el consejo de David Kadavy, autor del diseño < para> Hackers.

te recomiendo empezar un blog. Comencé un blog solo para tener un patio de juegos de diseño web, y 7 años más tarde, lancé un libro superventas sobre el tema. Tener un proyecto personal, como un blog, le da un lugar donde usted puede probar cosas nuevas, y su jefe no despedirlo si te equivocas.

No tiene que comenzar con un sitio web masivo o un diseño loco; comience con algo pequeño. Juega con el sitio web, descubre qué hace que las cosas funcionen. (Y asegúrate de inspeccionar el código, para que puedas empezar a familiarizarte con lo que hace que tu sitio web funcione.)

¿Desea comenzar rápidamente? Un creador de sitios web como Wix puede ayudarlo a comenzar con un diseño de sitio web elegante, a medida que comienza a aprender los conceptos y los componentes básicos de un sitio web.

Lea Todo Lo Que Pueda

Comience a leer. Debido a que estás en este blog, probablemente estés acostumbrado a hacer un seguimiento de lo que está sucediendo en el mundo del diseño. Sigue leyendo.

Lea todo lo que pueda sobre diseño de sitios web, tendencias, técnicas y mejores prácticas. Sigue a los diseñadores que admiras en las redes sociales.

Lance una amplia red para la lectura del diseño de su sitio web también. Lee sobre los conceptos básicos para aprender un poco de código, lee sobre la teoría del diseño y lee tutoriales y artículos actuales.

Sé un Comunicador eficaz

Si no eres la persona más articulada, repasa esas habilidades. Una gran parte del diseño de sitios web es la comunicación.

Los diseñadores de sitios web tienen que comunicarse con los clientes regularmente para averiguar qué problema necesita resolver el diseño; tienen que comunicar esas soluciones e implementarlas también.

Suscríbase a Tuts+& Envato Elements

Considere una suscripción a Envato Elements, que también le brinda 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 a su propio ritmo, impartido por instructores expertos. También tendrás acceso a Envato Elements, que es un gran recurso para encontrar gráficos, plantillas y más para conectar a tu trabajo de diseño web.

Piense en HTML

El HTML, o lenguaje de marcado de hipertexto, es una 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 pueda leer el idioma, el mundo del diseño de sitios web tendrá mucho más sentido.

W3Schools tiene un gran tutorial de inicio de HTML con cientos de ejemplos de HTML con los que puedes jugar en la pantalla para ver qué sucede y cómo funciona exactamente. (Es posible que lo encuentres más intuitivo de lo que imaginabas.)

Juega con código en Codeacademy

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

Puede recoger un curso de Codeacademy donde y cuando lo necesite e iniciar y detener según sea necesario. Elija un tema para aprender (desarrollo web, programación, ciencia de datos) o un lenguaje en el que centrarse: HTML & CSS (un excelente lugar para comenzar), Python, Java, SQL, Ruby y más.

Aprende a entender CSS

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

Como se define en Mozilla

CSS describe cómo se deben representar los elementos en pantalla, en papel, en voz u otros medios.

Mozilla también tiene una gran colección de recursos CSS para comenzar, con una sólida introducción de cómo funciona CSS, incluidos 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, conceptos básicos del modelo de caja y depuración de CSS. Luego, los módulos pasan a explicar el texto y los cuadros de estilo.

Aplica tus Habilidades de Diseño a la Web

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

Mientras que elementos como aprender código pueden no parecer naturales, tener un fondo de diseño es una gran ventaja. ¿De qué sirve un sitio web bellamente codificado si no se quiere interactuar con él?

Presta atención a los sitios web que amas

Toma nota de los sitios web que amas. ¿Qué te atrae de ellos? (¿Y cómo puedes aprender a replicar esos elementos?) Preste atención a:

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

Dibujar una estructura metálica

Wireframing es la lluvia de ideas de un diseñador web.

En su forma más pura, un wireframe es un bosquejo de lo que será el sitio web. No es un esbozo de elementos estéticos, sino un plano del sitio web. Dibujar una estructura de alambre no se trata realmente de la apariencia de este diseño, se trata de la estructura de información en el mismo.

¿No está seguro de cómo crear una estructura metálica? Telepatía Digital tiene una guía de mejores prácticas para ayudarlo a aprender.

Tómese su 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 están recurriendo a Sketch para crear elementos de interfaz de usuario y repetir bloques de diseño.

Está repleto de complementos y le permite exportar código para facilitar su uso y acceso. Es una de las herramientas más potentes y populares desde la Suite Creativa de Adobe y vale la pena invertir tiempo.

Manténgase al día con la tecnología

AI, VR, AR, video de 360 grados, bots.

puede ser difícil mantenerse al día con tantas nuevas tecnologías y tendencias. Pero necesita hacer un punto para mantenerse al tanto de estos cambios.

Enfréntalos de uno en uno y comienza con las tecnologías que están más directamente relacionadas con el trabajo que haces. Si tienes un sitio web con chat en línea, empieza por aprender sobre los bots. O si usas mucho contenido de vídeo, juega con vídeos de 360 grados.

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

Póngase cómodo con el SEO

Mientras que muchos diseñadores web creen que un especialista en SEO puede manejar la preparación de un sitio web para que los motores de búsqueda lo lean, hay mucho trabajo de diseño que está conectado con el SEO.

Desde la forma en que se cargan las imágenes hasta la creación de código limpio que es rápido para incluir meta descripciones en páginas y elementos, el diseñador debe incorporar el pensamiento de búsqueda en su flujo de trabajo.

Freelancers, esto también es de vital importancia para ti. 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 para crear un marco sólido que Google pueda leer (y poder referir al cliente a un especialista en SEO si se necesita hacer más trabajo).

Juegue con un creador de sitios web

Un creador de sitios web puede ser una excelente manera de sentirse cómodo con las mejores prácticas y cómo comenzar a crear y diseñar sitios web.

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

Luego, separe las piezas dentro del creador de sitios web. Mira cómo están diseñados y codificados para tener una idea de cómo todo viene junto. Te sorprenderá lo que puedes averiguar con solo elegir otro diseño aparte.

Encuentra un mentor

¿Hay alguien con quien trabajes y que admires como diseñador web? Llévelos a almorzar y recoja su cerebro sobre la industria.

Encontrar un mentor que esté dispuesto a trabajar con usted y ayudarlo a pensar en el campo y cómo aprender diseño web por su cuenta puede ser invaluable. Y aunque probablemente puedas encontrar un mentor en una comunidad en línea, nada es mejor que una persona en vivo que puedas conocer cara a cara periódicamente. (Tal vez valga la pena tener mentores en línea y en persona.)

Únase a la comunidad de CodePen

Una vez que comience a sentirse cómodo con un poco de código y programación, desea unirse a la comunidad de CodePen. La comunidad de código abierto le permite compartir y editar fragmentos de código en una especie de red social.

Aquí hay un poco más de los fundadores del sitio: «CodePen es un entorno de desarrollo social. En esencia, le permite escribir código en el navegador y ver los resultados a medida que construye. Una herramienta útil y liberadora para desarrolladores de cualquier habilidad, y particularmente empoderadora para personas que aprenden a programar. Nos centramos principalmente en lenguajes de front-end como HTML, CSS, JavaScript y sintaxis de preprocesamiento que se convierten en esas cosas.»

Tomar una clase

Para algunos alumnos, lo mejor es un entorno de aula más formal.

Hay un montón de clases disponibles en persona y en línea – para aprender diseño web básico. Comience con una universidad local o centros de aprendizaje en línea como Udemy o Coursera. Elige una clase con tu nivel de habilidad actual y sigue avanzando.

¿Quieres hacer Algo? Google It

Para el estudiante no tan tradicional, encuentre la respuesta al problema del diseño web en Google. Hay tantos tutoriales y videos disponibles que pueden guiarte a través de casi cualquier problema y solución.

La clave es buscar exactamente lo que necesita saber y buscar una fuente confiable para la respuesta. Aquí hay otro consejo cuando se trata de tutoriales y videos: el contenido más reciente probablemente te dará una respuesta mejor, más completa y más relevante. (Recuerde, algunas de estas cosas están cambiando rápidamente.)

Presta atención a la experiencia del usuario

Nada puede hacer o deshacer un sitio web como el diseño de la experiencia del usuario. Necesitas planearlo y entenderlo.

Así es como la Fundación de Diseño de Interacción describe el diseño de experiencia de usuario:

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

Los diseñadores de experiencia de usuario, o diseñadores que son conscientes del proceso de formación de experiencias, buscan crear y dar forma deliberadamente a los factores que influyen en el proceso. Para hacer esto, un diseñador de experiencia de usuario considerará el Por qué, el Qué y el Cómo del uso del producto.

Preste atención a las tendencias de diseño

¿Cómo se ve un diseño de sitio web moderno? No es una pregunta capciosa. Para diseñar sitios web modernos y experiencias de usuario, necesita saber qué quieren los usuarios y cómo interactúan con ellos. Si la última vez que descargaste una aplicación o viste 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 sus proyectos destaquen. ¿Cómo sabes lo que está de moda? Sigue leyendo sitios como este y presta atención a lo que están haciendo otros diseñadores. Toma nota de los colores, estilos y características que se incluyen en los sitios web que visitas con frecuencia.

Crear Sin Color

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

Puede que no siempre se mantenga, pero es un gran 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 de los ojos que ocurre debido a ello. Esta forma más simple de diseño le dará una idea si algo funciona como un concepto antes de pasar a finalizarlo.

Aprende a amar Google Fonts

Google Fonts es tu amigo.

Independientemente de cómo te sientas con Google, la capacidad de navegar, ordenar y seleccionar tipos de letra que sabes que funcionarán en los diseños de sitios web es importante. No tiene que pensar en licencias o si los tipos de letra son compatibles con navegadores específicos o no.

La limitación es que solo tienes lo que hay en la biblioteca de fuentes de Google para trabajar. Pero si lo intentas, puedes encontrar algo que se ajuste a casi todos los proyectos. Te ahorrará mucho tiempo a largo plazo.

Separar un kit de interfaz de usuario

Descargar una interfaz de usuario o un kit de iconos y separarlos.

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

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

A continuación, intente crear o personalizar uno o dos elementos propios.

Conviértete en tipógrafo

El diseño de sitios web moderno tiene un fuerte enfoque en la tipografía good una buena tipografía. Desde encabezados de héroe con palabras gigantes hasta capas de texto que atraen a un usuario al diseño, comprender los principios de cómo emparejar elementos de tipo y construir bloques de texto atractivos es vital.

Comience con el pensamiento de Ellen Lupton con el tipo. (También hay un libro del mismo nombre. Lupton es la autoridad en tipografía y su información te hará pensar como un tipógrafo en poco tiempo.

Salta a JavaScript

Cuando empieces a sentirte bastante bien con el diseño web, ponte a prueba de nuevo para 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 interacción en páginas web. Es lo que hace que un deslizador se deslice o que la animación de paralaje se anime.

Learn JS tiene un tutorial interactivo para ayudarlo a comenzar.

Actualice su cartera

Una vez que comience a diseñar para la web, asegúrese de actualizar su cartera con proyectos de diseño web. Esta simple acción te ayudará a mostrarte a ti mismo, y a los demás, que el diseño web es parte de tu repertorio.

Una cartera actualizada puede ayudar a los clientes potenciales a ver cómo se ve su «estilo». Asegúrate de mostrar diseños, colores, tipografía y diferentes técnicas que muestren lo que puedes hacer.

Desafíate a ti mismo

Con tantos accesos directos y fragmentos de código para ayudarte a solucionar casi cualquier problema de sitio web que tengas, no seas perezoso. Recuerda desafiarte continuamente para aprender nuevas habilidades, nuevas tecnologías y seguir mejorando tu juego de diseño web.

Lo único de este campo es que está en constante cambio; siempre hay algo nuevo que aprender o probar.

Maximiza tu experiencia

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

Comience poco a poco, pero asuma proyectos con otros. Pide unirte a un proyecto con un equipo en el trabajo. Frente a un pequeño sitio web para un amigo. Cuanta más experiencia tenga en la creación de sitios web, mejor y más rápido obtendrá.

¿A qué esperas? Deja de procrastinar.

Solicite comentarios

Utilice su red para recopilar comentarios sobre sus proyectos de diseño de sitios web, sin importar lo pequeños que crea que sean. Escucha esta retroalimentación, incluso si no te gusta, y mira lo que puedes aprender.

Aparte de la preferencia visual, ¿la persona que proporcionó comentarios ofreció sugerencias para mejorar el funcionamiento del sitio web? Podían entender fácilmente el objetivo del diseño? ¿Se conectaron con el mensaje?

Sigue aprendiendo Cosas nuevas

Para ser un gran diseñador de sitios web, solo necesitas seguir jugando, probando y aprendiendo cosas nuevas. Haga un punto para conectarse y comunicarse con otros en el campo para que pueda mantenerse al tanto de las técnicas y los cambios visuales que están en demanda.

Si está buscando aprender diseño de sitios web, es probable que esto ya sea algo que hace regularmente. Pero este es un campo en evolución, y sigue cambiando casi todos los días. Pregúntale a cualquiera que lo esté haciendo.