¿El aprendizaje de los conceptos básicos del diseño web sigue en tu? Algún día? ¿lista? ¿Por qué no has empezado 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!)
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 postergar. ¡Cada día que no das ese primer paso te deja un día más atrás que 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!
1. Iniciar 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 patio de juegos de diseño web, y 7 años después, lancé un libro de gran venta sobre el tema. Tener un proyecto personal, como un blog, te da un lugar donde puedes probar cosas nuevas y tu jefe no te echará si te equivocas.
No tienes que comenzar con un sitio web masivo o un diseño loco; empieza pequeño. Juega con el sitio web, averigua qué hace que las cosas funcionen. (Y asegúrese de inspeccionar el código, para que pueda comenzar a familiarizarse con lo que hace funcionar su sitio web).
2. Lee todo lo que puedas
Empieza 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.
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. Ser un comunicador eficaz
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 deben comunicarse con los clientes regularmente para descubrir qué problema debe resolver el diseño; Tienen que comunicar esas soluciones e implementarlas también.
4. Suscribirse 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 avances y enfoques 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 conectar con tu trabajo de diseño web.
5. Piensa en HTML
HTML, o lenguaje de marcado de hipertexto, es una piedra angular del diseño del sitio 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 excelente tutorial de iniciación de HTML con cientos de ejemplos de HTML que puedes jugar en la pantalla para ver qué sucede y cómo funciona exactamente. (Puede que le resulte más intuitivo de lo que imaginó).
6. Juega con el código en Codeacademy
Si bien HTML es un buen comienzo, puede aprender casi cualquier lenguaje de programación de Codeacademy. El conjunto gratuito de herramientas te enseña a codificar utilizando actividades y juegos interactivos.
Puede elegir un curso de Codeacademy donde y cuando lo necesite y comenzar y detenerse cuando sea necesario. Elija un tema para aprender: desarrollo web, programación, ciencia de la información o lenguaje para centrarse en HTML y CSS (un excelente lugar para comenzar), Python, Java, SQL, Ruby y más.
7. Aprende a entender CSS
CSS, o 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 el 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 los selectores y las propiedades, escribir reglas CSS, aplicar CSS a HTML, cómo especificar la longitud, el color y otras unidades en CSS, y la herencia, los fundamentos del modelo de caja y la depuración de CSS. Luego los módulos continúan para explicar el estilo de texto y los cuadros.
8. Aplica tus habilidades de diseño a la web
Si ya está trabajando en un campo creativo o de diseñ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 visualmente atractivo no cambie según el medio y toda esa teoría de diseño también será útil en el espacio digital.
Si bien es posible que elementos como el código de aprendizaje no parezca natural, 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 amas. ¿Qué te atrae de ellos? (¿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 un Wireframe
Wireframing es una lluvia de ideas para diseñadores web.
En su forma más pura, un alámbrico 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 que contiene.
¿No estás seguro de cómo crear un alambre? La telepatía digital tiene una guía de las 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 recurren a Sketch para crear elementos de la interfaz de usuario y repetir bloques de diseño.
Está repleto de complementos y le permite exportar código para un fácil uso y acceso.Es una de las herramientas más poderosas y populares desde la Creative Suite de Adobe y merece la pena.
12. Mantente actualizado con la tecnología
AI, VR, AR, video de 360 grados, bots.
Hay tantas nuevas tecnologías y tendencias que puede ser difícil mantenerse al día. Pero necesitas hacer un punto para estar al tanto de estos cambios.
Enfréntelos uno por uno y comience con las tecnologías más directamente relacionadas con el trabajo que realiza. Si tienes un sitio web con chat en línea, comienza 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 parte integrante del paisaje de diseño de sitios web en el futuro. Como mínimo, debe saber qué son y cuáles podrían ser los posibles usos.
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 muchos trabajos de diseño que están conectados al SEO.
Desde la forma en que se cargan las imágenes hasta la creación de un 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 es de vital importancia para ti también. 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 se necesita 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 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 los sitios simples, muchos creadores de sitios web también tienen un plan gratuito donde 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 del sitio web. Observe cómo están diseñados y codificados para tener una idea de cómo se integra todo. Se sorprenderá de lo que puede descubrir con solo seleccionar otro diseño.
15. Encuentra un mentor
¿Hay alguien con quien trabajas que admiras como diseñador web? Llévalos a almorzar y elige su cerebro acerca de la industria.
Encontrar un mentor que esté dispuesto a trabajar con usted y ayudarlo a pensar sobre el campo y cómo aprender el diseño web por su cuenta puede ser invaluable. Y si bien es probable que pueda encontrar un mentor en una comunidad en línea, nada es mejor que una persona viva que pueda conocer cara a cara periódicamente. (Tal vez vale 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 algún 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 red social de todo tipo.
Aquí hay un poco más de los fundadores del sitio:? CodePen es un entorno de desarrollo social. En el fondo, te permite escribir código en el navegador y ver los resultados mientras lo construyes. Una herramienta útil y liberadora para los desarrolladores de cualquier habilidad, y especialmente habilitante para las personas que aprenden a codificar. Nos centramos principalmente en lenguajes front-end como HTML, CSS, JavaScript y sintaxis de preprocesamiento que se convierten en esas cosas.
17. tomar una clase
Para algunos estudiantes, lo mejor es un ambiente de clase más formal.
Hay un montón de clases disponibles (en persona y en línea) para que aprendas lo básico del diseño web. Comience con una universidad local o un centro de aprendizaje en línea como Udemy o Coursera. Elija una clase en su nivel de habilidad actual y siga avanzando.
18. ¿Quieres hacer algo? Buscalo en Google
Para los estudiantes no tan tradicionales, 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 la respuesta en una fuente confiable. 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. (Recuerda, algunas de estas cosas están cambiando rápidamente).
19. Preste atención a la experiencia del usuario
Nada puede hacer o deshacer un sitio web como diseño de experiencia de usuario. Necesitas planearlo y entenderlo.
Así es como la Interaction Design Foundation describe el diseño de UX:
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 facilidad de uso 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 UX, o diseñadores que son conscientes del proceso de formación de experiencias, buscan crear y dar forma a los factores que influyen en el proceso de forma deliberada. Para hacer esto, un diseñador de UX considerará el por qué, qué y cómo del uso del producto.
20. Preste atención a las tendencias de diseño
¿Cómo es el diseño moderno de un sitio web? No es una pregunta con trampa. 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 descargó una aplicación o miró un sitio web en su teléfono fue el 2016, tiene mucho camino por delante.
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 la tendencia? Sigue leyendo sitios como este y presta atención a lo que hacen otros diseñadores.Tome nota de los colores, estilos y características que se incluyen en los sitios web que visita con frecuencia.
21. Crea 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, será de un color impecable.
Puede que no siempre sea cierto, pero es un gran punto de partida.
Al crear diseños en blanco y negro, puede ver dónde contrastan los elementos y cómo se juegan juntos. Has eliminado cualquier asociación emocional con el color o el movimiento de los ojos que se produce a causa de ello. Esta forma más simple de diseño le dará una idea si algo funciona como un concepto antes de pasar a su finalización.
22. Aprende a amar las fuentes de Google
Google Fonts es tu amigo.
Independientemente de cómo se sienta con respecto a Google, la capacidad de navegar, ordenar y seleccionar tipos de letra que sabe que funcionarán en los diseños de sitios web es importante. No tiene que pensar en las licencias o si las tipografías 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.
23. Elija aparte un kit de interfaz de usuario
Descargue una interfaz de usuario o un kit de iconos y descárguelo.
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 dentro de 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 va a servir demasiado bien.)
Luego trata de construir o personalizar uno o dos elementos tuyos.
24. Conviértete en un tipógrafo
¿El diseño moderno de sitios web tiene un fuerte enfoque en la tipografía? buena tipografia Desde encabezados de héroe con palabras gigantes hasta capas de texto que atraen a un usuario al diseño, es vital comprender los principios de cómo emparejar elementos de tipo y construir bloques de texto atractivos.
Comience con el pensamiento de Ellen Lupton con el tipo. (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 ningún momento.
25. saltar a JavaScript
Cuando estés empezando a sentirte bastante bien con el diseño web, desafíate de nuevo para aprender JavaScript. Después de HTML y CSS, es el lenguaje más importante de la web.
JavaScript es la herramienta que permite a los diseñadores implementar cosas complejas e interacción en las páginas web. Es lo que hace que un deslizador deslice o que la animación de paralaje esté animada.
Learn JS tiene un tutorial interactivo para ayudarte a comenzar.
26. Actualiza tu 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? ¿y otros? Ese diseño web es parte de tu repertorio.
Una cartera actualizada puede ayudar a los clientes potenciales a ver cuál es su estilo? parece. Asegúrese de mostrar diseños, colores, tipografías y diferentes técnicas que muestren lo que puede hacer.
27. Desafíate a ti mismo
Con tantos accesos directos y fragmentos de código para ayudarlo a solucionar casi cualquier problema del sitio web que tenga, no se pierda. 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á cambiando constantemente; Siempre hay algo nuevo que aprender o probar.
28. Maximiza tu experiencia
Sal y diseño. Tienes que empezar a diseñar sitios web para ser un diseñador web.
Empieza pequeño, pero asume proyectos con otros. Pida unirse a un proyecto con un equipo en el trabajo. Aborda 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. Solicite comentarios
Utilice su red para recopilar comentarios sobre los proyectos de diseño de su sitio web, sin importar cuán pequeños piensen que son. Escuche estos comentarios, incluso si no le gusta y vea lo que puede aprender.
Aparte 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, intentando y aprendiendo cosas nuevas. Haga un punto para conectarse en red 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 sobre 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. Solo pregúntale a cualquiera que lo esté haciendo.