Tutoriales | Web

Tendencias y Color en el 2021

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 2021. 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 2021 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.

MIKASSA
restaurante

Lo Mejor del momento

Ahora a Ganar

Porque el que llega segundo es el primero que pierde

Acabemos la competencia

El que pierde y se ríe munca mereció ganar, sólo mereció perder
Saber Más

Ahora a Ganar

Porque el que llega segundo es el primero que pierde

Acabemos la competencia

El que pierde y se ríe munca mereció ganar, sólo mereció perder
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.

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 ElementPack y Happy Addons 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

Acabemos con la Competencia

El que pierde y se ríe munca mereció ganar, sólo mereció perder, porque el que llega segundo es el primero que pierde

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.

Ahora vamos a jugar

Lo importante es Ganar

El que pierde y se ríe munca mereció ganar, sólo mereció perder porque el que llega segundo es el primero que pierde

Ahora vamos a jugar

Lo importante es Ganar

El que pierde y se ríe munca mereció ganar, sólo mereció perder porque el que llega segundo es el primero que pierde

Ahora vamos a jugar

Lo importante es Ganar

El que pierde y se ríe munca mereció ganar, sólo mereció perder porque el que llega segundo es el primero que pierde

Ahora vamos a jugar

Lo importante es Ganar

El que pierde y se ríe munca mereció ganar, sólo mereció perder porque el que llega segundo es el primero que pierde

#2e3482

#006490

#00a2d3

2fb6e2

#5ecaf0

004001

008001

00bf02

00ff03

80ff81

664d00

666500

ccc900

fffc33

fffe99

402100

804100

bf6200

ff8200

ffc180

4c0019

800000

bf0000

ff0000

ff8080

40003f

80007e

bf00bd

ff00fc

ff80fe

18112d

49445e

7a788f

aaabc0

dbdff0

Uso del Color

El Color no puede permanecer atrás en las tendencias 2021 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.

#fd0100

#00ca00

#0030fe

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 Valor 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 tantas 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. Complemntaria Doble: Uso de dos colores y sus respectivos complementarios.
    6. Combinación Triádica: Uso de tres colores que se encuentran a la misma dostancia uno del otro en la rueda de colores.
    7. Triádica: Uso de tres colores que se encuentran a la misma distancia en la rueda de colores
    8. Pentagonal: Cinco colores que se encuentra cada uno en el extremo de un pentágono.

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.

Monocromática

Complementaria

Análoga

Complementaria Dividida

Complementaria Doble

No son estas las únicas maneras de combinar los colores aunque sí las más conocidas. Al usar cualesquiera de ellas se pueden usar los valores del color escogido.

Triádica

Cuadrada

Pentagonal

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.

Uso de Grises

Una opción que viene ganando terreno es el uso de grises en lo que podría considerarse una combinación monocromática. No obstante hay gran cantidad de personas que juran y perjuran que se refiere a variaciones de Blanco y Negro. Cada color tiene su escala de grises

000000

393939

737373

acacac

e5e5e5

120000

44383c

776f78

a9a7b4

e5e5e5

0f0700

423d3c

757378

a8a9b4

e5e5e5

131300

45463c

777978

a9acb4

e5e5e5

001200

37453c

6e7878

a5abb4

e5e5e5

001313

37464b

6e7982

a5acb9

e5e5e5

000012

373849

6e6f81

a5a7b9

e5e5e5

0c000b

3f3845

736f7e

a7a7b7

e5e5e5

000000

37383c

6e6f78

a5a7b4

dbdff0

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.

Similar Posts

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *