← Tornar al blogwordpress

Esquemes de color web

05 de març del 2019 · 7 min de lectura

Óscar BotellaDisseny web i SEO a Lleida des de 2017.

Com triar un esquema de color?

  1. Considera el teu context de color.
  2. Consulta una roda de colors per identificar colors anàlegs.
  3. Consulta una roda de colors per identificar els colors complementaris.
  4. Centra't en colors monocromàtics en el mateix to.
  5. Fes servir un esquema de color triàdic per crear un alt contrast.
  6. Crea un esquema de color complementari dividit.
  7. Pensa més enllà dels ajustos preestablerts, però comença amb un sol color.

Eines per aconseguir colors complementaris

Hi ha hagut molta informació pràctica i teòrica per comprendre realment quins colors combinen millor i per què. Però quan es tracta de la tasca real de triar colors mentre dissenyes, sempre és una bona idea comptar amb eines que t'ajudin a fer la feina de manera ràpida i senzilla.

Afortunadament, hi ha tota una sèrie d'eines per ajudar-te a trobar i triar colors per als teus dissenys.

1. Coolors + Skillshare

Coolors.co és la primera i més completa eina disponible per a la paleta de colors i la generació d'esquemes d'aquesta llista. La plataforma és increïblement robusta i presenta una aplicació web per a la generació, així com una aplicació iOS, càrrega d'imatges a colors, ajustos avançats i opcions d'exportació / ús compartit.

Fins i tot ve amb un complement per als programes d'Adobe CC (Photoshop i Illustrator), tot i que aquesta característica té un preu de 5$ (cosa que personalment crec que és força assequible).

Tanmateix, una de les coses que més ens agrada és que et pots registrar en un compte gratuït per administrar i organitzar les paletes de colors que generes. Aquest compte també se sincronitzarà amb les aplicacions iOS + Adobe. Això és especialment útil si ets un dissenyador gràfic o web que busca fer un seguiment dels colors que generes per a una varietat de clients. També és útil si necessites un accés ràpid durant el disseny.

2. Canva.com

L'archiconegut Canva.com (el malson de tot dissenyador professional) ofereix una eina que permet als usuaris carregar una imatge a partir de la qual es generarà una paleta de colors. El que és genial és que aquesta eina s'ofereix completament GRATIS SENSE INSCRIPCIÓ. Això és extremadament útil quan es dissenyen materials per a una marca que té una forta presència fotogràfica i on els colors no importen amb la marca. O potser hi ha una fotografia específica que atregui el client i li agradaria una paleta generada per a la seva marca a partir d'això.

Canva.com també ofereix una varietat d'altres eines gratuïtes, com la seva eina de correspondència tipogràfica, guia de mida de disseny, creador de logotips i eina d'edició de fotos.

Hi ha hagut molta informació pràctica i teòrica per comprendre realment quins colors combinen millor i per què. Però quan es tracta de la tasca real de triar colors mentre dissenyes, sempre és una bona idea comptar amb eines que t'ajudin a fer la feina de manera ràpida i senzilla. Tanmateix, si els usuaris volen aprofitar la plataforma completa de Canva que inclou funcions encara més robustes amb l'administració de comptes, l'exportació i una aplicació web de photoshop, hauran de pagar una tarifa mensual. També hi ha descomptes per a estudiants i organitzacions sense ànim de lucre.

3. Colormind.io

Pensava que Colormind.io era una aplicació senzilla que generava esquemes de colors, però després d'aprofundir-hi una mica més, em vaig adonar que és molt més i molt més FRESC que això. Colormind at the Core és una aplicació web que et permet generar esquemes de color per al teu lloc. Però el que el fa únic és que realment visualitza com es veurà al teu lloc web. També té suport incorporat de Material Design i suport de càrrega d'imatges. Que genial és això? Simple però realment treu partit del que fa. Comprova-ho tu mateix a Colormind.io.

4. Mycolor.space

Aquesta és una eina que faig servir força. El que realment m'agrada de MyColor.Space és la seva simplicitat i la seva interfície d'usuari neta. L'eina de generació de la paleta de colors et permet triar un sol color a partir del qual l'aplicació web generarà una varietat de degradats i codis hexadecimals basats en aquest color. A més, l'aplicació web també té algunes eines excel·lents de generació de gradients.

El que realment m'agrada de l'eina de generació de gradients és que crea el CSS necessari per produir els gradients. Així que simplement els pots copiar i enganxar directament al teu codi! Meravella.

Per mantenir la imatge de marca que volem i a causa de l'entorn competitiu a escala digital, cal innovar constantment tant en el disseny com en els continguts de les pàgines web, els quals es van modificant i creant tendències, com ho van ser l'ús de Javascript, Singleton… i quins records!

Hi ha alguns llocs web magnífics que mostraran algunes d'aquestes tendències, així com algunes altres tècniques de disseny per a aquest proper any, com l'ús d'espais en blanc, imatges en 3D, profunditats i l'ús de fotos d'alta qualitat.

Tendències per al disseny de pàgines Web

Entre les tendències sobre el disseny web trobem:

Elements grans: Els elements de gran mida ajuden a captar l'atenció i impactar els usuaris d'una pàgina web. Per això, les galeries, els botons, els títols, les imatges i els vídeos tendeixen a tenir una mida molt més gran que la que s'utilitzava en anys anteriors.

Amplada completa: L'ús d'un marc determinat en el disseny de les pàgines web va quedar enrere. Ara la tendència és utilitzar l'amplada completa de la pantalla en alguns elements com les capçaleres, els vídeos i les imatges. Això permet captar l'atenció de l'usuari, que d'una ullada observa gran part del contingut publicat.

Tipografies grans: Una altra de les tendències en el disseny web per a aquest any és l'ús de les lletres grans com un dels elements principals. Això vol dir que la tipografia és la protagonista a les pàgines avui dia.

Vídeos de fons: Utilitzar vídeos com a fons en alguns segments, capçaleres o seccions és un punt clau per cridar l'atenció dels usuaris, tenint en compte que representen un element molt creatiu que genera un impacte interessant en les persones que el visiten.

Disseny per a mòbil: Una de les tendències més grans que han ajudat a innovar en la creació de les pàgines web per a aquest any és l'elaboració de disseny tant per a PC com per a un dispositiu mòbil, facilitant així el seu ús adequat per part dels usuaris.

Colors brillants i intensos: La tendència d'enguany és l'ús de colors força brillants i intensos per a les pàgines web, que es poden utilitzar de forma adequada, en una combinació atractiva per reforçar el tema i el disseny de la plataforma. Tanmateix, és important no abusar de l'ús de tons brillants per evitar la sobresaturació.

Chatbots: L'ús i l'aplicació dels serveis de xats a les pàgines web són indispensables per personalitzar l'atenció als usuaris del lloc, cosa que genera una confiança més gran i els permet aclarir els possibles dubtes que puguin sorgir.

Asimetria en l'estructura: L'ús dels elements que tenen un estil asimètric ja és tendència. Això vol dir que ja no cal la creació de formes rectes o tradicionals. Fins i tot es fan servir per separar diverses seccions o segments, fent encara més atractiva la plataforma.

Velocitat de càrrega (WPO): Avui dia és indispensable que les pàgines carreguin ràpidament. Google ho valora i ens millora el posicionament SEO, per això la tendència és l'optimització en la velocitat de càrrega de la plataforma.

Per què és tan important millorar la velocitat de càrrega d'un web?

Aquestes són algunes conclusions de diferents estudis realitzats sobre com pot influir la velocitat de càrrega en els usuaris:

  • La gent visitarà molt menys un lloc web que és 250 mil·lisegons més lent que el de la seva competència.
  • Els usuaris estaran disposats a esperar per la visualització d'un vídeo, però no per un resultat de cerca.
  • El 40% dels usuaris abandona una pàgina que triga més de 3 segons a carregar.
  • Per a Amazon, 0,1 segons de retard implica una pèrdua d'1,6 bilions de dòlars.

És important que, abans d'aventurar-te a desenvolupar el teu projecte web, facis un pressupost web on recullis tots els aspectes que contemplaràs en el desenvolupament del web i el seu cost.

Parlem del teu projecte