Si está decidido a aprender diseño web por su cuenta, está en el lugar correcto.
Es cierto que el diseño web puede ser bastante complejo y desalentador, pero con los avances en tecnología y penetración de Internet, ha crecido a proporciones épicas. No es de extrañar que convertirse en diseñador web se haya convertido en una tendencia popular en la generación actual.
En este artículo, lo guiaré a través del aprendizaje del diseño web con recursos y consejos. Para los principiantes que quieran tomar este camino, puede servir este artículo como guía.
Paso 1: Decídase y haga planes
El aprendizaje del diseño web es una tarea a largo plazo que está llena de desafíos. Necesitas desafiarte a ti mismo seriamente. Decídete ahora y hacer planes basados en las guías de aprendizaje que presentamos en este artículo. Recuerde que lo logrará por su cuenta si comienza a aprender diseño web a través de la práctica. ¡Así que prepárate!
Paso 2: Obtenga una comprensión básica del diseño web
«¿Cómo puedo empezar a aprender diseño web?»Esta es la pregunta en tu mente. Para aprender a fondo el diseño web, debe comprender las respuestas de al menos las siguientes 2 preguntas:
¿Qué es el diseño web?
La gente a menudo malinterpreta el significado del diseño web.
Bueno, ¿qué es exactamente el diseño web?
Visual + interaction = diseño web
El diseño web consiste en resolver problemas. Involucra todos los aspectos de un sitio web: el arte, las habilidades, la ciencia y la tecnología de construir el aspecto y la funcionalidad de un sitio web, así como las formas en que los usuarios interactúan con las páginas web.
Muchos diseñadores jóvenes a menudo malinterpretan el concepto de diseño web con el de desarrollo.
Recuerde: el diseño web se trata de diseño, no de codificación y desarrollo de front-end o back-end.
Por supuesto, es mejor si conoces algunos lenguajes de codificación (HTML, CSS, Java, etc.).), pero no debes adentrarte en el desarrollo de front-end o back-end si quieres ser un diseñador web enfocado. Ese no es el núcleo del diseño web.
¿Qué es el proceso de diseño web?
El diseño web no es una tarea sencilla. Es bastante desafiante pero interesante convertir una página en blanco en un sitio web completo. ¿Cómo puedes hacerlo?
Es necesario seguir las fases principales del proceso de diseño web. Lo son:
- Establecer un objetivo
Determina qué tipo de sitio web diseñarás. ¿Es para comercio electrónico, una empresa, promoción de nuevos productos o un proyecto de actividad?
Si no tienes idea, comienza con un blog. Para los nuevos estudiantes, crear un blog es una mejor opción que crear cualquier otro tipo de sitio web elaborado.
- Hacer una programación
Crear una línea de tiempo para diseñar las páginas. Asigne tareas a todos los involucrados en el proyecto de diseño web.
- Crear un mapa del sitio y crear un marco de alambre
Lluvia de ideas. Convierta las ideas en un marco de alambre con un bolígrafo o herramientas de marco de alambre. Necesitas traducir tus pensamientos en algo tangible para que puedas validarlos desde el principio.
- Creación de contenido
Agregue contenido con elementos de diseño, elementos visuales, copias e interacciones. Esta es la fase en la que pones en práctica todas tus habilidades de diseño y desarrollo. En esta fase, convertirá una página en blanco en un sitio web terminado.
- Probando
Pruebe su sitio web y obtenga comentarios útiles. Hazlo hasta que maximices la calidad de la experiencia del usuario y, a continuación, prepárate para el lanzamiento.
- Lanzamiento
Ponga su sitio web a disposición de los visitantes y mejorarlo en función de los comentarios recopilados.
Puede obtener una comprensión más completa del proceso de diseño web al pasar por este Curso de Diseño Web de 43 minutos.
Paso 3: Comienza a aprender
Una vez que te hayas configurado y entiendas los fundamentos del diseño de sitios web, puedes comenzar a consultar recursos y consejos prácticos de aprendizaje.
El diseño web implica tanto la apariencia visual como el diseño funcional. Eso significa que necesitas aprender 2 cosas principales:
- ¿Cómo hacer que un sitio web se vea bien?
- ¿Cómo hacer que un sitio web funcione bien?
Tendrá que aprender a diseñar interfaces (tipografía, navegación, imágenes, espacio, animaciones, colores, etc.).), cómo codificarlos en un lenguaje de desarrollo web (HTML, CSS, Python, SQL, Ruby o JavaScript), así como optimizar su sitio web para motores de búsqueda.
Leer libros de aprendizaje de diseño web
Una de las mejores formas de aprender diseño web es a través de libros de lectura. Aquí hay 5 de los mejores libros de diseño web que son útiles para aquellos que desean aprender diseño web por su cuenta.
- HTML y CSS: Diseño y Construcción de sitios web
- Diseño Web de aprendizaje: Guía para principiantes
- No Me hagas Pensar: Un Enfoque de Sentido Común para la Usabilidad web
- Aprender diseño web
- Diseñar con estándares web
Leer blogs de diseño web
Si no eres un ratón de biblioteca y encuentras la lectura una tarea tediosa, puedes seguir algunos de los mejores blogs de diseño web para mantener tu cerebro alimentado. Usa blogs como alternativa y suscríbete a tus favoritos para no perderte nada.
- Smashing Magazine
- Mockplus blog
- Webdesigner Depot
- Webdesignledger
- BIBLIOTECA DE DISEÑO WEB
- INTERFAZ de usuario de Hacking
- 1stwebdesigner
- WEBAPPERS
Aprende con contenido PDF
Algunos contenidos realmente útiles están disponibles en formato PDF para su descarga gratuita. Puedes usarlo para aprender el diseño web paso a paso. Estos son algunos ejemplos que merecen su tiempo.
- Diseño web – manual
- Aprendizaje de Diseño Web Tercera Edición – Semantic Scholar
- Diseño web 101-MIT
- Crea Tu Propio Sitio Web De la Manera Correcta Utilizando HTML & CSS – Archivos X
- Una Guía Completa de Diseño Web.pdf-Biblioteca Cristiana en línea
Aprende de profesionales
Sigue a diseñadores web de los que aspiras a aprender en sitios de redes sociales como Twitter, Dribbble, Behance, Github y otras plataformas en las que están activos. Lee sus publicaciones, haz clic en el botón me gusta para las que aprecias y comenta si deseas agregar un punto o hacer una pregunta . Si tienes suerte, puedes encontrar un mentor en una comunidad o grupo en línea. Pero no los molestes y da por sentado su ayuda.
Diseñadores web que puedes seguir:
- Ethan Marcotte
- Chris Coyier
- Ethan Marcotte
- Jeffrey Zeldman
- Luke Wroblewski
Aprende de tutoriales en video de diseño web
Hay muchos videos de Youtube disponibles en línea. Reduzca su tiempo viendo cosas divertidas y use Youtube para aprender diseño web. Aquí recomiendo 5 de los tutoriales en vídeo más populares. Disfruta viendo.
- Tutorial de Diseño Web para Principiantes para 2018-Parte 1 de 2
- Tutorial de Desarrollo Web Para Principiantes 2018 / 2019-cómo crear un sitio web
- Tutorial De Diseño Web Para Principiantes
- Tutorial HTML CSS para Principiantes-Tutoriales de Desarrollo Web Para Principiantes
- Los Tutoriales Completos de Diseño Web HTML y CSS para Principiantes
Aprender de cursos en línea
Los cursos en línea gratuitos pueden ser uno de los mejores recursos. También puede hablar con otros estudiantes.
- Class central
Aprenda Desarrollo web con cursos en línea gratuitos y MOOC de la Universidad Johns Hopkins, la Universidad de Michigan, la Universidad KU de Lovaina, la Universidad de California, Berkeley y otras universidades líderes de todo el mundo.
- Coursera
Un gran sitio web para principiantes para aprender diseño web. Puede elegir un curso de la universidad que desee y ver cuántas personas lo están aprendiendo. Con los datos presentados, tiene muchas opciones al seleccionar un curso.
- Edx
Enumera una gran cantidad de recursos para desarrollar tus habilidades de diseño y avanzar en tu carrera. Puede aprender temas paso a paso con diferentes niveles de pasos por dificultades.
- W3Schools
Útil para aprender lenguajes de programación básicos como HTML y CSS.
- Google Code University
Aprende a codificar con desarrolladores de Google.
- Code Avengers
Me gusta especialmente este sitio web de aprendizaje porque es como una gran aventura que te permite participar en programas de desafío de codificación y caza de errores.
Más lugares para cursos en línea de diseño web：
- Casa del árbol
- Lynda
- Udemy
- Coursera
- Diseño web.tutsplus
Aprenda los conceptos básicos de HTML y CSS
Puede preguntarse, ¿por qué debo aprender HTML? En general, usar una aplicación de diseño web como Dreamweaver está bien. Pero actualmente, la mayoría de los sitios web están basados en HTML5, y CSS es la piel de un sitio web. El diseño moderno de sitios web no es posible sin CSS. Aprender los conceptos básicos de HTML y CSS te ayudará a progresar en el diseño web.
Recursos para aprender HTML y CSS：
- 30 Días para aprender HTML y CSS
- Guía para Principiantes de HTML & CSS
- No temas a Internet
- Las 8 Mejores Plantillas de Sitios Web CSS Adaptables Gratuitas
También puedes unirte a la Comunidad de CodePen. Esta es una comunidad de código abierto que le permite editar fragmentos de código y compartirlos con otros.
Aprende JavaScript
Además de HTML y CSS, JavaScript es un lenguaje importante de la web que puedes aprender. Es una herramienta que le permite crear interacciones de usuario avanzadas como efectos de paralaje y aplicaciones web potentes.
Recursos para aprender Javascript:
- 32 de los Mejores Lugares para Aprender JavaScript para Principiantes en Desarrollo Web
- Los 37 Mejores Libros de JavaScript para Principiantes y Programadores Experimentados en 2019
Aprenda sobre elementos de diseño web
Si es bueno en la observación, encontrará que la mayoría de los sitios web modernos atractivos tienen una buena disposición de los elementos básicos del sitio web, como:
1） Tipografía
La tipografía es la clave para un excelente diseño web. Garantiza la legibilidad del contenido e influye directamente en la experiencia del usuario. La tipografía es un aspecto importante de todos los sitios web modernos, ya que ofrece estética y funcionalidad a sus visitantes.
Recursos para aprender tipografía web:
- 17 Los Mejores Sitios Web de Diseño de Tipografía & Tutoriales
- 30 Sitios Web Creativos con Tipografía Magnífica & Esquemas de Color
2）Animación y transformaciones
Las transiciones y transformaciones ofrecerán interacciones de usuario mejoradas a los visitantes de su sitio web. Una de las mejores formas de crear animaciones simples son las transiciones y transformaciones CSS. Además, los efectos de desplazamiento de paralaje y desplazamiento horizontal son excelentes opciones para sitios web.
3）Combinación de colores
Las combinaciones de colores de un sitio web reflejan la preferencia/estilo estético de un diseñador web y afectan directamente a la percepción del espectador. Necesita aprender A Usar El Color En El Diseño De La Interfaz De Usuario Sabiamente para Crear Una Interfaz De Interfaz De Usuario Perfecta.
4）Fuentes
Las fuentes personalizadas pueden ser divertidas o expresivas, pero no siempre son prácticas. Si desea que un sitio web sea legible y profesional, elija la fuente más adecuada para él. Compruebe 20 de las Mejores Fuentes Web de Google para un Excelente Diseño Web. Son de uso libre!
5）Diseño
El diseño de diseño web se centra en la intersección entre tecnología y arte. El diseño de diseño web se refiere a la combinación de elementos visuales como texto e imágenes para hacer que una página se vea hermosa y fácil de navegar. Es una forma importante de comunicación visual y una parte integral del diseño web. Aquí están 9 de los Mejores Ejemplos e Ideas de Diseño de Sitios Web.
6）Gráficos
Las imágenes dan a las personas una impresión visual más intensa que el texto. Pueden aumentar las posibilidades de atraer la atención de los usuarios.
7）Diseño responsivo
El diseño web responsivo es una colección de técnicas para crear sitios web que funcionan en múltiples tamaños de pantalla. Aprende con este curso CSS de 47 minutos.
Aprenda los conceptos básicos de la creación de estructuras y prototipos
La creación de estructuras y prototipos es un paso importante para sentar las bases de su sitio web en todo el proceso de diseño y desarrollo del sitio web. Le permite hacer una lluvia de ideas, hacer un plano y tener una idea clara sobre la estructura del sitio.
No confunda los diferentes términos. Repase los Conceptos Básicos de Diseño de interfaz de usuario/experiencia de usuario: Diferencias entre Estructura metálica, Prototipo y Maqueta
Herramientas de diseño web de aprendizaje
Herramienta de diseño de interfaz de usuario de Photoshop
Se puede usar para crear y mejorar fotografías, ilustraciones, ilustraciones en 3D, diseñar sitios web y aplicaciones móviles; editar videos, simular pinturas de la vida real, y más. Puedes aprender a usar cualquiera de los 22 Mejores Tutoriales Gratuitos de Adobe Photoshop Paso a Paso para Principiantes.
Dreamweaver – herramienta de desarrollo web
Se puede utilizar para crear páginas web dinámicas para múltiples plataformas y navegadores. «Dreamweaver permite a sus usuarios diseñar, codificar y administrar sitios web, así como contenido móvil. Dreamweaver es una herramienta de Entorno de Desarrollo Integrado (IDE).»(Wikipedia). Comience con la guía para principiantes de Dreamweaver.
Mockplus-herramienta de creación de prototipos
Mockplus es una de las mejores herramientas de creación de prototipos para que los diseñadores web creen una maqueta web interactiva. Puede arrastrar y soltar componentes para crear un sitio web y previsualizarlo en HTML u otros formatos. Solo necesita 10 Minutos para comenzar a crear prototipos de forma gratuita.
Aprenda con un creador de sitios web
Comenzar con un creador de sitios web puede ayudarlo a comprender rápidamente las mejores prácticas de creación y diseño de sitios web. Con las plantillas prediseñadas y los kits de interfaz de usuario, simplemente puede personalizar elementos o agregar fragmentos de código para crear un sitio web que los visitantes admiren.
Creadores de sitios web, puedes probar:
- crítica de alojamiento Web
- Wix
- remota battlefield cirugía
- SITE123
- Jimdo
- WordPress
Aprender SEO
es bueno tener un especialista en SEO para lidiar con el buscador. Pero el diseño está bastante conectado con el SEO porque el contenido de tu sitio web es leído por los motores de búsqueda y juega un papel en el ranking. Si quieres diseñar un sitio web optimizado para SEO, conocer los conceptos básicos del SEO es una necesidad. Al menos, deberías conocer las meta descripciones en páginas y elementos.
Aprenda tendencias de diseño
Las tendencias de diseño están cambiando rápidamente. Debe estar al tanto de las últimas tendencias de diseño y tecnologías de desarrollo web para diseñar un sitio web moderno. Simplemente puede consultar las 10 Tendencias y Ejemplos de Diseño Web que debe Conocer en 2019 para inspirarse.
Paso 4: Comience con una estructura metálica
Inicie el proceso de diseño del sitio web con una estructura metálica. Wireframing ayuda a los diseñadores web a intercambiar ideas y validar sus pensamientos desde el principio. Comience a dibujar con los 10 Consejos Prácticos para Bosquejar Sus Esquemas.
Paso 5: Utilice lo que ha aprendido para diseñar un sitio web
Ahora es el momento de probar lo que ha aprendido en el Paso 3. Debes aprender diseño web haciéndolo. Entonces sabrás lo que entiendes y lo que no. Luego sigue aprendiendo y sigue adelante.
Paso 6: Pide comentarios y haz mejoras
Si has creado un blog o cualquier otro sitio web, debes invitar a la gente a él. Trate de obtener la mayor cantidad de comentarios que pueda y luego haga mejoras.
Preguntas frecuentes sobre diseño web de aprendizaje：
¿Cuánto tiempo se tarda en aprender diseño web?
El aprendizaje del diseño web es un proceso continuo, pero se puede aprender en meses. Por lo general, le llevará 5 meses aprender HTML, CSS y los conceptos básicos de JavaScript. También necesita dedicar tiempo a herramientas de diseño como Photoshop, Sketch y Mockplus.
Además, se supone que debe comprender los estándares web, los principios de diseño, el diseño de UX/UI, la compatibilidad entre navegadores y la capacidad de respuesta. Aprender todo eso te llevará de 3 a 4 meses.
Y lo más importante es que estás a punto de entrar en el campo del diseño web después de todas esas lecciones. El diseño está cambiando, la tecnología está cambiando, por lo que necesita seguir aprendiendo continuamente.
¿Puedo convertirme en diseñador web sin un título?
Puede convertirse en diseñador web sin un título. Para ser diseñador web, un título no es obligatorio, lo que debe tener es un interés en la programación, conocimiento de diseño visual y codificación en un lenguaje de desarrollo web, así como otras habilidades en diseño web. Pero un título puede aumentar sus posibilidades de ser contratado en la mayoría de los casos.
¿Qué puedo hacer después de tomar un curso de diseño web?
Después de completar un curso de diseño web, puede tomar un proyecto en vivo, luego ser contratado en una empresa de diseño web o ser un freelancer y buscar proyectos y clientes usted mismo.
¿El diseño web tiene futuro?
Vivimos en un mundo digital lleno de sitios web. El futuro es bastante prometedor.
De acuerdo con la Guía Salarial de Creative Group 2019, el desarrollador web front-end es uno de los trabajos mejor pagados en el campo creativo y de marketing, junto con diseñadores de experiencia de usuario, investigadores de experiencia de usuario, redactores, etc. Según Glassdoor, a los desarrolladores web se les paga entre $41.6 k-78.3 k al año y, de acuerdo con PayScale, se les ofrece $16.4 k – 34.6 k al año. El salario promedio del diseñador web es de alrededor de 4 49,693.
¿El diseño web es fácil?
Puede parecer simple al principio porque puede aprender los conceptos básicos de HTML & CSS en unos pocos meses. Pero a medida que avances en esta industria, es posible que lo encuentres más desafiante. Necesita aprender continuamente nuevas tecnologías para mantenerse al día con todos los cambios. Pero si está interesado en crear sitios web y aplicaciones web, el diseño web puede ser fácil para usted.
Conclusión
Si desea aprender diseño web por su cuenta, la información anterior tiene todo lo que necesita para comenzar. Deja de perder el tiempo en Facebook o Twitter «buscando respuestas». Aunque puedes construir una comunidad de diseño en esas plataformas, no puedes ser un diseñador web pasando tiempo sin rumbo fijo. Así que, agáchate y empieza a aprender. ¡Nunca te rindas en aprender y buena suerte para ti!