El dise\u00f1o de sitios web es el proceso de reflejar la identidad corporativa de una marca en interfaces digitales como p\u00e1ginas web, aplicaciones web y\/o servicios digitales, a los que los usuarios acceder\u00e1n desde dispositivos electr\u00f3nicos como ordenadores, tabletas y m\u00f3viles.<\/p>\n
Estas interfaces se crear con lenguajes de programaci\u00f3n. Estos son los m\u00e1s comunes:<\/p>\n
- \n
- HTML<\/strong> para integrar los contenidos dentro de la interfaz de usuario<\/li>\n
- CSS<\/strong> para estandarizar sus elementos visuales<\/li>\n
- PHP<\/strong>, Perl o similar para gestionar la base de datos que conecta las p\u00e1ginas web con su contenido<\/li>\n<\/ul>\n
El dise\u00f1o de sitios web moderno es un proceso de cierta complejidad, que se subdivide en las siguientes \u00e1reas o enfoques interrelacionados entre s\u00ed. Los dise\u00f1adores web pueden estar especializados en alguna de ellas.<\/p>\n
Dise\u00f1o web b\u00e1sico<\/h3>\n
Consiste en dar a la p\u00e1gina un aspecto visual coherente con la identidad corporativa de la marca y agradable para el visitante. Un dise\u00f1o de sitios web eficaz debe cuidar la jerarquizaci\u00f3n de la informaci\u00f3n, buscar im\u00e1genes adecuadas, asegurar un buen equilibrio entre imagen y texto, etc.<\/p>\n
Dise\u00f1o de interfaces<\/h3>\n
Es el dise\u00f1o de los elementos del sitio web con los que el usuario podr\u00e1 interactuar durante su visita. Un buen ejemplo son los formularios, pero el dise\u00f1o de interfaces abarca casi todo el sitio web: los men\u00fas de navegaci\u00f3n, enlaces, descargas, etc. tambi\u00e9n son interfaces.<\/p>\n
Adem\u00e1s de la calidad visual de un dise\u00f1o web b\u00e1sico, el dise\u00f1o de interfaces debe priorizar la funcionalidad<\/strong>. Todas las interfaces deben ser simples, intuitivas y adaptadas a las particularidades del p\u00fablico objetivo.<\/p>\n
![\"Dise\u00f1o](\"\/es\/wp-content\/uploads\/sites\/2\/2021\/12\/Ventana-emergente-de-Webolto-2.png\")
<\/p>\nPosicionamiento SEO<\/h3>\n
Otro elemento b\u00e1sico que debe tenerse siempre en cuenta en el dise\u00f1o de sitios web es el posicionamiento en buscadores como Google. Es un \u00e1rea de trabajo bastante transversal, que est\u00e1 influenciada por muchos elementos del dise\u00f1o de sitios web que vamos a ver en la siguiente secci\u00f3n.<\/p>\n
El contenido es el aspecto principal para un buen posicionamiento\u00a0SEO<\/a><\/strong>, pero tambi\u00e9n son cruciales otros aspectos como la adaptabilidad a dispositivos m\u00f3viles o el tiempo de carga del sitio web.<\/p>\n
<\/a>Elementos de un dise\u00f1o de sitios web eficaz<\/h2>\n
En esta secci\u00f3n, vamos a ver los principales elementos que debes tener en cuenta a la hora de dise\u00f1ar un sitio web eficaz para transmitir el mensaje de tu marca. Usarlos correctamente te ser\u00e1 un primer paso para atraer nuevos contactos y, posteriormente, conseguir convertirlos en clientes y fidelizarlos como tales.<\/p>\n
Identidad visual<\/h3>\n
El dise\u00f1o de un sitio web siempre se apoya sobre unos principios de identidad visual de la marca, que deben estar definidos previamente y no solo estar\u00e1n presentes en el sitio web, sino tambi\u00e9n en otros soportes de comunicaci\u00f3n, como pueden ser las redes sociales, los correos electr\u00f3nicos o las presentaciones en eventos. Los principales componentes de esta identidad visual son los colores corporativos y el logo.<\/p>\n
Una vez construidos \u00ablos cimientos de la casa\u00bb, el dise\u00f1o de sitios web debe reflejarlos con armon\u00eda y simplicidad, eligiendo im\u00e1genes pertinentes con la imagen corporativa y cuidando el equilibrio entre imagen y texto.<\/p>\n
\n<\/i>\u00bfNecesitas ayuda con la identidad visual y corporativa de tu marca?<\/span><\/p>\n
Como paso previo al dise\u00f1o de sitios web, te recomendamos definir bien la identidad corporativa de la marca, que ser\u00e1 la base para construirlo. En estos art\u00edculos te ayudamos:<\/p>\n
- \n
- 21 buenos ejemplos de identidad visual corporativa<\/a><\/li>\n
- Gu\u00eda completa para encontrar un nombre de empresa original<\/a><\/li>\n
- Aprende a elegir los colores de tu sitio web: impacto psicol\u00f3gico y ejemplos<\/a><\/li>\n
- \u00bfCu\u00e1nto cuesta crear un logo?<\/a><\/li>\n<\/ul>\n<\/div>\n
Usabilidad<\/h3>\n
Un t\u00e9rmino que suena un poco t\u00e9cnico y significa que el sitio web debe ser f\u00e1cil de utilizar por todos los potenciales visitantes. Con un buen dise\u00f1o de sitios web, encontrar\u00e1n la informaci\u00f3n que buscan o realizar\u00e1n la acci\u00f3n que desean al primer intento<\/strong>. Algunos ejemplos frecuentes son:<\/p>\n
- \n
- Contactar con la empresa<\/li>\n
- Saber si la empresa tiene una ubicaci\u00f3n f\u00edsica<\/li>\n
- Conocer datos b\u00e1sicos de la empresa, como el n\u00famero de empleados<\/li>\n
- Encontrar un producto espec\u00edfico que la empresa vende<\/li>\n<\/ul>\n
La p\u00e1gina principal o homepage<\/strong><\/a> es un elemento crucial para la usabilidad web, porque sirve como referencia para orientarse y articula la navegaci\u00f3n por el resto del sitio.<\/p>\n
El sitio web de la tienda online de bricolaje Bauhaus<\/a> es un ejemplo de usabilidad web que podemos destacar. En su p\u00e1gina de inicio, incluye un buscador interno con un gran protagonismo. Seguramente han comprobado que la mayor\u00eda de sus visitantes ya tienen una idea del producto que buscan cuando visitan su sitio web. Por tanto, es importante que lo puedan encontrar de la forma m\u00e1s sencilla y r\u00e1pida posible.<\/p>\n
![\"Dise\u00f1o](\"\/es\/wp-content\/uploads\/sites\/2\/2021\/05\/Bauhaus_busqueda-interna-min-1024x474.png\")
<\/p>\nUna herramienta que puede ayudar mucho a medir la usabilidad son las pruebas\u00a0A\/B, que consisten en crear dos versiones similares de una p\u00e1gina web cambiando solo los elementos que quieres poner a prueba. Al cabo de un tiempo, se analiza cu\u00e1l da mejores resultados. Este m\u00e9todo la aplica a\u00a0menudo a las landing pages<\/em><\/strong><\/a>, aunque en el dise\u00f1o de sitios web generalistas puede ser m\u00e1s complicado.<\/p>\n
Legibilidad<\/h3>\n
Est\u00e1 vinculada con la usabilidad, pero hace referencia a la facilidad para leer los contenidos del sitio web. Esto implica usar una tipograf\u00eda f\u00e1cil de leer, un color de texto que tenga un buen contraste con el color de fondo, recuadros para destacar contenido importante, etc.<\/p>\n
Una tendencia para favorecer la legibilidad en el dise\u00f1o de sitios web es el principio \u00abmenos es\u00a0m\u00e1s\u00bb. A menudo, los mensajes breves y sencillos son los que mejores resultados generan.<\/p>\n
Velocidad de carga<\/h3>\n
Como regla general, el tiempo de carga de una p\u00e1gina web no debe superar los 3\u00a0segundos con una conexi\u00f3n a Internet de calidad aceptable. En caso contrario, no estar\u00e1 optimizado y tendr\u00e1 como consecuencia:<\/p>\n
- \n
- Un aumento de la tasa de rebote; es decir, de los visitantes del sitio web que se van sin llegar a visitarlo.<\/li>\n
- Una penalizaci\u00f3n en el posicionamiento SEO.<\/li>\n<\/ul>\n
Algunos de los factores que influyen en la optimizaci\u00f3n de la velocidad de carga de un sitio web son un hosting o alojamiento web<\/strong><\/a> de calidad y el tama\u00f1o de los archivos multimedia (fotograf\u00edas, v\u00eddeos, etc.) que incluyes en las p\u00e1ginas web de tu sitio.<\/p>\n
- \n
- Para las im\u00e1genes<\/strong>, debes cuidar que tengan una resoluci\u00f3n \u00f3ptima para publicar en la web<\/strong><\/a>, menor que la de las im\u00e1genes que se imprimen.<\/li>\n
- En el caso de los v\u00eddeos<\/strong>, lo mejor suele ser alojarlos en un sitio web externo como YouTube o Vimeo e integrarlos en el sitio web con el c\u00f3digo facilitado por estas mismas plataformas.<\/li>\n<\/ul>\n
Puedes medir la velocidad de carga de una p\u00e1gina web con herramientas como PageSpeed Insights<\/strong><\/a> y Pingdom Website Speed Test<\/strong><\/a>.<\/p>\n
![\"Velocidad](\"\/es\/wp-content\/uploads\/sites\/2\/2021\/12\/PageSpeed-Insights-1024x802.jpg\")
<\/p>\nContenido<\/h3>\n
Dicen que es \u00abel rey\u00bb del sitio web y por algo ser\u00e1. De nada servir\u00e1 que los dem\u00e1s elementos del sitio web funcionen bien y que tenga un dise\u00f1o vistoso si el contenido que se encuentra el visitante en el sitio web no le aporta ning\u00fan valor, \u00bfverdad?<\/p>\n
El contenido de todo sitio web debe centrarse en lo siguiente:<\/p>\n
- \n
- Informaci\u00f3n b\u00e1sica<\/strong> sobre la marca (ubicaci\u00f3n, valores corporativos, qu\u00e9 productos o servicios ofrece…)<\/li>\n
- Qu\u00e9 beneficios<\/strong> ofrece para el consumidor (precios, descuentos, calidad, servicios extra…)<\/li>\n
- C\u00f3mo puede el visitante pasar a la acci\u00f3n<\/strong> para avanzar hacia la conversi\u00f3n en cliente (contactar, compra en l\u00ednea, solicitar una cita…)<\/li>\n<\/ul>\n
Esto se aplica a cualquier sitio web, aunque sea una web de presentaci\u00f3n o un sitio web vitrina sencillo.<\/p>\n
Las empresas que pueden invertir m\u00e1s (tiempo o dinero) en los contenidos de su sitio web trazar\u00e1n una estrategia de marketing de contenidos, que no debe girar \u00fanicamente en torno a la venta. Se basa en generar contenido de utilidad que genere inter\u00e9s entre los visitantes<\/strong>. De esta forma, la marca consigue posicionarse poco a\u00a0poco como referente en el sector. La secci\u00f3n \u00abBlog\u00bb del sitio web suele ser la que mejor refleja este tipo de estrategias.<\/p>\n
![\"Dise\u00f1o](\"\/es\/wp-content\/uploads\/sites\/2\/2021\/12\/Santafixie-blog-1024x451.jpg\")
<\/p>\nAdaptabilidad a dispositivos m\u00f3viles<\/h3>\n
Desde aproximadamente 2017, el tr\u00e1fico web desde dispositivos m\u00f3viles ya es m\u00e1s de la mitad del tr\u00e1fico web global. La cifra alcanza casi el 55\u00a0% en los meses finales de 2021, seg\u00fan Statista<\/strong><\/a>. Por tanto, es muy importante que el dise\u00f1o de sitios web est\u00e9 optimizado para m\u00f3viles. Esto implica que todos los elementos anteriores deben estar optimizados para m\u00f3viles.<\/p>\n
Hay dos tipos de dise\u00f1o web seg\u00fan su adaptabilidad a m\u00f3viles:<\/p>\n
- \n
- El dise\u00f1o web responsivo (responsive<\/em>)<\/strong> permite que las p\u00e1ginas web se adapten autom\u00e1ticamente a pantallas de distintos dispositivos. Es la tendencia m\u00e1s popular en la actualidad.<\/li>\n
- El dise\u00f1o web adaptativo<\/strong> crea varias versiones de las p\u00e1ginas web, y se muestra una u otra seg\u00fan el dispositivo que use el visitante. Con este dise\u00f1o, el sitio web m\u00f3vil podr\u00eda ser completamente distintos del que se visualiza desde un orfenador.<\/li>\n<\/ul>\n
<\/a>C\u00f3mo llevar a cabo el dise\u00f1o de un sitio web<\/h2>\n
Un dise\u00f1o de sitios web eficaz es una ventaja competitiva para pr\u00e1cticamente cualquier empresa. Se trata de un proceso flexible que se adapta a distintos objetivos e inversiones. Una vez que tienes una idea sobre la identidad corporativa que quieres reflejar y los objetivos de tu sitio web<\/strong><\/a> en relaci\u00f3n con ella, puedes ponerte a pensar qu\u00e9 tipo de sitio web quieres dise\u00f1ar y ponerte manos a la obra.<\/p>\n
Hay dos formas principales de llevar a cabo el dise\u00f1o de un sitio web: en solitario o con la ayuda de uno o varios profesionales.<\/p>\n
Do it yourself<\/em>: utilizar un programa de dise\u00f1o asistido de sitios web<\/h3>\n
El dise\u00f1o de sitios web es una t\u00e9cnica que se ha democratizado considerablemente en los \u00faltimos a\u00f1os. Han surgido m\u00faltiples plataformas de creaci\u00f3n asistida que permiten crear un sitio web a quienes no tienen conocimientos de experto en dise\u00f1o web. Estos programas permiten crear el sitio web completo sin usar c\u00f3digo de programaci\u00f3n, subirlo a un servidor web y ponerlo autom\u00e1ticamente en l\u00ednea para que lo puedan visitar.<\/p>\n
El proceso de dise\u00f1o de un sitio web var\u00eda seg\u00fan el programa concreto que elijas, pero hay una serie de etapas que son comunes en pr\u00e1cticamente todas las plataformas.<\/p>\n
- \n
- Crear una cuenta<\/strong> de usuario.<\/li>\n
- Elegir una plantilla o tema<\/strong> que usar\u00e1s como base para el dise\u00f1o web. En general, estas plantillas est\u00e1n agrupadas por sectores para facilitar la b\u00fasqueda.
\n![\"Dise\u00f1o](\"\/es\/wp-content\/uploads\/sites\/2\/2020\/02\/Site123-p\u00e1gina-de-plantillas-1024x481.jpg\")
<\/li>\n- Editar la plantilla hasta que quede a tu gusto en un editor de \u00abarrastrar y\u00a0soltar\u00bb<\/strong>. Con el rat\u00f3n, colocas cada elemento del sitio web (texto, im\u00e1genes, enlaces, galer\u00edas, recuadros, botones, etc.) donde te interesa y lo visualizas directamente como lo ver\u00eda el usuario final. De esta forma, se construyen las p\u00e1ginas web del sitio web sin introducir c\u00f3digo de programaci\u00f3n.<\/li>\n
- Configurar el \u00e1rbol web<\/strong><\/a> con las p\u00e1ginas web que componen el sitio y su jerarquizaci\u00f3n.<\/li>\n
- A\u00f1adir aplicaciones<\/strong> con recursos adicionales. Por ejemplo: feed<\/em> de redes sociales, rese\u00f1as de clientes, etc. Estas aplicaciones pueden ser gratuitas o de pago.<\/li>\n
- Publicar<\/strong> el sitio web y actualizarlo cuando consideres preciso.<\/li>\n<\/ol>\n
Cu\u00e1nto cuesta dise\u00f1ar un sitio web con un programa asistido<\/h4>\n
Estos programas de dise\u00f1o asistido de sitios web se pagan con una suscripci\u00f3n mensual. Casi todos disponen de una versi\u00f3n gratuita, pero presenta limitaciones como no disponer de un nombre de dominio propio<\/a><\/strong> (sino uno de tipo http:\/\/sitioweb.wix.com<\/a>).<\/p>\n
Los planes de pago m\u00e1s baratos suelen comenzar en torno a los 8\u00a0\u20ac al mes, o 15\u00a0\u20ac al mes para comercio electr\u00f3nico. A partir de ah\u00ed, cada plataforma ofrece sus suscripciones con distintos niveles de prestaciones.<\/p>\n
En la siguiente tabla, puedes encontrar una presentaci\u00f3n de los principales programas de dise\u00f1o asistido de sitios web. Para ampliar la informaci\u00f3n, te invitamos a consultar nuestra comparaci\u00f3n de los mejores programas<\/strong><\/a>\u00a0de dise\u00f1o de sitios web, que incluye enlaces al an\u00e1lisis pormenorizado de cada uno de ellos.<\/p>\n
- Elegir una plantilla o tema<\/strong> que usar\u00e1s como base para el dise\u00f1o web. En general, estas plantillas est\u00e1n agrupadas por sectores para facilitar la b\u00fasqueda.
- El dise\u00f1o web adaptativo<\/strong> crea varias versiones de las p\u00e1ginas web, y se muestra una u otra seg\u00fan el dispositivo que use el visitante. Con este dise\u00f1o, el sitio web m\u00f3vil podr\u00eda ser completamente distintos del que se visualiza desde un orfenador.<\/li>\n<\/ul>\n
- Qu\u00e9 beneficios<\/strong> ofrece para el consumidor (precios, descuentos, calidad, servicios extra…)<\/li>\n
- En el caso de los v\u00eddeos<\/strong>, lo mejor suele ser alojarlos en un sitio web externo como YouTube o Vimeo e integrarlos en el sitio web con el c\u00f3digo facilitado por estas mismas plataformas.<\/li>\n<\/ul>\n
- Para las im\u00e1genes<\/strong>, debes cuidar que tengan una resoluci\u00f3n \u00f3ptima para publicar en la web<\/strong><\/a>, menor que la de las im\u00e1genes que se imprimen.<\/li>\n
- Gu\u00eda completa para encontrar un nombre de empresa original<\/a><\/li>\n
- CSS<\/strong> para estandarizar sus elementos visuales<\/li>\n
![\"\"](\"\/es\/wp-content\/uploads\/sites\/2\/2020\/05\/wix-logo.png\"){kind=logo}
<\/th>\n![\"\"](\"\/es\/wp-content\/uploads\/sites\/2\/2021\/02\/Jimdo-logo-2021.png\"){kind=logo}
<\/th>\n![\"\"](\"\/es\/wp-content\/uploads\/sites\/2\/2020\/08\/SiteW-logo2.png\"){kind=logo}
<\/th>\n![\"\"](\"\/es\/wp-content\/uploads\/sites\/2\/2021\/02\/site123_logo-removebg.png\"){kind=logo}
<\/th>\n![\"\"](\"\/es\/wp-content\/uploads\/sites\/2\/2021\/02\/weebly_logo-removebg.png\"){kind=logo}
<\/th>\n<\/tr>\n<\/thead>\n![\"Dise\u00f1o](\"\/es\/wp-content\/uploads\/sites\/2\/2021\/12\/Formulario-UX.jpg\")
<\/p>\n