{"id":28823,"date":"2017-09-14T16:06:30","date_gmt":"2017-09-14T23:06:30","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=28823"},"modified":"2025-01-16T13:23:37","modified_gmt":"2025-01-16T21:23:37","slug":"guia-para-un-sitio-correctamente-disenado","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/es\/guia-para-un-sitio-correctamente-disenado\/","title":{"rendered":"Qu\u00e9 hacer y no hacer en dise\u00f1o web: Tu gu\u00eda para un sitio web genial"},"content":{"rendered":"\n

Te mereces una palmada en la espalda. Una estrella dorada. Una ronda de aplausos. <\/span><\/p>\n\n\n\n

\u00a1Lo hiciste! Finalmente creaste tu nuevo sitio web brillante. Lo has equipado con un nuevo dominio y tu propio contenido \u00fanico. Adem\u00e1s, has hecho equipo con nosotros, <\/span>tus gur\u00fas de alojamiento<\/span><\/a>.<\/span><\/p>\n\n\n\n

Pusiste tu sitio a funcionar en l\u00ednea y ya est\u00e1s trayendo tr\u00e1fico a ese reci\u00e9n acu\u00f1ado .com, .xyz o .loquesea. As\u00ed que aqu\u00ed hay algo en lo que deber\u00edas pensar: <\/span>En un estudio<\/span><\/a>, el dise\u00f1o pobre de sitios web estaba conectado directamente con ventas disminuidas. Sabiendo eso, hay un poco m\u00e1s de trabajo que hacer si quieres que coloquen \u2014 y mantengan \u2014 ojos en tu sitio. <\/span><\/p>\n\n\n\n

\u00bfLa clave? Mant\u00e9n el dise\u00f1o en mente. <\/span><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Un sitio web correctamente dise\u00f1ado<\/span><\/a> es una inversi\u00f3n con rendimientos sorprendentes; 38% de las personas dejar\u00e1n de engancharse con un sitio web si el contenido o el dise\u00f1o no son atractivos. Esa es una gran parte de tus visitantes potenciales (o clientes) los cuales <\/span>abandonar\u00e1n el barco e ir\u00e1n a otro lado<\/span><\/a> si el dise\u00f1o de tu sitio es deficiente. <\/span><\/p>\n\n\n\n

Entonces, \u00bfqu\u00e9 hace que un sitio web sea hermoso? Bueno, es m\u00e1s que simple est\u00e9tica. <\/span>Un sitio web bien dise\u00f1ado<\/span><\/a> requiere una copia detallada, visuales impresionantes y una navegaci\u00f3n inteligente. Incorpora estos elementos en tu sitio web y estar\u00e1s configurando tu sitio para un \u00e9xito seguro. <\/span><\/p>\n\n\n\n

Afortunadamente para ti, hemos hecho algo del trabajo pesado por ti. Hemos creado esta \u00fatil gu\u00eda sobre qu\u00e9 s\u00ed hacer y qu\u00e9 no hacer en la elaboraci\u00f3n del dise\u00f1o<\/span> inteligente de tu nuevo sitio<\/span><\/a>. Manos a la obra. <\/span><\/p>\n\n\n\n

<\/span><\/p>\n\n\n\n\n\n

\"Ad<\/div>\n\n\n\n\n
\n \n \u00bfNecesitas un sitio web hermoso?\n <\/h2>\n \n Dis\u00e9\u00f1alo t\u00fa mismo con el Constructor de Sitios WP \u2014 sin requerir c\u00f3digo.\n <\/p>\n\n \n Construye Tu Sitio <\/a>\n\n <\/div>\n<\/div>\n\n\n

1. Copia<\/b><\/h2>\n\n\n\n

Comencemos en el nivel b\u00e1sico. El primer paso para crear un sitio web bien dise\u00f1ado: tu texto. La forma en la que el texto de tu sitio web se ve, juega un papel importante en el dise\u00f1o general de tu sitio, as\u00ed que mant\u00e9n tus ojos en tu contenido. El contenido legible es igual a visitantes que regresar\u00e1n. <\/span><\/p>\n\n\n\n

S\u00ed: Mant\u00e9n tu copia corta y dulce<\/b><\/h3>\n\n\n\n

Si crees que tus visitantes se est\u00e1n instalando en tu sitio para una lectura tranquila c\u00f3mo lo hacen con el peri\u00f3dico del domingo, pi\u00e9nsalo de nuevo.  <\/span><\/p>\n\n\n\n

C\u00f3mo demuestran las investigaciones<\/span><\/a>, la capacidad de atenci\u00f3n del humano se ha reducido a un m\u00ednimo hist\u00f3rico: a unos miserables 8 segundos. Con tu audiencia en mente, dise\u00f1a tu copia para que sea legible en la web: corta, f\u00e1cil de escanear y desglosada en partes f\u00e1ciles de leer. Esto ayuda a la corriente visual y con esas cada vez m\u00e1s cortas capacidades de atenci\u00f3n. <\/span><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

No: Dejes que tu contenido se vuelva obsoleto<\/b><\/h3>\n\n\n\n

Nada va a alejar a un visitante m\u00e1s r\u00e1pido que navegar en tu sitio y ver contenido viejo o expirado. Cr\u00e9elo o no, actualizar tu sitio con contenido de calidad en una base consistente significa mucho cuando se trata de un sitio bien dise\u00f1ado. <\/span><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Si no lo has hecho a\u00fan, determina tu <\/span>calendario editorial <\/span><\/a>y aj\u00fastate a \u00e9l. D\u00e9jale saber a tus lectores que pueden contar con tu contenido consistente. Un sitio web hermoso es aquel que es fresco con informaci\u00f3n del minuto (o de la hora, o del d\u00eda). <\/span><\/p>\n\n\n\n

\n

\n\tRelated Article<\/span>\n\t
\n\t\t
\n\t\t\tC\u00f3mo Dise\u00f1ar un Sitio Web Accesible (La Gu\u00eda Completa)\n\t\t<\/div>\n\t\t\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n<\/span><\/p>\n\n\n\n

S\u00ed: Juega el papel de editor<\/b><\/h3>\n\n\n\n

En la era de la correcci\u00f3n gram\u00e1tica, realmente no hay excusas para gram\u00e1tica pobre o errores de ortograf\u00eda. No necesitas tener un diploma en idiomas; solo <\/span>comprom\u00e9tete a hacer una correcci\u00f3n ortogr\u00e1fica detallada<\/span><\/a> a tu contenido antes de que hagas clic para publicar. Una muy lista \u00fatil<\/span> de pre-publicaci\u00f3n<\/span><\/a> puede ayudar con esto. <\/span><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

La redacci\u00f3n efectiva te ayuda a establecer credibilidad con tu audiencia: el contenido libre de errores mantiene tu sitio limpio y profesional. <\/span><\/p>\n\n\n\n

Y hablando de profesional, tomate con calma el uso de las may\u00fasculas, puntuaci\u00f3n, la letra cursiva, incluso la jerga demasiado t\u00e9cnica de tu nicho. Construye tu copia como si estuvieras escribiendo una hoja de vida, en vez de que se parezca a un mensaje de texto. <\/span><\/p>\n\n\n\n

2. Navegaci\u00f3n<\/b><\/h2>\n\n\n\n

S\u00ed: Hazlo r\u00e1pido<\/b><\/h3>\n\n\n\n

La realidad es, que los usuarios web no tienen mucha paciencia. De hecho, <\/span>47% de las personas<\/span><\/a> esperan que un sitio web cargue en dos segundos o menos. Otro punto en contra de los sitios web lentos: 39% de las personas no se enganchar\u00e1n con un sitio web si toma mucho tiempo en cargar.  Una <\/span>velocidad de sitio eficiente<\/span><\/a> incrementa la funcionalidad y es cr\u00edtico tener un sitio liviano que clasifica altamente, entonces cada segundo importa. <\/span><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Un sitio bien dise\u00f1ado es r\u00e1pido por naturaleza si has optimizado apropiadamente tus im\u00e1genes y has codificado con velocidades r\u00e1pidas en mente. Puedes revisar tu p\u00e1gina con la herramienta de Google <\/span>PageSpeed Insights<\/span><\/a> (y <\/span>Think With Google<\/span><\/a>  para velocidades m\u00f3viles) \u2014 te proveer\u00e1 un reporte que te ayuda a identificar las \u00e1reas problem\u00e1ticas  de tu sitio y c\u00f3mo arreglarlas.<\/span><\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

As\u00ed se ven los tiempos de carga de Amazon<\/span><\/p>\n\n\n\n

Si est\u00e1s buscando acelerar las cosas, prueba estos consejos:<\/span><\/p>\n\n\n\n

    \n
  1. Escoge una buena compa\u00f1\u00eda de alojamiento (\u00a1Hecho! <\/span>Te tenemos cubierto<\/span><\/a>).<\/span><\/li>\n\n\n\n
  2. Optimiza tus im\u00e1genes<\/span><\/a>.<\/span><\/li>\n\n\n\n
  3. Minifica tus recursos<\/span><\/a> como JavaScript y CSS.<\/span><\/li>\n\n\n\n
  4. Aprovecha el <\/span>cach\u00e9 de navegadores<\/span><\/a>. Si est\u00e1s usando WordPress, puedes usar <\/span>plugin \u00fatil<\/span><\/a> o <\/span>utiliza nuestros servicios<\/span><\/a>.<\/span><\/li>\n\n\n\n
  5. Deshazte de plugins que no usas o que no est\u00e9n actualizados.\u00a0<\/span><\/li>\n\n\n\n
  6. Utiliza <\/span>expire headers<\/span><\/a> (cabeceras de caducidad<\/span>)<\/span>.<\/span><\/li>\n\n\n\n
  7. Habilita CSS sprites<\/span><\/a>.<\/span><\/li>\n\n\n<\/ol>\n\n\n\n

    Un sitio r\u00e1pido y continuo es esencial para un sitio web bien dise\u00f1ado.<\/span> <\/span><\/p>\n\n\n\n

    No: Ignores jerarqu\u00eda<\/b><\/h3>\n\n\n\n

    Parte de un sitio web correctamente dise\u00f1ado es <\/span>estructurar tu dise\u00f1o<\/span><\/a> de tal manera que los ojos sean dirigidos de forma natural en tu contenido y en una jerarqu\u00eda organizada. Esto ayuda a los lectores a entender c\u00f3mo encaja tu contenido y a saber d\u00f3nde escanear.<\/span><\/p>\n\n\n

    \n
    \"\"
    La jerarqu\u00eda de The New Yorker<\/a> gu\u00eda al lector hacia abajo de la p\u00e1gina en una pir\u00e1mide de contenido<\/figcaption><\/figure><\/div>\n\n
    \n
    \"\"
    El dise\u00f1o de Both Sides of the Table<\/a> es l\u00f3gico y estructurado, dirigiendo a los espectadores al contenido en una jerarqu\u00eda organizada.<\/figcaption><\/figure><\/div>\n\n\n

    Hay algunas cosas para considerar cuando est\u00e1s dise\u00f1ando la jerarqu\u00eda de tu sitio web. Uno que es b\u00e1sico: en la web o en papel, nos gusta leer de izquierda a derecha y de arriba a abajo. Un dise\u00f1o que va en contra de esos patrones de comportamiento presentar\u00e1 una curva de aprendizaje a tus visitantes. Los sitios web dise\u00f1ados correctamente t\u00edpicamente est\u00e1n en una <\/span>forma de leer en \u201cF\u201d<\/span><\/a>.<\/span><\/p>\n\n\n\n

    Adicionalmente, <\/span>estudios de rastreo de ojos<\/span><\/a> muestran que hay ciencia involucrada en c\u00f3mo los lectores escanean tu sitio. Llega: La ley de Fitt. En resumen, deber\u00edas darle peso visual \u2014 t\u00edpicamente distinguido por color y tama\u00f1o \u2014 a las cosas que quieres enfatizar, como tus botones de llamado a la acci\u00f3n y contenido clave.<\/span><\/p>\n\n\n\n

    Tambi\u00e9n, la ley aplica a la eficiencia de clics entre dos lugares; tu dise\u00f1o deber\u00eda reducir la cantidad de tiempo que le toma a los usuarios llegar a lugares espec\u00edficos usados frecuentemente.<\/span> <\/span><\/p>\n\n\n

    \n
    \"\"
    El bot\u00f3n \u2018Learn More\u2019 de llamado a la acci\u00f3n en el blog Smart Passive Income<\/a> es claramente distinguible de otros elementos en el sitio.<\/figcaption><\/figure><\/div>\n\n\n

    Tambi\u00e9n debes considerar otro elemento \u00fatil del dise\u00f1o: un <\/span>pie de p\u00e1gina<\/span><\/a>. Mientras est\u00e1n situados al final de tu sitio \u2014 y tu jerarqu\u00eda \u2014 los pies de p\u00e1gina ofrecen una conclusi\u00f3n l\u00f3gica visual a tu sitio y provee puntos de contacto que a tu men\u00fa puede faltarle. Adem\u00e1s, son vistos m\u00e1s a menudo de lo que podr\u00edas creer \u2014 y puede ayudar a incrementar las conversiones. <\/span><\/p>\n\n\n\n

    Sobre todo, direcciona el flujo de tu sitio en una forma clara, l\u00f3gica de usar una estructura jer\u00e1rquica inteligente y enfocada. <\/span><\/p>\n\n\n\n

    \n

    \n\tRelated Article<\/span>\n\t
    \n\t\t
    \n\t\t\tUna Gu\u00eda Paso A Paso Para Realizar Una Auditor\u00eda De Contenido En Tu Sitio Web\n\t\t<\/div>\n\t\t\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n<\/span><\/p>\n\n\n\n

    S\u00ed: Recuerda la funcionalidad<\/b><\/h3>\n\n\n\n

    Un dise\u00f1o hermoso no hace muchas cosas buenas si le hace falta funcionalidad. El dise\u00f1o de tu sitio web deber\u00eda ser l\u00f3gico y f\u00e1cil de usar; si tu usuario tiene que pensar mucho o navegar un laberinto para encontrar lo que est\u00e1n buscando, tienes problemas.<\/span><\/p>\n\n\n\n

    La funcionalidad contribuye bastante a un sitio web dise\u00f1ado correctamente, pero tener un dise\u00f1o profesional, limpio <\/span>no tiene que ser complicado<\/span><\/a>. Mientras que el tipo de negocio o marca que administras puede <\/span>determinar el dise\u00f1o<\/span><\/a> de tu sitio, no quieres sacrificar utilidad o credibilidad al configurar un sitio demasiado complicado o caprichoso. No quieres que los visitantes necesiten un manual de instrucciones cuando intentan acceder tu contenido. De hecho, en un sitio web incre\u00edble tu dise\u00f1o no deber\u00eda atraer atenci\u00f3n a s\u00ed mismo; juega un papel \u2014  aunque detr\u00e1s de escena \u2014 crucial. <\/span><\/p>\n\n\n\n

    Algunas cosas que necesitas para funcionalidad incrementada: <\/span><\/p>\n\n\n\n