30 consejos para aprender diseño web en 30 días
¿Aprender los conceptos básicos del diseño web todavía está en su lista de "algún día"? ¿Por qué no has comenzado todavía? Hemos reunido 30 consejos y recursos para ayudarlo a comenzar a aprender diseño web este mes (¡y tal vez incluso encuentre una nueva carrera profesional!)
Los diseñadores gráficos, diseñadores de impresión y 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 que 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!
1. Comience 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 de Design Hackers.
Te recomiendo que comiences un blog. Comencé un blog solo para tener un área de juegos 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 brinda un lugar donde puedes probar cosas nuevas, y tu jefe no te despedirá si te equivocas.
No tiene que comenzar con un sitio web masivo o un diseño loco; empieza pequeño. Juega con el sitio web, descubre qué hace que las cosas funcionen. (Y asegúrese de inspeccionar el código, para que pueda comenzar a familiarizarse con lo que hace que su sitio web funcione).
¿Quieres 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 componentes básicos de lo que entra en un sitio web.
2. Lee todo lo que puedas
Empieza a leer. Debido a que estás en este blog, probablemente estés acostumbrado a realizar un seguimiento de lo que sucede 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.
Eche una red amplia para la lectura del diseño de su sitio web también. Lea sobre los conceptos básicos para aprender algo de código, lea sobre teoría de diseño y lea tutoriales y artículos actuales.
3. Sea un comunicador efectivo
Si no eres la persona más articulada, repasa esas habilidades. Una gran parte del diseño del sitio web es la comunicación.
Los diseñadores de sitios web tienen que comunicarse regularmente con los clientes para determinar qué problema debe resolver el diseño; tienen que comunicar esas soluciones e implementarlas también.
4. Suscríbase a Tuts + y 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 autodidacta, enseñado por instructores expertos. También obtendrá acceso a Envato Elements, que es un gran recurso para encontrar gráficos, plantillas y más para conectarse a su trabajo de diseño web.
5. Piensa en HTML
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 lenguaje, el mundo del diseño de sitios web tendrá mucho más sentido.
W3Schools tiene un excelente tutorial de inicio de HTML con cientos de ejemplos de HTML con los que puede jugar en la pantalla para ver qué sucede y cómo funciona exactamente. (Puede que le resulte más intuitivo de lo que imaginaba).
6. Juega con Code en Codeacademy
Si bien HTML es un buen comienzo, puede 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 elegir un curso de Codeacademy donde y cuando lo necesite y comenzar y detenerse según sea necesario. Elija un tema para aprender: desarrollo web, programación, ciencia de datos o lenguaje en el que centrarse: HTML y CSS (un excelente lugar para comenzar), 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 lo definido por Mozilla
CSS describe cómo se deben representar los elementos en la pantalla, en papel, en el habla o en otros medios.
Mozilla también tiene una gran colección de recursos CSS para comenzar, con una introducción sólida de cómo funciona CSS, incluidos selectores y propiedades, escribir reglas CSS, aplicar CSS a HTML, cómo especificar longitud, color y otras unidades en CSS, en cascada y herencia, conceptos básicos del modelo de caja y depuración de CSS. Luego, los módulos continúan para explicar el texto y los cuadros de estilo.
8. Aplique sus habilidades de diseño a la web
Si ya está trabajando en un campo de diseño creativo o gráfico, piense en las cosas que ya sabe que también puede aplicar 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 también será útil en el espacio digital.
Si bien elementos como el código de aprendizaje pueden no parecer naturales, tener un fondo de diseño es una gran ventaja. ¿De qué sirve un sitio web bellamente codificado si nadie quiere interactuar con él?
9. Presta atención a los sitios web que amas
Toma nota de los sitios web que te encantan. ¿Qué hay de ellos que te atraiga? (¿Y cómo puedes aprender a replicar esos elementos?) Presta atención a:
- Tipografía
- Navegación
- Uso de imágenes y espacio.
- Diseño de formas
- Animación y efectos de desplazamiento.
- Color
10. Dibuja una estructura alámbrica
Wireframing es la lluvia de ideas de un diseñador web.
En su forma más pura, una estructura metálica 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 alámbrica no se trata realmente del aspecto de este diseño, se trata de la estructura de información en él.
¿No estás seguro de cómo crear una estructura alámbrica? La telepatía digital tiene una guía de mejores prácticas para ayudarlo a aprender.
11. Tómate un 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 IU y repetir bloques de diseño.
Está lleno de complementos y le permite exportar código para facilitar su uso y acceso. Es una de las herramientas más poderosas y populares que existen desde Adobe Creative Suite y vale la pena su tiempo.
12. 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 debe asegurarse de estar al tanto de estos cambios.
Abórdelos uno a la vez y comience con las tecnologías que están más directamente relacionadas con el trabajo que realiza. Si tiene un sitio web con chat en línea, comience por aprender sobre los bots. O si usa mucho contenido de video, juegue con video 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 paisaje de diseño del sitio web en el futuro. Como mínimo, debe saber cuáles son y cuáles podrían ser los usos potenciales.
13. Ponte cómodo con SEO
Si bien muchos diseñadores web piensan que un especialista en SEO puede manejar la preparación de 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 en que se cargan las imágenes hasta la creación de un código limpio que incluye rápidamente descripciones meta 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 trabaja solo, necesita saber lo suficiente para crear un marco sólido que Google pueda leer (y poder remitir al cliente a un especialista en SEO si es necesario realizar más trabajo).
14. Juega 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 construir 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 donde puedes crear una página de portafolio personal o un sitio web básico que te sirva como un patio de recreo.
Luego, separe las piezas dentro del creador de sitios web. Observe cómo están diseñados y codificados para tener una idea de cómo se combina todo. Te sorprenderá lo que puedes descubrir simplemente eligiendo otro diseño aparte.
15. Encuentra un mentor
¿Hay alguien con quien trabajas que admiras como diseñador web? Llévelos a almorzar y escoja su cerebro sobre la industria.
Encontrar un mentor que esté dispuesto a trabajar con usted y ayudarlo a pensar sobre el campo y cómo aprender a diseñar web por su cuenta puede ser invaluable. Y aunque probablemente pueda encontrar un mentor en una comunidad en línea, nada es mejor que una persona viva con la que pueda encontrarse cara a cara periódicamente. (Quizás valga la pena tener mentores en línea y en persona).
16. Únete a la comunidad CodePen
Una vez que comience a sentirse cómodo con algo de código y programación, desea unirse a la comunidad 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 habilitante para las personas que aprenden a codificar. Nos enfocamos principalmente en lenguajes frontales como HTML, CSS, JavaScript y sintaxis de preprocesamiento que se convierten en esas cosas ".
17. Toma una clase
Para algunos alumnos, lo mejor es un entorno de clase más formal.
Hay un montón de clases disponibles, en persona y en línea, para que aprendas los conceptos básicos del diseño web. Comience con una universidad local o centros de aprendizaje en línea como Udemy o Coursera. Elige una clase en tu nivel de habilidad actual y sigue avanzando.
18. ¿Quieres hacer algo? Buscalo en Google
Para el alumno no tan tradicional, encuentre la respuesta al problema de diseño web en Google. Hay tantos tutoriales y videos disponibles que pueden guiarlo 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 obtener la respuesta. Aquí hay otro consejo cuando se trata de tutoriales y videos: el contenido más reciente probablemente le dará una respuesta mejor, más completa y más relevante. (Recuerde, algunas de estas cosas están cambiando rápidamente).
19. 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. Necesita 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 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 le preocupa 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 que conocen el proceso de formación de la experiencia, buscan crear y dar forma a los factores que influyen en el proceso deliberadamente. Para hacer esto, un diseñador de UX considerará el por qué, qué y cómo usar el producto.
20. Presta 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 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 miraste un sitio web en tu teléfono fue 2016, tienes mucho terreno por recuperar.
Crear diseños de sitios web que tengan toques modernos y tendencias integradas en el diseño ayudará a que sus proyectos se destaquen. ¿Cómo sabes qué es tendencia? Sigue leyendo sitios como este y presta atención a lo que otros diseñadores están haciendo. Tome nota de los colores, estilos y características que se incluyen en los sitios web que visita con frecuencia.
21. Crear sin color
Comience 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 perfecto.
Puede que no siempre sea así, pero es un excelente punto de partida.
Al crear diseños en blanco y negro, puede 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 eso. Esta forma más simple de diseño le dará una idea si algo funciona como un concepto antes de pasar a finalizarlo.
22. Aprende a amar las fuentes de Google
Google Fonts es tu amigo.
Independientemente de cómo se sienta acerca de Google, es importante la capacidad de navegar, ordenar y seleccionar tipos de letra que sabe que funcionarán en los diseños de sitios web. No tiene que pensar en las licencias o si los tipos de letra son compatibles con navegadores específicos o no.
La limitación es que solo tiene 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. Le ahorrará mucho tiempo a largo plazo.
23. Elige un kit de interfaz de usuario
Descargue una interfaz de usuario o un kit de iconos y selecciónelo.
Del mismo modo 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 múltiples formatos para pantallas de alta resolución. (Descargar un montón de archivos JPEG no te servirá tan bien).
Luego intente construir o personalizar uno o dos elementos propios.
24. Conviértete en tipógrafo
El diseño moderno del sitio web tiene un fuerte enfoque en la tipografía ... buena tipografía. Desde encabezados de héroe con palabras gigantes hasta capas de texto que atraen al usuario al diseño, es vital comprender los principios de cómo emparejar elementos de tipo y construir bloques de texto atractivos.
Comienza con Ellen Lupton's Thinking with Type. (También hay un libro con el mismo nombre). Lupton es la autoridad en tipografía y su información te hará pensar como un tipógrafo en poco tiempo.
25. Salta a JavaScript
Cuando empieces a sentirte bastante bien con el diseño web, desafíate nuevamente 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 una diapositiva deslizante o esa animación de paralaje se anime.
Learn JS tiene un tutorial interactivo para ayudarlo a comenzar.
26. 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 otros ... 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úrese de mostrar diseños, colores, tipografía y diferentes técnicas que muestren lo que puede hacer.
27. Ponte a prueba
Con tantos accesos directos y fragmentos de código para ayudarlo a solucionar casi cualquier problema del sitio web que tenga, no se vuelva flojo. Recuerde desafiarse continuamente para aprender nuevas habilidades, nuevas tecnologías y seguir mejorando su juego de diseño web.
Lo único de este campo es que está cambiando constantemente; Siempre hay algo nuevo que aprender o probar.
28. Maximiza tu experiencia
Sal y diseña. Tienes que comenzar a diseñar sitios web para ser diseñador web.
Comience con poco, pero asuma proyectos con otros. Solicite unirse a un proyecto con un equipo en el trabajo. Haz 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á.
¿Que estas esperando? Dejar de dilatar.
29. Pida retroalimentación
Use su red para recopilar comentarios sobre los proyectos de diseño de su sitio web, sin importar cuán pequeños cree que son. Escuche este comentario, incluso si no le gusta y vea lo que puede aprender.
Además de la preferencia visual, ¿la persona que proporcionó comentarios ofreció sugerencias para mejorar el funcionamiento del sitio web? ¿Podrían entender fácilmente el objetivo del diseño? ¿Se conectaron con la mensajería?
30. Sigue aprendiendo cosas nuevas
Para ser un gran diseñador de sitios web, solo necesitas seguir jugando, probando y aprendiendo cosas nuevas. Apunte a la red y comuníquese con otros en el campo para que pueda estar al tanto de las técnicas y los cambios visuales que se demandan.
Si está buscando aprender diseño de sitios web, entonces esto probablemente 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.
