11 Saltar al contenido

Aprender A Diseñar Paginas Web más económicas de 2022

30 de julio de 2022
Aprender A Diseñar Paginas Web

Mira esto: Aprender A Diseñar Paginas Web más económicas de 2022

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

Más Info

¿Está el aprendizaje de los conceptos básicos del diseño web aún en tu lista de «algún día»? ¿Por qué razón no has comenzado aún? Hemos reunido 30 consejos y recursos para ayudarte a empezar a aprender diseño web este mes (¡y tal vez aun a hallar una nueva carrera!).

Los diseñadores gráficos, los diseñadores de impresión y los creativos que procuran aprender algo nuevo o bien entrar en una página web deben dejar de posponerlo. ¡Cada día que no das el paso inicial te deja un día por detrás de el resto!.

Lee los próximos pasos para comenzar a aprender de qué manera efectuar tu primer sitio web, las mejores prácticas de la industria y considerablemente más, ¡Pero todo en treinta días!.

1. Inicia un sitio web

Diseno de paginas web profesionales juewebs 08
Diseno de paginas web profesionales juewebs 08

La mejor manera de empezar a aprender diseño web es hacerlo. Ese es el consejo de Adam Jerberger, famoso diseñador web de New York.

Te recomiendo que comiences un blog. Empecé un weblog solo para tener un patio de recreo de diseño web, y 7 años después, lancé un libro superventas sobre el tema. Tener un proyecto propio, como un blog, te ofrece un sitio donde puedes probar cosas nuevas, sin que tu jefe te despida si te confundes.

No debes comenzar con una web masivo o bien un diseño loco; empieza pequeño. Prueba con el sitio web, averigua qué partes hacen que las cosas funcionen. (Y asegúrate de inspeccionar el código, para que puedas empezar a familiarizarse con lo que hace que tu sitio web funcione).

¿Quieres comenzar velozmente? Primero, crea tu mapa visual del sitio. Luego, un creador de webs como Wordpress puedes servirte para empezar con un diseño de un sitio web elegante, a medida que empiezas a aprender los conceptos y los componentes básicos que se incluye en una página web.

2. Lee todo lo que puedas

aprender diseño web

Empieza a leer. Debido a que estás en este blog, seguramente estés acostumbrado a estar al corriente de lo que sucede en el planeta del diseño. Sigue leyendo.

Lee todo cuanto caiga en tus manos a cerca de diseño de sitios web, técnicas y tendencias. Sigue en las redes sociales a los diseñadores que admiras.

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

3. Se un comunicador efectivo

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

Los diseñadores de un sitio web deben comunicarse con los clientes con regularidad para averiguar qué problema debe solucionar el diseño; tienen que comunicar esas soluciones e incorporarlas asimismo.

4. Suscríbete a Tuts+ y Envato Elements

Piensa en adquirir una suscripción a Envato Elements , que también te ofrece 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 totalmente a tu propio ritmo, impartido por profesores expertos. También conseguirás acceso a Envato Elements, que es un gran recurso para localizar gráficos, plantillas y más para complementar tu trabajo de diseño web.

5. Piensa en HTML

El HTML, o también llamado lenguaje de marcado de hipertexto, es el talón de Aquiles del diseño de los sitios web. HTML es el esqueleto que ayuda a crear la estructura de una web y cuando puedas leer el idioma, el mundo del diseño de páginas web va a tener mucho más sentido.

W3Schools tiene un excelente tutorial de comienzo de HTML con cientos de ejemplos de HTML con los que puedes jugar en la pantalla para ver qué ocurre y de qué manera funciona exactamente. (Posiblemente lo encuentres más intuitivo de lo que imaginabas).

Productos que desean nuestros clientes

6. Juega con Code en Codeacademy

aprender diseño web

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

Puedes elegir un curso de Codeacademy donde y cuando lo necesites y comenzar y detenerte conforme sea necesario. Elije un tema para aprender (desarrollo web, programación, ciencia de datos) o bien un lenguaje en el que concentrarse: HTML y CSS (un excelente lugar para empezar), Python, Java, SQL, Ruby y más.

7. Aprende a entender CSS

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

Según lo definido por Mozilla

El CSS detalla de qué manera se deben representar los elementos en cualquier parte, ya sea la pantalla, el papel, el habla o bien en otros medios.

Mozilla también tiene una enorme compilación de recursos de CSS para empezar, con una introducción sólida de de qué manera marcha CSS, incluidos selectores y propiedades, escritura de reglas de CSS, aplicación de CSS a HTML, de qué manera precisar 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 estilo del texto y los cuadros.

8. Emplea tus habilidades de diseño en la web

Si has comenzado a trabajar en un proyecto creativo o bien de diseño gráfico, piensa en las cosas que bien sabes y que puedes aplicar al diseño de sitios web. Los principios que hacen que algo sea visualmente atrayente no cambian según el medio y toda esa teoría del diseño asimismo va a ser útil en el espacio digital.

Si bien elementos como aprender código pueden no parecer naturales, tener experiencia en diseño es una gran ventaja. ¿Para qué sirve una web bellamente codificado si absolutamente nadie quiere interaccionar ahí?

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

Fíjate en los las webs que te gustan. ¿Qué te atrae de ellos? (¿Y de qué manera puedes aprender a replicar 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 alámbrica

Diseno de paginas web profesionales juewebs 32
Diseno de paginas web profesionales juewebs 32

En su forma más pura, un wireframe es un boceto de lo que va a ser el sitio web. No es un esbozo de elementos estéticos, sino un plano de la página web. Dibujar una estructura alámbrica no se trata verdaderamente 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 wireframe? Usables tiene una guía de mejores prácticas para asistirte a aprender.

11. Tómate un tiempo para aprender Sketch

aprender diseño web

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á atestado de complementos y te permite exportar código para que sea más simple su uso y acceso. Es una de las herramientas más poderosas y populares desde Creative Suite de Adobe y merece la pena.

12. Mantente actualizado con la tecnología

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

Puede ser complicado estar al día con tantas nuevas tecnologías y tendencias como van apareciendo, aunque debes procurar estar al tanto de estos cambios.

Empieza a tratarlos uno a uno y comienza con las tecnologías que están más directamente relacionadas con el trabajo que efectúan. En caso de tener un sitio web con chat, empieza por aprender sobre los bots. Pero si utilizas mucho contenido de vídeo, prueba con vídeos de 360 ​​grados.

Existen elementos más complejos, como la inteligencia artificial y la realidad virtual o bien aumentada, aunque es probable que se transformen en el futuro en partes integradas del panorama del diseño de los sitios web. Por lo menos, deberías saber cuáles son y cuáles pueden ser sus aplicaciones potenciales.

13. Ponte cómodo con el SEO

Diseno de paginas web profesionales juewebs 02
Diseno de paginas web profesionales juewebs 02

Si bien muchos diseñadores web creen que un especialista en posicionamiento web en buscadores puede encargarse de preparar una página web para que lo lean los buscadores web, hay mucho trabajo de diseño relacionado con el posicionamiento en buscadores.

Desde la forma en que se cargan las imágenes hasta la creación de código limpio que es rápido para incluir metadescripciones en páginas y elementos, el diseñador tiene que añadir el pensamiento de buscar en su proceso de trabajo.

Esto también es de vital importancia para los Freelancers. La mayor parte de los clientes saben que quieren una web optimizada para posicionamiento en buscadores, de forma que deberás esmerarte en proporcionárselo. Si trabajas solo, precisas saber lo bastante para crear un marco sólido que Google pueda leer (y poder derivar al cliente a un especialista en posicionamiento web si se necesita más trabajo).

14. Utiliza con un maquetador de sitios web

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

La mayoría de estas herramientas tienen muchas plantillas y te dejan personalizar elementos e incluso añadir fragmentos de código. Para sitios simples, muchos creadores de sitios web asimismo tienen un plan gratis en el que puedes crear una página de weblog personal o bien un sitio web básico que te sirva de patio de recreo.

Luego, aparta las piezas en el creador de sitios web. Mira cómo están diseñados y codificados para tener una idea de de qué forma se combina todo. Te sorprenderás de lo que puedes descubrir sencillamente escogiendo otro diseño.

15. Encuentra un guía

¿Hay alguien con quien trabajas que admires como diseñador web? Llévalos a comer y pídeles información sobre el sector.

Encontrar un mentor que esté presto a trabajar contigo y colaborar para meditar sobre este sector y cómo aprender diseño web por tu cuenta puede ser incalculable. Y aunque seguramente puedas encontrar un mentor en una comunidad on-line, nada es mejor que una persona de carne y hueso que puedas conocer frente a frente periódicamente. (Tal vez valga la pena tener mentores on line y en persona).

Productos que compran nuestros clientes

16. Únete a la comunidad CodePen

aprender diseño web

Una vez que comiences a sentirse cómodo con algo de código y programación, desearás unirte a la comunidad de CodePen. Esta comunidad de código abierto te deja compartir y editar fragmentos de código en una suerte de red social.

Aquí tienes un tanto más de información sobre los creadores de la web: “CodePen es un entorno de desarrollo social. En esencia, te deja redactar código en el navegador y ver los resultados conforme construyes. Una herramienta útil y liberadora para desarrolladores de cualquier habilidad, y particularmente enriquecedora para las personas que aprenden a codificar. Nos enfocamos principalmente en lenguajes front-end como HTML, CSS, JavaScript y sintaxis de preprocesamiento que se transforman en esas cosas”.

17. Toma una clase

Para ciertos alumnos, lo mejor es un salón de clases más formal.

Hay un montón de clases libres, en persona y on line, para que aprendas los conceptos básicos de diseño web. Comienza con una Universidad o bien centros de aprendizaje en línea como Udemy o Coursera. Elije una clase en tu nivel de habilidad actual y prosigue avanzando.

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

Para el estudiante no tan tradicional, encuentra la contestación al problema del diseño web en Google. Tienes a tu predisposición muchos tutoriales y vídeos que pueden guiarte mediante prácticamente cualquier inconveniente y ofrecerte alguna solución.

El secreto es encontrar precisamente lo que necesitas saber y buscar la contestación en una fuente segura. Aquí tienes otro consejo para cuando mires los tutoriales y videos: el contenido más reciente es el que mejor te va a dar una respuesta sobre el tema que buscas, más completo y más relevante. (Que no se te olvide: estas cosas cambian de forma rápida).

19. Pon especial atención a la experiencia del usuario

Nada puede hacer o bien deshacer una página web como el diseño de la experiencia del usuario. Necesitas planificarlo y entenderlo.

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

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

Los diseñadores de UX, o bien diseñadores que conocen el proceso de capacitación de la experiencia, procuran crear y dar forma de forma deliberada a los factores que influyen en el proceso. Para hacer esto, un diseñador de UX considerará el por qué, el qué y el de qué forma del empleo del producto.

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

¿Cómo se diseña hoy en día de un sitio web moderno? No es una pregunta trampa. Para diseñar sitios web modernos y experiencias de usuario, tienes que saber qué quieren los usuarios y de qué manera interactúan con él. Si la última vez que descargaste una aplicación o visitaste un sitio web en tu teléfono fue en 2016, tienes mucho terreno que aprender.

La creación de diseños de sitios web que tengan toques modernos y tendencias integradas en el diseño ayudará a que tus proyectos se resalten. ¿De qué forma saber qué es tendencia? Sigue buscando páginas como esta y pon atención a lo que hacen otros diseñadores. Toma nota de los colores, estilos y peculiaridades que se incluyen en los sitios web que visitas con frecuencia.

21. Crea sin color

aprender diseño web

Puede que eso no siempre y en toda circunstancia se cumpla, aunque es un gran punto de partida.

Al crear diseños en blanco y negro, puedes ver dónde contrastan los elementos y cómo interactúan. Has eliminado cualquier asociación emocional con el color o bien el movimiento de los ojos que se genera a raíz de ello. Esta forma de diseño más simple te dará una idea de si algo funciona como término ya antes de pasar a concluirlo.

22. Aprende a usar las fuentes de Google

aprender diseño web

Google Fonts es tu amigo.

Independientemente de de qué forma te sientas con respecto a Google, la capacidad de navegar, ordenar y seleccionar tipos de letra que sabes que funcionarán en los diseños de webs es esencial. No tienes que meditar en licencias o si las clases de letra son compatibles con navegadores específicos o no.

La restricción es que solo tienes lo que está en la biblioteca de fuentes de Google para trabajar. Pero si lo intentas, encontrarás algo que se adapte a prácticamente todos los proyectos. Te ahorrará mucho tiempo a largo plazo.

23. Elige un programa de interfaz de usuario

Descarga una interfaz de usuario o un programa de iconos y selecciónalo.

Al igual como puedes inspeccionar el código de una web, observa cómo se edifican los elementos de diseño para la página web. Anota la escala y la cuadrícula, mira las mezclas de colores y de qué forma se clasifican los archivos en Photoshop o bien Illustrator.

Busca un programa para descargar que incluya la posibilidad de hacerlo en múltiples formatos para pantallas de alta resolución. (Descargar un montón de ficheros JPEG no te servirá de nada).

Después prueba a realizar o personalizar uno o 2 elementos propios.

24. Conviértete en tipógrafo

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

Comienza 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 te va a hacer meditar como un tipógrafo en poquísimo tiempo.

25. Vente a JavaScript

Cuando empieces a sentirte bien sobre incursionar en el diseño web, desafíate de nuevo a ti para aprender JavaScript. Has de saber que, después de HTML y CSS, es el lenguaje más importante en el diseño de webs.

JavaScript es una herramienta que permite a los diseñadores incorporar cosas complejas e interactuar en webs. Es lo que hace que un control deslizante se deslice o que se anime la animación de paralaje.

En la página web de Learn JS puedes localizar un tutorial interactivo que te ayudará a comenzar.

26. Actualiza tu cartera

Diseno de paginas web profesionales juewebs 33
Diseno de paginas web profesionales juewebs 33

Una vez que empiezas a diseñar para la página web, asegúrate de actualizar tu cartera con proyectos de diseño web. Esta simple acción te va a ayudar a probarte a ti mismo… y a los demás… que el diseño web es parte de tu repertorio.

Un portafolio actualizado puede mostrar a los potenciales compradores a ver cómo se ve tu «estilo». Procura enseñar tipografía, diseños, colores y diferentes técnicas que demuestren lo que sabes hacer.

27. Ponte a prueba

Con tantos accesos directos y fragmentos de código para asistirte a solventar casi cualquier problema que tengas con la página web, no te vuelva perezoso. Recuerda desafiarte a ti mismo de manera continua para aprender nuevas habilidades, nuevas tecnologías y proseguir mejorando tu estilo de diseño web.

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

28. Maximiza tu experiencia

Sal y diseña. Tienes que comenzar a diseñar webs para ser un diseñador web.

Comienza con algo pequeño, aunque inicia proyectos con otros. Pide unirte a un proyecto con un equipo en el trabajo. Realiza una pequeña web para un amigo. Cuanta más experiencia tengas en la creación de páginas web, mejor y más veloz obtendrás los conocimientos necesarios.

¿Qué estás pensando? Deja de perder el tiempo.

29. Pide comentarios

Utiliza tu red social para recoger comentarios sobre los proyectos de diseño de tu sitio web, sin importar qué pequeños creas que son. Presta atención a estos comentarios, si bien no te agraden, y extrae lo que puedes aprender.

Aparte de la preferencia visual, ¿la persona que dio los comentarios ofreció sugerencias para mejorar el funcionamiento de la web? ¿Podrían entender fácilmente el objetivo del diseño? ¿Se conectaron con la mensajería?

30. Sigue aprendiendo cosas nuevas

Diseno de paginas web profesionales juewebs 19
Diseno de paginas web profesionales juewebs 19

Para ser un buen diseñador de webs, únicamente necesitas proseguir practicando, probando y aprendiendo cosas nuevas. Haz un punto para establecer contactos y comunicarte con otros en el campo del diseño web para que puedas mantenerte al corriente de las técnicas y los cambios visuales que están de moda.

Si estás buscando aprender a diseñar páginas web, probablemente esto sea algo que hagas de manera regular. Pero este es un ámbito en evolución, que prosigue avanzando prácticamente todos los días. Puedes pregúntale a cualquiera que lo esté haciendo y te lo confirmará.

Productos que buscan nuestros clientes