{"id":31603,"date":"2020-02-17T06:16:50","date_gmt":"2020-02-17T14:16:50","guid":{"rendered":"https:\/\/kinsta.com\/?p=63976"},"modified":"2023-08-23T12:38:07","modified_gmt":"2023-08-23T10:38:07","slug":"mejores-practicas-diseno-web","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/","title":{"rendered":"Mejores pr\u00e1cticas de dise\u00f1o web para su pr\u00f3ximo proyecto de sitio web"},"content":{"rendered":"<p>\u00bfQu\u00e9 causa la gran discrepancia entre lo que <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-sitio-web-costo\/\">cobran algunos desarrolladores de WordPress en comparaci\u00f3n con otros<\/a>? Responder esta pregunta requiere considerar la raz\u00f3n principal por la que quiere un sitio web.<\/p>\n<p>Algunos desarrolladores se centran en el producto final literal: la combinaci\u00f3n de c\u00f3digo que resulta en un dise\u00f1o de sitio web bastante agradable.<\/p>\n<p>Pero los desarrolladores con conocimientos de marketing se preocupan por<i> algo<\/i> m\u00e1s que construir algo que se vea bien. Act\u00faan como consultores de clientes que buscan lograr objetivos espec\u00edficos con sus sitios web.<\/p>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/diseno-web-estrictamente-conectado-objectivos-negocio.jpg\" alt=\"El dise\u00f1o web est\u00e1 estrictamente conectado a sus objetivos de negocio\" width=\"1321\" height=\"732\"><figcaption class=\"wp-caption-text\">El dise\u00f1o web est\u00e1 estrictamente conectado a sus objetivos de negocio<\/figcaption><\/figure>\n<p>Con esto en mente, <a href=\"https:\/\/kinsta.com\/es\/blog\/contratar-desarrollador-de-wordpress\/\">contratar a alguien para construir un sitio web<\/a> que no parece estar interesado en \/ no hace preguntas sobre sus objetivos finales es <strong>una bandera roja<\/strong>. Es importante destacar el hecho de que incluso el m\u00e1s bello dise\u00f1o web puede<i> no<\/i> ser ideal cuando se trata de conseguir que los visitantes se conviertan en clientes.<\/p>\n<p>Dicho esto, el 94% de la gente\u00a0<a href=\"https:\/\/www.business.com\/articles\/tyler-horvath-responsive-web-design\/\">juzga su credibilidad<\/a> bas\u00e1ndose en el dise\u00f1o de su sitio web.<\/p>\n<p>As\u00ed que, en lugar de eso, necesita enfocarse en usar su dise\u00f1o para ofrecer la experiencia de usuario ideal. Debe facilitar a los visitantes la b\u00fasqueda de la informaci\u00f3n que buscaban visitando su sitio web en primer lugar y gui\u00e1ndolos hacia las actividades <a href=\"https:\/\/kinsta.com\/es\/blog\/seguimiento-conversiones\/\">de conversi\u00f3n de objetivos<\/a>.<\/p>\n<p>Estas mejores pr\u00e1cticas de dise\u00f1o web se centran en la intersecci\u00f3n entre la creaci\u00f3n de un hermoso sitio web y uno que sirva para su negocio.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h3><strong>\u00bfPrefieres ver la <a href=\"https:\/\/www.youtube.com\/watch?v=uS9wnNsamzA\" target=\"_blank\" rel=\"noopener noreferrer\">versi\u00f3n en v\u00eddeo<\/a>?<\/strong><\/h3>\n<p><kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=uS9wnNsamzA\"><\/kinsta-video><\/p>\n<h2>\u00bfQu\u00e9 define las mejores pr\u00e1cticas de dise\u00f1o web?<\/h2>\n<p>Seguro que todos tenemos opiniones diferentes a nuestra madre sobre lo que significa un sitio web bien dise\u00f1ado.<\/p>\n\n<p>Pero controlemos las opiniones de todos por medio de los expertos.<\/p>\n<p>Seg\u00fan\u00a0<a href=\"https:\/\/www.orbitmedia.com\/blog\/web-design-standards\/\">Orbit Media<\/a>, se pueden agrupar las mejores pr\u00e1cticas de dise\u00f1o web en estas tres categor\u00edas b\u00e1sicas de est\u00e1ndares:<\/p>\n<ul>\n<li><strong>Est\u00e1ndares de marca:<\/strong> Puede que le resulte m\u00e1s familiar referirse a este mismo concepto como \u00abbranding\u00bb, \u00abgu\u00edas de estilo\u00bb o \u00abtablas de estado de \u00e1nimo\u00bb. Estas normas incluyen todo lo que tiene que ver con el aspecto de un sitio web e implica el uso de colores, tipograf\u00eda y elementos que son espec\u00edficos de la empresa en particular.<\/li>\n<li><strong>Normas de codificaci\u00f3n:<\/strong> Los sitios web deben ser construidos de acuerdo a los\u00a0<a href=\"http:\/\/www.w3.org\/standards\/\">est\u00e1ndares de programaci\u00f3n<\/a> acordados por el W3C, la comunidad internacional que trabaja en conjunto para desarrollar est\u00e1ndares web.<\/li>\n<li><strong>Normas de accesibilidad:<\/strong> El acceso a la informaci\u00f3n es un derecho humano b\u00e1sico, reconocido por la Convenci\u00f3n de las Naciones Unidas sobre los Derechos de las Personas con Discapacidad. Adem\u00e1s de eso, hacer que su sitio sea accesible tiene <a href=\"https:\/\/www.searchenginejournal.com\/accessibility-seo-and-sales\/281899\/\">efectos positivos<\/a>, no s\u00f3lo en las ventas, sino tambi\u00e9n en el\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/que-quiere-decir-seo\/\">SEO<\/a>. El W3C comparte una lista b\u00e1sica de est\u00e1ndares que deben seguirse para dise\u00f1ar\u00a0<a href=\"http:\/\/www.w3.org\/standards\/webdesign\/accessibility\">un sitio web accesible<\/a>. M\u00e1s adelante en este art\u00edculo detallaremos las mejores pr\u00e1cticas de dise\u00f1o web relacionadas.<\/li>\n<\/ul>\n<p>Veamos c\u00f3mo desarrollar pr\u00e1cticas de dise\u00f1o web basadas en cada uno de estos est\u00e1ndares:<\/p>\n<h2>Est\u00e1ndares de marca<\/h2>\n<p>Los sitios web que carecen de una marca consistente pueden ser estresantes para interactuar y causar confusi\u00f3n. Por lo tanto, no debe sorprender que un 38% de los visitantes hayan dicho que dejar\u00e1n\u00a0<a href=\"https:\/\/blogs.adobe.com\/creative\/files\/2015\/12\/Adobe-State-of-Content-Report.pdf\">de participar en un sitio web<\/a> si el contenido o el dise\u00f1o no es atractivo.<\/p>\n<p>Teniendo en cuenta que la apariencia no lo es<i> todo<\/i>, aqu\u00ed hay algunos principios b\u00e1sicos de dise\u00f1o a considerar para crear un sitio web que la gente quiera usar:<\/p>\n<h3>Balance<\/h3>\n<p><i>El equilibrio<\/i> es el principio de dise\u00f1o que prescribe c\u00f3mo distribuir eficazmente los elementos visuales. En general, un dise\u00f1o equilibrado se ve limpio y natural y tiene una buena simetr\u00eda (aunque eso <a href=\"https:\/\/wpamelia.com\/visual-design-guide\/\">no es necesariamente una <i>condici\u00f3n<\/i> de equilibrio<\/a>).<\/p>\n<p>Puede incorporar el equilibrio en el dise\u00f1o de la web en cuanto a la disposici\u00f3n de la p\u00e1gina.<\/p>\n<p>Centrar el texto u otros elementos a trav\u00e9s de la p\u00e1gina es una forma f\u00e1cil de hacerlo. En general, las p\u00e1ginas web est\u00e1n construidas en un sistema de cuadr\u00edcula, lo que crea una forma de equilibrio. Puede usar la propiedad de<i> flotaci\u00f3n<\/i> CSS para posicionar elementos y equilibrarlos a lo largo de la p\u00e1gina.<\/p>\n<p>El equilibrio puede lograrse de tres maneras:<\/p>\n<h4>1. Dise\u00f1o sim\u00e9trico<\/h4>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/ejemplo-diseno-simetrico.jpg\" alt=\"Ejemplo de dise\u00f1o sim\u00e9trico\" width=\"1321\" height=\"944\"><figcaption class=\"wp-caption-text\">Ejemplo de dise\u00f1o sim\u00e9trico<\/figcaption><\/figure>\n<p>Disponiendo los elementos de manera uniforme a trav\u00e9s de la p\u00e1gina web. Por ejemplo, si tiene un elemento pesado a la izquierda, deber\u00eda tener un elemento pesado a la derecha. Como ya se ha mencionado, el centrado es la forma m\u00e1s f\u00e1cil de lograr la simetr\u00eda, pero a veces puede resultar plano o aburrido.<\/p>\n<p>Para evitar que la p\u00e1gina se vea mon\u00f3tona, puede crear un equilibrio usando diferentes elementos, como equilibrar una imagen grande con un bloque de texto. Tambi\u00e9n existe un tipo de equilibrio sim\u00e9trico llamado<i> equilibrio radial<\/i>, en el que los objetos irradian desde un punto central.<\/p>\n<h4>2. Dise\u00f1o asim\u00e9trico<\/h4>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/ejemplo-diseno-asimetrico.jpg\" alt=\"Ejemplo de dise\u00f1o asim\u00e9trico\" width=\"1321\" height=\"944\"><figcaption class=\"wp-caption-text\">Ejemplo de dise\u00f1o asim\u00e9trico<\/figcaption><\/figure>\n<p>M\u00e1s dif\u00edcil de hacer bien, el dise\u00f1o asim\u00e9trico implica la distribuci\u00f3n desigual de los elementos en una p\u00e1gina. Por ejemplo, puede tener un elemento grande en el centro, que se equilibra con uno m\u00e1s peque\u00f1o m\u00e1s lejos.<\/p>\n<p>Puede usar otros elementos de dise\u00f1o, como el color o la textura, para equilibrar un dise\u00f1o asim\u00e9trico.<\/p>\n<h4>3. Fuera de balance<\/h4>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/ejemplo-diseno-furera-balance.jpg\" alt=\"Ejemplo de dise\u00f1o fuera de balance\" width=\"1321\" height=\"944\"><figcaption class=\"wp-caption-text\">Ejemplo de dise\u00f1o fuera de balance<\/figcaption><\/figure>\n<p>Este tipo de dise\u00f1os sugieren movimiento y acci\u00f3n, lo que puede hacer que la gente se sienta inc\u00f3moda. Si su sitio web tiene la intenci\u00f3n de hacer pensar a la gente, entonces un dise\u00f1o fuera de balance es para usted.<\/p>\n<h3>Composici\u00f3n<\/h3>\n<p>El t\u00e9rmino<i> composici\u00f3n<\/i> se refiere a la colocaci\u00f3n y organizaci\u00f3n de los elementos de dise\u00f1o.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/composicion-es.jpg\" alt=\"Composici\u00f3n\" width=\"1320\" height=\"883\"><figcaption class=\"wp-caption-text\">Composici\u00f3n<\/figcaption><\/figure>\n<p>La <a href=\"https:\/\/www.photographymad.com\/pages\/view\/rule-of-thirds\">Regla de los Tercios<\/a> se usa com\u00fanmente para crear una composici\u00f3n equilibrada, especialmente con fotos.<\/p>\n<h3>Espaciamiento<\/h3>\n<p>Los elementos deben estar espaciados uniformemente para que los usuarios puedan diferenciar secciones o bloques.<\/p>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/papel-espaciado-diseno-web.jpg\" alt=\"El papel del espaciado en el dise\u00f1o de la web\" width=\"1321\" height=\"684\"><figcaption class=\"wp-caption-text\">El papel del espaciado en el dise\u00f1o de la web<\/figcaption><\/figure>\n<p>Tambi\u00e9n debes introducir el espacio negativo o el espacio entre y alrededor del sujeto de una imagen. El espacio negativo puede reducir el ruido visual, aumentar la legibilidad y aportar equilibrio.<\/p>\n<p>Puede introducir un espacio negativo a\u00f1adiendo m\u00e1rgenes y relleno alrededor de sus elementos de dise\u00f1o.<\/p>\n<h3>Punto focal<\/h3>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/llama-atencion-sobre-elemento.jpg\" alt=\"Llama la atenci\u00f3n sobre un elemento\" width=\"1321\" height=\"732\"><figcaption class=\"wp-caption-text\">Llamar la atenci\u00f3n sobre un elemento<\/figcaption><\/figure>\n<p>Cree un \u00e1rea de enfoque donde quiera llamar la atenci\u00f3n. Deber\u00eda ser la parte m\u00e1s importante de su p\u00e1gina, y lo ideal ser\u00eda que cada p\u00e1gina se centrara en<i> un<\/i> solo punto focal importante.<\/p>\n<h3>Color<\/h3>\n<p><i>El color<\/i> es un elemento de dise\u00f1o importante cuando se trata de la marca. Lo ideal es que llegues al proceso de <a href=\"https:\/\/kinsta.com\/es\/blog\/combinaciones-colores-sitios-web\/\">dise\u00f1o web sabiendo el esquema de colores<\/a> que quieres que se asocie a tu marca.<\/p>\n<p>Para el dise\u00f1o web espec\u00edficamente, ayuda empezar con una tabla de estado de \u00e1nimo para su marca.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/ejemplo-paleta-colores-kinsta.jpg\" alt=\"Ejemplo de la paleta de colores de Kinsta\" width=\"1320\" height=\"443\"><figcaption class=\"wp-caption-text\">Ejemplo de la paleta de colores de Kinsta<\/figcaption><\/figure>\n<p>Elija un color primario y secundario (el color secundario puede<i> complementar<\/i> o<i> contrastar<\/i> el color primario), y un tono m\u00e1s claro y m\u00e1s oscuro para cada uno. Limita el uso del color para que los diferentes acentos no se conviertan en un adefesio.<\/p>\n<p><a href=\"https:\/\/color.adobe.com\/create\">Adobe Color<\/a> proporciona una excelente herramienta gratuita para probar varias combinaciones de colores para crear una paleta de trabajo para los elementos del sitio web.<\/p>\n<p>Adem\u00e1s, al decidir sobre el color, es importante considerar a los dalt\u00f3nicos, que incluyen hasta el\u00a0<a href=\"http:\/\/www.colourblindawareness.org\/colour-blindness\/\">4,5% de la poblaci\u00f3n mundial<\/a>.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/ejemplo-como-veria-diseno-normal-usuarios-daltonicos.jpg\" alt=\"Ejemplo de c\u00f3mo se ver\u00eda un dise\u00f1o normal para los usuarios dalt\u00f3nicos\" width=\"1320\" height=\"441\"><figcaption class=\"wp-caption-text\">Ejemplo de c\u00f3mo se ver\u00eda un dise\u00f1o normal para los usuarios dalt\u00f3nicos<\/figcaption><\/figure>\n<p>Hay tres tipos de daltonismo (daltonismo total, visi\u00f3n a dos colores y visi\u00f3n a colores deficiente), as\u00ed que aseg\u00farese de que su dise\u00f1o sigue siendo utilizable en consideraci\u00f3n a aquellos que no pueden diferenciar los colores.<\/p>\n<h4>Contraste<\/h4>\n<p>Al elegir el color, es importante ser consciente de las proporciones de color y el <strong>contraste<\/strong>.<\/p>\n<p><i>El contraste de color<\/i> se refiere a la diferencia de luz entre el primer plano y el fondo. El uso de colores suficientemente contrastados permite distinguir f\u00e1cilmente la visibilidad del sitio web. En general, utilice opciones de color de alto contraste, como el texto negro sobre fondo blanco, para que su sitio sea legible.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/mal-contraste-puede-problematico.jpg\" alt=\"El mal contraste puede ser problem\u00e1tico\" width=\"1320\" height=\"1299\"><figcaption class=\"wp-caption-text\">El mal contraste puede ser problem\u00e1tico<\/figcaption><\/figure>\n<p>La <i>relaci\u00f3n de<\/i> contraste es el valor num\u00e9rico asignado a la diferencia de contraste entre los elementos de la p\u00e1gina.<\/p>\n<p>Las <a href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\">Directrices de Accesibilidad al Contenido Mundial (WCAG) 2.0<\/a> recomiendan una relaci\u00f3n de contraste de 4,5:1 para el texto normal. WebAIM comparte algunas\u00a0<a href=\"https:\/\/webaim.org\/articles\/contrast\/#ratio\">combinaciones predeterminadas<\/a> que se ajustan a la relaci\u00f3n de contraste ideal para ayudarle a visualizar esta mejor pr\u00e1ctica de dise\u00f1o web.<\/p>\n<p>Para ayudar a navegar usando esta proporci\u00f3n, aseg\u00farese de que cuando dise\u00f1e su sitio web, est\u00e9 imaginando a todos los p\u00fablicos (incluyendo aquellos con problemas de accesibilidad). Es m\u00e1s f\u00e1cil hacer esto que planear para abordar estos temas despu\u00e9s del hecho.<\/p>\n<p>Considere todos los aspectos del sitio web con los que la gente interactuar\u00e1, incluyendo\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/agregar-codigo\/\">encabezados, pies de p\u00e1gina<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/plugins-de-menu-de-wordpress\/\">men\u00fas<\/a> &#8211; todos los cuales deben ser f\u00e1cilmente visibles para ser utilizables.<\/p>\n<p>Algunas herramientas que puede usar para comprobar las proporciones de contraste de color incluyen:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.levelaccess.com\/color-contrast-checker\/\">Comprobador de contraste de colores<\/a> por el acceso de nivel.<\/li>\n<li><a href=\"https:\/\/contrast-ratio.com\/\">Relaci\u00f3n de contraste<\/a>.<\/li>\n<li>Herramienta de comprobaci\u00f3n de <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">contraste de colores WCAG 2.0 AA y AAA<\/a>, que se basa en las directrices de WCAG 2.0.<\/li>\n<\/ul>\n<h3>Tipograf\u00eda<\/h3>\n<p>La tipograf\u00eda del sitio es otra consideraci\u00f3n de marca importante.<\/p>\n<p>Si bien existen muchas fuentes diferentes para <a href=\"https:\/\/kinsta.com\/es\/blog\/fuentes-modernas\/\">encontrar posibles fuentes<\/a> para usar en su sitio web, primero deber\u00e1 considerar las opciones que se mostrar\u00e1n de manera consistente, independientemente de las fuentes que el usuario final tenga instaladas en su computadora.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/es\/blog\/fuentes-wordpress\/#google-fonts\">Google Fonts<\/a> ofrece una amplia variedad de <a href=\"https:\/\/kinsta.com\/es\/blog\/fuentes-seguras-para-la-web\/\" target=\"_blank\" rel=\"noopener noreferrer\">fuentes gratuitas seguras para la web<\/a> con las que puede contar para que se muestren correctamente, independientemente de las fuentes\/programas instalados por el usuario. Aseg\u00farese de incluir fuentes en su tabla de estado de \u00e1nimo para ver si coinciden con su est\u00e9tica de color.<\/p>\n<p>Si tiene problemas para encontrar combinaciones, las fuentes de Google pueden sugerir emparejamientos populares. Tambi\u00e9n puede usar un sitio como <a href=\"https:\/\/fontpair.co\/\">FontPair<\/a> para obtener sugerencias.<\/p>\n<p>Intente limitar el peso de las fuentes que utiliza, ya que tener que cargar demasiados archivos puede contribuir a reducir la velocidad de la p\u00e1gina. En ese sentido, considere la posibilidad de <a href=\"https:\/\/kinsta.com\/es\/blog\/fuentes-locales\/\">alojar localmente las fuentes de Google<\/a>\u00a0para introducir beneficios adicionales de rendimiento.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/tipografia-pobre-tipografia-ideal.jpg\" alt=\"Tipograf\u00eda pobre vs. tipograf\u00eda ideal\" width=\"1320\" height=\"386\"><figcaption class=\"wp-caption-text\">Tipograf\u00eda pobre vs. tipograf\u00eda ideal<\/figcaption><\/figure>\n<p>Cuando se trata de seleccionar elementos tipogr\u00e1ficos basados en las mejores pr\u00e1cticas de dise\u00f1o web, como regla general, utilice\u00a0<a href=\"https:\/\/www.invisionapp.com\/inside-design\/best-practices-pairing-fonts\/\">fuentes sans-serif para los encabezamientos<\/a> y fuentes serif para el contenido. Como m\u00ednimo o no utilice fuentes decorativas para el contenido del cuerpo, ya que ser\u00e1 dif\u00edcil de leer.<\/p>\n<p>Adem\u00e1s, no se sienta tentado a usar una gran variedad de fuentes diferentes en su sitio web. Una buena regla general es usar una fuente para su logo, otra para sus men\u00fas\/encabezados, y una m\u00e1s para el contenido del cuerpo. En ese sentido, intente emparejar fuentes que se complementen entre s\u00ed, como las de la misma familia de fuentes.<\/p>\n<h3>Jerarqu\u00eda de elementos<\/h3>\n<p><i>La jerarqu\u00eda<\/i> se refiere a la disposici\u00f3n de los elementos de dise\u00f1o que muestran la importancia relativa. Esto se logra manipulando elementos como el contraste visual, el tama\u00f1o y las ubicaciones para llamar la atenci\u00f3n.<\/p>\n<figure style=\"width: 1321px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/ejemplo-jerarquia-elementos.jpg\" alt=\"Ejemplo de jerarqu\u00eda de elementos\" width=\"1321\" height=\"1177\"><figcaption class=\"wp-caption-text\">Ejemplo de jerarqu\u00eda de elementos<\/figcaption><\/figure>\n<p>Por ejemplo, el <a href=\"https:\/\/kinsta.com\/es\/blog\/como-reducir-tasa-de-rebote\/#14-structure-your-content-wisely\">contenido debe desglosarse en bloques l\u00f3gicos<\/a> para que los usuarios puedan distinguir las secciones entre s\u00ed.<\/p>\n<p>Esto puede hacerse mediante el uso de <strong>encabezamientos de contenido<\/strong>, que no s\u00f3lo facilitan a los usuarios el salto a las partes que desean leer, sino que tambi\u00e9n dividen grandes cantidades de texto en trozos legibles, de modo que los lectores de pantalla puedan determinar el contexto de cada secci\u00f3n.<\/p>\n<p>Si busca algunas ilustraciones visuales \u00fatiles de estos conceptos de dise\u00f1o y m\u00e1s, el blog de Tilda Publishing cubre algunos de los <a href=\"http:\/\/blog-en.tilda.cc\/articles-website-design-mistakes\">errores de dise\u00f1o de p\u00e1ginas web m\u00e1s comunes<\/a> y c\u00f3mo corregirlos.<\/p>\n<h2>Mejores pr\u00e1cticas de dise\u00f1o\/formato en la web<\/h2>\n<p>Seg\u00fan\u00a0<a href=\"https:\/\/www.orbitmedia.com\/blog\/web-design-standards\/\">la investigaci\u00f3n de Orbit Media<\/a>, hay algunos est\u00e1ndares comunes de dise\u00f1o web que se observan en los 50 principales sitios web de comercializaci\u00f3n.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/estandares-diseno-web.jpg\" alt=\"Est\u00e1ndares de dise\u00f1o web\" width=\"1320\" height=\"1158\"><figcaption class=\"wp-caption-text\">Est\u00e1ndares de dise\u00f1o web<\/figcaption><\/figure>\n<p>Por \u00abest\u00e1ndares\u00bb se entiende que el 80% de los sitios web utilizan un enfoque de dise\u00f1o similar:<\/p>\n<ul>\n<li>El logo en la esquina superior izquierda.<\/li>\n<li>Navegaci\u00f3n horizontal principal en la parte superior de cada p\u00e1gina.<\/li>\n<li>Propuesta de valor alta en la p\u00e1gina principal ubicada \u00abpor encima del pliegue\u00bb. Tenga en cuenta que la mayor\u00eda de los dise\u00f1adores web le dir\u00e1n que no hay una altura de p\u00edxeles est\u00e1ndar para los navegadores, y t\u00e9cnicamente no hay \u00abpliegue\u00bb. Pero, en general, los elementos importantes del dise\u00f1o deben aparecer en lo alto de las p\u00e1ginas que generalmente son visibles para la mayor\u00eda de los visitantes, incluso sin desplazarse.<\/li>\n<\/ul>\n<p>A continuaci\u00f3n se presentan algunas de las mejores pr\u00e1cticas de dise\u00f1o web para elementos comunes del sitio:<\/p>\n<h3>Im\u00e1genes<\/h3>\n<p>Las pr\u00e1cticas \u00f3ptimas de dise\u00f1o de p\u00e1ginas web para el\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/optimizar-imagenes-para-la-web\/\">uso de im\u00e1genes<\/a> podr\u00edan inspirar muchos vol\u00famenes de consejos, pero centr\u00e9monos en lo m\u00ednimo en este debate sobre las pr\u00e1cticas \u00f3ptimas de dise\u00f1o de p\u00e1ginas web:<\/p>\n<ul>\n<li><strong>A\u00f1adiendo texto ALT.<\/strong> Las im\u00e1genes<i> no pueden<\/i> ser procesadas usando lectores de pantalla a menos que se use texto ALT. A\u00f1adir\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-seo\/#9-image-alt-text\">texto ALT tambi\u00e9n contribuye al SEO<\/a>, pero algunas personas utilizan el texto ALT s\u00f3lo para complementar su estrategia de palabras clave. Un uso m\u00e1s \u00fatil del texto ALT ser\u00eda describir la imagen &#8211; aunque ciertamente se podr\u00eda satisfacer a las ara\u00f1as de b\u00fasqueda y a los lectores de pantalla al mismo tiempo con el enfoque adecuado.<\/li>\n<li><strong>El uso de im\u00e1genes con rostros humanos<\/strong> tiende a ser m\u00e1s efectivo que otros gr\u00e1ficos o animaciones. Hace que las personas se involucren m\u00e1s con la imagen, ya que los humanos se sienten atra\u00eddos por lo que perciben como empat\u00eda y emociones reales.<\/li>\n<li><strong>Usar im\u00e1genes sensibles,<\/strong> que crecen o se encogen dependiendo del tama\u00f1o del navegador. Esto ayuda tanto a la velocidad del sitio como al SEO.<\/li>\n<li>No te olvides nunca de los <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-favicon\/\">favicons<\/a>. Los favicons son los peque\u00f1os iconos que aparecen junto al t\u00edtulo del sitio web y tambi\u00e9n en los resultados de las b\u00fasquedas. Ayudan al reconocimiento de la marca y mejoran la UX del sitio.<\/li>\n<\/ul>\n<h3>Navegaci\u00f3n del sitio web<\/h3>\n<p>Los usuarios esperan poder encontrar f\u00e1cilmente el contenido que est\u00e1n buscando en un sitio. Por lo tanto, es importante que la <a href=\"https:\/\/kinsta.com\/es\/blog\/navegacion-del-sitio-web\/\" target=\"_blank\" rel=\"noopener noreferrer\">navegaci\u00f3n por el sitio web<\/a> sea simple y directa.<\/p>\n<p><i>La navegaci\u00f3n en un sitio web <\/i>es un t\u00e9rmino general que se refiere a la\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/google-sitelinks\/#6-build-internal-links\">arquitectura de enlaces internos de un sitio web<\/a>. No olvide que el principal objetivo de la navegaci\u00f3n es <i>ayudar a<\/i> los usuarios a encontrar f\u00e1cilmente el contenido relevante de su sitio web.<\/p>\n<p>La arquitectura de enlaces internos de su sitio constituye la\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/mapa-del-sitio-xml\/\">base de su mapa del sitio<\/a>, lo que ayuda a los motores de b\u00fasqueda a acceder m\u00e1s f\u00e1cilmente a su contenido. Se ha descubierto que tener un sitio bien dise\u00f1ado donde el contenido es f\u00e1cil de encontrar afecta positivamente el tr\u00e1fico del sitio web que obtendr\u00e1 de los motores de b\u00fasqueda (junto con una mayor probabilidad de <a href=\"https:\/\/kinsta.com\/es\/blog\/google-sitelinks\/\">obtener enlaces de sitios de Google<\/a>).<\/p>\n<h3>Navegaci\u00f3n del men\u00fa<\/h3>\n<p>Hay varios aspectos que conforman\u00a0la <a href=\"https:\/\/kinsta.com\/es\/blog\/navegacion-del-sitio-web\/\" target=\"_blank\" rel=\"noopener noreferrer\">navegaci\u00f3n de un sitio web<\/a>, pero su men\u00fa superior\/principal debe ser un foco primario ya que ser\u00e1 una de las primeras cosas con las que los usuarios interact\u00faen cuando visiten su sitio web.<\/p>\n<p>Hay diferentes heur\u00edsticas de dise\u00f1o de men\u00fa de sitio web, pero las m\u00e1s populares incluyen:<\/p>\n<h4>Men\u00fa de navegaci\u00f3n<\/h4>\n<p>Idealmente, esto est\u00e1 ubicado en el frente y el centro de un sitio web. Esto podr\u00eda implicar el\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/menu-desplegable-wordpress\/\">uso de un men\u00fa desplegable<\/a> si hay varias categor\u00edas. Sin embargo, los men\u00fas desplegables <a href=\"https:\/\/www.websaucestudio.com\/website-navigation-best-practices-and-seo-value\/\">no son recomendables<\/a>, especialmente cuando se trata de SEO t\u00e9cnico (son m\u00e1s dif\u00edciles de rastrear). Adem\u00e1s, se ha descubierto que a la mayor\u00eda de la gente\u00a0<a href=\"http:\/\/www.useit.com\/alertbox\/annoyances.html\">no le gustan los men\u00fas desplegables<\/a>.<\/p>\n<p>Esto se debe a que el ojo humano trabaja m\u00e1s r\u00e1pido que la mano, por lo que la gente encuentra molesto cuando ya han decidido sobre qu\u00e9 hacer clic y algo m\u00e1s se cae &#8211; lo que puede conducir a una disminuci\u00f3n de las visitas a las p\u00e1ginas.<\/p>\n<h4>Men\u00fa de hamburguesas<\/h4>\n<p>El men\u00fa de la hamburguesa suele estar situado en la parte superior izquierda o derecha de la p\u00e1gina. Aparece como un cuadrado con tres l\u00edneas que se pueden expandir con un clic. Sin embargo, muchos dise\u00f1adores\u00a0<a href=\"https:\/\/speckyboy.com\/analyzing-effectiveness-hamburger-menus-web-design\/\">desprecian el men\u00fa de las hamburguesas<\/a>, que ha inspirado a los desarrolladores web a considerar nuevas formas de hacer que la navegaci\u00f3n de los sitios web m\u00f3viles sea divertida y funcional.<\/p>\n<p>Aqu\u00ed hay algunos consejos para dise\u00f1ar la navegaci\u00f3n basada en las mejores pr\u00e1cticas de dise\u00f1o web:<\/p>\n<ul>\n<li><strong>A\u00f1adir una barra de b\u00fasqueda<\/strong> para ayudar a los usuarios a encontrar f\u00e1cilmente el contenido (a continuaci\u00f3n se explica c\u00f3mo\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/busqueda-wordpress\/\">mejorar la funcionalidad de\u00a0b\u00fasqueda de WordPress<\/a>). Esto es especialmente \u00fatil para los sitios web que tienen mucho contenido, como un blog de noticias.<\/li>\n<li>Dise\u00f1e su sitio <strong>siguiendo la regla de los tres clics,<\/strong> que establece que los usuarios deben ser capaces de encontrar la informaci\u00f3n deseada con no m\u00e1s de tres clics de rat\u00f3n. Esto se debe a que los usuarios realmente\u00a0<a href=\"https:\/\/www.cludo.com\/blog\/search-vs-navigate-people-behave-websites-search-navigate\/\">prefieren navegar por un sitio<\/a> en lugar de buscar en los resultados de la b\u00fasqueda, cuando es posible.<\/li>\n<li><strong>Hacer que los t\u00edtulos de los men\u00fas sean descriptivos<\/strong> (teniendo en cuenta las palabras clave), lo que ayuda a los usuarios a encontrar los art\u00edculos m\u00e1s f\u00e1cilmente y tambi\u00e9n contribuye positivamente al SEO.<\/li>\n<li><strong>La posici\u00f3n de los elementos del men\u00fa importa.<\/strong> Ponga las p\u00e1ginas m\u00e1s importantes al frente de su men\u00fa para que sean f\u00e1cilmente accesibles.<\/li>\n<li><strong>Mantenga los elementos del men\u00fa a un m\u00e1ximo de 7,<\/strong> no s\u00f3lo para mantener el dise\u00f1o del sitio limpio sino tambi\u00e9n porque tener demasiadas categor\u00edas de elementos del men\u00fa puede afectar potencialmente a su capacidad de clasificaci\u00f3n en la b\u00fasqueda. Es posible que Google interprete estas categor\u00edas aparentemente no relacionadas como una se\u00f1al de que su sitio web no se ha decidido por un nicho espec\u00edfico.<\/li>\n<\/ul>\n<p>Para un formato m\u00e1s conveniente, aqu\u00ed hay una pr\u00e1ctica infograf\u00eda:<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/mejores-practicas-diseno-web-navegacion-menus.jpg\" alt=\"Mejores pr\u00e1cticas de dise\u00f1o web para la navegaci\u00f3n de men\u00fas\" width=\"1320\" height=\"1802\"><figcaption class=\"wp-caption-text\">Mejores pr\u00e1cticas de dise\u00f1o web para la navegaci\u00f3n de men\u00fas<\/figcaption><\/figure>\n<h2>Est\u00e1ndares de codificaci\u00f3n<\/h2>\n<p>Con tantos sitios web creados y consumidos en todo el mundo, ciertamente se necesita un conjunto normalizado de principios de codificaci\u00f3n. Algunos aspectos de estas normas de la web incluyen:<\/p>\n<h3>SEO<\/h3>\n<p><a href=\"https:\/\/kinsta.com\/es\/blog\/que-quiere-decir-seo\/\">El SEO<\/a> puede ser usado para aumentar el n\u00famero de visitantes a su sitio de forma <i>org\u00e1nica<\/i> (sin el uso de anuncios). Dado que es demasiado complicado profundizar adecuadamente en el SEO en una peque\u00f1a subsecci\u00f3n de un art\u00edculo, eche un vistazo a nuestra <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-seo\/\">lista de control de SEO<\/a>\u00a0y a nuestros consejos sobre los\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/mejores-plugins-seo-para-wordpress\/\">mejores plugins de SEO para WordPress<\/a> para familiarizarse con este aspecto de las mejores pr\u00e1cticas de dise\u00f1o web.<\/p>\n<p>Tenga en cuenta que los siguientes consejos de est\u00e1ndares de codificaci\u00f3n funcionan de la mano con el SEO.<\/p>\n<h3>Respuesta m\u00f3vil<\/h3>\n<p>El <a href=\"https:\/\/kinsta.com\/es\/blog\/diseno-de-paginas-web-sensibles\/\" target=\"_blank\" rel=\"noopener noreferrer\">dise\u00f1o sensible<\/a> se preocupa por crear una gran experiencia para el usuario, independientemente del dispositivo o el navegador que se utilice para acceder a su sitio web.<\/p>\n<p>Hoy en d\u00eda es m\u00e1s importante que nunca dise\u00f1ar su sitio web para que responda, ya que m\u00e1s del 60% de los usuarios\u00a0<a href=\"https:\/\/www.ciodive.com\/news\/70-of-internet-traffic-comes-from-mobile-phones\/510120\/\">de Internet acceden a la red a trav\u00e9s de sus tel\u00e9fonos m\u00f3viles<\/a>, y <a href=\"https:\/\/www.infront.com\/blog\/the-blog\/8-statistics-that-prove-responsive-web-design-is-essential-to-seo\">la mitad de las transacciones de comercio electr\u00f3nico<\/a> se realizan a trav\u00e9s de plataformas m\u00f3viles. Adem\u00e1s, el nuevo algoritmo de b\u00fasqueda de Google tambi\u00e9n\u00a0<a href=\"https:\/\/www.businessnewsdaily.com\/7808-google-search-ranking-mobile.html\">da prioridad a los sitios para m\u00f3viles<\/a>.<\/p>\n<figure style=\"width: 210px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/ejemplo-diseno-respuesta.jpg\" alt=\"Ejemeplo de dise\u00f1o de respuesta\" width=\"210\" height=\"365\"><figcaption class=\"wp-caption-text\">Ejemeplo de dise\u00f1o de respuesta<\/figcaption><\/figure>\n<p>El hecho de tener un sitio web receptivo no s\u00f3lo ayuda a los usuarios a navegar m\u00e1s f\u00e1cilmente por su sitio, sino que tambi\u00e9n contribuye a aumentar el compromiso y las conversiones. <a href=\"https:\/\/www.thinkwithgoogle.com\/\">Los usuarios recomiendan marcas<\/a> con las que tienen una experiencia positiva en los sitios de respuesta a la telefon\u00eda m\u00f3vil y, a la inversa, no s\u00f3lo\u00a0<a href=\"https:\/\/www.socpub.com\/articles\/the-5-mobile-marketing-mistakes-infographic-14849\">dejar\u00e1n de comprar a marcas<\/a> con una mala experiencia en los sitios m\u00f3viles, sino que tambi\u00e9n desalentar\u00e1n activamente a otros a hacerlo.<\/p>\n<p>Sin embargo, a pesar de la demanda de un sitio de respuesta, se estima que el\u00a0<a href=\"https:\/\/bpstudios.com\/Blog\/March-2017\/15-Web-Design-Statistics-You-Should-Know\">91% de las peque\u00f1as empresas no tienen uno<\/a>. Deber\u00edan, ya que dise\u00f1ar un sitio web que responda a las necesidades de los m\u00f3viles ciertamente vale la pena. El 62% de las empresas han\u00a0<a href=\"https:\/\/econsultancy.com\/blog\/11044-more-companies-are-designing-their-sites-for-tablet-and-mobile-stats\/\">informado de un aumento de las ventas<\/a> despu\u00e9s de dise\u00f1ar un sitio que responda a las necesidades de los m\u00f3viles.<\/p>\n<p>Lea el recurso de Kinsta sobre c\u00f3mo <a href=\"https:\/\/kinsta.com\/es\/blog\/google-indexacion-centrada-moviles\/\">hacer su sitio m\u00e1s amigable para el m\u00f3vil<\/a>, que incluye una lista de los mejores\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-plugin-movil\/\">plugins de WordPress<\/a> para el m\u00f3vil para descargar, y aseg\u00farase de revisar esta <a href=\"https:\/\/kinsta.com\/es\/blog\/temas-wordpress-rapidos\/\">lista curada de los mejores temas de WordPress<\/a>, donde podr\u00e1 navegar a trav\u00e9s de un mont\u00f3n de temas de respuesta.<\/p>\n<p>Google tambi\u00e9n ofrece algunos consejos sobre c\u00f3mo dise\u00f1ar\u00a0<a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/responsive\/\">un sitio web receptivo<\/a>.<\/p>\n<h3>Seguridad del sitio web<\/h3>\n<p>\u00bfOtra pr\u00e1ctica importante de codificaci\u00f3n? Creando programas y sitios web seguros en los que los usuarios puedan confiar su informaci\u00f3n personal sensible. Contrariamente a la creencia popular, los hackers no buscan activamente sitios web<i> espec\u00edficos<\/i> para piratear, por lo que incluso los sitios web peque\u00f1os son\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-pirateado\/\">vulnerables a los ataques<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-info\">\n            <h3>Info<\/h3>\n        <p>Kinsta te ofrece un <a href=\"https:\/\/kinsta.com\/es\/docs\/servicio-de-informacion\/eliminacion-de-malware\/\">compromiso de seguridad contra el malware<\/a> en todos los planes y, en caso de que ocurra algo malo, los especialistas en seguridad arreglar\u00e1n tu sitio.<\/p>\n<\/aside>\n\n<p>En general, WordPress es <a href=\"https:\/\/kinsta.com\/es\/blog\/es-wordpress-seguro\/\">seguro<\/a>, pero ayuda a tomar precauciones adicionales para mantener su sitio web seguro contra ataques.<\/p>\n<p>Aqu\u00ed est\u00e1n algunas de las mejores pr\u00e1cticas de seguridad del sitio web:<\/p>\n<ul>\n<li><strong>Obtenga un certificado SSL,<\/strong> que es especialmente importante para los sitios que se ocupan de los pagos y la informaci\u00f3n personal. El <a href=\"https:\/\/kinsta.com\/es\/blog\/como-funciona-ssl\/\">certificado SSL<\/a>\u00a0encripta la informaci\u00f3n enviada a trav\u00e9s de las redes para que los hackers tengan dificultades para decodificarla. Adem\u00e1s de eso, es un est\u00e1ndar de la industria. Chrome avisa a los visitantes cuando el sitio que est\u00e1n visitando no tiene un certificado SSL. Adem\u00e1s de esto, Chrome est\u00e1 ahora\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/err_ssl_obsolete_version\/\">depreciando las versiones TLS heredadas<\/a>\u00a0y comenz\u00f3 a mostrar advertencias adicionales.<br \/>\n<a href=\"https:\/\/kinsta.com\/es\/blog\/http-a-https\/\">Habilitar HTTPS<\/a> (parte de la instalaci\u00f3n de un certificado SSL) es tambi\u00e9n un factor de clasificaci\u00f3n oficial de Google.<\/li>\n<li><strong>Mantenga sus credenciales de acceso seguras.<\/strong> Varios ataques son causados por hackers que intentan acceder por la fuerza a un sitio web. Ayude tener una <a href=\"https:\/\/kinsta.com\/es\/blog\/encontrar-wordpress-url\/\">p\u00e1gina de inicio de sesi\u00f3n separada\/ocultada<\/a> (use el plugin\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/wps-hide-login\/\">WP Hide Login<\/a>) y limitar el n\u00famero de intentos de inicio de sesi\u00f3n. Utilice el plugin\u00a0<a href=\"https:\/\/wordpress.org\/plugins\/login-lockdown\/\">Login LockDown<\/a>, que registra la direcci\u00f3n IP y la marca de tiempo de cada intento de acceso fallido y bloquea la funci\u00f3n de acceso si se alcanza el n\u00famero de intentos fallidos del mismo rango de IP en un corto per\u00edodo de tiempo. Adem\u00e1s, crea una contrase\u00f1a segura que tenga m\u00e1s de 6 caracteres y que sea una mezcla de letras may\u00fasculas y min\u00fasculas, n\u00fameros y caracteres especiales. Cambie su contrase\u00f1a a menudo. Tambi\u00e9n puede usar la autenticaci\u00f3n de dos factores para iniciar la sesi\u00f3n si busca seguridad adicional.<\/li>\n<li><strong>Mantenga el n\u00facleo de WordPress, los plugins y los temas actualizados.<\/strong> No te olvides de descargar los plugins o temas de una fuente de confianza. Una buena se\u00f1al es si el plugin\/tema tiene m\u00faltiples instalaciones y ha sido actualizado recientemente. Tambi\u00e9n deber\u00edas leer las cr\u00edticas para decidir por ti mismo si el plugin es fiable (aseg\u00farate de\u00a0<a href=\"https:\/\/kinsta.com\/es\/secciones\/plugins-wordpress\/\">comprobar las que aparecen aqu\u00ed<\/a>). En ese sentido, descargue un plugin de seguridad de WordPress como\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/plugins-seguridad-wordpress\/#wordfence-security\">Wordfence<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/plugins-seguridad-wordpress\/#sucuri\">Sucuri<\/a> o\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/plugins-seguridad-wordpress\/#defender\">Defender<\/a>, ya que el 73,2% de las instalaciones m\u00e1s populares de WordPress que son vulnerables pueden ser detectadas\u00a0<a href=\"https:\/\/www.wpwhitesecurity.com\/wordpress-security-news-updates\/statistics-70-percent-wordpress-installations-vulnerable\/\">usando herramientas automatizadas gratuitas<\/a>. Aqu\u00ed hay una lista m\u00e1s detallada de <a href=\"https:\/\/kinsta.com\/es\/blog\/plugins-seguridad-wordpress\/\">los mejores plugins de seguridad<\/a>.<\/li>\n<li><strong>Usa un servidor web seguro.<\/strong> Para los que no lo sepan, puede parecer que su anfitri\u00f3n web no tiene nada que ver con la seguridad del sitio, pero el\u00a0<a href=\"https:\/\/www.wpwhitesecurity.com\/state-of-security-of-wordpress-blogs-and-websites\/\">41% de los ataques<\/a> se producen a trav\u00e9s de una vulnerabilidad de seguridad en la plataforma de alojamiento. Busque un proveedor de hospedaje que incluya caracter\u00edsticas como: <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-un-cortafuegos\/\" target=\"_blank\" rel=\"noopener noreferrer\">firewall<\/a> y encriptaci\u00f3n del lado del servidor, servidores <a href=\"https:\/\/kinsta.com\/es\/blog\/nginx-vs-apache\/\">web NGINX o Apache,<\/a> software antivirus y antimalware, sistemas de seguridad en el sitio, y la disponibilidad de certificados SSL y un CDN.<\/li>\n<\/ul>\n<p>Para obtener m\u00e1s informaci\u00f3n sobre la seguridad de WordPress, consulta nuestro completo recurso sobre\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/seguridad-wordpress\/\">c\u00f3mo mantener seguro su sitio de WordPress<\/a>.<\/p>\n<h3>Velocidad de la p\u00e1gina<\/h3>\n<p>Alrededor de la mitad de los usuarios esperan que un sitio se cargue en <a href=\"https:\/\/www.bluecorona.com\/blog\/20-web-design-facts-small-business-owners\/\">2 segundos o menos<\/a>, y si toma m\u00e1s tiempo que eso, el 40% de las personas no dudar\u00e1n en rebotar de la p\u00e1gina, (probablemente) para nunca regresar.<\/p>\n<p>Adem\u00e1s de las visitas al sitio web, la velocidad de la p\u00e1gina es importante ya que tambi\u00e9n afecta a la conversi\u00f3n y a los ingresos. Por cada segundo de velocidad de carga de p\u00e1gina a\u00f1adida, las ventas\u00a0<a href=\"https:\/\/www.lyfemarketing.com\/blog\/web-design-best-practices\/\">caer\u00e1n hasta un 27%<\/a>. Aumentar la velocidad del sitio web puede evitar la p\u00e9rdida del <a href=\"https:\/\/www.infront.com\/blog\/the-blog\/8-statistics-that-prove-responsive-web-design-is-essential-to-seo\">7% de las posibles conversiones<\/a>.<\/p>\n<p>Aqu\u00ed hay algunas maneras de hacer que sus p\u00e1ginas web se carguen m\u00e1s r\u00e1pido:<\/p>\n<ul>\n<li>Utiliza una <strong>red de entrega de contenido (CDN)<\/strong>, que toma archivos est\u00e1ticos como im\u00e1genes, <a href=\"https:\/\/kinsta.com\/es\/blog\/css-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS<\/a> y JavaScript, y <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-cdn\/\">los entrega en los servidores m\u00e1s cercanos a la ubicaci\u00f3n f\u00edsica del usuario<\/a>.<\/li>\n<li><strong>Considere c\u00f3mo utiliza las im\u00e1genes.<\/strong> El sitio web promedio usa 1.8MB de im\u00e1genes, lo que representa\u00a0<a href=\"https:\/\/speedcurve.com\/blog\/web-performance-page-bloat\/\">el 60% del tama\u00f1o de un sitio<\/a>. Para ayudar con eso, reconsidere la forma en que dise\u00f1a su p\u00e1gina web. Si quiere mantener la velocidad de la p\u00e1gina r\u00e1pida, intente reducir el n\u00famero de im\u00e1genes grandes utilizadas en su dise\u00f1o y aseg\u00farese de\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/optimizar-imagenes-para-la-web\/\">optimizarlas<\/a>.<\/li>\n<li>Si su sitio web necesita utilizar muchas im\u00e1genes grandes, <strong>utilice plugins<\/strong> que incluyan la funcionalidad de\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/activar-compresion-gzip\/\">compresi\u00f3n GZIP<\/a>, almacenamiento en cach\u00e9 u optimizaci\u00f3n de im\u00e1genes, como\u00a0<a href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a> e <a href=\"https:\/\/imagify.io\/\">Imagify<\/a>. Pueden ayudar a reducir el tama\u00f1o de los archivos (sin sacrificar la calidad) para que se carguen m\u00e1s r\u00e1pido.<\/li>\n<li><strong>Considere el n\u00famero de plugins y archivos que mantiene en su base de datos de WordPress<\/strong> ya que tambi\u00e9n pueden afectar a la velocidad de carga de la p\u00e1gina. Limpia los que no uses. Mientras lo hace, mantenga su PHP, <a href=\"https:\/\/kinsta.com\/es\/blog\/mantenimiento-de-wordpress\/#keeping-your-wordpress-site-updated\">el n\u00facleo de WordPress y los plugins actualizados a sus \u00faltimas versiones<\/a>.<\/li>\n<\/ul>\n<p>Revise nuestro completo recurso para la optimizaci\u00f3n\u00a0<a href=\"https:\/\/kinsta.com\/es\/aprender\/optimizacion-de-velocidad-del-sitio\/\">de la velocidad del sitio web<\/a>.<\/p>\n<h2>Est\u00e1ndares de accesibilidad<\/h2>\n<p>La Internet fue dise\u00f1ada para funcionar para todas las personas, sin importar el hardware, software, idioma que utilicen, su habilidad o ubicaci\u00f3n. Sin embargo, muchos sacrifican la accesibilidad por un hermoso dise\u00f1o.<\/p>\n<figure style=\"width: 1320px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/03\/accesibilidad-clave-cada-sitio-web.jpg\" alt=\"La accesibilidad es clave para cada sitio web\" width=\"1320\" height=\"732\"><figcaption class=\"wp-caption-text\">La accesibilidad es clave para cada sitio web<\/figcaption><\/figure>\n<p><i>La accesibilidad<\/i> se refiere a la pr\u00e1ctica de hacer que su sitio web sea utilizable por<i> todos<\/i>.<\/p>\n<p>Adem\u00e1s de las discapacidades que afectan el acceso, <a href=\"https:\/\/www.w3.org\/WAI\/intro\/accessibility.php\">W3<\/a> dice que la accesibilidad del sitio web tambi\u00e9n es beneficiosa para:<\/p>\n<ul>\n<li>Los que utilizan dispositivos con pantallas peque\u00f1as, diferentes modos de entrada, etc.<\/li>\n<li>Los ancianos.<\/li>\n<li>Personas con \u00abdiscapacidades temporales\u00bb incluyendo una extremidad rota, gafas perdidas o una condici\u00f3n m\u00e9dica.<\/li>\n<li>Usuarios con \u00ablimitaciones de situaci\u00f3n\u00bb, como los que acceden a la Internet en dispositivos a la luz del sol o en un entorno en el que no pueden escuchar el audio, como el transporte p\u00fablico.<\/li>\n<li>Individuos con una conexi\u00f3n a Internet lenta.<\/li>\n<\/ul>\n<p>La accesibilidad deber\u00eda ser una preocupaci\u00f3n de todos, ya que todos estamos afectados por ella de alguna manera.<\/p>\n<h3>Razones para hacer que su sitio sea accesible<\/h3>\n<p>\u00bfA\u00fan no est\u00e1 seguro de que valga la pena gastar su tiempo en accesibilidad en esta discusi\u00f3n sobre las mejores pr\u00e1cticas de dise\u00f1o web?<\/p>\n<p>Considere estas razones:<\/p>\n<ul>\n<li><strong>Es un requisito de la ADA.<\/strong> La Ley de Estadounidenses con Discapacidades (ADA) fue aprobada en 1990 para proteger los derechos civiles de los discapacitados contra la discriminaci\u00f3n. Cubre cosas como el transporte, las telecomunicaciones, el empleo, e incluso los c\u00f3digos de construcci\u00f3n. Dado que esta ley fue aprobada casi 30 a\u00f1os antes, cuando Internet no era tan omnipresente, los legisladores est\u00e1n\u00a0<a href=\"https:\/\/www.ada.gov\/anprm2010\/web%2520anprm_2010.htm\">tratando de enmendarla<\/a>.<\/li>\n<li><strong>Fomenta la inclusi\u00f3n.<\/strong> Una encuesta del Pew Research Center muestra que las personas con discapacidades tienen\u00a0<a href=\"http:\/\/www.pewresearch.org\/fact-tank\/2017\/04\/07\/disabled-americans-are-less-likely-to-use-technology\/\">tres veces menos probabilidades<\/a> de conectarse a Internet que sus hom\u00f3logos sin discapacidades, lo que es una l\u00e1stima ya que las estad\u00edsticas muestran que alrededor del\u00a0<a href=\"http:\/\/www.talentinnovation.org\/_private\/assets\/DisabilitiesInclusion_PressRelease.pdf\">30% de los profesionales<\/a> tienen una discapacidad, y que el 62% de los discapacitados \u00abvuelan por debajo del radar\u00bb por miedo a los prejuicios negativos.<\/li>\n<li><strong>Te ayudar\u00e1 a ganar m\u00e1s negocios.<\/strong> Al ser m\u00e1s inclusivo, traer\u00e1 una red de personas con discapacidades, lo que representa\u00a0<a href=\"https:\/\/www.boia.org\/blog\/how-to-prevent-a-web-accessibility-lawsuit\">7 billones de d\u00f3lares en ingresos disponibles<\/a><\/li>\n<li><strong>Beneficios de SEO.<\/strong> Los motores de b\u00fasqueda recompensan a los sitios web que cumplen con los requisitos de accesibilidad a fin de alentar a m\u00e1s sitios web a ser accesibles.<\/li>\n<\/ul>\n<h3>C\u00f3mo hacer su sitio web m\u00e1s accesible<\/h3>\n<p>Una manera f\u00e1cil de hacer su sitio web m\u00e1s accesible es instalar el plugin de <a href=\"https:\/\/wordpress.org\/plugins\/wp-accessibility\/\">accesibilidad\u00a0de WP<\/a>, que a\u00f1ade caracter\u00edsticas de accesibilidad, incluyendo:<\/p>\n<ul>\n<li>Una barra de herramientas donde los usuarios pueden cambiar el tama\u00f1o de las fuentes y ver su sitio en alto contraste y escala de grises.<\/li>\n<li>Comparando el contraste de colores para comprobar si se ajusta al est\u00e1ndar de la ADA.<\/li>\n<li>Eliminar los atributos de t\u00edtulo de las im\u00e1genes insertadas en el contenido. La mayor\u00eda de los lectores de pantalla no son capaces de sentir esto y leer el texto de anclaje en su lugar.<\/li>\n<li>Habilitar los enlaces de salto, que son enlaces de p\u00e1ginas internas que permiten a los usuarios saltar directamente al contenido, lo que resulta \u00fatil para las personas que utilizan lectores de pantalla.<\/li>\n<\/ul>\n<p>Unos cuantos pasos adicionales a tomar:<\/p>\n<ul>\n<li><strong>A\u00f1ada subt\u00edtulos o una transcripci\u00f3n<\/strong> si su sitio produce medios de comunicaci\u00f3n como\u00a0<a href=\"https:\/\/kinsta.com\/es\/blog\/reproductores-audio-wordpress\/\">audio<\/a>, audiolibros, v\u00eddeos, <a href=\"https:\/\/kinsta.com\/es\/blog\/wordpress-podcast\/\">podcasts<\/a>,\u00a0etc., para beneficiar a los sordomudos, as\u00ed como a las personas que quieren consumir su contenido pero no pueden consumir los medios de comunicaci\u00f3n en p\u00fablico.<\/li>\n<li><strong>Crear enlaces y men\u00fas accesibles por teclado<\/strong> para las personas que tienen discapacidades motoras y s\u00f3lo pueden utilizar un teclado (no el rat\u00f3n) para navegar por su sitio. Se desaconseja el uso de men\u00fas desplegables, pero puede remediarlo asignando atajos para cada elemento desplegable (como: presione \u00ab1\u00bb para la p\u00e1gina de inicio, \u00ab2\u00bb para la p\u00e1gina de informaci\u00f3n, etc.).<\/li>\n<li>Por \u00faltimo, compruebe <strong>la accesibilidad de su sitio web.<\/strong> La Iniciativa de Accesibilidad a la Web no respalda ninguna herramienta espec\u00edfica, sino que ofrece una <a href=\"https:\/\/www.w3.org\/WAI\/ER\/tools\/\">lista de herramientas<\/a> que puede utilizar para auditar sus esfuerzos.<\/li>\n<\/ul>\n<h2>Pensamientos finales: Mejores pr\u00e1cticas de dise\u00f1o web para su pr\u00f3ximo proyecto de sitio web<\/h2>\n<p>Los buenos sitios web no deber\u00edan definirse por un dise\u00f1o objetivamente bueno. Igual de importante es la usabilidad del sitio, la facilidad de navegaci\u00f3n y la accesibilidad. Armado con estas mejores pr\u00e1cticas de dise\u00f1o web, tienes todo lo que necesitas para <strong>crear algo que se vea y funcione bien<\/strong>.<\/p>\n\n<p>S\u00f3lo tenga en cuenta que estas son las<i> mejores pr\u00e1cticas de<\/i> dise\u00f1o web. Es probable que no pueda seguir cada uno exactamente, dependiendo de la naturaleza de su sitio web. Pero antes de que pueda romper las reglas, ayude al menos ser consciente de por qu\u00e9 existen.<\/p>\n<p>\u00bfNos hemos perdido algo importante? Comparta sus mejores pr\u00e1cticas de dise\u00f1o web en los comentarios de abajo!<\/p>\n<p>Lectura recomendada: <a href=\"https:\/\/kinsta.com\/es\/blog\/cursos-diseno-web\/\">Los mejores cursos de dise\u00f1o web en l\u00ednea<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfQu\u00e9 causa la gran discrepancia entre lo que cobran algunos desarrolladores de WordPress en comparaci\u00f3n con otros? Responder esta pregunta requiere considerar la raz\u00f3n principal por &#8230;<\/p>\n","protected":false},"author":48,"featured_media":31622,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[688,546],"topic":[1338,1358,1334],"class_list":["post-31603","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-accessibility","tag-webdesign","topic-branding-sitios-web","topic-diseno-sitios-web-wordpress","topic-diseno-web"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mejores pr\u00e1cticas de dise\u00f1o web para su pr\u00f3ximo proyecto de sitio web<\/title>\n<meta name=\"description\" content=\"El buen dise\u00f1o no es s\u00f3lo cuesti\u00f3n de est\u00e9tica. Igual de importante: la usabilidad del sitio, la facilidad de navegaci\u00f3n y la accesibilidad. Aprenda m\u00e1s sobre las mejores pr\u00e1cticas de dise\u00f1o web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mejores pr\u00e1cticas de dise\u00f1o web para su pr\u00f3ximo proyecto de sitio web\" \/>\n<meta property=\"og:description\" content=\"El buen dise\u00f1o no es s\u00f3lo cuesti\u00f3n de est\u00e9tica. Igual de importante: la usabilidad del sitio, la facilidad de navegaci\u00f3n y la accesibilidad. Aprenda m\u00e1s sobre las mejores pr\u00e1cticas de dise\u00f1o web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-17T14:16:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-23T10:38:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/mejores-practicas-diseno-web-es.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Maddy Osman\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"El buen dise\u00f1o no es s\u00f3lo cuesti\u00f3n de est\u00e9tica. Igual de importante: la usabilidad del sitio, la facilidad de navegaci\u00f3n y la accesibilidad. Aprenda m\u00e1s sobre las mejores pr\u00e1cticas de dise\u00f1o web.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/mejores-practicas-diseno-web-es.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@maddyosman\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Maddy Osman\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"27 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/\"},\"author\":{\"name\":\"Maddy Osman\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89\"},\"headline\":\"Mejores pr\u00e1cticas de dise\u00f1o web para su pr\u00f3ximo proyecto de sitio web\",\"datePublished\":\"2020-02-17T14:16:50+00:00\",\"dateModified\":\"2023-08-23T10:38:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/\"},\"wordCount\":5907,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/mejores-practicas-diseno-web-es.jpg\",\"keywords\":[\"accessibility\",\"webdesign\"],\"articleSection\":[\"Desarrollo de WordPress\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/\",\"name\":\"Mejores pr\u00e1cticas de dise\u00f1o web para su pr\u00f3ximo proyecto de sitio web\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/mejores-practicas-diseno-web-es.jpg\",\"datePublished\":\"2020-02-17T14:16:50+00:00\",\"dateModified\":\"2023-08-23T10:38:07+00:00\",\"description\":\"El buen dise\u00f1o no es s\u00f3lo cuesti\u00f3n de est\u00e9tica. Igual de importante: la usabilidad del sitio, la facilidad de navegaci\u00f3n y la accesibilidad. Aprenda m\u00e1s sobre las mejores pr\u00e1cticas de dise\u00f1o web.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/mejores-practicas-diseno-web-es.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/mejores-practicas-diseno-web-es.jpg\",\"width\":1460,\"height\":730,\"caption\":\"Mejores pr\u00e1cticas de dise\u00f1o web para su pr\u00f3ximo proyecto de sitio web\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Branding del Sitio Web\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/branding-sitios-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Mejores pr\u00e1cticas de dise\u00f1o web para su pr\u00f3ximo proyecto de sitio web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89\",\"name\":\"Maddy Osman\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g\",\"caption\":\"Maddy Osman\"},\"description\":\"Maddy Osman creates engaging content with SEO best practices for marketing thought leaders and agencies that have their hands full with clients and projects. Learn more about her process and experience on her website, The Blogsmith and read her latest articles on Twitter: @MaddyOsman.\",\"sameAs\":[\"http:\/\/www.the-blogsmith.com\",\"https:\/\/x.com\/maddyosman\"],\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/maddy\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Mejores pr\u00e1cticas de dise\u00f1o web para su pr\u00f3ximo proyecto de sitio web","description":"El buen dise\u00f1o no es s\u00f3lo cuesti\u00f3n de est\u00e9tica. Igual de importante: la usabilidad del sitio, la facilidad de navegaci\u00f3n y la accesibilidad. Aprenda m\u00e1s sobre las mejores pr\u00e1cticas de dise\u00f1o web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/","og_locale":"es_ES","og_type":"article","og_title":"Mejores pr\u00e1cticas de dise\u00f1o web para su pr\u00f3ximo proyecto de sitio web","og_description":"El buen dise\u00f1o no es s\u00f3lo cuesti\u00f3n de est\u00e9tica. Igual de importante: la usabilidad del sitio, la facilidad de navegaci\u00f3n y la accesibilidad. Aprenda m\u00e1s sobre las mejores pr\u00e1cticas de dise\u00f1o web.","og_url":"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2020-02-17T14:16:50+00:00","article_modified_time":"2023-08-23T10:38:07+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/mejores-practicas-diseno-web-es.jpg","type":"image\/jpeg"}],"author":"Maddy Osman","twitter_card":"summary_large_image","twitter_description":"El buen dise\u00f1o no es s\u00f3lo cuesti\u00f3n de est\u00e9tica. Igual de importante: la usabilidad del sitio, la facilidad de navegaci\u00f3n y la accesibilidad. Aprenda m\u00e1s sobre las mejores pr\u00e1cticas de dise\u00f1o web.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/mejores-practicas-diseno-web-es.jpg","twitter_creator":"@maddyosman","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Maddy Osman","Tiempo de lectura":"27 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/"},"author":{"name":"Maddy Osman","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89"},"headline":"Mejores pr\u00e1cticas de dise\u00f1o web para su pr\u00f3ximo proyecto de sitio web","datePublished":"2020-02-17T14:16:50+00:00","dateModified":"2023-08-23T10:38:07+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/"},"wordCount":5907,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/mejores-practicas-diseno-web-es.jpg","keywords":["accessibility","webdesign"],"articleSection":["Desarrollo de WordPress"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/","url":"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/","name":"Mejores pr\u00e1cticas de dise\u00f1o web para su pr\u00f3ximo proyecto de sitio web","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/mejores-practicas-diseno-web-es.jpg","datePublished":"2020-02-17T14:16:50+00:00","dateModified":"2023-08-23T10:38:07+00:00","description":"El buen dise\u00f1o no es s\u00f3lo cuesti\u00f3n de est\u00e9tica. Igual de importante: la usabilidad del sitio, la facilidad de navegaci\u00f3n y la accesibilidad. Aprenda m\u00e1s sobre las mejores pr\u00e1cticas de dise\u00f1o web.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/mejores-practicas-diseno-web-es.jpg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2020\/02\/mejores-practicas-diseno-web-es.jpg","width":1460,"height":730,"caption":"Mejores pr\u00e1cticas de dise\u00f1o web para su pr\u00f3ximo proyecto de sitio web"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/mejores-practicas-diseno-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Branding del Sitio Web","item":"https:\/\/kinsta.com\/es\/secciones\/branding-sitios-web\/"},{"@type":"ListItem","position":3,"name":"Mejores pr\u00e1cticas de dise\u00f1o web para su pr\u00f3ximo proyecto de sitio web"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/8ebe30416d11374fc13b3a0d0b25cb89","name":"Maddy Osman","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6dd84956bec2e4b407d1b071a666ba85?s=96&d=mm&r=g","caption":"Maddy Osman"},"description":"Maddy Osman creates engaging content with SEO best practices for marketing thought leaders and agencies that have their hands full with clients and projects. Learn more about her process and experience on her website, The Blogsmith and read her latest articles on Twitter: @MaddyOsman.","sameAs":["http:\/\/www.the-blogsmith.com","https:\/\/x.com\/maddyosman"],"url":"https:\/\/kinsta.com\/es\/blog\/author\/maddy\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/31603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=31603"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/31603\/revisions"}],"predecessor-version":[{"id":54692,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/31603\/revisions\/54692"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/31603\/translations\/en"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/31603\/translations\/pt"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/31603\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/31603\/translations\/fr"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/31603\/translations\/it"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/31603\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/31603\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/31603\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/31603\/translations\/dk"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/31603\/translations\/se"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/31603\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/31622"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=31603"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=31603"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=31603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}