internetparavos

[internetparavos]

Colores de redes sociales para crear botones

En estos días vamos a lanzar una plantilla de página de aterrizaje para Instagram, muy sencilla (imagen al pie) y al diseñar los íconos de redes sociales utilizamos varias aplicaciones on-line para seleccionar los colores.

Aquí publicamos el color principal de estas redes (en hexadecimal y RGB), en caso que alguno/a desee un compilado de colores oficiales al día de la fecha.

Para Messenger y WhatsApp utilizamos un gradiente generado con la herramienta on-line cssgradient (todo junto, extensión io), en base a los logos y sitios de paletas visitados. Y al final encontrarás un enlace a Codepen con un gradiente para Instagram.

 -Facebook: #1877F2, RGB: 24,119,242.

-LinkedIn: #0077B5, RGB: 0,119,181.

-Pinterest: #E60023, RGB: 230,0,35.

-Reddit: #FF5700, RGB: 255, 86, 0.

-Scribd: #1E7B85, RGB: 30,123,133.

-Skype: #00AFF0, RGB: 0,175,240.

-Snapchat: #FFFC00, RGB: 255,252,0.

-Telegram: #0088CC, RGB: 0,136,204.

-Tumblr: #34465D, RGB: 52,70,93.

-Twitter: #1D9BF0, RGB: 29,155,240.

-Vimeo: #1AB7EA, RGB: 26,183,234.

-YouTube: #FF0000, RGB: 255,0,0.

 Gradientes:

-Messenger: Colores: #0695FF, RGB: 6,149,255; #A334FA, RGB 163,52,250; #FF6968, RGB: 255,105,104.

Código CSS: background: rgb(6,149,255); background: -moz-linear-gradient(45deg, rgba(6,149,255,1) 0%, rgba(163,52,250,1) 51%, rgba(255,105,104,1) 100%); background: -webkit-linear-gradient(45deg, rgba(6,149,255,1) 0%, rgba(163,52,250,1) 51%, rgba(255,105,104,1) 100%); background: linear-gradient(45deg, rgba(6,149,255,1) 0%, rgba(163,52,250,1) 51%, rgba(255,105,104,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0695ff",endColorstr="#ff6968",GradientType=1);

-WhatsApp: Colores: #58D164, RGB 88,209,100 y #2BB641, RGB: 43,182,65.

background: rgb(88,209,100); background: -moz-linear-gradient(180deg, rgba(88,209,100,1) 0%, rgba(43,182,65,1) 100%); background: -webkit-linear-gradient(180deg, rgba(88,209,100,1) 0%, rgba(43,182,65,1) 100%); background: linear-gradient(180deg, rgba(88,209,100,1) 0%, rgba(43,182,65,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#58d164",endColorstr="#2bb641",GradientType=1);

-Instagram: https://codepen.io/thomasrye/pen/VaRoYv

Nuestra plantilla para Instagram:

Más detalles aquí.

[internetparavos]

Tendencias en diseño y desarrollo web 2022

Se mantienen del año pasado y anteriores la optimización de los sitios en velocidad (desde que la Web inició, prácticamente), el diseño mobile first, y la combinación de ilustraciones y fotos tanto en encabezados como en el contenido del sitio. Se suman animaciones en 3D y realidad aumentada, mayor libertad en el uso de tipografías e interactividad. En Argentina comienza, también, a tener peso la accesibilidad y el diseño orientado al usuario. La utilización de cursores personalizados fue tendencia hacia 2005, impulsada por el empleo de Flash/Actionscript y parece que regresa.

Diseño adaptado a dispositivos, continúa la regla mobile first.

Webs accesibles al mayor número posible de personas, diseño centrado en el usuario.

Colores llamativos.

Tipografías bold.

Mayor libertad en el uso de tipografías y combinaciones.

Formas redondeadas y onduladas. Máscaras, composiciones para fondos o fotos.

Generoso uso del espacio en blanco y diseños minimalistas.

Diseños planos, sin sombras ni degradados.

Animaciones 3D, videos y realidad aumentada.

Incremento en el uso de ilustraciones y combinación con fotografías.

Covers al 100%.

Gráficos, barras de progresión y estadísticas en tiempo real.

Sitios en modo oscuro y sitios en estilo vintage.

Cursores personalizados.

Imágenes superpuestas o flotantes con animaciones. Collages. Usos de diferentes planos.

Sitios web en una página o estilo landing-page vertical u horizontal.

Interactividad, contenidos dinámicos enfocados en captar la atención del visitante.

Pies de página detallados.

Degradados muy cuidados, para enmarcar imágenes e ilustraciones.

Velocidad, optimización al máximo para brindar la mejor experiencia.

Estas tendencias se correlacionan con mayor atención en aspectos concernientes a la seguridad de nuestros sitios y aplicaciones para obtener desarrollos robustos, ágiles, atractivos, accesibles y usables.

¿Deseás ampliar?

Te dejamos las fuentes consultadas:

24 tendencias en diseño web para 2022 + ejemplos https://www.maxcf.es/tendencias-diseno-web-2022/

Tendencias Diseño Web 2022 https://www.arsys.es/blog/tendencias-diseno-web2022

12 tendencias top en el diseño de páginas web https://benditodigital.es/diseno-paginas-web-tendencias-12/

[internetparavos]

Internet para vos. Desarrollo web y web marketing.

[internetparavos]

Persistent headers [sticky headers] can be useful to users if they are unobtrusive, high-contrast, minimally animated, and fit user needs.

  Page Laubheimer. Sticky Headers: 5 Ways to Make Them Better. Nielsen Norman Group.

[internetparavos]

6 portales para tu portfolio artístico

Behance. El portal de Adobe para creativos. Funciona también como red social.

Dribble. Además de promover y compartir tus proyectos, posee portal de empleos y comercio digital.

ArtStation. Una comunidad enfocada en la industria del entretenimiento, con comercio digital, eventos, red social, cursos, empleos y más.

DeviantArt. Pionero en este rubro. Se lanzó en el año 2000. Permite a los artistas compartir, exhibir sus obras y conectarse.

En estos cuatro portales tendrás la posibilidad de crear un perfil público con tus datos de contacto y galería de proyectos, además de conectarte con otros creativos y recibir opiniones y valoraciones.

Los siguientes portales se enfocan más al arte fotográfico y plástico:

salon.io. Permite crear un sitio con subdominio y hasta 150 fotos en el plan gratuito y en los planes pagos es posible apuntar un dominio y alojar más imágenes (hasta ilimitadas).

crevado.com. Desde 30 imágenes, 5 galerías en el plan gratuito y dos planes, el más completo con hasta 5000 fotos y dominio propio.

[internetparavos]

5 sitios para crear tu tarjeta presentación virtual

Estos sitios tienen la particularidad de ser breves. No llegan a albergar la información que se presenta en un CV. Nombre, descripción y pocos datos más, incluso foto en algunos. Y tus redes sociales y/o sitio web.

about.me. Fue el pionero en el tema.

brushd.com. Da un paso más ofreciendo la posibilidad de incorporar un portfolio de imágenes o videos.

wallof.me

shuuka.com (versión en español)

linktr.ee (versión en español)

[internetparavos]

Cómo agregar texto a voz en tu web

Esta tendencia, que se perfila para 2021, es la capacidad de reproducir el texto de tu web en formato de voz (humana o artificial).

La Biblioteca Nacional de España, en su apartado Catálogos, ya dispone de esta función.

La empresa NaturalSoft Ltd. ha lanzado su sitio Natural Reader que brinda un plugin para sitios web con la lectura automática y a demanda de los textos de tu web. Con pocas líneas de código ya tendrás tu lector de voz.

La hemos testeado con Google Speed Insights y nuestro sitio bajó un punto en velocidad web y dos puntos en velocidad móvil con este script.

Desde la accesibilidad nos parece interesante, aunque no tan imprescindible.

Otras herramientas de texto a voz para sitios:

Text to speech de Google Cloud

ReadSpeaker

i Speech

Notevibes

ResponsiveVoice

Talkify

Woord

Cuando, hace más o menos 15 años, se utilizaban avatares parlantes, se los terminó por rechazar, no teníamos opciones de pausar su reproducción. Las modas regresan... veremos cómo sigue este tema.

[internetparavos]

Animator vs Animation