Reseña de MonsterONE o dónde se puede obtener mucho más que productos gratis

monsterONE plantillas web

Con tantas agencias de diseño y desarrolladores web independientes que ofrecen sus recursos de diseño web para descargar, es muy fácil perderse en la elección. Hoy en día, cada uno puede encontrar sin esfuerzo un tema web gratuito o de pago que cumpla con sus necesidades personales o comerciales. Sin embargo, ¿cómo se puede saber si el diseño elegido es de la más alta calidad, si está construido centrándose en los detalles menores y si puede asegurar que su proyecto en línea funcione a su máxima potencia? Aquí es cuando entra en juego MonsterONE. ¿Qué es MonsterONE y qué lo diferencia de otros recursos en línea de plantillas web? ¡Averigüémoslo con esta reseña de MonsterONE!

¿Qué es MonsterONE?

MonsterONE subscription

MonsterONE es el servicio de suscripción definitivo adecuado para múltiples propósitos y necesidades. Esta es una de las principales alternativas de los productos de Envato que proporciona descargas ilimitadas de diseños web de alta calidad para todos los propósitos y necesidades imaginables. MonsterONE permite descargar plantillas de sitios web y otros productos de diseño web de primera calidad absolutamente sin límite ni restricciones. Su colección abarca una amplia gama de productos digitales de varios tipos, incluidas las fuentes, las plantillas web para varios CMS y plataformas de comercio electrónico, los materiales de audio y vídeo, los elementos de diseño gráfico y más.

MonsterONE ofrece planes de suscripción gratis y premium que analizaremos más adelante en esta revisión de MosterONE. Independientemente de si opta por una cuenta gratis o un plan de pago, se le otorgará acceso a una plataforma conveniente e intuitiva donde se puede explorar el surtido cada vez mayor de artículos digitales y descargar tantos elementos como desee con unos pocos clics.

Todos los productos disponibles bajo la suscripción de MonsterONE se pueden utilizar según los mismos términos: es posible usarlos en sus proyectos, pero no se permite redistribuirlos ni usarlos para prestar servicios bajo demanda o con fines de autopromoción. Cada producto se puede utilizar en un solo proyecto y es necesario volver a descargarlo para emplearlo en uno nuevo. Después de la expiración de la suscripción, la licencia sigue siendo válida para los proyectos creados durante el período de suscripción. Complete o transfiera sus proyectos en curso antes de que expire la licencia. Renueve la suscripción para seguir usándola para desarrollar sus proyectos en curso.

MonsterONE garantiza actualizaciones periódicas de su colección de productos digitales. Esto significa que si elige un plan con productos digitales gratuitos, obtendrá acceso ilimitado a los temas de WordPress gratis y otras plantillas gratuitas cuyos números siguen creciendo continuamente con la adición de nuevos productos. Una de las mejores cosas de MonsterONE es que todos los productos se examinan minuciosamente antes de que estén disponibles para descargar.

Además de un montón de productos digitales, los planes de suscripción de pago de MonsterONE también ofrecen el software de diseño web de sus socios como Weblium y Draftium, a saber, un creador de sitios web y herramientas de creación de prototipos web.

Beneficios de MonsterONE

Beneficios de MonsterONE

Aquí hay algunas razones por las que MonsterONE se puede considerar el mejor servicio de suscripción:

  • MonsterONE permite descargar todos los productos gratuitos y premium incluidos en los planes de suscripción sin ningunas limitaciones. Es decir, mientras su suscripción sea válida, puede descargar tantos diseños incluidos en su plan como desee. Los productos descargados serán actualizados y soportados incluso después de que termine su suscripción a MonsterONE.
  • A diferencia de otros mercados, MonsterONE ofrece un modelo de precios sencillo y claro. Los suscriptores pagan una tarifa fija de $89/$159/$186 por año por la membresía, lo que les otorga acceso ilimitado a la biblioteca de productos. Descargue tantos diseños como desee sin preocuparse por costos adicionales ni tarifas ocultas.
  • MonsterONE cuenta con una interfaz fácil de usar y navegar que le ahorra muchas horas en la búsqueda de la mejor opción para sus necesidades. Encuentre lo necesario al instante utilizando la barra de búsqueda, los filtros y las etiquetas. Organice sus productos en colecciones y descárguelos todos a la vez, ahorrando su tiempo y esfuerzo.
  • Todos los productos de MonsterONE son adecuados tanto para principiantes como para webmasters con experiencia. Todos ellos están provistos de la documentación detallada, así como de las funciones necesarias para la personalización rápida y el lanzamiento sin preocupaciones de múltiples proyectos.
  • MonsterONE se conoce por una excelente atención al cliente. Comuníquese con su equipo de soporte por correo electrónico, teléfono o chat en vivo, si tiene una pregunta o un problema con su suscripción. Siempre están listos para ayudar y resolver cualquier problema rápidamente.

Unos pocos inconvenientes de MonsterONE

No hay duda de que vale la pena probar MonsterONE, si necesita descargar plantillas de sitios web premium y gratuitas. Sin embargo, cada moneda tiene dos caras. Aparte de numerosas razones por las que debería probar el servicio, también hay unas desventajas que se debe tener en cuenta. 

En cuanto a las imperfecciones de MonsterONE, se puede notar cantidades no iguales de diferentes tipos de productos incluidos en los planes de suscripción. Por ejemplo, MonsterONE dispone de una colección enorme de complementos y temas de WordPress que abarca más de 4K artículos. Y la selección de plantillas de presentación es aún más extensa con más de 24K productos.

temas de WordPress

Planes de suscripción de MonsterONE

planes de suscripción a MonsterONE

Ahora, echemos un vistazo más de cerca a los precios de MonsterONE. MonsterONE ofrece tres planes de suscripción principales: Creative, All-in-One y All-in-One Pro.

  • El plan Creative (Creativo) cuesta $89 por año o $7,40 por mes y brinda acceso a productos digitales creativos perfectos para especialistas de marketing y aquellos que necesitan imágenes y presentaciones profesionales.
  • El plan All-in-One (Todo en uno) cuesta $159 por año o $529 por la suscripción de por vida y le permite acceder a todas las categorías de productos de MonsterONE. Este plan es ideal para autónomos y desarrolladores de sitios web que trabajan con varios CMS y plataformas de comercio electrónico y en diversos proyectos.
  • El plan All-in-One Pro (Todo en uno profesional) a $186 por año o $15,50 por mes ofrece los mismos beneficios que el plan All-in-One y además el soporte prioritario. Asimismo, el plan All-in-One Pro brinda la integración con AI Website Builder, lo que le permite optimizar su flujo de trabajo y crear diseños innovadores con la ayuda de las herramientas de IA populares.

Todos los planes ofrecen descargas ilimitadas de productos, dejándole aprovechar al máximo la enorme colección de artículos digitales.

Además de los planes de suscripción de pago, también puede probar el plan gratuito de MonsterONE que proporciona acceso ilimitado a los productos digitales gratuitos de alta calidad. Si duda, si el servicio es adecuado para usted, puede comenzar con el plan gratuito y pasar a cualquier plan de suscripción de pago cuando esté listo.

Lo que obtiene con MonsterONE

Para concluir, MonsterONE es un servicio de suscripción integral que proporciona descargas ilimitadas de recursos de diseño web de calidad. Cuenta con diversos productos digitales, incluidas plantillas de sitios web, fuentes, materiales de audio y vídeo, plantillas de diseño gráfico y más. La plataforma es fácil de usar y cómoda y permite agrupar sus materiales de diseño en colecciones. En adición, MonsterONE ofrece una excelente atención al cliente y ayuda con cualquier problema o pregunta. Si bien existen algunas limitaciones con respecto a la cantidad de ciertos tipos de productos, el modelo de precios de MonsterONE es transparente, lo que lo convierte en una opción que vale la pena probar para aquellos que buscan plantillas de sitios web de pago y gratuitas.

Con su enorme colección de plantillas, gráficos y otros materiales digitales excelentes, MonsterONE es la plataforma de referencia para los diseñadores y creativos. Y ahora, con el código promocional exclusivo «JAVINIGUEZ», puede disfrutar del 10% de descuento en cualquier plan hasta el 31 de diciembre de 2023. No puede perder esta increíble oportunidad de impulsar sus proyectos de diseño y ahorrar dinero. ¡Nos vemos en MonsterONE!

9 consejos para una tipografía responsive

9 consejos para una tipografía responsive

Los mejores consejos para ayudarte a familiarizarte con la tipografía responsive en la web.

Es lógico que el diseño web responsive requiera una tipografía responsive que se adapte a tus necesidades. Pero, ¿Qué significa en realidad y cómo lo puedes implementar? El tamaño de la fuente, el espaciado y el diseño deben trabajar juntos para crear una configuración de texto elegante y legible en cada vista. ¿Pero cómo lo puedo hacer?

Para una explicación más detallada, echa un vistazo a este artículo sobre las reglas de la tipografía responsive.

01. Tamaño apropiado del texto del contenido

Utiliza una escala para diferentes tamaños de pantalla, te sugiero comenzar con la escala de fuentes predeterminada del navegador. Establece el tamaño de la fuente base al 100%, y cada navegador hará que el tamaño de la fuente sea para la mayoría de los usuarios fácilmente leer en ese dispositivo.

Típicamente, 100% es el equivalente a 16px. En el escritorio, esto puede parecer sorprendentemente grande, pero la mayoría de nosotros tenemos problemas para leer textos más pequeños una vez que llegamos a la mediana edad – ¿por qué no hacerlo más fácil?

02. Ten en cuenta al lector

Las ventanas de los navegadores difieren en tamaño más que las dimensiones físicas o de píxeles. Piensa en cómo interactúa el usuario con la pantalla.

Fuera del escritorio, hay menos espacio para usar, pero el usuario está más cerca de la pantalla. Tu tipografía debe escalar con respecto a la lectura. En general, reduce tus fuentes al pasar del escritorio al móvil. La gente tiende a sostener sus teléfonos más cerca de la cara. Piensa en cómo la gente consumirá el contenido y ajusta la tipografía responsive en consecuencia.

Debemos ser igualmente conscientes de cómo tratamos la tipografía en pantallas más grandes, como las televisiones y  sistemas como consolas, que vemos a distancia, pero que pueden tener una resolución relativamente baja.

En situaciones como esa, puede tener sentido renderizar e incluso ajustar la disposición usando unidades vw, que son proporcionales a la anchura de la vista.

03. Vigila tu medida en la tipografía responsive

El ancho de un bloque de texto, afecta lo cómodo que puede ser leerlo. Cuando tienes vistas que pueden crecer (o encogerse) indefinidamente, la longitud de una línea puede llegar a ser incómodamente larga (o corta), es un error que veo que mucha gente comete.

A menudo se cita una pauta de 45 a 75 caracteres por línea. Los estudios han encontrado que las líneas más largas, de hasta 95 caracteres, se leen más rápido en la pantalla, pero no está claro si eso significa que los lectores disfrutan leyendo más o entienden mejor. Hay demasiadas variables para sacar conclusiones firmes, por lo que tiene sentido equivocarse.

Si estás diseñando primero para el móvil, tenderás a tomar una medida corta para evitar que el texto se vuelva demasiado pequeño. En el escritorio, es posible que desee dejar que las líneas se alarguen en ventanas más grandes. Una declaración de anchura máxima puede evitar que esto se salga de control, pero no debería ser necesario si aumenta progresivamente el relleno.

También puedes equilibrar el tamaño de fuente con la medida para controlar el número de caracteres por línea. Aquí te dejo un ejemplo de consulta de CSS:

@media screen and (min-width:1200px) {
    body { font-size:110%; } /* Aumento del tamaño de la fuente */
}
@media screen and (min-width:1400px) {
    html { padding:0 15%; } /* Reduce el ancho del contenedor */
}
@media screen and (min-width:1600px) {
    body { font-size:125%; } /* Aumento del tamaño de la fuente */
}
@media screen and (min-width:1800px) {
    html { padding:0 20%; } /* Reduce el ancho del contenedor */
}

04. Ajustar el espaciado de líneas

La altura de la línea, a menudo se descuida. Lo que es suficiente para mantener las líneas claras en una escala o medida puede ser demasiado en otra, perdiendo el ojo del lector al tratar de moverse de una línea a la siguiente. Recuerda, a nadie le gusta leer entre líneas.

Se pueden evitar los «huecos desagradables», realiza unos cálculos para asegurarte de que los valores son directamente proporcionales al tamaño de la fuente.

05. Usar una variación visual que no sea el tamaño

En un diseño de escritorio amplio, es posible que los encabezados sean varias veces más grandes que el texto del cuerpo para mayor claridad y dramatismo. En una pantalla móvil, los encabezados sobredimensionados simplemente empujan el texto del cuerpo hacia abajo, rompiendo la continuidad y exigiendo un desplazamiento excesivo.

Te sugiero formas alternativas de lograr la jerarquía visual. En las pantallas pequeñas, las subcabeceras utilizan variaciones de estilo – mayúsculas, minúsculas, cursiva, negrita – con el mismo tamaño de letra. Sangrar párrafos y usar espacios en blanco para separar secciones.

06. Elige las fuentes con prudencia

Trabajar en múltiples escalas exige aún más de tus tipos de letra. Además de garantizar que las fuentes web se renderizan bien en todas las plataformas y tienen suficiente alcance Unicode para las internacionalizaciones planificadas de tu sitio, vale la pena buscar una mayor flexibilidad tipográfica.

Múltiples grosores, letras mayúsculas pequeñas y variantes condensadas le darán opciones para obtener mejores resultados en diferentes vistas. Elige las fuentes con moderación. No cargues demasiado, y asegúrate de probar la tipografía real en el navegador en varias plataformas» para la apariencia, el peso de la página y la velocidad de renderizado.

Web Font Loader, co-desarrollado por Google y Typekit, puede ayudarte a controlar la experiencia de carga. No pases por alto la alternativa para cuando las fuentes web fallan. Te recomiendo probar fuentes de emergencia seguras para la Web y ajustar las consultas de los medios para minimizar el riesgo.

07. Utilizar un banco de ensayos de tipo

Hacer malabares con bibliotecas tipográficas y CSS no favorece el desarrollo creativo. Typetester de Dugonjić es ahora un editor de tipografía web WYSIWYG de pleno derecho. Puede utilizarlo para probar, comparar y diseñar con más de 2800 fuentes web de Adobe Edge, Adobe Typekit y Google Fonts. A continuación, exporte sus diseños como fragmentos de HTML y CSS con total capacidad de respuesta.

08. Fijar el tipo en el contexto

El diseño puede romper la tipografía más meticulosa. Recuerde «el espacio en blanco alrededor de las palabras – donde su ojo puede descansar – y el uso de imágenes», dice Gustafson. Aquí es donde el diseñador sensible necesita estar particularmente alerta. «En una pantalla estrecha, las imágenes pueden reducir la legibilidad. Una imagen flotante podría envolver palabras largas debajo de ella en vez de al lado de ella».

Los valores de ancho y relleno tendrán que variar con el tamaño de la ventana de visualización para que los diseños sigan pareciendo visualmente «correctos», así como para gestionar la longitud de la línea. Cuando se establecen puntos de ruptura entre diseños de varias columnas y de una sola columna, una columna más ancha con espacio horizontal puede ser más cómoda en pantallas de tamaño mediano.

09. Aprender de los demás

Un lienzo en blanco no tiene por qué ser tu trampolín. En 2015, Yeaman encuestó 50 correos electrónicos con capacidad de respuesta para comparar las elecciones que otros diseñadores habían hecho en cuanto a tipo de letra, tamaño, espaciado y otros factores, y encontró que los resultados eran instructivos. Cualquiera que sea la naturaleza de su proyecto, habrá ejemplos en su campo. El consenso no siempre es óptimo, pero no es un mal punto de partida.

Si te ha gustado este artículo, te recomiendo leer Consejos para principiantes de diseño web responsive

13 alternativas a Adobe de sus aplicaciones

13 alternativas a adobe de sus aplicaciones

Pasar a la suite completa de aplicaciones de Creative Cloud de Adobe es una propuesta cara: un contratiempo de 60€ al mes (en el momento de escribir este artículo) que podría ser excesivo para tus necesidades, a menos que produzcas muchos contenidos multimedia en una variedad de formatos. Aquí te vamos a dar a conocer alternativas a Adobe.

Puedes ir poco a poco, por supuesto, pero seguirás pagando bastante más que la típica suscripción mensual de música para editar fotos/vídeos/audio/imprimir páginas/etc. Y luego están las tasas de cancelación, que pueden suponer una sorpresa inesperada si intentas salirte de un plan anual antes de tiempo.

No es por odiar a Adobe, pero si estás buscando alternativas que cuesten menos, que no cuesten nada o que simplemente no sean tan voluminosas para trabajar como algunas de las aplicaciones de Adobe, te tengo cubierto. Aunque no hay nada mejor que Photoshop, por ejemplo, hay muchas herramientas baratas que puedes utilizar para hacer mucho de lo que la aplicación te permite hacer. Me atrevo a decir que estas aplicaciones «menores» podrían ser incluso más adecuadas, ya que no necesitas el tanque de las aplicaciones de edición de gráficos si sólo estás haciendo un poco de recorte y corrección de color de vez en cuando.

En esta guía destacaré un montón de aplicaciones alternativas a Adobe.

1. Affinity Photo [Alternativas a Adobe Photoshop]

Affinity Photo no es gratuito, pero es un programa de diseño gráfico sin suscripción para Windows, Mac y iPadOS que ofrece más que suficiente potencia en una interfaz agradablemente diseñada para las necesidades gráficas de la mayoría de la gente. Las versiones de escritorio cuestan 50 dólares, lo que parece mucho por adelantado, pero no tanto si se tiene en cuenta que una suscripción típica a PhotoShop comienza en 24€ al mes. Sin embargo, se pueden conseguir ofertas. A día de hoy que escribo este artículo, Affinity Photo está al 50% de descuento! Es una de las mejores alternativas a Adobe Photoshop.

Prueba gratuita:

Precio: 54,99€

Plataformas: Windows, Mac, iPadOS

2. Photopea [Alternativas a Adobe Photoshop]

Me gusta tanto Photopea que se ha ganado un lugar importante en mi extensa lista de favoritos del navegador. Lo que le falta en una aplicación de escritorio dedicada, lo compensa siendo una alternativa completamente gratuita a Photoshop que clona su interfaz de usuario y sus características lo mejor que una aplicación basada en la web puede hacer. Es tan buena que me sorprende que Adobe no haya intentado demandar su desaparición. Y es el primer sitio web al que acudo cada vez que utilizo un nuevo ordenador portátil o de sobremesa, o cuando tomo prestado el de un amigo, y no he tenido la oportunidad de configurar ningún tipo de aplicación de edición gráfica dedicada.

No usaría Photopea como mi herramienta diaria, pero es la aplicación web a la que recurro cuando necesito editar una imagen en un apuro.

Prueba gratuita: n/a

Precio: Gratuito (con una suscripción premium complementaria de 9 dólares al mes, si lo quieres).

Plataformas: Windows, Mac

3. SumoPaint [Alternativas a Adobe Photoshop]

El editor de fotos basado en la web SumoPaint es gratuito y su interfaz de usuario me recuerda a una versión reducida de Photoshop. Me atrevería a decir que probablemente sea más adecuado para alguien que sólo quiera lo básico, sin botones innecesarios, ajustes, opciones u otras cosas que den dolor de cabeza. Y no hay absolutamente nada malo en ello; si todo lo que necesitas es un destornillador, ¿por qué llevar una navaja suiza? Esta es una de las correctas alternativas a Adobe Photoshop.

Prueba gratuita: n/a

Precio: Gratuito (con una suscripción premium complementaria de 9 dólares al mes, si lo quieres).

Plataformas: Windows, Mac

4. GIMP [Alternativas a Adobe Photoshop]

El Programa de Manipulación de Imágenes de GNU ha sido una alternativa de código abierto a Photoshop desde que tengo uso de razón, décadas en realidad… Aunque nunca me pareció tan completo como PhotoShop, pero antes de Photopea, era el software al que recurría cada vez que necesitaba hacer alguna edición en un sistema que no tenía instalada una aplicación de edición gráfica. GIMP es bastante fácil de usar, pero incluso si tienes que pasar un poco de tiempo para familiarizarte con la aplicación, disfruta del hecho de que no estás pagando absolutamente nada para usarlo.

Prueba gratuita: n/a

Precio: Gratuito

Plataformas: Windows, Mac

5. Glimpse Image Editor [Alternativas a Adobe Photoshop]

También está Glimpse, un fork de GIMP que está razonablemente actualizado (aunque no está basado en la última versión de la aplicación GIMP en el momento de escribir este artículo). Sin embargo, es una alternativa perfectamente válida.

Prueba gratuita: n/a

Precio: Gratuito

Plataformas: Windows, Mac

6. Krita [Alternativas a Adobe Illustrator / Photoshop]

No sé dibujar por los pelos, así que esta no es realmente la categoría de aplicación para mí. Sin embargo, yo (y otros) hemos elogiado anteriormente a Krita por su facilidad de uso y su amplio conjunto de funciones para garabatos, artistas y dibujantes profesionales por igual. Está desarrollada por artistas reales -así que sabes que todas las nuevas actualizaciones y funciones son cosas que ellos mismos utilizarán- y es completamente de código abierto y de uso gratuito. Es una de las mejores alternativas a Adobe Illustrator/Photoshop.

El único inconveniente importante de la aplicación es que no hay un verdadero servicio de atención al cliente, así que si tienes un problema o estás confundido, tendrás que acudir a los foros de la comunidad para encontrar una solución. Además, la aplicación sólo está disponible para ordenadores de sobremesa Windows y Mac; por desgracia, no existen versiones de la aplicación de código abierto para tabletas o teléfonos.

Prueba gratuita: n/a

Precio: Gratuito

Plataformas: Windows, Mac

7. Inkscape [Alternativas a Adobe Illustrator]

Esta aplicación gratuita y de código abierto existe desde hace casi dos décadas, y se menciona con frecuencia como una alternativa convincente al más caro Adobe Illustrator. Si puedes superar un poco la curva de aprendizaje con la interfaz de usuario de Inkscape, especialmente si vienes de una herramienta como Illustrator, la aplicación debería ser bastante decente para todas tus necesidades normales. (Los diseñadores profesionales tal vez quieran seguir con una aplicación un poco más robusta como Affinity Designer o Corel Draw. Y si estás en un Mac, prepárate para probar una aplicación alternativa si Inkscape no te convence).

Prueba gratuita: n/a

Precio: Gratuito

Plataformas: Windows, Mac

8. Scribus [Alternativas a Adobe InDesign]

Sí, es otra aplicación gratuita de código abierto que existe desde hace casi dos décadas. Menciono esto porque suele ser una buena señal de que una aplicación tiene futuro. No perderás un año en dominarla, sólo para descubrir que el desarrollador de la aplicación ha dejado de trabajar en ella justo cuando has decidido usarla exclusivamente.

Scribus es, básicamente, la única alternativa gratuita o de código abierto a InDesign; al menos, la única a la que merece la pena dedicar tiempo. Existen otras aplicaciones de pago, como la encantadora Affinity Publisher, pero no me atrevería a pasar a una aplicación de pago si estás empezando a utilizar la paginación. Del mismo modo, si sólo quieres completar un proyecto básico de diseño de páginas, Scribus es probablemente todo lo que vas a necesitar.

¿El inconveniente? Scribus no puede leer archivos crudos de Adobe InDesign o QuarkXpress. Puedes evitarlo utilizando importaciones .XTG o .IDML, pero no es lo mismo.

Prueba gratuita: n/a

Precio: Gratuito

Plataformas: Windows, Mac

9. RawTherapee [Alternativas a Adobe Lightroom]

Basándonos en los comentarios, es difícil elegir un ganador entre esta y la siguiente alternativa gratuita (de código abierto) a Adobe Lightroom. Así que, ¿por qué no probar ambas? Escoge la que tenga más sentido después de haber tenido la oportunidad de comprobar la interfaz de usuario de cada aplicación, organizar tu extensa biblioteca de fotos y realizar alguna edición (exhaustiva) no destructiva de tus archivos .RAW. Incluso puedes probar ART -una versión más fácil de usar de RawTherapee- si empiezas a sentirte abrumado.

Prueba gratuita: n/a

Precio: Gratuito

Plataformas: Windows, Mac

10. Darktable [Alternativas a Adobe Lightroom]

Yo iría con Darktable para mi PC de escritorio, pero eso es sólo porque he usado antes. Apenas he pasado tiempo con RawTherapee, pero dado lo mucho que lo he visto alabado en la web como un verdadero competidor de Darktable, me gustaría absolutamente probarlo antes de tomar una decisión final.

Prueba gratuita: n/a

Precio: Gratuito

Plataformas: Windows, Mac

11. Varios [Alternativas a Adobe Acrobat]

Bienvenido al infierno del software. Más o menos una vez al año, me veo en la necesidad de encontrar una alternativa gratuita o de código abierto que me permita abrir, editar, rellenar y firmar archivos .PDF. Adobe Acrobat hace que el proceso sea dolorosamente fácil, pero esa comodidad te costará 18€ al mes como mínimo.

Deberías poder ver y rellenar los PDF en tu navegador web (o, si eres usuario de Mac, en la siempre útil aplicación Preview). Si necesitas un poco más de potencia, puedes usar la versión gratuita de PDF-XChange Editor, siempre que no deje caer una marca de agua en tu documento para cualquier función que estés usando. Y en el Mac, hace tiempo que soy fan de PDF Expert; es barato, es genial y lo uso para sincronizar y editar mis archivos en mi Mac, iPhone y iPad.

No he probado Sejda, basado en la web, pero si quieres editar un documento rápido (dado que sólo tienes tres documentos gratuitos para editar cada semana), vale la pena intentarlo. Lo mismo ocurre con Xodo, que te permite hacer todo menos editar el propio PDF. También tiene una aplicación para Windows, por si quieres probarla.

12. DaVinci Resolve [Alternativas a Adobe Premiere]

alternativas-a-adobe

Esta es fácil: si necesitas una herramienta de edición de vídeo que sea tan potente como Adobe Premiere -salvo algunas limitaciones extremas de las versiones «gratuitas» de la aplicación con respecto a su versión de pago- entonces vas a querer echar un vistazo a DaVinci Resolve. Claro que hay otras alternativas gratuitas o de código abierto, como Olive o Kdenlive, pero DaVinci Resolve es una bestia. Las características, la interfaz de usuario, la estabilidad, lo que sea; si no estás perdiendo horas de tu vida convirtiéndote en un maestro de Adobe Premiere, trabaja en la nivelación de tus habilidades de DaVinci Resolve.

Sinceramente, no he encontrado mejores elogios para este software que este hilo de Reddit que compara estas tres aplicaciones. Como escribe un usuario:

«Así que, a menos que el código abierto sea fundamental para ti, Resolve es siempre la respuesta correcta. La potencia, las características y el refinamiento que ofrece en su oferta gratuita es simplemente asombrosa; tanto que acabarás queriendo comprar la versión (comparativamente asequible) de Studio no porque realmente la necesites, sino porque quieres recompensar a una empresa que trata a sus usuarios gratuitos con tanta amabilidad».

Es difícil discutirlo.

Prueba gratuita: n/a

Precio: Gratuito (licencia perpetua opcional de 299 dólares para DaVinci Resolve Studio)

Plataformas: Windows, Mac

13. Audacity [Alternativas a Adobe Audition]

Audacity ha sido mi aplicación de edición de audio preferida desde que tengo uso de razón. No estoy buscando hacer una canción, o la partitura de una película, y hay un montón de otras herramientas que puede utilizar si eso es lo tuyo. Para las ediciones básicas -crear tonos de llamada, ajustar la narración para colocarla en un vídeo de YouTube o editar podcasts- no puedes equivocarte con Audacity, que es gratuito y de código abierto. Me encanta Adobe Audition, de verdad, pero cuando no necesito pagar por toda su potencia (y su bonita interfaz), opto por Audacity.

Prueba gratuita: n/a

Precio: Gratuito

Plataformas: Windows, Mac

Si te ha gustado este artículo, te recomiendo leer: 7 Pasos para crear la combinación perfecta de colores para páginas web

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.

Háblame ;)
¿Necesitas ayuda?
Hola! estás interesado en mis servicios? hablemos por WhatsApp ;)