Si tiene texto en color en su sitio web, debe optar por usar el color cerca.<\/p>\n
Esto es lo que quiero decir.<\/p>\n
Ejemplo 1<\/h3>\n
Este bot\u00f3n tiene texto azul y un fondo gris claro. Parece algo plano y el texto sobrepasa la forma del bot\u00f3n:<\/p>\n
Si cambio los colores usando el azul para el fondo y el texto claro, se ve mucho mejor:<\/p>\n
Y mientras hablamos de botones …<\/p>\n
Si su bot\u00f3n tiene un fondo de color, casi siempre se ver\u00e1 mejor con texto blanco.<\/p>\n
El texto negro tiende a verse horrible sobre el color, a menos que ese color sea realmente p\u00e1lido o simplemente un gris m\u00e1s claro:<\/p>\n
Si utiliza habitualmente texto en color en sus publicaciones, apreciar\u00e1 las ideas del siguiente ejemplo.<\/p>\n
Ejemplo # 2<\/h3>\n
Como otro ejemplo, es posible que tenga un texto en color en una publicaci\u00f3n porque desea que se destaque, como este:<\/p>\n
\u00a1Este texto no se ve muy bien porque es azul!<\/p>\n
Hay formas m\u00e1s est\u00e9ticamente agradables de llamar la atenci\u00f3n con el color. Sin mencionar que ciertos colores (como el azul) hacen que el texto sin formato parezca un enlace.<\/p>\n
Otro enfoque para llamar la atenci\u00f3n con el color es hacer que el texto sea blanco y el fondo azul:<\/p>\n
Esto es mucho color, \u00a1as\u00ed que \u00fasalo con moderaci\u00f3n!<\/p>\n
O puede reducir la saturaci\u00f3n para que el fondo sea muy p\u00e1lido y luego hacer que el texto sea negro para una apariencia m\u00e1s sutil:<\/p>\n
El texto negro se ve bien sobre fondos p\u00e1lidos.<\/p>\n
O puede dejar el texto en negro y agregar un toque de color como borde alrededor del texto:<\/p>\n
Este es un aspecto m\u00e1s simple que a\u00fan llama la atenci\u00f3n.<\/p>\n
O puede combinar un fondo y un borde:<\/p>\n
Esta es otra forma atractiva de utilizar el color.<\/p>\n
Para resumir las reglas sobre texto en color:<\/p>\n
Debe utilizar un fondo de color o un borde de color alrededor del texto en lugar de cambiar el color del texto. Adem\u00e1s, el blanco siempre se ve mejor en fondos de colores, a menos que el color sea muy p\u00e1lido.<\/p>\n
Ahora escojamos los colores que usar\u00e1s.<\/p>\n
Para que lo sepas, tuve que escribir un poco de CSS para agregar bordes a los p\u00e1rrafos anteriores. Gutenberg a\u00fan no tiene una opci\u00f3n de frontera. Ya puede agregar bordes con los widgets de Elementor<\/a>.<\/p>\n Elegir colores sobre la marcha es un gran error de novato.<\/p>\n Siempre que aplique color a su sitio web, siempre<\/strong> debe elegir un color de su paleta<\/strong>.<\/p>\n Al usar una paleta, simplemente puede seleccionar entre sus colores existentes y sabe que el resultado se ver\u00e1 bien y "en la marca" sin ning\u00fan esfuerzo.<\/p>\n Y aqu\u00ed est\u00e1 la cosa …<\/p>\n He sido dise\u00f1ador web durante a\u00f1os y todav\u00eda me cuesta crear bonitas paletas de colores.<\/p>\n Y por eso hago trampa \ud83d\ude09<\/p>\n Nunca creo mis propias paletas de colores. En cambio, encuentro una hermosa paleta de colores que ya est\u00e1 hecha y luego la modifico para satisfacer mis necesidades de dise\u00f1o.<\/p>\n Mi recurso secreto para encontrar paletas de colores es Color Hunt<\/a>.<\/p>\n Este incre\u00edble sitio web tiene una comunidad de miembros que crean y comparten las paletas de colores que dise\u00f1an.<\/p>\n Si navega por la p\u00e1gina de inicio, encontrar\u00e1 una lista interminable de hermosas paletas para elegir. Al hacer clic en cualquier paleta, acceder\u00e1 a su p\u00e1gina donde se enumeran las paletas relacionadas a continuaci\u00f3n.<\/p>\n Honestamente, es muy divertido explorar las paletas y obtener ideas e inspiraci\u00f3n para su sitio.<\/p>\n Si ya tiene un tono en mente, puede elegir un color para comenzar usando la barra de b\u00fasqueda.<\/p>\n Tambi\u00e9n hay palabras clave predefinidas disponibles como "c\u00e1lido" y "fr\u00edo" para encontrar paletas adecuadas.<\/p>\n Una vez que seleccione una paleta que le guste e implemente los colores en su sitio, se sorprender\u00e1 de la gran diferencia que hace.<\/p>\n Esos dos primeros consejos deber\u00edan enga\u00f1ar a sus visitantes para que piensen que es un maestro del dise\u00f1o que maneja el color.<\/p>\n \u00a1Ahora hablemos de fuentes!<\/p>\n Los colores deben seleccionarse de su paleta. Las fuentes son similares.<\/p>\n Debe seleccionar una o dos fuentes y luego reutilizarlas para todo.<\/p>\n A menudo, cuando los usuarios de WordPress aprenden a cambiar las fuentes en su sitio, \u00a1de repente quieren usarlas todas!<\/p>\n Por ejemplo, he visto a personas cambiar la fuente de un p\u00e1rrafo para que se destaque en una publicaci\u00f3n. Esa es una mala idea. Si necesita texto para destacar en una publicaci\u00f3n, puede:<\/p>\n Cuando se trata de fuentes, debe elegir una o dos para todo su sitio<\/strong>, y si cree que necesita m\u00e1s que eso, considere esto …<\/p>\n Google dise\u00f1\u00f3 la fuente Roboto (que tambi\u00e9n puede usar, est\u00e1 en Google Fonts<\/a> ), y usan esta fuente en todas partes.<\/p>\n Lo usan para Google.com, Youtube, Gmail, Google Docs, Chrome; literalmente, todos sus productos usan esta fuente para todo el texto.<\/p>\n Entonces, si est\u00e1 convencido de que necesita m\u00e1s de una fuente para un hermoso sitio web, \u00a1pi\u00e9nselo de nuevo!<\/p>\n Tengo otro atajo para ti.<\/p>\n En lugar de explorar cientos de fuentes, le recomiendo que elija entre las fuentes m\u00e1s exitosas de la web.<\/p>\n Este enfoque b\u00e1sicamente garantiza que su sitio se ver\u00e1 bien.<\/p>\n Para hacer esto, visite Google Fonts<\/a> y encontrar\u00e1 las fuentes de tendencia enumeradas en la p\u00e1gina de inicio.<\/p>\n Para refinar los resultados, haga clic en el men\u00fa desplegable Categor\u00edas y anule la selecci\u00f3n de todas las opciones excepto Sans Serif.<\/p>\n Si elige alguna de las fuentes que se enumeran ahora, su sitio se ver\u00e1 incre\u00edble.<\/p>\n Tenga en cuenta que la mayor\u00eda del texto de su sitio web aparece en sus publicaciones, por lo que la calidad m\u00e1s importante de la fuente<\/strong> es que es f\u00e1cil de leer.<\/p>\n Todas las fuentes sans serif m\u00e1s populares son populares porque son legibles y atractivas. Y en caso de que te lo est\u00e9s preguntando …<\/p>\n \u00a1Esto es lo que hago yo tambi\u00e9n!<\/strong><\/p>\n Al dise\u00f1ar nuevos temas, suelo ir a Google Fonts y buscar las fuentes de tendencia en busca de inspiraci\u00f3n.<\/p>\n Cuando quiero agregar un poco m\u00e1s de car\u00e1cter al dise\u00f1o, uso la siguiente t\u00e1ctica.<\/p>\n Este sitio web tambi\u00e9n utiliza una fuente sans serif popular llamada Proxima Nova que est\u00e1 disponible con Adobe Typekit.<\/p>\n Si est\u00e1 satisfecho con una fuente, puede omitir esta t\u00e1ctica.<\/p>\n Pero si siente que su creatividad se ve un poco obstaculizada por una selecci\u00f3n tan simple, esto es lo que puede hacer …<\/p>\n Utilice una fuente de visualizaci\u00f3n para los t\u00edtulos de su sitio.<\/strong><\/p>\n La primera fuente que seleccion\u00f3 fue dise\u00f1ada para leerse en tama\u00f1os peque\u00f1os, pero una fuente de pantalla est\u00e1 dise\u00f1ada espec\u00edficamente para tama\u00f1os grandes (como pantallas grandes, \u00bfentiendes?).<\/p>\n La cuesti\u00f3n es que las fuentes de visualizaci\u00f3n suelen ser muy elegantes, por lo que su uso excesivo puede hacer que su sitio se vea llamativo.<\/p>\n Los encabezados son el lugar perfecto para usar fuentes de visualizaci\u00f3n porque:<\/p>\n Si lo desea, tambi\u00e9n puede reutilizar la fuente de visualizaci\u00f3n para el t\u00edtulo de su sitio (o logotipo).<\/p>\n Para encontrar una fuente de visualizaci\u00f3n para su sitio, visite Google Fonts nuevamente, pero esta vez, cambie las categor\u00edas para incluir solo fuentes de visualizaci\u00f3n, como esta:<\/p>\n Ver\u00e1 de inmediato a partir de las fuentes de tendencia cu\u00e1nta m\u00e1s variedad hay con las fuentes de visualizaci\u00f3n.<\/p>\n Hay alrededor de 300 fuentes de pantalla en Google Fonts a partir de ahora, as\u00ed que divi\u00e9rtase navegando y recuerde elegir solo una.<\/p>\n Aqu\u00ed hay otro consejo de dise\u00f1o basado en texto que har\u00e1 que su sitio web sea m\u00e1s hermoso.<\/p>\n Si no sabe c\u00f3mo cambiar la fuente en su sitio web, siga este tutorial<\/a>.<\/p>\n De todos los consejos de dise\u00f1o que se enumeran en esta publicaci\u00f3n, este es el m\u00e1s f\u00e1cil de implementar.<\/p>\n Eche un vistazo al men\u00fa Competir temas:<\/p>\n Los elementos del men\u00fa son proporcionados y est\u00e1n espaciados uniformemente, lo que hace que se vea bien.<\/p>\n Al crear su men\u00fa, debe hacer que cada elemento del men\u00fa tenga una palabra<\/strong>. La raz\u00f3n se reduce al espaciado.<\/p>\n Por ejemplo, observe qu\u00e9 tan uniformemente espaciados est\u00e1n los elementos del men\u00fa en The New York Times.<\/p>\n Es f\u00e1cil explorar los temas y diferenciarlos.<\/p>\n Cuando agrega m\u00e1s palabras en un elemento del men\u00fa, interrumpe ese espacio. El elemento del men\u00fa se vuelve mucho m\u00e1s largo que los dem\u00e1s y los espacios entre las palabras crean una irregularidad en el dise\u00f1o.<\/p>\n En la captura de pantalla a continuaci\u00f3n, agregu\u00e9 elementos de men\u00fa falsos en el men\u00fa NYT con varias palabras. Mira lo confuso que se vuelve el men\u00fa:<\/p>\n2 Usa una paleta de colores<\/h2>\n
![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbc684325.png\")
<\/a><\/p>\n![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbc8a511a.png\")
<\/a><\/p>\n![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbcacb74b.png\")
<\/a><\/p>\n3 Utilice solo 1 o 2 fuentes<\/h2>\n
\n
4 Utilice una fuente sans serif popular<\/h2>\n
![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbcd25332.png\")
<\/a><\/p>\n![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbcf5158d.png\")
<\/a><\/p>\n5 Utilice una fuente de visualizaci\u00f3n para los t\u00edtulos<\/h2>\n
\n
![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd17935f.png\")
<\/a><\/p>\n![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd3839b9.png\")
<\/a><\/p>\n![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd58ccc4.png\")
<\/a><\/p>\n![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd7ab322.png\")
<\/a><\/p>\n
![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd98dfd4.png\")
<\/a><\/p>\n![\"9](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbdbf3389.png\")
<\/a><\/p>\n