Tendencias de Diseño UI/UX 2022

Tendencias de diseño UI/UX 2022

El diseño nunca deja de sorprendernos, el 2021 fue excelente para los creadores de experiencias en internet.  Las tendencias de diseño web estarán cada vez más centradas en el usuario y lograr una interfaz gráfica fácil de navegar.

Si bien, las tendencias normalmente sirven de guía para crear proyectos “modernos”, es importante lograr un balance entre el diseño y satisfacer las necesidades del usuario. 

Esta publicación resume algunas de las tendencias de diseño UI y UX que vale la pena tomar en cuenta para este 2022.  Definitivamente valdrá la pena mirar la lista e implementar algunas a tus proyectos actuales o futuros.

Modo Oscuro (Dark Mode)

Navegar y leer contenido desde teléfonos celulares con Android o IOS es lo normal y el modo oscuro (Dark mode) trae muchas ventajas para estos usuarios.  Plataformas populares como Instagram, Twitter y Facebook han implementado el modo oscuro en su diseño y código.

Las ventajas del modo oscuro son:

– Ahorra batería si el dispositivo.

– Es mejor en la legibilidad del texto.

– Mínima fatiga visual al usar el dispositivo por la noche.

– Reduce el brillo de la pantalla y minimiza la luz azul.

Tendencias de Diseño 2022 Dark Mode

Tipografía en Negrita (Bold Typography)

Las tipografías en negrita son perfectas para llamar la atención de los usuarios, podemos utilizarlas al inicio de la página y en secciones importantes durante la navegación. 

Debemos considerar que debe ser una parte integral de la estética general y bien pensada antes de implementarla en el diseño del proyecto, queremos evitar que su implementación escape de nuestro estructura y línea gráfica.

Las revistas son un buen ejemplo de uso de tipografías en negrita, exploremos e investigemos como lo implementan en otros medios, no solo en internet.  De está forma, podremos estructurar mejor el contenido de nuestro proyecto.

Tendencias de Diseño 2022 Bold Typografy

Enfoque móvil primero (Mobile-first)

Año con año siguen aumentando las visitas desde los dipositivos móviles, si al diseñar un nuevo proyecto pensamos primero en la experiencia desde el dispositivo móvil, vamos por buen camino.

El enfoque de diseño “Mobile First” se ha convertido en una necesidad para el diseño y desarrollo de sitios web y sin duda alguna permanecerá así durante lo que resta del año.

Mobile first es una filosofía de diseño que busca crear mejores experiencias para los usuarios, iniciando el proceso de diseño desde la pantalla más pequeña: la móvil.

Diseñar y crear prototipos de sitios web pensando en las pantallas más pequeñas con una ancho máximo de 300 pixeles, garantiza que la experiencia de sus usuarios sea perfecta en cualquier otro dispositivo.

Ya saben pensar en el diseño de móvil primero.

Tendencias de Diseño 2022 Mobile First

Animaciones

Con las animaciones podemos mejorar la experiencia del usuario, además podemos utilizar las animaciones para guiar el flujo de uso de nuestro sitio web, sobre todo cuando necesitamos que el usuario realice acciones especificas dentro de una página.

Funcionan muy bien cuando necesitamos llamar la atención de los usuarios y transmitir mensajes sin usar modales (Ventanas emergentes), ni ventanas con anuncios (banners).


Tendencias de Diseño 2022 Animaciones

Fuente: Pinterest

¡Espero que les guste esta publicación!  Te invito a que te des una vuelta por el canal de Youtube y también puedes visitar nuestro BLOG para ver más contenido interesante.   

Puedes contactar conmigo por correo electrónico, tenemos un repositorio en GitHub con proyectos interesante con sus archivos HTML5, CSS y JavaScript, y así poder realizar las modificaciones necesarias y entender con más detalle el código utilizado. 

Me despido como siempre, deseándote los mejor en tus proyectos.  Para dudas, comentarios y sugerencias me puedes contactar a: jair@cooltimedia.com

5 Extensiones de Visual Studio Code para Iniciar Desarrollo Web

5 Extensiones de visual studio code para iniciar desarrollo web

5 Extensiones de Visual Studio Code para Iniciar Desarrollo Web que te van a ayudar durante el camino como nuevo desarrollador.

Visual Studio Code es un excelente editor de código y, con la ayuda de las extensiones, puede mejorar aún más. En este artículo, veremos algunas de las mejores extensiones esenciales para iniciar con el desarrollo web.

Seguramente en este punto de tu carrera ya habrás escuchado sobre algunos editores de código disponibles para desarrolladores, pero sin duda alguna visual studio code es la más popular.

Vista de Visual Studio Code

Lo primero es instalar el editor Visual Studio Code

Luego de instalar el editor de Visual Studio Code (VSCode), podrás agregar las extensiones a tu nuevo entorno de trabajo dentro del editor.  Para esto vamos a la pestaña de extensiones. 

Esta a la izquierda de la pantalla y como puedes ver en la imagen te muestra las extensiones que ya están instaladas y las más populares.  Para buscar nuevas extensiones colocaremos el nombre en la barra de búsqueda.

Vista de Visual Studio Code Extenciones

Colorize

Colorize te ayudará a visualizar el código de tu proyecto, puedes personalizar los colores de los corchetes de apertura y cierre. Funciona muy bien para PHP, JavaScript y HTML.

Extension Colorize de Visual Studio Code

Además de facilitar la lectura del código, Colorize también le ahorra mucho espacio y tiempo. Permite ver una vista previa de su código en el navegador. Esto es extremadamente útil si está escribiendo grandes cantidades de código.

Colorize también es excelente para resaltar una sola línea de código. Te va ayudar a identificar errores y advertencias rápidamente.

Quokka

Quokka.js es una herramienta de productividad para la creación rápida de prototipos de JavaScript/TypeScript. Los valores se actualizan en tiempo real y se muestran en su IDE junto a su código.

Extension Quokka de Visual Studio Code

La mejor parte es que utiliza un color fijo para los resultados. De esa manera, comprenderás el flujo de su código en tiempo real.

CodeSnap

CodeSnap te ayudará a tomar capturas de pantalla del código y guardarlas como imágenes.

Extension CodeSnap de Visual Studio Code

Es ideal para las ocaciones donde necesitas compartir el código para ayuda, colaboración o documentar tu proyecto.  CodeSnap tiene un esquema de colores predeterminado que coincide con el tema de VSCode, pero puede cambiarlo para adaptarlo a tu gusto.

Live Server

Live Server inicia una instancia de servidor en tu navegador con el código actual y vuelve a cargar el navegador cada vez que realizas un cambio dentro del proyecto.

Extension Live Server de Visual Studio Code

Otra característica importante es proporciona sugerencias para archivos CSS externos y clases HTML. Si usas esta extensión, nunca olvidarás su utilidad. Esta extensión es absolutamente imprescindible.

Remote SSH

La extensión Remote-SSH es parte de las extensiones de desarrollo remoto. 

Extension Remote SSH de Visual Studio Code

Si estás utilizando servidores en la nube de Google Cloud, Amazon o Digital Ocean para iniciar proyectos, esta extensión será muy útil, recuerda en muchos proveedores te apoyan con crédito a crear una nueva cuenta, ideal para poner tus primeros proyectos en producción.

¡Espero que les guste esta publicación!  Te invito a que te des una vuelta por el canal de Youtube y también puedes visitar nuestro BLOG para ver más contenido interesante.   

Puedes contactar conmigo por correo electrónico, tenemos un repositorio en GitHub con proyectos interesante con sus archivos HTML5, CSS y JavaScript, y así poder realizar las modificaciones necesarias y entender con más detalle el código utilizado. 

Me despido como siempre, deseándote los mejor en tus proyectos.  Para dudas, comentarios y sugerencias me puedes contactar a: jair@cooltimedia.com

Reto FrontEnd Batmicky

Reto Frontend Batmicky


Reto FrontEnd StyleLeading Panamá

Detalles del Evento y Enlace de los Archivos del Reto

Reto FrontEnd de StyleLeading

Fecha del Evento

Jueves 22 julio de 2021, 7:30 p.m.

Detalles del Reto:

¿Cómo participar?

Será un evento en línea, sólo debes llenar el formulario de registro (abajo) al evento como participante. Por el momento sólo puedes participar en el reto individualmente.

¿Qué debo tener?

Una computadora con un editor de código como Sublime Text, Visual Studio Code o cualquiera que sea de tu agrado. Adicional a esto, debes tener una conexión a internet.

¿Cómo me puedo preparar?

Una vez realices el registro como participante, podrás tendrás acceso de antemano a los archivos y las instrucciones para el evento. Esto incluye la guía de diseño y la base en HTML y CSS para el reto.

¿Cuánto tiempo tengo para el reto el día del evento?

Tendrás 25 minutos para completar el reto.

¿Será grabado el evento?

El evento será en vivo y lo estaremos transmitiendo por youtube live. (Puedes invitar a tus amig@s).

Como ves, es súper fácil participar y mostrar tus capacidades a los demás miembros de la comunidad.

Enlace para el reto: https://cssbattle.dev/play/66

No olvides verificar el contenido que tenemos en nuestro blog, podrás encontrar y ver los eventos anteriores.

Reto FrontEnd Skull

Reto Frontend Beeee


Reto FrontEnd StyleLeading Panamá

Detalles del Evento y Enlace de los Archivos del Reto

Reto FrontEnd de StyleLeading

Fecha del Evento

Jueves 15 julio de 2021, 7:30 p.m.

Detalles del Reto:

¿Cómo participar?

Será un evento en línea, sólo debes llenar el formulario de registro (abajo) al evento como participante. Por el momento sólo puedes participar en el reto individualmente.

¿Qué debo tener?

Una computadora con un editor de código como Sublime Text, Visual Studio Code o cualquiera que sea de tu agrado. Adicional a esto, debes tener una conexión a internet.

¿Cómo me puedo preparar?

Una vez realices el registro como participante, podrás tendrás acceso de antemano a los archivos y las instrucciones para el evento. Esto incluye la guía de diseño y la base en HTML y CSS para el reto.

¿Cuánto tiempo tengo para el reto el día del evento?

Tendrás 25 minutos para completar el reto.

¿Será grabado el evento?

El evento será en vivo y lo estaremos transmitiendo por youtube live. (Puedes invitar a tus amig@s).

Como ves, es súper fácil participar y mostrar tus capacidades a los demás miembros de la comunidad.

Enlace para la Descarga Directa de los Archivos para el Reto: Descargar Archivos

Puedes ver el video del reto en directo, no olvides agregar el recordatorio.

https://youtu.be/9vHOweiPBKI

No olvides verificar el contenido que tenemos en nuestro blog, podrás encontrar y ver los eventos anteriores.

Reto FrontEnd Beee

Reto Frontend Beeee


Reto FrontEnd StyleLeading Panamá

Detalles del Evento y Enlace de los Archivos del Reto

Reto FrontEnd de StyleLeading

Fecha del Evento

Jueves 08 julio de 2021, 7:30 p.m.

Detalles del Reto:

¿Cómo participar?

Será un evento en línea, sólo debes llenar el formulario de registro (abajo) al evento como participante. Por el momento sólo puedes participar en el reto individualmente.

¿Qué debo tener?

Una computadora con un editor de código como Sublime Text, Visual Studio Code o cualquiera que sea de tu agrado. Adicional a esto, debes tener una conexión a internet.

¿Cómo me puedo preparar?

Una vez realices el registro como participante, podrás tendrás acceso de antemano a los archivos y las instrucciones para el evento. Esto incluye la guía de diseño y la base en HTML y CSS para el reto.

¿Cuánto tiempo tengo para el reto el día del evento?

Tendrás 25 minutos para completar el reto.

¿Será grabado el evento?

El evento será en vivo y lo estaremos transmitiendo por youtube live. (Puedes invitar a tus amig@s).

Como ves, es súper fácil participar y mostrar tus capacidades a los demás miembros de la comunidad.

Enlace para la Descarga Directa de los Archivos para el Reto: Descargar Archivos

Puedes ver el video del reto en directo, no olvides agregar el recordatorio.

https://youtu.be/bN1ROWH_I_I

No olvides verificar el contenido que tenemos en nuestro blog, podrás encontrar y ver los eventos anteriores.

Reto FrontEnd Piano

Reto Frontend Piano


Reto FrontEnd StyleLeading Panamá

Detalles del Evento y Enlace de los Archivos del Reto

Reto FrontEnd de StyleLeading

Fecha del Evento

Jueves 01 julio de 2021, 7:30 p.m.

Detalles del Reto:

¿Cómo participar?

Será un evento en línea, sólo debes llenar el formulario de registro (abajo) al evento como participante. Por el momento sólo puedes participar en el reto individualmente.

¿Qué debo tener?

Una computadora con un editor de código como Sublime Text, Visual Studio Code o cualquiera que sea de tu agrado. Adicional a esto, debes tener una conexión a internet.

¿Cómo me puedo preparar?

Una vez realices el registro como participante, podrás tendrás acceso de antemano a los archivos y las instrucciones para el evento. Esto incluye la guía de diseño y la base en HTML y CSS para el reto.

¿Cuánto tiempo tengo para el reto el día del evento?

Tendrás 25 minutos para completar el reto.

¿Será grabado el evento?

El evento será en vivo y lo estaremos transmitiendo por youtube live. (Puedes invitar a tus amig@s).

Como ves, es súper fácil participar y mostrar tus capacidades a los demás miembros de la comunidad.

Enlace para la Descarga Directa de los Archivos para el Reto: Descargar Archivos

Puedes ver el video del reto en directo, no olvides agregar el recordatorio.

https://youtu.be/_JGqBXfYbjc

No olvides verificar el contenido que tenemos en nuestro blog, podrás encontrar y ver los eventos anteriores.

Reto FrontEnd Sheep

Reto Frontend Sheep


Reto FrontEnd StyleLeading Panamá

Detalles del Evento y Enlace de los Archivos del Reto

Reto FrontEnd de StyleLeading

Fecha del Evento

Jueves 24 junio de 2021, 7:30 p.m.

Detalles del Reto:

¿Cómo participar?

Será un evento en línea, sólo debes llenar el formulario de registro (abajo) al evento como participante. Por el momento sólo puedes participar en el reto individualmente.

¿Qué debo tener?

Una computadora con un editor de código como Sublime Text, Visual Studio Code o cualquiera que sea de tu agrado. Adicional a esto, debes tener una conexión a internet.

¿Cómo me puedo preparar?

Una vez realices el registro como participante, podrás tendrás acceso de antemano a los archivos y las instrucciones para el evento. Esto incluye la guía de diseño y la base en HTML y CSS para el reto.

¿Cuánto tiempo tengo para el reto el día del evento?

Tendrás 25 minutos para completar el reto.

¿Será grabado el evento?

El evento será en vivo y lo estaremos transmitiendo por youtube live. (Puedes invitar a tus amig@s).

Como ves, es súper fácil participar y mostrar tus capacidades a los demás miembros de la comunidad.

Enlace para la Descarga Directa de los Archivos para el Reto: Descargar Archivos

Puedes ver el video del reto en directo, no olvides agregar el recordatorio.

https://youtu.be/YT06JRgKWuE

No olvides verificar el contenido que tenemos en nuestro blog, podrás encontrar y ver los eventos anteriores.

Reto FrontEnd Tambourine

Reto Frontend Tambourine


Reto FrontEnd StyleLeading Panamá

Detalles del Evento y Enlace de los Archivos del Reto

Reto FrontEnd de StyleLeading

Fecha del Evento

Jueves 17 junio de 2021, 7:30 p.m.

Detalles del Reto:

¿Cómo participar?

Será un evento en línea, sólo debes llenar el formulario de registro (abajo) al evento como participante. Por el momento sólo puedes participar en el reto individualmente.

¿Qué debo tener?

Una computadora con un editor de código como Sublime Text, Visual Studio Code o cualquiera que sea de tu agrado. Adicional a esto, debes tener una conexión a internet.

¿Cómo me puedo preparar?

Una vez realices el registro como participante, podrás tendrás acceso de antemano a los archivos y las instrucciones para el evento. Esto incluye la guía de diseño y la base en HTML y CSS para el reto.

¿Cuánto tiempo tengo para el reto el día del evento?

Tendrás 25 minutos para completar el reto.

¿Será grabado el evento?

El evento será en vivo y lo estaremos transmitiendo por youtube live. (Puedes invitar a tus amig@s).

Como ves, es súper fácil participar y mostrar tus capacidades a los demás miembros de la comunidad.

Enlace para la Descarga Directa de los Archivos para el Reto: Descargar Archivos

Puedes ver el video del reto en directo, no olvides agregar el recordatorio.

No olvides verificar el contenido que tenemos en nuestro blog, podrás encontrar y ver los eventos anteriores.

Reto FrontEnd Ukelele

Reto Frontend Ukelele


Reto FrontEnd StyleLeading Panamá

Detalles del Evento y Enlace de los Archivos del Reto

Reto FrontEnd de StyleLeading

Fecha del Evento

Jueves 10 junio de 2021, 7:30 p.m.

Detalles del Reto:

¿Cómo participar?

Será un evento en línea, sólo debes llenar el formulario de registro (abajo) al evento como participante. Por el momento sólo puedes participar en el reto individualmente.

¿Qué debo tener?

Una computadora con un editor de código como Sublime Text, Visual Studio Code o cualquiera que sea de tu agrado. Adicional a esto, debes tener una conexión a internet.

¿Cómo me puedo preparar?

Una vez realices el registro como participante, podrás tendrás acceso de antemano a los archivos y las instrucciones para el evento. Esto incluye la guía de diseño y la base en HTML y CSS para el reto.

¿Cuánto tiempo tengo para el reto el día del evento?

Tendrás 25 minutos para completar el reto.

¿Será grabado el evento?

El evento será en vivo y lo estaremos transmitiendo por youtube live. (Puedes invitar a tus amig@s).

Como ves, es súper fácil participar y mostrar tus capacidades a los demás miembros de la comunidad.

Enlace para la Descarga Directa de los Archivos para el Reto: Descargar Archivos

Puedes ver el video del reto en directo, no olvides agregar el recordatorio.

https://youtu.be/Nyrgdcm4u2g

No olvides verificar el contenido que tenemos en nuestro blog, podrás encontrar y ver los eventos anteriores.

Reto FrontEnd Hippo

Reto Frontend Hippo


Reto FrontEnd StyleLeading Panamá

Detalles del Evento y Enlace de los Archivos del Reto

Reto FrontEnd de StyleLeading

Fecha del Evento

Jueves 03 junio de 2021, 7:30 p.m.

Detalles del Reto:

¿Cómo participar?

Será un evento en línea, sólo debes llenar el formulario de registro (abajo) al evento como participante. Por el momento sólo puedes participar en el reto individualmente.

¿Qué debo tener?

Una computadora con un editor de código como Sublime Text, Visual Studio Code o cualquiera que sea de tu agrado. Adicional a esto, debes tener una conexión a internet.

¿Cómo me puedo preparar?

Una vez realices el registro como participante, podrás tendrás acceso de antemano a los archivos y las instrucciones para el evento. Esto incluye la guía de diseño y la base en HTML y CSS para el reto.

¿Cuánto tiempo tengo para el reto el día del evento?

Tendrás 25 minutos para completar el reto.

¿Será grabado el evento?

El evento será en vivo y lo estaremos transmitiendo por youtube live. (Puedes invitar a tus amig@s).

Como ves, es súper fácil participar y mostrar tus capacidades a los demás miembros de la comunidad.

Enlace para la Descarga Directa de los Archivos para el Reto: Descargar Archivos

Puedes ver el video del reto en directo, no olvides agregar el recordatorio.

https://youtu.be/Nyrgdcm4u2g

No olvides verificar el contenido que tenemos en nuestro blog, podrás encontrar y ver los eventos anteriores.