{"id":2164,"date":"2020-02-10T13:31:22","date_gmt":"2020-02-10T18:31:22","guid":{"rendered":"https:\/\/www.marketerosagencia.com\/?p=2164"},"modified":"2025-06-05T07:22:10","modified_gmt":"2025-06-05T12:22:10","slug":"fases-etapas-diseno-web","status":"publish","type":"post","link":"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/","title":{"rendered":"Dise\u00f1o web: fases y etapas para su desarrollo"},"content":{"rendered":"<p>Es muy com\u00fan entre los dise\u00f1adores pensar que el proceso de <strong>dise\u00f1o web<\/strong> se enfoque exclusivamente en asuntos t\u00e9cnicos, tales como wireframes, la gesti\u00f3n de contenido y el c\u00f3digo.<\/p>\n<p>Y es que el camino para lograr un dise\u00f1o \u00f3ptimo no trata sobre la integraci\u00f3n de redes sociales, ni siquiera de im\u00e1genes visuales. En realidad, un buen dise\u00f1o se caracteriza por <a href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/como-crear-una-pagina-web\/\"><strong>crear una web<\/strong><\/a> que se alinee con una estrategia general. Y en esa estrategia general cobrar\u00eda un papel fundamental una <a title=\"Gu\u00eda Google Analytics\" href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/guia-google-analytics\/\" name=\"gu\u00eda de Google Analytics\">Gu\u00eda de Google Analytics<\/a> que nos lleve a la toma de decisiones sobre nuestro sitio web que nos permita obtener del mismo \u00f3ptimos resultados.<\/p>\n<p>Una p\u00e1gina web con un dise\u00f1o atractivo ofrece mucho m\u00e1s que solo una \u201ccara bonita\u201d. Un dise\u00f1o eficaz es capaz de atraer nuevos visitantes, as\u00ed como ayudar al usuario a comprender el producto, marca o compa\u00f1\u00eda que deseas dar a conocer. Esto es posible gracias a una variedad de indicadores, entre los que se incluyen im\u00e1genes, texto e interacciones, los cuales enfocan cada elemento de nuestra web hacia un objetivo definido.<\/p>\n<p>Pero\u2026 \u00bfC\u00f3mo lograr un dise\u00f1o web de calidad? Para ello es fundamental mantener una constante bas\u00e1ndose en la estructura final de la p\u00e1gina, siguiendo paso a paso cada necesidad de la web.<\/p>\n<p>Veamos cuales son estas necesidades, o lo que es lo mismo, los pasos a seguir para un dise\u00f1o web de calidad:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2209\" src=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/13034133\/fases-para-un-diseno-web-optimo.jpg\" alt=\"\" width=\"684\" height=\"1291\" srcset=\"http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/13034133\/fases-para-un-diseno-web-optimo.jpg 684w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/13034133\/fases-para-un-diseno-web-optimo-159x300.jpg 159w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/13034133\/fases-para-un-diseno-web-optimo-543x1024.jpg 543w\" sizes=\"(max-width: 684px) 100vw, 684px\" \/><\/p>\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_69_1 counter-hierarchy ez-toc-counter ez-toc-white ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Indice de Contenido<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69ff788865e55\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69ff788865e55\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/#Contacto_Inicial\" title=\"Contacto Inicial\">Contacto Inicial<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/#Definiendo_objetivos\" title=\"Definiendo objetivos\">Definiendo objetivos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/#Briefing\" title=\"Briefing\">Briefing<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/#Definicion_del_alcance\" title=\"Definici\u00f3n del alcance\">Definici\u00f3n del alcance<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/#Benchmarking\" title=\"Benchmarking\">Benchmarking<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/#Planificacion_Sitemap_Wireframes_Y_UX\" title=\"Planificaci\u00f3n: Sitemap, Wireframes Y UX\">Planificaci\u00f3n: Sitemap, Wireframes Y UX<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/#Concepto_Creacion_de_contenido\" title=\"Concepto: Creaci\u00f3n de contenido\">Concepto: Creaci\u00f3n de contenido<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/#Difusion\" title=\"Difusi\u00f3n\">Difusi\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/#SEO\" title=\"SEO\">SEO<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/#Diseno_Elementos_visuales_y_Mockups\" title=\"Dise\u00f1o: Elementos visuales y Mockups\">Dise\u00f1o: Elementos visuales y Mockups<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/#Desarrollo\" title=\"Desarrollo\">Desarrollo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/#Pruebas\" title=\"Pruebas\">Pruebas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/#Lanzamiento\" title=\"Lanzamiento\u00a0\">Lanzamiento\u00a0<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"http:\/\/www.marketerosagencia.com\/blog\/diseno-web\/fases-etapas-diseno-web\/#Conclusion_y_despedida\" title=\"Conclusi\u00f3n y despedida\">Conclusi\u00f3n y despedida<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Contacto_Inicial\"><\/span>Contacto Inicial<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Lo primero en lo que debemos fijarnos a la hora de fijar la reuni\u00f3n inicial, es en una correcta definici\u00f3n de objetivos a alcanzar, con cuya informaci\u00f3n podremos realizar un briefing que nos dar\u00e1 una idea del proyecto que tenemos por delante, permiti\u00e9ndonos definir su alcance. Otro paso importante del contacto inicial es el benchmarking, donde se analizar\u00e1 a la competencia con el fin de obtener ideas que ayuden a nuestro web.<\/p>\n<p>Veamos cada uno de estos pasos con m\u00e1s calma:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Definiendo_objetivos\"><\/span><strong>Definiendo objetivos<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2172\" src=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/07144909\/definiendo-objetivos-par-un-diseno-web.jpg\" alt=\"definiendo objetivos par un dise\u00f1o web\" width=\"750\" height=\"748\" srcset=\"http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/07144909\/definiendo-objetivos-par-un-diseno-web.jpg 750w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/07144909\/definiendo-objetivos-par-un-diseno-web-150x150.jpg 150w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/07144909\/definiendo-objetivos-par-un-diseno-web-300x300.jpg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>Dicen que si ya has dado el primer paso, ya habr\u00e1s ganado la mitad de la batalla\u2026 y raz\u00f3n no les falta.<\/p>\n<p>Empezar con buen pie en el campo del dise\u00f1o de p\u00e1ginas web significa sentarse con el cliente en estrecha colaboraci\u00f3n, con el fin de establecer un claro objetivo para la web en cuesti\u00f3n.<\/p>\n<p>En esta reuni\u00f3n deben definirse y quedar claros varios puntos de la web:<\/p>\n<ul>\n<li>\u00bfCu\u00e1l es el objetivo principal? \u00bfSe trata de una web informativa, comercial o de entretenimiento? Si es comercial\u2026 \u00bfSon productos o servicios?<\/li>\n<li>\u00bfA qui\u00e9n est\u00e1 dirigida? \u00bfEnfoca un p\u00fablico espec\u00edfico? \u00bfSe centra en usuarios de una ciudad, de un sexo espec\u00edfico o en ciudadanos en una franja de edad espec\u00edfica?<\/li>\n<li>\u00bfQu\u00e9 es lo que buscan con la web? \u00bfPretenden dar a conocer una informaci\u00f3n, entrar en un nuevo sector laboral o iniciarse en el mundillo?<\/li>\n<li>\u00bfQu\u00e9 quieren exactamente que se haga en la web? \u00bfSer\u00e1 un portal informativo? \u00bfIncluir\u00e1 interacci\u00f3n con el usuario v\u00eda ChatBot? \u00bfQuerr\u00e1 formularios con los que recabar datos de los usuarios?<\/li>\n<li>\u00bfLa p\u00e1gina web busca transmitir el mensaje de una marca? \u00bfO por el contrario se trata de una estrategia de marca m\u00e1s amplia que posea su propio enfoque?<\/li>\n<li>\u00bfTiene competencia en su sector? De ser as\u00ed\u2026 \u00bfBusca similitudes con los competidores m\u00e1s fuertes o por el contrario prefiere un estilo propio y diferente al resto?<\/li>\n<\/ul>\n<p>Las respuestas a estas preguntas son las que nos guiar\u00e1n en nuestro futuro proyecto. Y es que si no se empieza con buen pie, respondiendo de manera clara a cada uno de las preguntas, se corre el riesgo de que todo el proyecto comience en la direcci\u00f3n incorrecta.<\/p>\n<p>Por tanto, con el fin de asegurarnos toda la informaci\u00f3n posible sobre el futuro proyecto, es importante que tengamos en cuenta cada uno de los siguientes puntos:<\/p>\n<ul>\n<li>Reuni\u00f3n y audiencia con cliente (Definiendo objetivos)<\/li>\n<li>Resumen de objetivos (Briefing)<\/li>\n<li>An\u00e1lisis de la competencia (Benchmarking)<\/li>\n<li>Caracter\u00edsticas de la p\u00e1gina (Definici\u00f3n del alcance)<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Briefing\"><\/span><strong>Briefing<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Como ya hemos visto, el <a title=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/brief-creacion-sitio-web\/\" href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/brief-creacion-sitio-web\/\">briefing<\/a> se compone de un resumen con los datos que hemos ido recopilando a lo largo de la definici\u00f3n de objetivos.<\/p>\n<p>Se trata de un elemento clave a la hora de desarrollar cualquier proyecto, m\u00e1s a\u00fan si es digital, dado que ayuda de manera significativa a identificar lo que el cliente quiere.<\/p>\n<p>\u00bfTe imaginas la construcci\u00f3n de un edificio sin ning\u00fan tipo de plano en el cual el constructor va tirando paredes y haciendo agujeros seg\u00fan le parece? Lo m\u00e1s probable es que esa casa se fuera abajo a la primera de cambio, \u00bfverdad?.<\/p>\n<p>Pues lo mismo ocurre cuando lanzas un proyecto digital sin tener ning\u00fan tipo de briefing. Y es que un briefing de calidad hace que la agencia digital pueda valorar mejor sus ofertas al tener claras las necesidades del cliente.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2199\" src=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/12042601\/Briefing-para-un-diseno-web-1.jpg\" alt=\"\" width=\"750\" height=\"748\" srcset=\"http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/12042601\/Briefing-para-un-diseno-web-1.jpg 750w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/12042601\/Briefing-para-un-diseno-web-1-150x150.jpg 150w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/12042601\/Briefing-para-un-diseno-web-1-300x300.jpg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>B\u00e1sicamente, para realizar un briefing tan solo necesitas recopilar toda la informaci\u00f3n posible alrededor de estas preguntas:<\/p>\n<ul>\n<li>\u00bfQu\u00e9 quieres hacer?<\/li>\n<li>\u00bfPara qu\u00e9?<\/li>\n<li>\u00bfCu\u00e1ndo lo quieres?<\/li>\n<li>\u00bfDe qu\u00e9 medios dispongo para llevarlo a cabo?<\/li>\n<\/ul>\n<p>En funci\u00f3n a sus necesidades espec\u00edficas nos podemos encontrar con diferentes tipos de briefing:<\/p>\n<ul>\n<li><strong>Briefing de Negocio: <\/strong>Posee la misma estructura que un briefing de marketing, con la salvedad de que tiene un enfoque m\u00e1s dirigido al propio negocio.<\/li>\n<li><strong>Briefing de Marketing: <\/strong>En este briefing se resumen los detalles principales de la campa\u00f1a de marketing que deseamos poner en marcha. Se trata de un documento de extrema necesidad tanto para los desarrolladores, como para la direcci\u00f3n, dado que sirve como punto de partida para definir los briefings tanto creativos como publicitarios.<\/li>\n<li><strong>Briefing Publicitario:<\/strong> Es usado para definir campa\u00f1as de publicidad, enfoc\u00e1ndose en aspectos como los objetivos a alcanzar, el p\u00fablico objetivo, el presupuesto de la campa\u00f1a, etc.<\/li>\n<li><strong>Briefing Creativo:<\/strong> Se trata de un documento de uso interno donde se detalla la informaci\u00f3n del proyecto a nivel gr\u00e1fico y de dise\u00f1o, dando lugar a la gu\u00eda con la que los equipos creativos desarrollar\u00e1n sus proyectos.<\/li>\n<\/ul>\n<p>Veamos ahora un supuesto ejemplo sobre c\u00f3mo desarrollar los diferentes briefings en un proyecto nuevo:<\/p>\n<p>Se empezar\u00eda por un <strong>briefing de negocio<\/strong> donde recabar los siguientes datos:<\/p>\n<p><strong>1. Empresa:<\/strong><\/p>\n<ul>\n<li>Breve descripci\u00f3n del objeto de negocio.<\/li>\n<li>Productos y\/o servicios.<\/li>\n<li>Informaci\u00f3n sobre el mercado.<\/li>\n<\/ul>\n<p><strong>2. Caracter\u00edsticas del sector:<\/strong><\/p>\n<ul>\n<li>L\u00edderes de la competencia.<\/li>\n<li>Competencia directa.<\/li>\n<li>Ventajas competitivas.<\/li>\n<\/ul>\n<p><strong>3. An\u00e1lisis del consumidor:<\/strong><\/p>\n<ul>\n<li>An\u00e1lisis del proceso de compra.<\/li>\n<li>Tendencias del mercado.<\/li>\n<\/ul>\n<p>A continuaci\u00f3n vendr\u00eda el <strong>briefing de marketing<\/strong>:<\/p>\n<ul>\n<li>\u00bfQu\u00e9 productos o servicios otorga la empresa y d\u00f3nde?<\/li>\n<li>\u00bfCu\u00e1l ser\u00eda tu cliente ideal?<\/li>\n<li>\u00bfPertenecen a alg\u00fan nicho de mercado en concreto?<\/li>\n<li>\u00bfCuales son nuestros objetivos de venta?<\/li>\n<li>\u00bfDe qu\u00e9 presupuesto disponemos?<\/li>\n<li>\u00bfPor qu\u00e9 compran a nuestra competencia?<\/li>\n<\/ul>\n<p>Una vez tenemos todos los datos tanto de negocio como de marketing, es la hora del <strong>briefing publicitario<\/strong>:<\/p>\n<ul>\n<li>\u00bfCanales publicitarios que van a usarse?<\/li>\n<li>\u00bfCu\u00e1l es nuestro target en cada uno de los canales usados?<\/li>\n<li>\u00bfTono del mensaje?<\/li>\n<li>\u00bfFechas de lanzamiento para las campa\u00f1as en cada canal?<\/li>\n<li>\u00bfPresupuesto?<\/li>\n<li>\u00bfObjetivos por campa\u00f1a?<\/li>\n<li>\u00bfUSP? \u00bfTienes algo que destaque por encima de tu competencia?<\/li>\n<\/ul>\n<p>Finalmente abordar\u00edamos el <strong>briefing creativo<\/strong>:<\/p>\n<ul>\n<li>\u00bfQu\u00e9 dise\u00f1o gusta m\u00e1s para nuestros anuncios?<\/li>\n<li>\u00bfCu\u00e1l es el mensaje que desea hacer llegar a los clientes?<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Definicion_del_alcance\"><\/span><strong>Definici\u00f3n del alcance<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A la hora de afrontar un <a title=\"El valor del dise\u00f1o web para iniciar una estrategia digital\" href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/valor-diseno-web-iniciar-estrategia-digital\/\">proyecto de dise\u00f1o web<\/a>, uno de los problemas m\u00e1s comunes y dif\u00edciles de solventar es el arrastre de alcance.<\/p>\n<p>Esto se da cuando el objetivo previamente establecido se expande o cambia gradualmente durante el proceso de dise\u00f1o, dando lugar a m\u00e1s trabajo del inicialmente acordado.<\/p>\n<p>Un ejemplo muy com\u00fan es el cliente que contrata servicios para el dise\u00f1o y creaci\u00f3n de una web, pero que con el tiempo ve que tambi\u00e9n quiere otros servicios adicionales tales como la creaci\u00f3n de una aplicaci\u00f3n web, correos electr\u00f3nicos o inclusi\u00f3n de un chatbot.<\/p>\n<p>Cuando esto ocurre no debe considerarse como un\u00a0 problema, sino como una oportunidad de ampliar el contrato. Obviamente, si el aumento de expectativas no se corresponde con un aumento en el presupuesto, corremos el riesgo de que el proyecto se vuelva inviable.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2174\" src=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/07145153\/Definicion-del-alcance-proyecto-de-diseno-web.jpg\" alt=\"Definici\u00f3n del alcance proyecto de dise\u00f1o web\" width=\"750\" height=\"568\" srcset=\"http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/07145153\/Definicion-del-alcance-proyecto-de-diseno-web.jpg 750w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/07145153\/Definicion-del-alcance-proyecto-de-diseno-web-300x227.jpg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>Encima podremos ver un diagrama de Gantt, el cual se usa para detallar un avance cronol\u00f3gico realista para el proyecto. Esto nos ayudar\u00e1 a establecer unos l\u00edmites y plazos viables con los que trabajar en el proyecto, proporcionando una referencia de peso tanto para los dise\u00f1adores como para los propios clientes.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Benchmarking\"><\/span><strong>Benchmarking<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Cuando hablamos de benchmarking debemos tener en cuenta que se trata de un proceso continuo por el cual se toma como referencia a los productos y servicios de las empresas l\u00edder del sector, con el fin de crear una comparativa con los de tu propia empresa, y as\u00ed visualizar posibles mejoras para tu negocio.<\/p>\n<p>Pero cuidado, no es simplemente copiar lo que est\u00e1 haciendo tu competencia\u2026 su principal funci\u00f3n es la de adquirir t\u00e9cnicas eficaces de la competencia para posteriormente adaptarlas a tu negocio y, si es posible, mejorar el sistema de la competencia al a\u00f1adirlo al tuyo.<\/p>\n<p>Si nuestro objetivo es alcanzar un nivel de competitividad alto, el mejor camino para lograrlo es un estudio de la competencia profundo donde analicemos sus m\u00e9todos y t\u00e9cnicas, para a continuaci\u00f3n perfeccionarlas y adaptarlas a nuestra empresa.<\/p>\n<p>Hoy d\u00eda existen tres tipos bien diferenciados de benchmarking:<\/p>\n<ol>\n<li><strong>Competitivo: <\/strong>Se basa en la medici\u00f3n de los servicios y productos de la competencia, con el fin de crear una comparativa con nuestra empresa y as\u00ed mejorar nuestra experiencia de usuario.<\/li>\n<li><strong>Interno: <\/strong>Se trata de un benchmarking llevado a cabo en nuestra propia empresa. Es una pr\u00e1ctica com\u00fan en las grandes empresas que desean comparar diferentes departamentos, o incluso en grupos empresariales donde se busca un rendimiento com\u00fan entre todos los socios.<\/li>\n<\/ol>\n<p><strong>Funcional: <\/strong>En el benchmarking funcional lo que se busca es la mejora de los m\u00e9todos de la web. Por ello no es necesario que la empresa a analizar sea competencia directa, sino que lo que se busca son objetivos muy productivos y con gran acogida, de los que podamos adquirir t\u00e9cnicas que nos ayuden a incrementar nuestra eficacia.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2175\" src=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/07145529\/Que-es-y-como-aplicar-el-benchmarking.jpg\" alt=\"Qu\u00e9 es y c\u00f3mo aplicar el benchmarking\" width=\"750\" height=\"750\" srcset=\"http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/07145529\/Que-es-y-como-aplicar-el-benchmarking.jpg 750w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/07145529\/Que-es-y-como-aplicar-el-benchmarking-150x150.jpg 150w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/07145529\/Que-es-y-como-aplicar-el-benchmarking-300x300.jpg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>De igual modo, a la hora de crear un benchmarking, es muy importante que nos basemos en unos pasos preestablecidos que nos ayuden en nuestra tarea:<\/p>\n<p><strong>1. Planificaci\u00f3n y estrategia: <\/strong>Lo primero ser\u00e1 planificar la investigaci\u00f3n que llevaremos a cabo. Nos basaremos en las siguientes preguntas:<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li>\u00bfQu\u00e9 quiero conseguir?<\/li>\n<li>\u00bfA qui\u00e9n voy a analizar?<\/li>\n<li>\u00bfC\u00f3mo lo voy a hacer?<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p><strong>2.Recopilaci\u00f3n de ideas: <\/strong>Es el paso m\u00e1s importante del benchmarking y del que depender\u00e1 todo nuestro proceso. Las posibles mejoras pueden ser obtenidas de diferentes fuentes, o salir del propio equipo.<\/p>\n<p><strong>3.An\u00e1lisis de ideas: <\/strong>Cuando ya por fin disponemos de toda la informaci\u00f3n que precisamos, toca pararse a analizar las diferencias entre las empresas que estamos investigando y la nuestra propia, y as\u00ed identificar las oportunidades de mejora que nos aportan.<\/p>\n<p><strong>4.Adaptaci\u00f3n a la web: <\/strong>Una vez que ya sabemos lo que queremos incluir en nuestra web, es hora de implementar las mejoras. Insisto en la importancia de no s\u00f3lo copiar a la competencia, sino que adem\u00e1s debemos mejorarla.<\/p>\n<p><strong>5.Mejoras y seguimiento:<\/strong> Finalmente se realiza un informe en el que englobar toda la informaci\u00f3n destacada analizada durante el proceso, lo que facilitar\u00e1 enormemente retomar el trabajo en futuros proyectos.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Planificacion_Sitemap_Wireframes_Y_UX\"><\/span><strong>Planificaci\u00f3n: Sitemap, Wireframes Y UX<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2176\" src=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10100113\/Que-es-y-para-que-sirve-un-sitemap.jpg\" alt=\"Que es y para que sirve un sitemap\" width=\"750\" height=\"409\" srcset=\"http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10100113\/Que-es-y-para-que-sirve-un-sitemap.jpg 750w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10100113\/Que-es-y-para-que-sirve-un-sitemap-300x164.jpg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>El <a title=\"Qu\u00e9 es el Sitemap de una web y para qu\u00e9 sirve\" href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/que-es-sitemap-para-que-sirve\/\">sitemap o mapa del sitio<\/a> es una herramienta de los webmasters la cual les permite obtener mejores b\u00fasquedas y posicionamientos en los buscadores.<\/p>\n<p>Gracias al sitemap, los motores de b\u00fasqueda son capaces de rastrear f\u00e1cilmente los contenidos de nuestra web, adem\u00e1s de proporcionar estad\u00edsticas de acceso, as\u00ed como posibles errores de indexaci\u00f3n.<strong>\u00a0<\/strong><\/p>\n<p>Se trata de un archivo en el cual se incluye un listado de las p\u00e1ginas con toda la informaci\u00f3n sobre el contenido de la web, sus actualizaciones, etc. Este puede venir en diferentes formatos, siendo el m\u00e1s com\u00fan de ellos el .XML, ya que nos aportar\u00e1 informaci\u00f3n adicional sobre las p\u00e1ginas. Otro protocolos igualmente aceptados son los feeds RSS, los OAI-PMH o como simples ficheros de texto.<\/p>\n<p>Un sitemap nos proporciona la base necesario para todo sitio web que se precie. Gracias a \u00e9l, los dise\u00f1adores web obtendr\u00e1n una idea clara de la arquitectura informativa de la p\u00e1gina web, as\u00ed como explicar las relaciones entre las diferentes p\u00e1ginas y los elementos de contenido.<\/p>\n<p>En realidad construir una web sin un sitemap, viene a ser como cazar moscas a ca\u00f1onazos, algo que rara vez resulta pr\u00e1ctico.<\/p>\n<p>Una vez tenemos el sitemap creado, nuestro siguiente paso es la construcci\u00f3n de una maqueta o plantilla de la estructura \u00f3sea de la web. A esto se le conoce como <strong>Wireframes.<\/strong><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2177\" src=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10100146\/Que-es-un-wireframe-para-un-sitio-web.jpg\" alt=\"Que es un wireframe para un sitio web\" width=\"750\" height=\"543\" srcset=\"http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10100146\/Que-es-un-wireframe-para-un-sitio-web.jpg 750w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10100146\/Que-es-un-wireframe-para-un-sitio-web-300x217.jpg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>Los wireframes nos proporcionan el marco en el que almacenar tanto el dise\u00f1o visual, como los elementos del contenido, lo cual ayuda dr\u00e1sticamente a identificar posibles errores o\u00a0 lagunas en nuestro sitemap.<\/p>\n<p>A pesar de que los wireframes no contienen elementos del dise\u00f1o final al tratarse de una simple plantilla, este s\u00ed que act\u00faa como orientaci\u00f3n del aspecto final que tendr\u00e1 la web. Igualmente puede ser \u00fatil para concretar alg\u00fan aspecto nuevo del que os hay\u00e1is dado cuenta al crear el wireframe.<\/p>\n<p>Adem\u00e1s en este punto tambi\u00e9n tendremos que tener en cuenta el factor de la experiencia de usuario o UX.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2178\" src=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10100457\/La-evolucion-del-proceso-de-la-experiencia-de-usuario.jpg\" alt=\"La evoluci\u00f3n del proceso de la experiencia de usuario\" width=\"750\" height=\"726\" srcset=\"http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10100457\/La-evolucion-del-proceso-de-la-experiencia-de-usuario.jpg 750w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10100457\/La-evolucion-del-proceso-de-la-experiencia-de-usuario-300x290.jpg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>Cuando hablamos de experiencia de usuario <a title=\"Dise\u00f1o web: \u00bfQu\u00e9 son el UX y el UI?\" href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/ux-ui\/\">UX y UI<\/a>\u00a0nos referimos al conjunto de factores y elementos que definen la posible percepci\u00f3n positiva o negativa de un producto o servicio. Esta depende en gran medida de diferentes factores de dise\u00f1o web, tales como el hardware, el software, la accesibilidad y mucho m\u00e1s&#8230; pero tambi\u00e9n depende de otros aspectos m\u00e1s relativos a las emociones, como la confianza en la marca.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Concepto_Creacion_de_contenido\"><\/span><strong>Concepto: Creaci\u00f3n de contenido<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2188\" src=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10121131\/las-6-ws-de-creacion-de-contenidos.jpg\" alt=\"Las 6 ws de la creaci\u00f3n de contenidos\" width=\"750\" height=\"660\" srcset=\"http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10121131\/las-6-ws-de-creacion-de-contenidos.jpg 750w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10121131\/las-6-ws-de-creacion-de-contenidos-300x264.jpg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>Una vez que tenemos completado el sitemap y tenemos la estructura clara, es hora de empezar con el aspecto m\u00e1s importante de la web, el contenido escrito y todo lo relacionado con el <a title=\"Marketing de contenidos, estrategia y ejecuci\u00f3n\" href=\"https:\/\/www.marketerosagencia.com\/blog\/inbound-marketing\/marketing-contenidos-estrategia-ejecucion\/\">marketing de contenidos<\/a>.<\/p>\n<p>Este posee dos caracter\u00edsticas esenciales que le distinguen del resto de elementos de la web:<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Difusion\"><\/span><strong>Difusi\u00f3n<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>El contenido atrae a lectores e impulsa el compromiso y la acci\u00f3n por su parte. Aunque obviamente depende de la calidad del mismo, este no es el \u00fanico factor que influye en su \u00e9xito. Una p\u00e1gina puede ser o no atractiva dependiendo de factores tan diversos como el inter\u00e9s que despierta el contenido en s\u00ed, como por la forma en que se presenta, ya sea la tipograf\u00eda, los elementos estructurales, etc.<br \/>\nUna prosa sin vida y demasiado larga rara vez es capaz de mantener la concentraci\u00f3n del lector durante mucho tiempo. Por el contrario, un contenido breve, r\u00e1pido y di\u00e1fano es capaz de atrapar al lector, el cual no dudar\u00e1 en visitar otras p\u00e1ginas de tu web buscando lo mismo que le aport\u00f3 la anterior.<br \/>\nEsto no quiere decir que los contenidos tengan todos que ser poco extensos. A menudo se tratan temas que, por lo enorme de su tem\u00e1tica, precisan de contenido m\u00e1s extensos. En estos casos es importante fragmentar adecuadamente el contenido con p\u00e1rrafos no demasiado extensos, as\u00ed como im\u00e1genes e infograf\u00edas que hagan la lectura m\u00e1s llevadera.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"SEO\"><\/span><strong>SEO<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>La segunda funci\u00f3n del contenido para nuestra web es la de aumentar su visibilidad en los motores de b\u00fasqueda. Este proceso, el cual se basa en optimizar el contenido con el fin de mejorar nuestro posicionamiento en los buscadores, es conocido como optimizaci\u00f3n del motor de b\u00fasqueda o SEO (Search Engine Optimization).<\/p>\n<p>El mundo del SEO es muy extenso y ya lo hemos tratado con anterioridad en el blog. Por ello, si te interesa el posicionamiento org\u00e1nico, no dudes en visitar \u201c<a href=\"https:\/\/www.marketerosagencia.com\/blog\/seo\/guia-posicionamiento-seo-dummies\/\">Posicionamiento SEO, Gu\u00eda en el 2020 para dummies<\/a>\u201d para m\u00e1s informaci\u00f3n. Sin embargo, en este art\u00edculo nos centraremos exclusivamente en los aspectos del SEO que afectan directamente al dise\u00f1o de p\u00e1ginas web, tales como la elecci\u00f3n de palabras clave o keywords.<\/p>\n<p>Y es que una correcta elecci\u00f3n de las palabras clave es esencial para el \u00e9xito de cualquier p\u00e1gina web.<\/p>\n<p>Por ello todo proceso de dise\u00f1o web se centra en torno al SEO, donde las keywords que deseamos posicionar deben ser colocadas en las etiquetas de t\u00edtulos, de hecho, cuando m\u00e1s al principio mejor, b\u00e1sicamente. Estas keywords tambi\u00e9n pueden aparecer en meta descripciones, etiquetas H1 y en el propio cuerpo del contenido.<\/p>\n<p>Como es l\u00f3gico, aquel contenido que est\u00e1 bien redactado, que es informativo y rico en <a title=\"\u00bfQu\u00e9 son las palabras claves? Gu\u00eda para principiantes\" href=\"https:\/\/www.marketerosagencia.com\/blog\/seo\/palabras-claves-guia-principiantes\/\">palabras clave<\/a>, es mucho m\u00e1s f\u00e1cil de indexar y analizar por parte de los motores de b\u00fasqueda, que aquel que no est\u00e1 optimizado para ello.<\/p>\n<p>Normalmente es el cliente el que aporta la mayor parte de este contenido, por lo que es muy importante hacerles saber que ese contenido luego podr\u00e1 ser adaptado con el fin de obtener una mejor optimizaci\u00f3n para los motores de b\u00fasqueda.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Diseno_Elementos_visuales_y_Mockups\"><\/span><strong>Dise\u00f1o: Elementos visuales y Mockups<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2214\" src=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/13105654\/diseno-elementos-visuales-y-mockups.jpg\" alt=\"dise\u00f1o elementos visuales y mockups\" width=\"750\" height=\"586\" srcset=\"http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/13105654\/diseno-elementos-visuales-y-mockups.jpg 750w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/13105654\/diseno-elementos-visuales-y-mockups-300x234.jpg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>Para finalizar la creaci\u00f3n de la web, pasaremos a la elaboraci\u00f3n de su estilo visual. Se trata de una parte del proceso de dise\u00f1o que por lo general viene siempre condicionada por los elementos previamente existentes en la marca, tales como las opciones de color o los logotipos, los cuales vendr\u00e1n estipulados por el cliente. Pero ojo, no pensar que todo viene cerrado sin dejar lugar a la imaginaci\u00f3n del dise\u00f1ador. De hecho, si un dise\u00f1ador web quiere lucirse, este es su momento.<\/p>\n<p>Y es que los artes o im\u00e1genes llevan un tiempo m\u00e1s fuertes que nunca, adquiriendo papeles m\u00e1s y m\u00e1s importantes a medida que pasa el tiempo.<\/p>\n<p>Una imagen de calidad, que atraiga e informe al usuario, no solo dar\u00e1 a tu web un aspecto profesional, sino que adem\u00e1s servir\u00e1 de trampol\u00edn a la hora de darte a conocer.<\/p>\n<p>Por ello, cuando ya se tienen todos los contenidos, tanto visuales como escritos, se procede a crear una plantilla con el resultado final de la web. En esta plantilla se incluye todo lo que ser\u00e1 la web, desde sus p\u00e1ginas, hasta su contenido escrito y visual.<\/p>\n<p>A esta plantilla se la conoce como <strong>Mockup<\/strong>, y sirve tanto para presentar un resultado final al cliente, como para localizar fallas o errores en la web antes de ser publicada definitivamente.<\/p>\n<p>Los <a title=\"Mockup web: \u00bfQu\u00e9 es y c\u00f3mo dise\u00f1arlo?\" href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/mockup-web-que-es\/\">Mockups<\/a> son fotomontajes que permiten a los dise\u00f1adores web mostrar al cliente c\u00f3mo quedar\u00e1 su dise\u00f1o, permitiendo rectificaciones en caso de ser necesarias, las cuales ser\u00e1n mucho m\u00e1s sencillas de realizar antes de la publicaci\u00f3n de la web.<\/p>\n<p>Volviendo al contenido visual, es bien sabido que afecta directamente a la cantidad de clics y al compromiso de los usuarios. Y es que no solo logran que la web se vea mucho m\u00e1s agradable y f\u00e1cil de digerir, sino que adem\u00e1s son capaces de mejorar el contenido de texto que lo acompa\u00f1a transmitiendo informaci\u00f3n adicional.<\/p>\n<p>Sin embargo, tambi\u00e9n es importante tener en cuenta que una imagen demasiado pesado puede lastrar nuestra web. Por ello es importante saber comprimir al m\u00e1ximo nuestras im\u00e1genes, ahorrandonos tiempo de carga y sin perder calidad.<\/p>\n<p>Un buen dise\u00f1o visual agilizar\u00e1 tus comunicaciones y atraer\u00e1 a usuarios nuevos a tu web, no subestimes nunca su poder.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Desarrollo\"><\/span>Desarrollo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2180\" src=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10100904\/Mockups-para-diseno-web.jpg\" alt=\"Mockups para mejorar el trabajo de dise\u00f1o web\" width=\"750\" height=\"660\" srcset=\"http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10100904\/Mockups-para-diseno-web.jpg 750w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10100904\/Mockups-para-diseno-web-300x264.jpg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>El desarrollo se podr\u00eda definir como el punto en el que los desarrolladores maquetan el mockup en versi\u00f3n web. Se trata del paso en el que nos encargamos de las caracter\u00edsticas y funciones internas de la p\u00e1gina, o lo que es lo mismo, crea la parte interna de la web, como son los sistemas de funcionamiento, contenidos, base de datos, etc&#8230;<\/p>\n<p>En este punto se deber\u00e1 seleccionar el sistema de gesti\u00f3n de contenidos (CMS) eligiendo el m\u00e1s apropiado para nuestro proyecto.<\/p>\n<p>Los lenguajes de programaci\u00f3n m\u00e1s usados son ASP, JavaScript, XML y SQL, aunque con los nuevos requerimientos de programaci\u00f3n se est\u00e1n empezando a desarrollar nuevas herramientas de programaci\u00f3n. Sobre esto, tambi\u00e9n debe aclararse\u00a0que algunas herramientas de superposici\u00f3n son usadas tanto como por los dise\u00f1adores como los desarrolladores en formatos HTML y CSS.<\/p>\n<p>Entre los sistemas de gesti\u00f3n de base de datos, destaca sin duda MySQL, seguida de cerca por Oracle, SQL Server y PostgreSQL. Otras opciones v\u00e1lidas son Firebird o HSQL.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Pruebas\"><\/span><strong>Pruebas<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2181\" src=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10101041\/test-de-diseno-web.jpg\" alt=\"test de dise\u00f1o web\" width=\"750\" height=\"359\" srcset=\"http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10101041\/test-de-diseno-web.jpg 750w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10101041\/test-de-diseno-web-300x144.jpg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n<p>Con ya todo el contenido montado y las im\u00e1genes ajustadas, es hora de lanzarnos con las pruebas en la web.<\/p>\n<p>Es importante que se pruebe a fondo cada una de las p\u00e1ginas que daremos de alta, asegur\u00e1ndonos de que todos los enlaces funcionen correctamente, as\u00ed como corroborar que la carga de la web se ejecuta correctamente en todos los diferentes dispositivos y navegadores que existen.<\/p>\n<p>Es muy com\u00fan localizar errores en esta fase. De hecho, lo preocupante es cuando no se encuentra ninguno, pues suele ser un s\u00edntoma de que algo se ha pasado por alto. Estos errores normalmente son resultado de peque\u00f1os errores de codificaci\u00f3n, los cuales son complicados de localizar y corregir, pero mejor hacerlo ahora que presentar una web defectuosa al p\u00fablico\u2026<\/p>\n<p>Para esta funci\u00f3n existen algunas herramientas que nos pueden facilitar el proceso de testeo, tales como SEO Spider de Screaming Frog, la cual se usa para revisar e identificar las fallas que perjudican su desempe\u00f1o en los motores de b\u00fasqueda. Esto puede ahorrar mucho tiempo dado que la revisi\u00f3n manual p\u00e1gina a p\u00e1gina puede hacerse muy tedioso.<\/p>\n<p>No olvides revisar muy bien todos los metat\u00edtulos y descripciones de cada p\u00e1gina, y recuerda que incluso el mismo orden de las palabras tiene su importancia, pudiendo afectar al rendimiento de nuestra web en los motores de b\u00fasqueda.<\/p>\n<p>Otras herramientas que pueden ser de utilidad a la hora de analizar nuestra web son SEMRush y SiteAnalyzer, ambos con sus propias caracter\u00edsticas pero ambos \u00fatiles a la hora de ahorrarnos tiempo en el an\u00e1lisis de la web.<\/p>\n\n<h2><span class=\"ez-toc-section\" id=\"Lanzamiento\"><\/span><strong>Lanzamiento<\/strong><strong>\u00a0<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Cuando por fin lo tenemos todo preparado y presentable, y nos hemos asegurado de que toda p\u00e1gina funciona como es debido, toca pasar al punto que todo dise\u00f1ador web prefiere, el lanzamiento.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-2182\" src=\"https:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10101736\/Checklist-para-el-lanzamiento-de-sitios-web.jpg\" alt=\"\" width=\"750\" height=\"574\" srcset=\"http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10101736\/Checklist-para-el-lanzamiento-de-sitios-web.jpg 750w, http:\/\/cdn.marketerosagencia.com\/wp-content\/uploads\/2020\/02\/10101736\/Checklist-para-el-lanzamiento-de-sitios-web-300x230.jpg 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/p>\n\n<p>Un error com\u00fan es caer en la desesperaci\u00f3n cuando se ha lanzado la web y se localiza alg\u00fan error que se haya logrado colar sin ser visto durante la etapa de testeo. No debes esperar la perfecci\u00f3n, al menos no de primeras, pues es bastante habitual encontrarse con elementos que necesiten ser reparado.<\/p>\n<p>Y es que el dise\u00f1o de una p\u00e1gina web es un proceso continuo y fluido que requiere de un mantenimiento constante para funcionar de manera \u00f3ptima.<\/p>\n<p>El dise\u00f1o web, as\u00ed como cualquier dise\u00f1o de cualquier tipo, debe tratar de encontrar siempre un cierto equilibrio entre la funci\u00f3n que desempe\u00f1a y la forma en la que transmite su mensaje.<\/p>\n<p>\u00bfQu\u00e9 significa esto? Pues que a la hora de dise\u00f1ar una web debe tenerse en cuenta la utilizaci\u00f3n de formatos diferentes tales como las fuentes o los colores de fondo, pero sin olvidar que la experiencia de usuario de la gente que navega y experimenta en tu web es igual de importante.<\/p>\n<p>Todo dise\u00f1ador que se precie siempre tendr\u00e1 en cuenta estos puntos, siendo capaz de crear una web que mantenga el equilibrio entre ambos.<\/p>\n<p>Para terminar, algo que debemos tener muy presente es que, aunque la web ya est\u00e9 dada de alta, el trabajo de un dise\u00f1ador no acaba ah\u00ed ni de lejos&#8230;<\/p>\n<p>\u00a1Lo bonito de esta profesi\u00f3n es precisamente que nunca est\u00e1 terminada!<\/p>\n<p>Siempre podremos ejecutar nuevas pruebas a usuarios en contenidos nuevos, as\u00ed como monitorear nuestros an\u00e1lisis y refinar el mensaje que estamos mandando al usuario.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion_y_despedida\"><\/span><strong>Conclusi\u00f3n y despedida<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Hasta aqu\u00ed nuestra gu\u00eda paso a paso con todos los <a title=\"Elementos indispensables para un buen dise\u00f1o web\" href=\"https:\/\/www.marketerosagencia.com\/blog\/diseno-web\/elementos-diseno-web\/\">elementos del dise\u00f1o de una p\u00e1gina web<\/a>.<\/p>\n<p>Si has llegado hasta aqu\u00ed, estar\u00e1s de acuerdo conmigo en que se trata de un proceso complejo que en algunos momentos puede parecer que nos supera. Pero nada m\u00e1s lejos de la realidad, pues lo cierto es que precisamente gracias a la categorizaci\u00f3n de cada paso a realizar podremos disfrutar de un producto final de much\u00edsima m\u00e1s calidad que los proyectos lanzados de manera an\u00e1rquica, sin un claro proceso de realizaci\u00f3n.<\/p>\n<p>Esperamos que esta gu\u00eda te haya sido de utilidad y recuerda, en el blog de Marketeros Agencia podr\u00e1s encontrar toda la informaci\u00f3n relevante tanto al mundillo del dise\u00f1o web, como en el Posicionamiento SEO o el Inbound Marketing.<\/p>\n<p>No dudes en dejarnos tus dudas, ser\u00e1 un placer atenderlas.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Es muy com\u00fan entre los dise\u00f1adores pensar que el proceso de dise\u00f1o web se enfoque exclusivamente en asuntos t\u00e9cnicos, tales como wireframes, la gesti\u00f3n de contenido y el c\u00f3digo. Y es que el camino para lograr un dise\u00f1o \u00f3ptimo no trata sobre la integraci\u00f3n de redes sociales, ni siquiera de im\u00e1genes visuales. En realidad, un [&hellip;]<\/p>\n","protected":false},"author":26,"featured_media":2184,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_lock_modified_date":false,"footnotes":""},"categories":[9],"tags":[],"class_list":["post-2164","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web"],"acf":[],"_links":{"self":[{"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/posts\/2164"}],"collection":[{"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/comments?post=2164"}],"version-history":[{"count":6,"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/posts\/2164\/revisions"}],"predecessor-version":[{"id":5554,"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/posts\/2164\/revisions\/5554"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/media\/2184"}],"wp:attachment":[{"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/media?parent=2164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/categories?post=2164"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.marketerosagencia.com\/blog\/wp-json\/wp\/v2\/tags?post=2164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}