Qué es SVG y para qué sirve

Qué es SVG y para qué sirve

Si te has preguntado alguna vez qué es SVG, te lo voy a explicar. Aunque fue concebido a finales de los 90, SVG es en muchos sentidos el formato de archivo ” el patito feo” que creció hasta convertirse en un cisne. Poco respaldado y en gran parte ignorado durante la mayor parte de la década del 2000, a partir de 2017 todos los navegadores web modernos han estado renderizando SVG sin ningún problema, y la mayoría de los programas de dibujo vectorial han estado ofreciendo la opción de exportar SVG, que sin duda se ha convertido en un formato gráfico muy utilizado en la Web.

Esto no ha sucedido por casualidad. Aunque los formatos tradicionales de archivos gráficos rasterizados como JPG y PNG son perfectos para fotografías o imágenes muy complejas, resulta que SVG es el formato gráfico que más se ajusta a las demandas actuales de desarrollo web en cuanto a escalabilidad, capacidad de respuesta, interactividad, programabilidad, rendimiento y accesibilidad.

Entonces, ¿qué es SVG y por qué debería usarlo?

SVG es un formato gráfico vectorial basado en el lenguaje de marcas extensible (XML) para la Web y otros entornos. XML utiliza etiquetas como HTML, aunque es más estricto. No se puede, por ejemplo, omitir una etiqueta de cierre ya que esto hará que el archivo no sea válido y que el SVG no se muestre.

Para que te hagas una idea de cómo es el código SVG, aquí tienes cómo dibujar un círculo blanco con un borde negro:

<circle cx="100" cy="100" r="50" stroke-width="4" stroke="#000" fill="#fff" />

Como puedes ver, en el interior del armario, los documentos SVG no son más que simples archivos de texto plano que describen líneas, curvas, formas, colores y texto. Como es legible para el ser humano, fácilmente comprensible y modificable, cuando se incrusta en un documento HTML como un SVG online, el código del SVG puede ser manipulado a través de CSS o JavaScript. Esto le da al SVG una flexibilidad y versatilidad que nunca podrá ser igualada por los formatos gráficos tradicionales PNG, GIF o JPG.

SVG es un estándar de la W3C, lo que significa que puede interactuar fácilmente con otros lenguajes y tecnologías de estándar abierto, incluyendo JavaScript, DOM, CSS y HTML. Mientras el W3C establezca los estándares globales de la industria, es probable que SVG continúe siendo el estándar de hecho para los gráficos vectoriales en el navegador.

Problemas que resuelve el formato SVG

La maravilla de SVG es que puede resolver muchos de los problemas más molestos para un diseñador web freelance. Veamos algunos de ellos:

Escalabilidad y capacidad de respuesta

El SVG utiliza formas, números y coordenadas en lugar de una cuadrícula de píxeles para mostrar los gráficos en el navegador, lo que lo hace independiente de la resolución e infinitamente escalable. Si lo piensas bien, las instrucciones para crear un círculo son las mismas tanto si usas un bolígrafo como un avión para escribir en el cielo. Sólo cambia la escala.

Con SVG, puedes combinar diferentes formas, trayectorias y elementos de texto para crear todo tipo de visuales, y estarás seguro de que se verán claros y nítidos en cualquier tamaño.

Por el contrario, los formatos basados en rásters como GIF, JPG y PNG tienen dimensiones fijas, lo que hace que se pixelen cuando se escalan. Aunque varias técnicas de imagen responsive han demostrado ser valiosas para los gráficos de píxeles, nunca podrán competir realmente con la capacidad de SVG de escalar indefinidamente.

Programabilidad e interactividad

El SVG es totalmente editable y programable. Todo tipo de animaciones e interacciones pueden ser añadidas a un gráfico SVG online a través de CSS y/o JavaScript.

Accesibilidad

Los archivos SVG están basados en texto, por lo que cuando se incorporan a una página web, pueden ser buscados e indexados. Esto los hace accesibles para un lector tipo reader, un motor de búsqueda y otros dispositivos.

Rendimiento

Uno de los aspectos más importantes que afectan al rendimiento de la web es el tamaño de los archivos utilizados en una página web. Los gráficos SVG suelen ser de menor tamaño en comparación con los formatos de archivos de mapa de bits.

Casos de uso común y soporte del navegador

SVG tiene una avalancha de casos de uso práctico. Exploremos los más significativos de ellos.

Ilustraciones y diagramas sencillos

Cualquier dibujo tradicional que se preste a ser producido con lápiz y bolígrafo debe traducirse perfectamente al formato SVG.

Logotipos e iconos

Los logos e iconos deben ser claros y nítidos en cualquier tamaño, ya sea el tamaño de un botón o el de una valla publicitaria, lo que los convierte en candidatos ideales para el SVG. Además, los iconos de SVG son más accesibles y son mucho más fáciles de colocar.

Animaciones

Puedes crear atractivas animaciones, incluyendo atractivos efectos de dibujo usando gráficos SVG. De hecho, el código SVG puede interactuar con la animación CSS, así como con JavaScript y su propia funcionalidad de animación SMIL incorporada.

Interactividad (tablas, gráficos, infografías, mapas)

El SVG puede utilizarse para trazar datos y actualizarlos dinámicamente en función de las acciones del usuario u otros eventos. Consulta la Infografía interactiva de SVG y el Mapa interactivo de rutas de SVG.

Efectos especiales

Se pueden lograr muchos efectos en vivo usando SVG, incluyendo el modelado de formas o diferentes efectos pegajosos.

Construyendo interfaces y aplicaciones

SVG te permite hacer interfaces sofisticadas que puedes integrar con HTML5, aplicaciones basadas en la web y aplicaciones ricas de Internet (RIA).

Como puedes ver, el SVG se utiliza casi en todas partes y en innumerables situaciones. La buena noticia de todo esto es que la compatibilidad del SVG con los navegadores es excelente, como puedes comprobar tú mismo en caniuse.com.

Así que ahora ya sabes lo que son las SVG y por qué son geniales para la Web.

5 increíbles herramientas gratuitas para diseñadores

5 Increíbles Herramientas Gratuitas Para Diseñadores

 

No hay nada mejor que encontrar nuevas herramientas gratuitas para diseñadores que harán que tu vida sea un millón de veces más fácil. Después de todo, todos queremos hacer nuestro trabajo lo más rápido y eficiente posible, y si hay una herramienta para eso, entonces la quiero.

Y encontré algunas herramientas que me encantan y que son muy útiles, y por eso quiero compartir con vosotros las nuevas herramientas de diseño que más me gustan.

5 herramientas de diseño que tienes que probar

1. Opensource Builders

Opensource Builders

Quiero empezar esta lista con fuerza, así que vamos a hacerla con Opensource Builders. ¿Has encontrado alguna vez una aplicación que te guste pero que tu presupuesto no te permita comprar?

O tal vez eres un tacaño (alias, maximizador) como yo, e intentas sacar el máximo provecho de tu dinero. Opensource Builder te ayudará a encontrar alternativas de código abierto para tus aplicaciones favoritas! Sólo tienes que escribir el nombre de la aplicación que estás buscando, y encontrarás un montón de alternativas para ella.

Compara los pros y los contras, los precios y más para encontrar la aplicación ideal para tu proyecto.

2. Unscreen (herramientas gratuitas para diseñadores)

Unscreen herramientas gratuitas para disenadores

A continuación, tenemos Unscreen. ¿Alguna vez has intentado quitar el fondo de un vídeo? No es tan fácil.

Unscreen eliminará el fondo de cualquier vídeo de forma 100% automática y gratuita. Nos encanta el doble wammy.

Esto significa que puedes grabar cualquier vídeo, subir el clip a Unscreen, utilizar su herramienta para borrar el fondo de tu vídeo y luego puedes añadir cualquier elemento de fondo propio. Todo esto, de forma gratuita.

Muy pronto, también tendrán una versión profesional. Me emociona ver qué más se les ocurrirá cuando ya tengan una herramienta de diseño gratuita tan increíble.

3. Neumorphism.io

Neumorphism herramientas gratuitas para diseñadores

El neumorfismo parece estar en todas partes hoy en día, y conozco una aplicación que puede ayudarte a integrar eso en tu código CSS.

Neumorphism.io es un generador que creará el CSS para este estilo de UI suave que hemos estado viendo en todas partes. Esto hace tu trabajo mucho más fácil y puedes experimentar rápidamente para ver lo que te gusta para tu sitio web.

4. Glitch Art Generator

Glitch Art Generator

¡Tenemos otro generador en nuestra lista! El generador de Glitch Art te ayudará a conseguir el fondo de glitch perfecto para tu proyecto.

Puedes ajustar fácilmente todos los colores, la cantidad de glitch, el espacio desde el centro, la inclinación, etc! Puedes ajustar básicamente cualquier cosa. Una vez que te guste lo que ves, puedes descargar el archivo e integrarlo directamente en tu proyecto.

5. Vangogh (herramientas gratuitas para diseñadores)

Vangogh

Finalmente, y posiblemente la aplicación más estética de todas, es Vangogh. Si alguna vez buscas la paleta de colores perfecta, no busques más.

Todo lo que tienes que hacer es escribir una palabra clave, puede ser un objeto o un color real, y generará unas cuantas variaciones para la paleta de colores perfecta para ti.

Puedo literalmente sentarme aquí y escribir un montón de palabras al azar y perderme durante horas en estos maravillosos colores.

¡Te recomiendo seriamente que uses esta aplicación en tu próximo proyecto!

Tu opinión sobre herramientas gratuitas para diseñadores

¡Espero que esta lista de mis herramientas de diseño favoritas te haya sido útil!

Hazme saber qué aplicaciones fueron tus favoritas y qué otras herramientas de diseño que usas a diario se me escaparon.

Cómo usar la psicología cognitiva en el diseño UX

Cómo Usar La Psicología Cognitiva En El Diseño UX

Psicología cognitiva en el diseño UX. Incluso si un sitio web es perfecto desde el punto de vista de la interfaz de usuario, todavía podrías ofrecer una mala experiencia al usuario. Aparte de tus conocimientos técnicos, los desarrolladores UX también necesitan entender cómo funciona la mente humana.

Al aprender cómo piensan y se comportan tus visitantes online, podrán ayudarte a entender e interpretar el producto digital que estás diseñando. Dado esto, no es sorprendente en absoluto que el diseño de UX y la psicología cognitiva sean aspectos inseparables de la provisión de experiencias de usuario sin problemas.

Aquí hay algunas reglas básicas de psicología cognitiva que todo diseñador de UX debería aplicar.

reglas básicas de psicología cognitiva

La Ley de Hick (Psicología cognitiva en el diseño UX)

La ley de Hick-Hyman, o ley de Hick, explica que el tiempo que tardamos en tomar una decisión se ve directamente afectado por el número de opciones que tenemos. Lógicamente, aumentar el número de opciones aumentará el tiempo de decisión de los usuarios.

La ley de Hick es particularmente importante para los diseñadores de UX. No importa si quieren hacer una compra online, leer una entrada de blog, o buscar la información de contacto de una empresa, un visitante quiere encontrar el contenido deseado rápidamente. Precisamente por eso, es necesario atraer a un usuario, proporcionar experiencias de navegación fluidas en el sitio web, y evitar que se vean abrumados. Tu tarea como diseñador UX es sintetizar la información del sitio web y mantener la comunicación de los usuarios con el sitio web de un cliente de forma clara, lógica y consistente.

Eliminar los elementos de diseño innecesarios

Como he mencionado antes, cada usuario que aterriza en un sitio web tiene un objetivo específico. Cuando el sitio web está lleno de mucho contenido y demasiados elementos de diseño, sería difícil de interpretar y navegar a través de él.

Para empezar, reducir el contenido de las landing pages. Poner demasiada información en una sola página puede abrumar al usuario e impedirle leer su contenido. Sobre todo, puede ocultar el principal punto de venta de una página y perjudicar las tasas de conversión. Habla con un cliente sobre sus prioridades y, en base a ellas, reduce la información del sitio web. En lugar de ofrecer grandes bloques de texto, concentrate en dividirlos en bloques más pequeños.

Siempre debes dar a cada página un propósito claro. Por ejemplo, al crear una página de destino para un cliente, asegúrate de que tenga un objetivo claro. Proporcionar varios CTAs en una sola página sólo confundirá al usuario e impedirá que se conviertan.

Finalmente, deja mucho espacio en blanco para mantener a los usuarios enfocados. Evita usar múltiples opciones de tipografía, paletas de color, colores de alto contraste, enlaces, imágenes y tamaños de fuentes. También debes dejar de usar los frustrantes videos de reproducción automática.

Simplificar la navegación (Psicología cognitiva en el diseño UX)

Una barra de navegación es uno de los elementos más significativos del sitio web y definitivamente la primera cosa que un usuario verá al aterrizar en una página web. Es por eso que debes mantenerlo simple. En lugar de proporcionar todas las páginas del sitio web de inmediato, primero debe clasificarlas en categorías de alto nivel y subcategorías específicas. Además, céntrate en la optimización de la navegación de tu sitio web para los usuarios de móviles. Mantenlo claro e intuitivo, independientemente del dispositivo que utilice el buscador.

Ofrece una incorporación visual y progresiva

Nunca asumas que los visitantes de un sitio web saben dónde ir a continuación o qué enlaces pulsar. Aquí es donde necesitas ayudarles. Proporcionar la finalización de tareas guiadas es una de las mejores maneras de convertir a los visitantes. En pocas palabras, ofrece una serie de pasos para incitar a un usuario a interactuar con una página web.

Además de hacer que la incorporación del usuario sea más gradual, también deberías visualizar sus viajes. Empieza por crear iconos únicos para que el sitio sea más fácil de entender y más navegable.

Principios visuales de la Gestalt

Gestalt se origina en la palabra alemana “Gestalt”, que significa “forma” o “molde”. Es una teoría de psicología cognitiva que explora las percepciones de la gente sobre la enorme cantidad de datos que aprenden cada día. Es decir, cuando percibimos objetos complejos, tendemos a agrupar sus elementos y a observarlos como un todo.

Conociendo las leyes comunes de agrupación de elementos, los diseñadores UX organizarán la información del sitio web de forma más lógica, mejorarán las interacciones del sitio web y minimizarán los malentendidos. Ahora, hay algunos principios de la teoría de la Gestalt que deberías entender:

Figura-terreno

La gente subconscientemente separa los elementos de un sitio web en diferentes planos de enfoque. Tendemos a analizar el objeto para entender qué elementos se ponen de forma prominente en el frente y cuáles en el fondo. Utilizamos las capas, el contraste y la jerarquía de la información para enfatizar los elementos más importantes de la página web.

Cierre (Psicología cognitiva en el diseño UX)

Cuando a las formas, imágenes o letras les faltan partes, nuestra percepción tiende un puente sobre esta brecha visual y observa el objeto como un todo. Esto es particularmente usado en diseños de logos, como IBM o NBC. Los medidores y cargadores de terminación son también un gran ejemplo de esta ley.

Continuidad

Esta ley hace hincapié en que el ojo se ve obligado a moverse a través de un objeto y continuar hacia otro. Los elementos que están dispuestos en una línea se consideran a menudo más relacionados que los que están de pie de forma independiente. Hay muchas maneras de utilizar la ley de continuidad en el diseño UX. Por ejemplo, se podría aplicar para crear una barra de navegación intuitiva o cuando se agrupan productos similares o relacionados entre sí.

Proximidad (Psicología cognitiva en el diseño UX)

Los elementos que están cerca parecen estar más relacionados que los que están lejos. Un ejemplo perfecto de ese principio de la Gestalt son las páginas de productos, en las que la cercanía de la imagen de un producto y su título y descripción indican su relación.

Similitudes

La idea detrás de la ley Gestalt de similitud es simple: los elementos que son similares entre sí se agrupan.

La psicología de la persuasión

Recuerda que las noticias de las redes sociales y los correos electrónicos de los clientes online están llenos de mensajes de marcas similares. Al tomar decisiones de compra, los clientes quieren saber en qué se diferencian de sus competidores. Y, aquí es exactamente donde la psicología de la persuasión puede ayudarte.

Conclusiones sobre psicología cognitiva en el diseño UX

Cuando se trata de implementar leyes de psicología cognitiva en el diseño UX, recuerda que no hay una estrategia única para todos. Estas son sólo algunas de las numerosas reglas que te ayudarán a entender cómo se comportan los usuarios online, cómo piensan y qué esperan de las páginas web. Esta es la única manera de crear un sitio web verdaderamente centrado en el usuario que involucre, convierta y retenga a los clientes.

¿Cómo se utiliza la psicología cognitiva en el diseño de UX? Me gustaría que me des tu opinión!

Cdns vs caching: ¿qué son y en qué se diferencian?

Cdns Vs Caching: ¿Qué Son Y En Qué Se Diferencian?

¿Cuál es la diferencia entre cdns y el caching?

Cdns vs caching. Las CDN son redes distribuidas geográficamente de servidores proxy y su objetivo es servir el contenido a los usuarios más rápidamente. El caché es el proceso de almacenamiento de información durante un período de tiempo determinado en un ordenador. La principal diferencia entre las CDN y el caching es que mientras las CDN realizan el caching, no todo lo que realiza el caching es una CDN.

¿Qué es el caching?

Una de las cosas más impactantes que los desarrolladores web pueden usar para mejorar la velocidad de su sitio web es el caching. Caching significa que el contenido va a ser almacenado en algún lugar para que sea fácilmente accesible y no tenga que hacer una llamada externa al origen. Esto reduce el tiempo para que un visitante acceda a los datos de una página web.

Desde que Google ha hecho hincapié en la velocidad del sitio y su efecto en el SEO en los últimos años, ha habido una explosión de plugins de caché, widgets y servicios que prometen aumentar la velocidad de tu página web. Lo que los editores no se dan cuenta es que a veces estos tipos de plugins de caché tienen el efecto opuesto en su sitio. Conocer las similitudes y diferencias entre los tipos de caché puede ser útil para evitar que su sitio se estanque.

¿Qué es el caching de páginas (site caching)?

El almacenamiento en caché de páginas (también conocido como HTTP o caché de sitios) almacena datos como imágenes, páginas web y otros contenidos temporalmente cuando se cargan por primera vez. Estos datos se almacenan en una porción no utilizada de la memoria RAM y no tienen un impacto significativo en la memoria.

caching de páginas

Cuando un visitante regresa al sitio de nuevo, el contenido se puede cargar rápidamente. De la misma manera que los niños pueden memorizar las tablas de multiplicar (4 x 4), una vez que la función es memorizada, la respuesta puede ser recordada casi instantáneamente.

El caching de páginas está limitado en la forma en que se realiza el caching. Sólo puede comunicar el tiempo de almacenamiento de los datos guardados. Los editores pueden establecer reglas de almacenamiento en memoria intermedia que aseguren que los visitantes vean contenido nuevo. De esta manera, las páginas que no han sido cambiadas seguirán siendo servidas desde el caché. Si las imágenes u otros contenidos han sido actualizados, se actualizarán y luego se almacenarán en la caché para visitas posteriores.

Esto sucede mucho con WordPress. Los editores instalan uno de los mejores plugins de caché disponibles (WP Rocket, W3 total cache, etc) y ahora tienen caché. Si las reglas no se establecen correctamente, puede que te hayas dado un sitio más lento. O, has creado una situación en la que tus visitantes no están viendo la versión más reciente de tu sitio.

¿Cómo funciona el almacenamiento en caché del navegador?

El almacenamiento en caché del navegador hace que la experiencia en la web sea mucho más rápida para los sitios que visitamos regularmente. En lugar de solicitar y enviar los datos necesarios para mostrar la página web en el navegador, se almacena en el ordenador. El almacenamiento en caché del navegador es también un tipo de almacenamiento en caché de páginas.

almacenamiento en caché

De esta manera, si alguien ha visitado tu página web antes en un navegador, y puede ser cookeada. La regla que puedes establecer es, “si el contenido no ha cambiado, muestra al visitante la misma versión del sitio que vio antes“. Esto hace que la página web se cargue instantáneamente y es una versión en caché de la página.

Las cachés de los navegadores almacenan grupos de archivos y contenido o uso posterior. Estos tipos de archivos incluyen:

Páginas HTML/CSS
JavaScript
Imágenes/Multimedia

Los usuarios pueden establecer o cambiar la configuración de la memoria caché dentro de su navegador. Todos los principales navegadores (Chrome, Firefox) utilizan el almacenamiento en caché del navegador. Los sitios web tienen la capacidad de comunicarse con el navegador del usuario. Cuando se actualizan las páginas, el navegador sabe que debe reemplazar el contenido antiguo por el nuevo y guardarlo en su lugar.

¿Qué son las reglas de almacenamiento en memoria caché y cómo las establecen?

Las reglas de almacenamiento en memoria caché permiten a los editores establecer parámetros para la frecuencia con que se almacenan en memoria caché los elementos de su sitio. Si un visitante llegó a tu página principal hoy temprano, no tiene sentido que esa solicitud llame al servidor por el mismo contenido. Si el contenido no ha cambiado, la entrega de una versión en caché de tu sitio permite que se cargue instantáneamente. Quieres buenas reglas de almacenamiento en caché del navegador para tus usuarios.

La mayoría de los editores están familiarizados con las reglas de almacenamiento en caché debido a las recomendaciones de las auditorías de rendimiento de Google Lighthouse.

Las recomendaciones de Lighthouse para servir a los activos estáticos con una política de caché eficiente pueden ayudar a mejorar la velocidad del sitio y las experiencias de los usuarios. Algunos desarrolladores logran esto con plugins de caché. Otros que conocen el HTML pueden codificar a mano la directiva “max-age” para indicar al navegador el tiempo que debe almacenar en caché el recurso (en segundos).

HTML pueden codificar a mano la directiva "max-age"

31557600 es un año para tu navegador. 60 segundos * 60 minutos * 24 horas * 365.25 días = 31557600 segundos.

También puedes usar el Cache-Control: código sin caché si el recurso cambia y la novedad importa, pero aún así quieres algunos de los beneficios del caching. El navegador seguirá almacenando en caché el recurso que está configurado como no-cache, pero primero comprueba con el servidor para asegurarse de que el recurso sigue siendo la misma versión antes de volver a buscarlo.

Por ejemplo: si diriges un foro popular y los usuarios siempre están agregando nuevo contenido, una buena política de caché tendría reglas que actualizarían el caché con frecuencia. Tal vez incluso menos de 30 minutos.

Las hojas de estilo CSS/HTML de tu sitio son buenos ejemplos de elementos que pueden tener una “edad máxima” de hasta un año.

También puedes reducir el tiempo de tus puntuaciones de velocidad conectándote previamente a los orígenes requeridos.

¿Cómo funciona un cdn?

Una CDN es específicamente una red de servidores proxy que suelen estar en múltiples lugares que almacenan en caché el contenido de un sitio web. El objetivo de las CDN es entregar el contenido de manera eficiente, y actúan como una capa entre el usuario y el servidor. Esto evita que todas las solicitudes vayan al mismo servidor. Los servidores proxy de los CDNs distribuyen las solicitudes espacialmente en relación con el usuario final en todo el mundo.

Hay muchos servicios de CDN. Los más populares son Cloudflare, Akamai y MaxCDN (ahora StackPath).

¿Qué es el caché en el límite con cloudflare?

Cloudflare añade una capa adicional de almacenamiento. Tienes el caching en tu sitio que puede ocurrir en los navegadores de los usuarios, pero luego tienes un cache CDN.

Por ejemplo: Un usuario ha estado en tu sitio antes, pero la regla de caché en tu navegador dice, “Esta página ha sido actualizada”. Esto significa que la solicitud tendrá que ir al servidor de origen. Si el usuario está en Nueva York, y el servidor de origen está en Singapur, es una llamada larga. Sin embargo, un CDN sabe que debe recuperar el contenido de tu sitio cada vez que se actualiza. El sitio actualizado está ahora almacenado en el servidor CDN más cercano en Atlanta. Esto reduce significativamente el tiempo de carga para las visitas posteriores.

Cloudflare tiene centros de datos dedicados que los ISP les alquilan en más lugares del mundo que los que tiene un CDN típico. Cloudflare te da esta capa extra de caching llamada caching en el límite.

Resumiendo la diferencia Cdns vs caching

Es importante recordar que aunque hay una diferencia entre los CDN y el caching, comparten el propósito de hacer la experiencia del usuario en la web más rápida y fluida.

El almacenamiento en caché ocurre cuando se usa un servicio CDN. Sin embargo, como los CDN son proxies inversos y se asientan como una capa entre el usuario y el servidor de origen, la velocidad de almacenamiento en caché va a ser mayor que la de los plugins de optimización de velocidad.

Los plugins siempre serán un poco más lentos debido a la naturaleza de su construcción. El código que comprende estos plugins es típicamente creado por un tercero. Este código tiene que hacer ocasionalmente llamadas externas a dondequiera que los archivos del plugin estén alojados. Mientras que el caching a nivel CDN (nivel de servidor) se encuentra más cerca del servidor de origen, y tiene que hacer menos peticiones. Esto acelera la experiencia del usuario y mejora las métricas como TTFB.

Adobe XD vs. Sketch vs. Figma – Las mejores herramientas de diseño IU/UX

Adobe XD Vs. Sketch Vs. Figma – Las Mejores Herramientas De Diseño IU/UX

Herramientas de diseño IU/UX. Entre los mayores acontecimientos de interés para los diseñadores web en este año fue la explosión de las herramientas de diseño de interfaz de usuario. Estas herramientas de diseño IU/UX señalan una transición en la forma de crear interfaces de usuario modernas. Podría ser que los días de crear maquetas de PSD en Photoshop estén llegando a su fin.

¿No estás convencido? Tanto Sketch como Figma han conseguido seguidores muy fieles en los últimos años. Pero quizás el mayor desarrollo es que Adobe, el gigante del software de diseño, saltó al juego con su producto XD. Esto demuestra que la forma en que trabajamos está cambiando hacia herramientas de diseño IU/UX más especializadas.

Con esto en mente, echemos un vistazo a cada una de estas “tres grandes” aplicaciones. Cubriremos algunas características principales así como otros factores que pueden influir en cuál es la que mejor se ajusta a sus necesidades.

¿Qué hace que las herramientas de diseño IU/UX sean únicas?

Durante muchos años, los diseñadores web usaron el ya mencionado Adobe Photoshop para crear maquetas de sitios web. Esto era preferible a saltar directamente al código ya que nos permitía construir una interfaz muy detallada y hacer ediciones fácilmente – sin tener que destrozar el HTML, CSS y similares.

Mientras que eso puede ser un flujo de trabajo efectivo, esta nueva clase de aplicaciones tiene características específicas para el diseño web. Los elementos de la interfaz, como los menús en una página web y los botones, son interactivos: puedes ver los efectos dinámicos o hacer clic para ir a otras páginas.

Además, las interfaces construidas con una aplicación de diseño IU/UX son responsive. Esto significa que puedes ver cómo funcionan en diferentes resoluciones de pantalla. Ya no es necesario crear un archivo PSD completamente separado para teléfonos, tabletas y dispositivos de escritorio.

Y hay una tonelada de kits y plantillas de interfaz de usuario prefabricadas disponibles, lo que proporciona una ventaja en el proceso de diseño.

En esencia, ya no estás creando una pantalla estática, sino un prototipo totalmente realista. Ahora, veamos las aplicaciones!

Sketch (herramientas de diseño IU/UX)

Sketch herramientas de diseño IU/UX

La primera de estas nuevas herramientas que llegó al mercado, Sketch, fue lanzada inicialmente en 2010. Esto le dio a la aplicación una ventaja sobre las otras en este resumen. Por lo tanto, también significa que hay una tonelada de recursos disponibles.

Hay una biblioteca de varias extensiones que traen nuevas capacidades y mejoran el flujo de trabajo. La funcionalidad puede ir desde el ajuste de varios elementos de diseño hasta la vinculación con servicios de fotografía de stock para facilitar las importaciones.

Entre sus principales características, encontrarás:

Edición de imágenes vectoriales;
Diseños sensibles a través de Smart Layouts;
Soporte para fuentes variables;
Colaboración con colegas y clientes;
Añade fácilmente datos basados en texto e imágenes a tu demo;
Servicio Sketch Cloud para compartir sus creaciones;
Bibliotecas para compartir recursos (símbolos, imágenes, texto, estilos) en los documentos;
La posibilidad de crear y utilizar plantillas;
Un gran número de plugins disponibles;

Sketch es una aplicación de escritorio que ofrece una prueba gratuita de 30 días, pero que cuesta 99 dólares por una licencia comercial. Las renovaciones anuales están disponibles a un precio de descuento.

Una gran advertencia aquí es que Sketch solo está disponible para MacOS. Si usas Windows o Linux, no podrás unirte a la diversión.

Figma (herramientas de diseño IU/UX)

Figma herramientas de diseño IU/UX

Lanzada por primera vez en 2016, Figma es una aplicación basada en un navegador que promueve un enfoque de colaboración en el diseño. La ventaja es que se puede acceder fácilmente en cualquier momento, independientemente del sistema operativo.

Además, cuando compartes proyectos con otros, lo haces con un enlace en vivo. Esto significa que no tendrás que exportar primero a un PDF u otra imagen. Lo que están viendo es exactamente lo que has creado.

Además, Figma ha sido construida para soportar la colaboración en tiempo real. Los miembros del equipo pueden comunicarse entre sí y gestionar sus propias tareas del proyecto. El historial de versiones incluido te permite retroceder los cambios, si es necesario.

Más allá de eso, encontrarás:

La capacidad de crear estilos consistentes y aplicarlos a través de los proyectos;
Copiar CSS directamente de los archivos de diseño;
Una biblioteca de recursos de búsqueda;
Permisos de usuario;
Crear prototipos animados e interactivos;
Función de autodiseño para diseños sensibles;
Una biblioteca de plugins, y la posibilidad de crear tus propios plugins;

Figma tiene un plan gratuito que permite 3 proyectos, 2 editores y un historial de versiones de 30 días. Los planes comerciales completos empiezan en 12 dólares al mes (facturados anualmente).

Adobe XD (herramientas de diseño IU/UX)

Adobe XD herramientas de diseño IU/UX

Ahora, por el chico nuevo del barrio. Adobe XD, que salió de la versión beta en octubre de 2017, está dirigido a diseñadores que quieren crear sitios web, aplicaciones para móviles o incluso juegos. Cuenta con un sistema incorporado para la colaboración, llamado “Coedición”, y la posibilidad de que los clientes y colegas proporcionen comentarios.

Al igual que sus competidores, XD permite reutilizar los componentes de diseño una y otra vez. También puede editar un componente una vez y empujarlo a todas las instancias, permitiendo una mejor consistencia en su diseño.

Tal vez la mayor ventaja aquí es el hecho de que Adobe XD juega bien con otras aplicaciones de Adobe. Puedes, por ejemplo, abrir y editar imágenes en Photoshop directamente desde XD (sólo tienes que hacer clic con el botón derecho del ratón en la imagen para abrirla). Cualquier cambio que hagas en la imagen se reflejará automáticamente en XD también. También importa archivos de Adobe Illustrator, Photoshop e incluso Sketch.

Otras características que vale la pena explorar incluyen:

Los estados permiten editar los componentes del diseño en base a las interacciones del usuario, como el hover o el click;
Replicar fácilmente los elementos de diseño;
Integración de fuentes de Adobe;
Crear interacciones y disparadores para sus prototipos;
Previsualizar aplicaciones para móviles en dispositivos reales a través de una aplicación complementaria;
El historial de documentos te permite volver a las versiones anteriores;
Activos fáciles de desarrollar como CSS, colores, activos descargables;
Extensiones que refuerzan la funcionalidad y se vinculan con servicios de terceros;

Adobe XD es un software de suscripción. Requiere una membresía completa de Creative Cloud o, puedes elegir suscribirte a XD por sí mismo por $9.99 al mes. Si quieres probarlo primero, hay un Plan de Inicio de XD gratuito que te permitirá experimentar con algunas limitaciones. Puedes ejecutar la aplicación en MacOS o Windows.

Tomando la decisión correcta

Cada una de estas herramientas tiene su propio y convincente conjunto de características. De esa manera, es difícil decir que te equivocarás con alguna de ellas.

Pero, para reducir las opciones, piensa en cómo y dónde planeas usar la aplicación. Por ejemplo, si eres usuario de Windows, no podrás usar Sketch. Si prefieres algo basado en un navegador y/o usar Linux, entonces Figma es tu elección. Si eres un usuario de Mac que quiere algo con muchas opciones de plantillas y plugins, Sketch es el ganador. A los clientes fieles de Adobe les encantará la interoperabilidad de XD.

De lo contrario, encontrarás una serie de similitudes. Cada aplicación tiene al menos alguna capacidad de colaboración. Todas crean gráficos vectoriales y ofrecen bibliotecas de activos. Todas son expertas en crear un sistema de diseño. Además, todas son extensibles en un grado u otro.

Independientemente de la dirección que tomes, puedes estar seguro de una cosa. Estarás a la vanguardia del diseño web.

Tendencias de diseño web en 2020

Tendencias De Diseño Web En 2020

Tendencias de diseño web en 2020. Cómo sorprender con el diseño de tu página web este año  2020 y en el futuro.

El temido momento ha llegado finalmente. Después de cinco años, me enfrento a un muy necesario rediseño del sitio web. En realidad, probablemente he necesitado hacer esto durante un año, pero como muchos empresarios, la idea de tener que sumergirme de lleno en el contenido, por no hablar del diseño, de un nuevo sitio web me ha hecho estallar en un sudor frío.

Aunque paso una buena parte de mi tiempo como director de proyectos online ayudando a otras empresas a desarrollar páginas web de calidad y que sobre todo vendan, como los niños de un zapatero que no tienen zapatos, el mío siempre es el último.

A pesar de todo, lo inevitable ya no puede evitarse. Por lo tanto, fui a la caza de lo que son las tendencias de diseño web en 2020. Esto es lo que encontré.

Minimalismo

minimalismo en el diseño web

Con la esperanza de conseguir que Google los clasifique alto para sus palabras clave, muchas páginas web han estado atascando sus páginas con un montón de texto. Esta superpoblación de sitios puede ser abrumadora para el espectador e incluso puede ralentizar un navegador.

Los sitios web con espacio en blanco permiten que los diferentes elementos respiren, son más fáciles de navegar y presentan una mejor experiencia para el usuario. El uso de mucho espacio blanco es algo que muchas marcas de lujo utilizan en sus propias páginas web.

Incluso si no tienes una marca de alta gama o de lujo, puedes beneficiarte de esta tendencia de diseño. Para traer más minimalismo a tu página, evita usar más que los colores principales en tu sitio web y dale a los elementos de cada página un poco de espacio para respirar con el espacio vacío.

Además, no ocultes la navegación importante. En su lugar, crea una interfaz fácil de usar e intuitiva. Asegúrate de editar de manera que tu texto diga lo que necesita, incluye tus palabras clave y que sea lo suficientemente significativo como para ser fácil de usar en Google, pero no tanto como para ser insoportable.

Cuando todo lo demás falla, no olvides que el minimalismo en el diseño web se trata de obtener más de menos.

Ilustraciones e iconos diseñados a medida

Tendencias de diseño web en 2020 ilustraciones

Si bien el minimalismo puede ser una tendencia candente para el diseño web en 2020, la clave es equilibrarlo con los elementos de diseño (fuentes interesantes, ilustraciones inesperadas y elecciones de color originales) que ayudan a una empresa a ganar reconocimiento de marca.

Con este fin, muchas empresas están incorporando ilustraciones e iconos diseñados a medida en sus diseños destinados para la web del año 2020.

En el pasado, el coste de estos elementos personalizados ha impedido a las empresas más pequeñas entrar en el juego, pero ahora se dispone de una gran cantidad de buenos diseñadores a precios asequibles a través de sitios web independientes como Upwork y Fiverr.

Elementos animados y movimiento

Elementos animados y movimiento

Todos hemos visto sitios web con texto moviéndose, imágenes que giran alrededor para revelar información adicional.

Los sitios web del 2020 tomarán la tendencia del movimiento en las páginas web y la aumentarán un poco. “Los efectos de animación capturan la atención del usuario e introducen una experiencia más dinámica”, dice Ben Pines, jefe de contenido de Elementor, una empresa de construcción de páginas de WordPress.

Además, las páginas web generadas con scroll (mucho contenido en una página que se ejecuta continuamente hacia abajo o hacia los lados) permiten acceder a una gran cantidad de información de manera fácil.

Formas geométricas

Formas geométricas

En el pasado, las formas geométricas se han utilizado en gran medida en las páginas web para crear una ruptura visual entre las secciones. Sin embargo, 2020 apunta a un uso más innovador de las formas geométricas, incluyendo formas superpuestas y sombras suaves para dar más profundidad y personalidad a un diseño. Según Pines, las formas geométricas suaves transmiten un aspecto futurista, mientras que las líneas agudas y duras transmiten un entorno más audaz.

Si eres como yo y te encuentras cara a cara con la creación de un nuevo sitio web (o la revisión de uno antiguo), estas tendencias pueden impulsarte a la próxima década con estilo y sustancia. ¿Quién sabe? Incluso podrían darle a tu sitio web una vida útil hasta mediados de la década de 2020. Brindo por la esperanza.

7 Pasos para crear la combinación perfecta de colores para páginas web

7 Pasos Para Crear La Combinación Perfecta De Colores Para Páginas Web

Colores para páginas web. Los estímulos visuales nos guían en casi todo lo que hacemos. Las marcas de éxito en todo el mundo tienen una fuerte asociación de una combinación de colores distintivos en su identidad de marca y en el diseño de su página web. Por lo tanto, establecer una sólida identidad de marca es altamente esencial para cualquier negocio. Es un componente vital en la construcción de la confianza y el desarrollo del nivel de comodidad con los consumidores.

También es fundamental para la creación de la marca de cara al público objetivo. Hablando de la marca, uno de los elementos más cruciales es su logotipo. La combinación de colores debe estar alineada con la marca y el logotipo, ya que ayuda a la comprensión de los consumidores de tu negocio. También es algo que tiene que estar en absoluta alineación y sincronización, ya que se asocia con la identidad de la marca.

Más del 90% de las decisiones de compra rápida se basan en la combinación de colores y su percepción. Optar por la combinación de colores adecuada para el sitio web es muy crucial para crear una impresión duradera. Después de todo, según la investigación, el color aumenta el reconocimiento de la marca en casi un 80%.

La combinación perfecta de colores para páginas web

Cuando se desarrolla y diseña un sitio web, es imperativo considerar la selección de colores cuidadosamente, ya que los diferentes colores envían diferentes mensajes a los consumidores. A continuación, te explicamos cómo puedes descifrar esto y obtener la combinación de colores perfecta.

1. Entendiendo la Psicología del Color:

Psicología del Color

Es necesario que te familiarices con la psicología del color antes de intentar elaborar la paleta de colores. Todos y cada uno de los colores impactan en la gente de una manera diferente. Los diferentes colores invocan emociones mezcladas en las personas.

Sin embargo, esto puede variar dependiendo de la demografía. Basándose en el producto, analiza el público objetivo – la personalidad y las emociones. Pregúntate a ti mismo qué es lo que quieres provocar en tu público objetivo. En consecuencia, elige el color primario más adecuado para la combinación de colores de tu página web. Por ejemplo, si la marca está relacionada con las finanzas, es mejor optar por el color Azul, ya que se traduce en confianza y fiabilidad. Del mismo modo, si se trata de una marca que es una empresa de alimentos orgánicos, el color Verde sería el mejor, ya que se asocia con la salud y la naturaleza.

2. Ir a lo seguro mediante el conocimiento del sector

conocimiento del sector

Comprender el sector y el nicho del cliente. La Psicología del Color es fundamental para la marca y su identidad. Cada color y tono tiene un impacto psicológico diferente en la mente de los consumidores.

Diversas industrias prefieren diferentes colores, en función del producto o servicio que ofrecen. A través de esto, tratan de provocar un cierto conjunto de emociones y crear asociaciones relacionadas con la industria. A continuación se muestra el estudio en el que se analizaron 520 logotipos, con diversas industrias, para identificar qué sectores favorecen cada color. Los resultados muestran las 20 principales marcas de cada sector y sus colores dominantes.

3. Análisis de la competencia (Colores para páginas web)

Siempre puedes coger una o dos notas de los competidores de la industria. Revisa sus sitios web y estudia el logo, la marca y los colores utilizados. Observa las similitudes en el uso de los colores y analízalas.

Este análisis también te dará una idea muy justa de los tonos utilizados en la industria. Tienes dos opciones: o sigues la corriente y utilizas la combinación de colores convencional, que se ajusta a las necesidades, o vas en la dirección opuesta y diferencias la marca.

De cualquier manera, necesitas asegurarte de que el mensaje de la marca y la historia se transmitan y se perciban de la manera en que se supone que deben ser.

4. Arregla tu color primario

color primario

Este color primario o dominante es el color de la marca. La marca y la página web serían asociadas con este color primario por los consumidores. Este color sería particularmente útil para sacar a relucir un cierto conjunto de emociones o sentimientos cuando los consumidores o los consumidores potenciales llegan a tu página web.

Este es el color que quisieras que tu público objetivo recuerde cuando piensen en la marca. Si el logotipo ya está en su lugar, asegúrate de que tu color principal es uno de los colores utilizados en el logotipo, preferentemente el principal.

Utiliza este color dominante en los lugares correctos, en lugar de insertarlo en todas partes. El color debe hacer que el contenido y el sitio web, y debe utilizarse para resaltar las características o detalles en los que desea que tu público se centre.

5. Fijar el número de colores para páginas web

Usar un solo color acompañado del espacio negativo es demasiado soso y aburrido. Es importante determinar el conjunto de colores que deseas utilizar. Haz tu diseño más interesante y visualmente atractivo usando colores de énfasis.

A través de esto, puedes resaltar varias características de tu sitio web, como los botones, las citas o las pestañas. La mezcla y combinación de colores puede ser muy difícil, especialmente sin la comprensión de la teoría del color. Por lo tanto, es mejor consultar la ‘Rueda de colores’. Elige entre Colores Análogos o Colores Complementarios.

Para agilizar aún más el proceso, también puedes utilizar herramientas como Colorspire. A través de herramientas como ésta, puedes tener una idea clara de cómo se vería tu combinación de colores en la página web. Lo ideal es tener 3 colores y seguir la regla 60-30-10.

6. Uso de Colores Neutros y Secundarios

Hacer coincidir los colores secundarios con los colores primarios puede ser una gran lucha a veces. Sin embargo, hay muchas herramientas gratuitas disponibles por ahí, que pueden hacer tu trabajo más fácil. Colorspace y otros generadores pueden ayudarte a superar la confusión. Sólo tienes que introducir el código hexadecimal, y tendrás múltiples opciones.

Los diseños específicos requieren el uso de colores secundarios, especialmente para las páginas web que están llenas de contenido, landing pages, productos, recursos descargables, y así sucesivamente. Al mismo tiempo, también necesitará usar colores neutros, para crear un contraste para los elementos importantes.

Los colores neutros más comunes son el blanco, el gris y el negro. Siempre es bueno tener un color claro / neutro y un color oscuro para los diferentes casos.

7. Colocación del color

Colocación del color

Ahora viene la pregunta crítica, así como el área de interés – ¿cómo se aplica la combinación de colores de la página web de forma ideal?

Los colores primarios normalmente van al lugar de interés de las páginas web. Utilice estos colores fuertes y vibrantes para obligar a los visitantes a “entrar en acción “. Deberían utilizarse para atraer la máxima atención y los clics. Los botones o pestañas CTA y otros elementos importantes de la página deben ser resaltados con los colores primarios.

Los colores secundarios se utilizan generalmente para resaltar la información que es menos crítica por naturaleza. Esto incluye los subtítulos, los botones secundarios, así como los elementos activos del menú, las preguntas frecuentes, los testimonios y otros contenidos de apoyo. Los colores neutros pueden ser usados usualmente para el texto así como para el fondo, pero son bastante útiles en las secciones más coloridas y dinámicas del sitio web. Los colores neutros también ayudarían a bajar el tono del sitio web y a reenfocar el ojo.

Mejores monitores USB-C para diseño, programación y juego

Mejores monitores USB-C para diseño, programación y juego

 

Los mejores monitores USB-C tienen múltiples usos, no sólo facilitan la conexión de su portátil USB-C, lo que significa que obtienes una pantalla adicional, sino que también cargan el portátil al mismo tiempo.

Aunque la facilidad de carga no es exactamente el punto principal de los monitores USB-C, existe una creciente necesidad de compatibilidad USB-C. Con los últimos modelos MacBook Pro y MacBook Air haciendo uso de USB-C, y muchos dispositivos Windows más recientes que también utilizan el puerto, nunca ha habido un mejor momento para conseguir uno de los mejores monitores USB-C del mercado.

Pero, ¿qué monitor con puerto USB-C debes comprar? Hay muchas opciones excelentes, pero hemos hecho el trabajo duro por ti y las hemos reunido en esta guía. Ya sea que quieras utilizar el mejor monitor USB-C de 4K para tu MacBook, o un monitor USB-C de un reproductor importante como Dell o LG, o que simplemente quieras la opción más asequible que puedas conseguir, nosotros te cubrimos….

Los mejores monitores USB-C

Hemos encontrado el mejor monitor USB-C y lo enumeramos a continuación.

01. LG 27UD88-W – Monitor USB-C de 27 pulgadas y 4K

LG 27UD88-W mejores monitores USB-C

Cuando se trata de elegir el mejor monitor USB-C de 4K del mercado, el LG 27UD88-W de 27 pulgadas se lleva la mejor parte. Está diseñado para juegos, lo que significa que también es ideal para los diseñadores gráficos y programadores web, y es el hermano menor del monitor USB-C de 5K que ocupa el puesto 5 en esta lista, ofreciendo un brillante equilibrio de características y funcionalidad a un precio mucho más asequible.

Obtendrás una resolución de 4K y un procesamiento antidesgarre FreeSync, además de tres ajustes preestablecidos para juegos, dos ajustes preestablecidos personalizados y dos ajustes preestablecidos de calibración. Y como con todas las opciones de USB-C aquí, alimentará tu portátil mientras actúa como una pantalla.

Tamaño de pantalla: 27 pulgadas | Resolución: 3840 x 2160 | Relación de aspecto: 16:9 | Entradas HDMI: 2 | Puertos de visualización: 1 | Fecha de lanzamiento: 2018

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

02. Dell U3818DW UltraSharp Monitor USB-C curvado de 38 pulgadas

Dell U3818DW UltraSharp

Si dispones de un presupuesto más amplio (y un escritorio) con el que jugar, te recomendamos el gran y hermoso monitor USB-C Dell U3818DW. La pantalla curva de 38 pulgadas InfinityEdge es impresionante y le da una ridícula cantidad de propiedades de pantalla, así que si eres propenso a trabajar con muchas ventanas abiertas, vale la pena considerar esta opción.

Está diseñado para el trabajo profesional y está dirigido especialmente a los profesionales del diseño gráfico y diseño web, o a cualquiera que necesite la mayor precisión de color posible, y también es ideal para los juegos. El contraste podría ser un poco mejor, pero la precisión del color es excelente y las imágenes son nítidas. Lo mejor de todo es que tienes una garantía de tres años. ¿Tiene aún más dinero? Prueba el Asus ProArt PA32UC, en el número 7 de esta lista.

Tamaño de pantalla: 38 pulgadas | Resolución: 3840 x 1600 | Relación de aspecto: 21:9 | Entradas HDMI: 2 | Puertos de visualización: 1 | Fecha de lanzamiento: 2017

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

03. Acer H277HU Monitor USB-C de 27 pulgadas

Acer H277HU Monitor USB-C

El Acer H277HU es un monitor USB-C de presupuesto más asequible para cualquiera que tenga menos dinero para gastar. No se trata de un monitor USB-C de 4K, y te faltan las especificaciones de gama alta para la edición de vídeo, pero es una excelente opción si necesitas una pantalla para diseñar, programar o jugar, y viene con un puerto HDMI y un DisplayPort también. ¿Buscas el monitor USB-C más económico para jugar? Echa un vistazo a la Acer XR382CQQK de 38 pulgadas en el número 09.

Tamaño de pantalla: 27 pulgadas | Resolución: 2560 x 1440 | Relación de aspecto: 16:9 | Entradas HDMI: 1| Puertos de visualización: 1 | Fecha de lanzamiento: 2016

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

04. HP Envy Monitor USB-C  de 27 pulgadas y 4K

HP Envy mejores Monitores USB-C

Otra opción más asequible es el HP Envy 27, un impresionante monitor USB-C de 4K con una estética elegante, gracias a sus biseles microfinos. Ofrece colores ricos y excelentes detalles de imagen, aunque la precisión de color podría ser un poco mejor directamente de la caja. Pero si estás buscando un monitor UHD de 4K a un precio razonable con amplios ángulos de visión – y eso se ve muy bien en tu escritorio – vale la pena echarle un vistazo.

Tamaño de pantalla: 27 pulgadas | Resolución: 3840 x 2160 | Relación de aspecto: 16:9 | Entradas HDMI: 2 | Puertos de visualización: 1 | Fecha de lanzamiento: 2017

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

05. LG 27MD5KA Monitor USB-C de 27 pulgadas UltraFine 5K

LG 27MD5KA mejores Monitores USB-C

El monitor USB-C LG UltraFine 5K se sitúa en el mercado de monitores de gama alta. Presionado por Apple como su compañero preferido del MacBook Pro, este magnífico monitor cuenta con una increíble pantalla de 14,7 millones de píxeles de 27 pulgadas. Las fotos y los vídeos son increíblemente ricos en detalles, vibrantes y realistas, con 218 píxeles por pulgada y una frecuencia de actualización de 60 Hz.

Está dirigido a usuarios de Mac, con cuatro puertos Thunderbolt 3/USB Type-C en la parte posterior, y absolutamente nada más, excepto un enchufe para el cable de alimentación. Si no te importa la falta de otros puertos, esta es una opción fabulosa para fotógrafos, diseñadores y videógrafos.

Tamaño de pantalla: 27 pulgadas | Resolución: 5120 x 2880 | Relación de aspecto: 16:9 | Entradas HDMI: 0 | Puertos de visualización: 0 | Fecha de lanzamiento: 2017

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

06. BenQ PV3200PT mejores monitores USB-C

BenQ PV3200PT monitor USB-C

Diseñado para editores de vídeo profesionales, animadores, cineastas, modeladores 3D y diseñadores CAD, el BenQ PV3200PT ofrece colores ricos y muy precisos y una fantástica reproducción en escala de grises. Cubre el 100 por ciento de la gama de colores Rec.709 (HDTV), así como el 100 por ciento del espacio de color sRGB, e incluso te recordará cuándo está previsto que se calibre.

El cambio al modo vertical es rápido y sencillo gracias a un mecanismo de rotación con resorte; la única característica que falta son los ajustes de luz azul. Si trabajas con vídeo de alta definición en particular, este es el mejor.

Tamaño de pantalla: 32 pulgadas | Resolución: 3840 x 2160 | Relación de aspecto: 16:9 | Entradas HDMI: 1| Puertos de visualización: 2 | Fecha de lanzamiento: 2016

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

07. Asus ProArt PA32UC mejores monitores USB-C

Asus ProArt PA32UC mejores monitores USB-C

El Asus ProArt PA32UC de alta calidad es el monitor USB-C más caro de esta lista – y está en una liga diferente. Dirigido a profesionales creativos, cuenta con una resolución de 4K con capacidades de imágenes HDR, y viene en un sofisticado paquete equipado con USB-C y Thunderbolt 3 con casi todas las funciones que un creativo podría necesitar para el trabajo con SDR y HDR. Obtienes una cobertura de espacio de color 100% sRGB, 99,5% Adobe RGB y 95% DCI-P3; además de funciones de calibración profesional y una herramienta de calibración de hardware en la caja. Con la PA32UC se puede realizar un trabajo de precisión sRGB, un trabajo de precisión de amplio espectro y un trabajo HDR.

Sin embargo, no se trata de un monitor USB-C destinado a los jugadores; la frecuencia de actualización es decepcionante; en su lugar, recomendaríamos el Acer XR382CQK en el número 08 de esta lista. Pero con un fuerte seguimiento de rayos gamma y consistencia de color, pero si eres un creativo profesional que trabaja en cualquier cosa, desde películas hasta gráficos, esta es una pantalla media que reproduce el contenido exactamente como se supone que debe verse.

Tamaño de pantalla: 32 pulgadas | Resolución: 3840 x 2160 | Relación de aspecto: 16:9 | Entradas HDMI: 4 | Puertos de visualización: 1 | Fecha de lanzamiento: 2018

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

08. Acer XR382CQK Monitor USB-C curvado de 38 pulgadas

Acer XR382CQK mejores monitores USB-C

Este enorme monitor USB-C de 38 pulgadas, el Acer XR382CQK, ofrece la tecnología FreeSync de AMD y 75Hz, además de un soporte ergonómico con altura, inclinación y giro, y una calidad de construcción superior. El radio de la curva es de 2300 mm, lo que ofrece un efecto envolvente sin distorsión de la imagen. La reproducción del color es fantástica, mientras que los niveles de negro son impresionantes. Y en cuanto a los videojuegos – bueno, es maravilloso. Este es uno de los mejores monitores USB-C para juegos que puedes conseguir.

Tamaño de pantalla: 37,5 pulgadas | Resolución: 3840 x 1600 | Relación de aspecto: 21:9 | Entradas HDMI: 2 | Puertos de visualización: 1 | Fecha de lanzamiento: 2018

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

09. LG 34UM69G-B Monitor USB-C de 34 pulgadas UltraWide

LG 34UM69G-B Monitor USB-C

Con una reducción del desenfoque por movimiento de 1ms, tecnología FreeSync y sincronización de acción dinámica, el LG 34UM69G-B de 34 pulgadas está repleto de funciones fáciles de usar, lo que lo convierte en uno de los mejores monitores USB-C de bajo presupuesto para juegos que puedes conseguir ahora mismo. Alojado en una carcasa negra sin bisel, hay tres modos de juego personalizables: dos modos de disparo en primera persona y un modo RTS preestablecido. Mientras tanto, la precisión de color lista para usar es buena, con un fuerte rendimiento en escala de grises. Este es un monitor USB-C de precio excepcional.

Tamaño de pantalla: 34 pulgadas | Resolución: 2560 x 1080 | Entradas HDMI: 1| Puertos de visualización: 1 | Fecha de lanzamiento: 2018

Comprar en España comprar en amazon

Comprar en EEUU  comprar en amazon

Si te ha gustado esta lista de los mejores monitores USB-C, te recomiendo le eches un vistazo a mi lista de Los Mejores Portátiles Para Programación En 2019.

La Estructura de una Página Web

la estructura de una página web

 

¿Como es la estructura de una página web?

Estructura de una Página Web. ¿De qué están hechas las páginas web? Conocer los elementos individuales que componen un sitio web puede realmente ayudarte a entender cómo crear una página web eficaz. Y si eres nuevo en el diseño web, puede darte una base y una guía para empezar. Es hora de aprender lo que contienen todos los sitios web!

Header (Cabecera)

No hay mejor lugar para empezar que por el principio. Muchos sitios web se abren con un encabezado o menú, y aquí es donde suelen ir los enlaces de navegación, junto con el logotipo de tu empresa o el título del sitio web. Otras herramientas importantes, como los conmutadores de idiomas y los enlaces de inicio de sesión, también encajan aquí. Cualquier cosa a la que quieras que la gente tenga acceso inmediato!

Header (Cabecera)

Algunos diseñadores eligen hacer que el encabezado sea “pegajoso”, por lo que los enlaces de navegación le seguirán incluso mientras se desplaza hacia abajo. Si el encabezado se encuentra en todas las páginas web, al hacer clic en el logotipo a menudo se vuelve a la página principal. Estas pequeñas comodidades pueden hacer una gran diferencia.

Enlaces en la estructura de una Página Web

El 99,9% de las páginas web incluyen enlaces. Esta es la base de cómo te mueves por el sitio web. Los enlaces deben estar subrayados, coloreados de manera diferente, o de otra manera hechos para destacar del texto normal. Como todos los elementos interactivos, debes tomar medidas para asegurarte de que los visitantes sepan que son interactivos.

las páginas web incluyen enlaces Estructura de una Página Web

Navegación

A menos que estés haciendo un sitio de una página (landing page), probablemente vas a incluir navegación o enlaces a las páginas principales de tu sitio. Hay muchas maneras de crear una barra de navegación. Puedes hacer un menú horizontal simple en el encabezado, menús verticales que se despliegan cuando presionas un botón o menús desplegables que aparecen cuando pasas el ratón por encima de un enlace.

diseño de la navegación

Una cosa es segura: sea cual sea el diseño de la navegación, ésta debe ser claramente visible y de fácil acceso en cualquier dispositivo.

Para sitios con una tonelada de contenido, como los blogs, es aconsejable incluir una barra de búsqueda y asegurarse de categorizar y subcategorizar tu contenido. También puedes incluir la navegación con breadcrumb, que muestra la subcategoría del sitio en el que te encuentras.

Imagen principal o slider

Los buenos diseñadores web saben que el contenido visual es esencial para captar el interés, y la imagen principal lo consigue pegando un banner en la parte superior de la página principal. Además de ser un deleite para la vista, las imágenes principales a menudo incluyen un pequeño anuncio sobre la compañía y una llamada a la acción a sus servicios.

Una llamada a la acción es simplemente una frase, generalmente un enlace o un botón, que pide a sus visitantes que hagan algo. “Descargue ahora”, “Pruebe Gratis”; ¡haz obvio lo que sucederá cuando hagan clic en ese enlace!

Estructura de una Página Web

En lugar de una imagen tradicional, algunos sitios optan por un banner (como un logotipo grande) justo debajo del menú de navegación. Esto puede actuar como un enlace conveniente de regreso a la página de inicio.

Sidebar o barra lateral

La barra lateral es una característica opcional pero muy valiosa, ¡simplemente porque se puede usar para cualquier cosa! Archivos de blogs, navegación, formularios de registro, listas de categorías…. Las barras laterales tienen un gran potencial.

Sidebar o barra lateral

Si el contenido de su sitio es estrecho en anchura, una barra lateral puede romper todo ese espacio en blanco y hacer que la página parezca menos aburrida.

Footer o pie de página

Por último, pero no menos importante, el pie de página. Aquí es donde pegarás tu política de privacidad y términos de servicio, tus botones de medios sociales, la información de tu empresa. Algunos usan el pie de página como una forma de tirar esos enlaces aburridos pero necesarios. Pero si está bien diseñado, puede ser una buena manera de cerrar tu sitio e invitar a la gente a visitarte en los medios sociales o a inscribirse en la lista de correo electrónico. No descuides tu pie de página!

Footer o pie de página Estructura de una Página Web

Aprender lo básico en la estructura de una Página Web

Diseñador principiante o veterano, es importante tener lo básico en mente. No se puede crear un sitio web sin incluir al menos algunos de estos elementos, por lo que es necesario entender cuáles son y cómo implementarlos bien. Esperamos que haya sido una buena introducción o curso de actualización en diseño web!

5 errores a evitar en el diseño web UX

5 errores a evitar en el diseño web UX

 

Errores a evitar en el diseño web UX para 2020

Errores a evitar en el diseño web. El Internet de hoy es un lugar altamente competitivo. Con tantos usuarios y empresas gastando tiempo y dinero en marketing digital y SEO – tratando de superar a sus rivales y colocarse en la cima del ranking de Google – es más difícil que nunca conseguir que los usuarios visiten un sitio web determinado en lugar de otro.

Dada la dificultad de conseguir nuevas visitas en tu página web, se podría pensar que todos los webmasters del mundo harían todo lo que estuviera en su mano para proporcionar una experiencia de usuario inmejorable. Y, en última instancia, retener a cada uno de los clientes que se ganaron a duras penas. Pero todos sabemos que hay una serie de malos hábitos desagradables que no paran de aparecer una y otra vez.

Echemos un vistazo a algunos de las infractores más comunes que hacen que los usuarios se vayan frustrados de una página web…..

1. Una página web demasiado lenta

En un mundo en el que casi todo el mundo tiene un smartphone súper potente en el bolsillo, Internet se ha convertido en sinónimo de satisfacción instantánea. Un usuario que se esté preguntando por alguna curiosidad que no recuerde puede recibir la respuesta en pocos segundos a través de Google. Y si quiere contactar con un amigo en otro país, puede hacerlo tan rápido como puede escribir po Facebook o Whatsapp.

speed pagespeed insights

Todos nos hemos visto afectados por la velocidad y la capacidad de respuesta de nuestro mundo hiperconectado. Por lo que cuando hacemos clic en un resultado de búsqueda y nos sentamos en una página de carga en blanco durante tres segundos o más, puede parecer una eternidad. Si el clic original fue motivado por una curiosidad puntual, es muy probable que el usuario lo intente en otra parte.

Google ha declarado que, según su investigación, más de la mitad (53%) de los usuarios de móviles abandonarán un sitio que tarda más de tres segundos en cargarse. Después de seis segundos, es casi una garantía de que investigarán en otra parte. 

Por supuesto, las necesidades de la mayoría de los sitios web no son muy complicadas. La tiendas online o blogs realmente no tienen excusa para tardar más de un par de segundos en cargar.

Si tienes una página web o un blog con WordPress este artículo te ayudará a mejorar la velocidad de carga.

2. Demasiados Popups (errores a evitar en el diseño web)

Todos hemos tenido la experiencia de hacer clic en un enlace en nuestros resultados de búsqueda y ser llevados a una página que parece estar haciendo todo lo que está en su poder para evitar que leamos el contenido.

En dos segundos, aparecerá una enorme ventana emergente que ocupará toda la pantalla. Una ventana emergente de GDPR/cookie, que te permitirá hacer clic en dos cosas a la vez.

Si a esto le sumamos una alerta de navegador que indica que “este sitio web desea enviarte notificaciones”, el efecto general es el de ser bombardeado con tonterías irrelevantes. Ni que decir que entierran por completo el contenido real al que intentabas llegar, contenido que ahora se espera que tú mismo desestimes manualmente desechando cada uno de los pop-ups.

El uso de los popups sigue siendo un tema controvertido; algunos diseñadores y anunciantes citan tasas de conversión significativamente mejoradas gracias a su uso. Mientras que otros se ven frustrados por su gran capacidad para irritar a los usuarios.

No importa cómo te sientas, probablemente todos estemos de acuerdo en que los popups suelen estar mal hechos. Pueden tener sus usos, pero poner demasiados a la vez y no respetar el deseo del usuario de ver el contenido que es relevante para sus intereses es más probable que el resultado sea un rebote que no lo sea.

En cuanto a las notificaciones de GDPR y de cookies, aunque son un requisito legal, hay sin duda formas de presentarlos que son más perjudiciales que otras.

3. Dificultades con el móvil

Es sorprendente ver en 2019, pero muchos diseñadores web todavía parecen tratar la versión móvil de un sitio web casi como una idea de último momento. Todavía es común encontrar un sitio móvil donde los artículos están desordenados, superpuestos o en un formato extraño, todo lo cual puede señalar a un visitante que no te tomas el tiempo para repasar los pequeños detalles.

Vale la pena recordar que la atención a los usuarios móviles no es un “nicho”, sino la parte más importante del trabajo.

Junto con el cambio de algoritmo de Google en marzo de 2018 para dar prioridad a la indexación de móviles, ahora no hay ninguna razón para descuidar la experiencia móvil de tu página web. Un sitio móvil de baja calidad puede afectar negativamente a tu rendimiento SEO, así como a las experiencias de tus usuarios, por lo que es importante hacerlo bien.

Un consejo: Revisa tus datos en Google Search Console y optimiza tu web para los dispositivos móviles.

4. Demasiada animación

Lo entendemos: la animación tiene muy buena pinta. Al igual que algunas transiciones suaves y agradables, transformaciones y apariencias, y una animación bien desplegada puede dar vida a un diseño que, de otro modo, sería estático y estéril.

Sin embargo, la animación debe usarse con moderación ya que puede distraer si se exagera. Idealmente, debería apoyar y llamar la atención sobre el contenido clave o los botones de llamada a la acción, y no agobiar al usuario con cosas que aparecen y desaparecen hasta el punto de que están demasiado desconcertados para leer el texto real.

Las animaciones de introducción a la home también atraen la atención de los usuarios cuando llegan a tu sitio web, pero no les debes obligar a seguir la misma animación cada vez que quieren volver a la página principal.

En general, la función de los elementos del sitio web no debería estar dictada por la estética de una presentación; requerir que los usuarios esperen a que un elemento aparezca o se vuelva interactivo debido a una animación no es una gran táctica, y esto puede hacer que los usuarios se sientan molestos por interferir en el camino de lo que están tratando de hacer.

Una nota relacionada es que algunas animaciones pueden causar problemas de accesibilidad en tu diseño web; el uso de muchas partes móviles o contenido que aparecen en flashes puede plantear problemas a algunos usuarios (como aquellos que pueden tener un trastorno de déficit de atención), lo que hace que les resulte muy difícil concentrarse en el contenido.

5. Reproducción automática

Ninguna discusión sobre los errores a evitar en el diseño web estaría completa sin mencionar los medios de reproducción automática. Ha sido la pesadilla de los usuarios de la web desde los primeros días de Internet.

Hay maneras de hacerlo con buen gusto, pero es tan a menudo mal utilizado que merece un lugar en esta lista.

Mientras que la música MIDI autoproducida y los sitios Flash con audio fueron el azote de la década de 1990 y principios de la década de 2000, la viruela del mundo actual es el vídeo que se reproduce de forma automática.

Muchos sitios hoy en día colocan un vídeo junto al cuerpo del texto de un artículo o blog, a menudo esto es totalmente irrelevante para el contenido de la página, y si lo paras antes de navegar a otra página, vuelve a reproducirse rápidamente.

Peor aún, muchos sitios presentan estos vídeos con anuncios automatizados, lo que, dado que los vídeos en sí mismos son generalmente anuncios de una forma u otra, equivale a pedir a los visitantes que se sienten a través de un anuncio tras otro anuncio.

Una pequeña ventaja, al menos, es que los navegadores modernos como Chrome se han estado moviendo para permitir sólo la reproducción automática en vídeos que están silenciados, lo que reduce significativamente la frecuencia de la molesta experiencia del usuario de tener audio no solicitado que se reproduce en su ordenador.

Conclusión final de Errores a evitar en el diseño web

En última instancia, todos los problemas discutidos en este artículo son problemas de mal diseño de UX. Cada elemento del sitio debe ser valorado por su impacto en la función de la página: ¿Ayuda u obstaculiza al usuario a encontrar lo que está buscando? ¿Aumenta o disminuye el contenido real de la página? ¿Acorta o alarga el proceso al que debe someterse el usuario para completar una transacción?

Atraer a los usuarios a tu sitio web a menudo no es una tarea fácil, y tiene sentido recompensar a aquellos que llegan anticipando sus necesidades y tratando su tiempo y su atención con el respeto que se merecen. De esta manera, los usuarios bien tratados pueden convertirse en visitantes fieles.

Háblame ;)
¿Necesitas ayuda?
Hola! Necesitas ayuda? hablemos por WhatsApp :)