Por Lionel Valentin Caderon

Diseñador de Páginas Web, Artista Comercial, Caricaturista y Escritor pepiniano nacido en Añasco, Puerto Rico.

Tutorial de Esta Semana

Tendencias y Color en el 2020

Tendencias y Color en el 2020

Tendencias en la Web para el 2020

En innumerables ocasiones se ha dicho que la moda es lo pasado de moda. Esta sentencia adquiere vigencia en las tendencias que se esperan para el 2020. Las iremos discutiendo poco a poco para que tengas oportunidad de analizarlas y ponerlas en práctica.

Videos
de Fondo

Como puedes observar, no es nada nuevo. Mas 2020 se enfoca cada vez más en el uso de Videos como fondo, Efectos Parallax y uso profuso de GIFs. Los efectos Parallax no se limitarán al fondo. Los tendremos también en el frente.

Restaurante

Mara 

Langostas Frescas

Del mar directo a tu Plato

Preparadas por nuestro Chef

Al gusto criollo, como te gusta y la quieres

Saber Más

Exquisitos Postres

Con ingredientes de alta calidad

Con el Amor del Chef

De su corazón para tu paladar

Saber Más

Langostas Frescas

Del mar directo a tu Plato

Preparadas por nuestro Chef

Al gusto criollo, como te gusta y la quieres

Saber Más

Exquisitos Postres

Con ingredientes de alta calidad

Con el Amor del Chef

De su corazón para tu paladar

Saber Más

Aparte de todo esto mucho se espera sea el uso de imágenes dentro de los Titulares y de las Cajas Animadas o Flip Boxes con sus imágenes e íconos. Hasta donde te sea posible, crea tus propios íconos, contrata a alguien para que los haga o compra paquetes bien hechos. Si usas los corrientes, tu página lucirá corriente o del montón. Y no podrán faltar los Titulares Animados.

Tendremos 
Videos
Titulares
Fotos
Dibujos
 y otras animaciones

2020 es visión perfecta pero la tendencia es hacer las cosas en grande, que se destaquen. En lo personal no soy muy partidario de esto ni de los efectos especiales. Sigo el consejo que me ofreció un cliente cuando le mostré lo que había hecho para su página. Efectos que me parecían lo máximo. Tranquilamente me dijo: Quiero una página que muestre a los usuarios lo que podemos hacer por ellos, que los motive a escogernos y no a la competencia. No quiero una página que muestre lo mucho que puedas saber de efectos y esas cosas.

Algo que acostumbro es crear una Acción en Photoshop y la aplico a todas las fotos. De ese modo controlo el color, enfoque y otras cosas aparte de que consigo unidad en la página En aquiestapuertorico.com hice algo un poco drástico con las foto ya que se supone que son fortos viejas. En el ejemplo de arriba no fui muy destructivo con la foto.

Diseños Asimétricos

Es algo a lo que tendremos que ir acostumbrándonos. Afortunadamente con Elementor y CrocoBlock resulta sumamente fácil lograrlo

Superimposición de textos, colores e imágenes

Todo esto vendrá acompañado de efectos tridimensionales mediante el uso de Sombra de Textos e Imágenes

Vamos
a Celebrar

No se quedarán atrás los efectos duotonos en las imágenes y no nos equivoquemos, el uso de dibujos vectorizados van avanzando y llevan muy buen paso junto con el Divisor de Formas. Y qué decir de los Menús en Acordeones? Van camino a convertirse en un favorito y derrocar los tradicionales.

Carnes
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
More
Ensaladas
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
More
Postres
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
More

a7402d

c72667

aab14f

1a3a84

1b578b

dcbd87

be8699

c891b2

f1d586

f2c440

d67825

eef8f2

c02748

ebab88

ebab88

74baa3

e4c80d

004545

8474b2

003232

1b2f7d

004545

011c1c

d85f2b

999980

El Color no puede permanecer atrás en las tendencias 2020 y se perfila que volveremos a los colores del Arte Deco. Arriba en la parte superior vemos ejemplos de armonías Deco y en la parte inferior el valor numérico de los colores utilizados.

Constantemente me preguntan sobre este tema. Así que voy a dedicarle un buen rato a ver qué tal nos va.

Nos dice Wikipedia: Los colores web son aquellos colores que aparecen en una página web. Se pueden basar sobre los sistemas de color RGB o HSL. En el código CSS (y antiguamente en HTML) son especificados como valores numéricos, aunque hay algunos colores que son nombrados por sus nombres propios en inglés.

La paleta de colores RGB -RVA en español- consta, básicamente, de tres colores primarios aditivos: Rojo, Verde y Azul. Estos colores primarios aditivos, en HTML, están representados por tres pares hexadecimales.

fffc00

fd0000

00ff00

Para lograr el propósito de este trabajo usaremos la tradicional Rueda de Colores, donde los colores primarios son rojo, amarillo y azul. Unicamente que hemos ajustado los pares hexadecimales para mayor conveniencia. De acuerdo a nuestra enfoque los tres colores primarios que usaremos son los mencionados anteriormente, mas vuelvo a repetir con los pares ajustados:

fffc00

fd0000

0000ff

De la mezcla de estos tres pimarios obtenemos los colores secundarios, que vienen a ser los complementarios de los primarios, a saber violeta o púrpura, verde y naranja. Por estar diametralmente opuestos en la rueda de colores, estabecen el mayor contraste que puede haber entre dos colores. Para poder apreciar lo antes dicho hemos cambiado al valor hexadecimal de cada color a su complementario correspondiente.

7e0080

00ff00

fe7f00

7e0080

fd0000

0000ff

De la mezcla de estos tres secundarios obtenemos los colores terciarios, que vienen a ser complementarios unos de los otros. Son estos: amarillo-naranja, rojo-naranja; amarillo-verde, azul-verde, rojo-violeta y azul-violeta. Al igual que los anteriores por estar diametralmente opuestos en la rueda de colores, estabecen el mayor contraste que puede haber entre dos colores. Para poder apreciar lo antes dicho hemos cambiado al valor hexadecimal de cada color a su complementario correspondiente.

febf00

fd3f00

bd003f

3f00bf

007f80

7efe00

3f00bf

007F80

7EFE00

FEBF00

fd3f00

BD003F

Ya conocemos los Colores Primarios, Secundarios y Terciarios. Ahora estudiaremos el Valos del Color. Valor se refiere a la cantidad de luz que hay en un color. Por uso y costumbre se divide la Escala de Valores en once siendo el 1 el Blanco y el once el Negro. Es decir que cada color va del Negro al Blanco en 9 pasos o Valores Intermedios, como puede verse en la escal abajo. Desafortunadamente no pudimos colocar el Negro ya que elementor permite 10 columnas nada más, pero todo sabemos que el valor numérico es #000000. Como podemos ver del valor 6 en adelante el valor numérico aparece en Blanco. Es que de acuerdo a las reglas del diseño para excelente legibilidad debe hacerse de este modo, a menos que haya un propósito específico. Por uso y costumbre se usan en la Web no más de cinco colores lo que nos dejaría con cinco valores. En pintura se establece que la forma se establece por medio de una diferencia de dos valores entre uno y otro, lo que añade una valor a la escala de la Web. Así tenemos entonces que nuestra escala a usar sería la Escal de Valores por Colores. Queremos dejar meridianamente claro que esto es una guía y que las variaciones pueden ser tanatas como personas la usen

FFFFFF

e6e6e6

CCCCCC

b3b3b3

999999

808080

666666

4c4c4c

333333

1a1a1a

Escala de Valores por color

FFFFFF

CCCCCC

999999

808080

4c4c4c

000000

FFFFFF

fffe99

fffc33

ccc900

666500

000000

FFFFFF

ffe699

fecc33

cb9900

664d00

000000

FFFFFF

ffcc99

fe9933

cb6600

663300

000000

FFFFFF

feb399

fd6533

ca3300

651900

000000

FFFFFF

fe9999

fd3333

ca0000

650000

000000

FFFFFF

e599b2

ca3365

970032

4c0019

000000

FFFFFF

cb99cc

993399

660066

320033

000000

FFFFFF

b299e5

6533cc

320099

19004c

000000

FFFFFF

999aff

3334ff

0001cc

000166

000000

FFFFFF

99cccc

339899

006566

003333

000000

FFFFFF

ccff99

98fe33

65cb00

336600

000000

FFFFFF

99ff9a

33ff34

00cc01

006601

000000

Conociendo ya los colores que conforman nuestra Rueda de Colores únicamente nos resta conocer la manera de combinar los colores para realizar nuestros trabajos. La tradición nos ha legado una serie de reglas para hacerlo; las llamadas Combinaciones de colores: De izquierda a derecha

    1. Combinación Monocromática: Uso del mismo color en sus diferentes valores
    2. Combinación Complementaria: Uso de dos colores diametralmente opuestos
    3. Combinación Análoga: Uso de tres o cuatro colores que estén unos al lado del otro con sus valores
    4. Combinación Complementaria Dividida: Uso de dos colores, uno al lado del otro y sus complementarios.
    5. Combinación Triádica: Uso de tres colores que se encuentran a la misma dostancia uno del otro en la rueda de colores

Hay varias más maneras de armonizar los colores, mas entiendo que con estas muestras hemos podido entender la variedad de armonías que podemos utilizar.

Rueda de Colores

Aunque esta rueda de colores es la conocida como Triádica debo dejar claro que los colores utilizados como primarios y secundarios difieren de la rueda tradicional. La preparé conforme a mi ecuación personal.

Espero que este escrito haya sido de beneficio en tu labor. Si tienes alguna sugerencia o idea te agraderé nos la hagas llegar. Quedo de ustedes CrocoBloqueado y Elementorizado.

Compartenos en tus redes sociales

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email
Share on print

Deja un comentario

Esta Página usa Cookies para la mejor experiencia al navegar

Esta Página usa Cookies para mejorar tu experiemcia al navegar.