{"id":3648,"date":"2017-07-19T11:00:35","date_gmt":"2017-07-19T09:00:35","guid":{"rendered":"https:\/\/blog.ensalza.com\/?p=3648"},"modified":"2022-05-13T08:58:59","modified_gmt":"2022-05-13T06:58:59","slug":"diseno-web-la-pagina-de-inicio","status":"publish","type":"post","link":"https:\/\/www.ensalza.com\/blog\/diseno-web-la-pagina-de-inicio\/","title":{"rendered":"Dise\u00f1o web: anatom\u00eda de una p\u00e1gina de inicio perfecta"},"content":{"rendered":"

\u00a1Hola a todo aquel que nos lea!<\/p>\n

Hoy vengo a hablaros de dise\u00f1o web, concretamente de la home<\/em> de una p\u00e1gina web<\/strong> y de los elementos fundamentales que debe o no incluir. Muchas veces los clientes en las reuniones nos dicen que quieren que est\u00e9 todo en la p\u00e1gina de inicio, que haya much\u00edsimas fotos, que haya much\u00edsimo texto explicando sus servicios… \u00a1FRENO PLEASE! Esta p\u00e1gina es la m\u00e1s importante de tooooooooodo tu site, <\/em>pero no por ello debe incluir todo tu contenido y convertirse en un monstruo.<\/p>\n

D\u00e9jate aconsejar, escucha a primero los consejos de los profesionales y f\u00edate de su criterio (para ello debes ponerte en buenas manos claro). Si despu\u00e9s de hacerles caso, poner la web en producci\u00f3n y medir los resultados,<\/strong> \u00e9sta no funciona como esperabas, s\u00ed ser\u00e1 el momento de aportar y opinar, no antes.<\/p>\n

No me entiendas mal, no es que no me f\u00ede de tu criterio, pero suele ser buena idea ponerse en manos de profesionales cuando no conocemos un sector. Todo tiene su ciencia y el dise\u00f1o web no es una excepci\u00f3n.<\/p>\n

\u00bfEmpezamos?<\/p>\n

Dise\u00f1o web: la home o p\u00e1gina de inicio<\/h2>\n

La p\u00e1gina de inicio de una web puede ser de mil maneras diferentes, pero para no volvernos locos, aqu\u00ed te planteo la estructura de una\u00a0‘home tipo<\/em>‘ dividi\u00e9ndola en tres zonas:<\/p>\n

    \n
  • La primera parte de la home es la parte dedicada a tu\u00a0propia marca.<\/strong><\/li>\n
  • La segunda zona es la parte donde muestras cu\u00e1les son los servicios<\/strong> que ofrece tu empresa.<\/li>\n
  • Por \u00faltimo, en tercer lugar la parte m\u00e1s variable<\/strong> de tu sitio donde mostraremos elementos como blog, mapa, redes sociales o testimonios, por ejemplo.<\/li>\n<\/ul>\n

    Vamos a ver cada una de ellas por separado:<\/p>\n

    ZONA 1: MUESTRA AL USUARIO QUI\u00c9N ERES Y QU\u00c9 TE HACE TAN ESPECIAL<\/h3>\n

    Cuando un usuario llegue a tu web por primera vez debe saber en m\u00e1ximo tres segundos a qu\u00e9 te dedicas<\/strong>.<\/p>\n

    El mercado est\u00e1 lleno de competencia y saber diferenciarte y definirte en cuesti\u00f3n de segundos es esencial para ganar o perder clientes. Por ello, cuando hablamos del dise\u00f1o de la p\u00e1gina de inicio es fundamental seguir el esquema de la pir\u00e1mide invertida<\/strong>, colocando los elementos m\u00e1s importantes en la parte de arriba y lo menos relevante debajo.<\/p>\n

    \"p\u00e1gina<\/p>\n

    \u00bfQu\u00e9 elementos incluir en esta secci\u00f3n?<\/h4>\n
    Slider<\/h5>\n

    Para conseguir impactar al usuario a\u00f1ade un slider o imagen principal<\/strong> que defina tu negocio y un texto que describa qu\u00e9 beneficio va a ganar el usuario si te compra a ti.<\/p>\n

    Esto es lo primero que ver\u00e1n los usuarios al ‘caer’ en tu web y la parte de tu sitio que seguramente m\u00e1s visitas reciba. Cu\u00eddala, m\u00edmala y ded\u00edcale el tiempo que necesites para dejarla fet\u00e9n.<\/strong><\/p>\n

    Logotipo<\/h5>\n

    Esto es de caj\u00f3n, pero nunca se sabe…<\/p>\n

    A\u00f1ade el logotipo de tu marca<\/strong>. Generalmente se coloca en la parte superior izquierda de la pantalla ya que numerosos estudios de eyetracking<\/em> demuestran que es una de las zonas m\u00e1s calientes de las p\u00e1ginas web, acumulando mucho m\u00e1s tiempo de visionado que otras partes de una misma p\u00e1gina.<\/p>\n

    El logotipo debe verse claro, subirlo en PNG<\/a> para que tenga mayor calidad y, si es posible, sobre un fondo transparente. No hace falta que sea de un tama\u00f1o gigantesco. De hecho, si ocupa demasiado espacio puede que no quede muy bien maquetado y se ver\u00e1 bastante mal en la versi\u00f3n m\u00f3vil.<\/p>\n

    Puedes jugar con \u00e9l, escondi\u00e9ndolo cuando el usuario haga scroll, por ejemplo, o reduciendo su tama\u00f1o al bajar y aumentarlo al subir. Pero ante todo aseg\u00farate de que al visitante \u00able llega\u00bb. Es tu marca y no puedes permitirte el lujo de no impactar con ella al usuario.<\/p>\n

    Men\u00fa<\/h5>\n

    Otro aspecto importante de esta secci\u00f3n es el men\u00fa, <\/strong>que\u00a0<\/strong>aunque sea com\u00fan en todas las p\u00e1ginas, donde suele verse por primera vez es en la home<\/em>.<\/p>\n

    Hay distintos tipos de men\u00fa: el que permanece fijo, el que se esconde al hacer scroll, el de hamburguesa<\/a>… A mi personalmente me parece mucho m\u00e1s intuitivo para el usuario el men\u00fa cl\u00e1sico de toda la vida.<\/p>\n

    Unas 5 o 6 pesta\u00f1as son suficientes para resumir tu negocio y facilitarte la vida a la persona que llegue a visitarte: inicio, servicios, qui\u00e9nes somos<\/a>, contacto, blog… \u00a1Y poco m\u00e1s!<\/p>\n

    Si necesitaras a\u00f1adir m\u00e1s pesta\u00f1as puedes crear men\u00fas desplegables para agrupar la informaci\u00f3n y evitar que el men\u00fa quede demasiado largo. Adem\u00e1s de que podemos provocar que el usuario se frustre y se marche de nuestra web, un men\u00fa demasiado largo resulta cargante est\u00e9ticamente. El men\u00fa, cuanto m\u00e1s corto y directo mejor.<\/strong><\/p>\n

    Caja de B\u00fasqueda<\/h5>\n

    Algunos clientes nos piden por defecto a\u00f1adir una caja de b\u00fasqueda<\/strong> en su web… pero, \u00bfes necesario?<\/p>\n

    No nos liemos: si tienes una tienda online con 3.000 productos, o una cantidad gigante de servicios (y tu buscador funciona bien) adelante, a\u00f1ade la caja.<\/p>\n

    Si tu empresa ofrece 4 servicios no tiene sentido a\u00f1adir la caja de b\u00fasqueda, si no consigues que el usuario los encuentre f\u00e1cilmente es que algo has hecho mal…<\/p>\n

    Datos de Contacto<\/h5>\n

    Es muy importante a\u00f1adir bien visibles los datos de contacto<\/strong> en la propia p\u00e1gina de inicio.<\/p>\n

    Ten en cuenta que quien visita tu web es posible que precisamente este buscando nuestro tel\u00e9fono o email. D\u00e9jalo claro en un primer vistazo para evitar que el usuario se vuelva loco si quiere contactar contigo f\u00e1cilmente.<\/p>\n

    Adem\u00e1s, en el caso de los smartphones, el n\u00famero de tel\u00e9fono es clicable, por lo que ser\u00e1 muy sencillo para el usuario contactar contigo y llamarte.<\/p>\n

    Favicon<\/h5>\n

    Por \u00faltimo, un elemento que muchas veces he visto que las p\u00e1ginas web dejan de lado es el favicon<\/strong> (que te cuento aqu\u00ed qu\u00e9 es por si no lo sabes<\/a>).<\/p>\n

    No s\u00e9 t\u00fa, pero yo cuando me quiero dar cuenta tengo m\u00e1s de 15 pesta\u00f1as abiertas \u00a1por navegador! Unas tantas en Chrome en inc\u00f3gnito, otras cientos en Chrome ‘normal’, mi Twitter en Firefox con los \u00faltimos art\u00edculos pendientes de leer… En total, cientos de pesta\u00f1as abiertas que siempre identifico r\u00e1pidamente gracias al favicon.<\/p>\n

    Conclusi\u00f3n: \u00a1pon el tuyo!<\/strong>
    \nVamos a ver dos ejemplos<\/strong> de p\u00e1ginas web que hemos hecho en Ensalza que se ajustan a lo que comento m\u00e1s arriba.<\/p>\n

    Por un lado vemos en esta imagen la web de Apartamentos Madrid Plaza<\/strong>. Estos apartamentos est\u00e1n especialmente orientados a pasar largas estancias en ellos<\/strong>. Nuestro cliente, en cierta manera, \u00abhuye\u00bb de las estancias de un par de d\u00edas ya que todo est\u00e1 enfocado a que los clientes est\u00e9n alojados al menos un par de semanas.<\/p>\n

    \"p\u00e1gina<\/p>\n

    Se ha cuidado que el copy exprese exactamente lo que queremos: \u00abBienvenido a su casa, p\u00f3ngase c\u00f3modo\u00bb. La primera imagen que muestra el slider refleja lo que queremos que sientan los clientes y es comodidad y confort en los apartamentos.<\/p>\n

    Vemos tambi\u00e9n el logotipo en la parte superior izquierda<\/strong>, el men\u00fa sencillo y el tel\u00e9fono para contactar con ellos.<\/p>\n

    Antes de mostrar el siguiente ejemplo voy a hacer un peque\u00f1o iniciso para…\u00a1ABRIR UN DEBATE!<\/p>\n