19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

 

Diseño web: anatomía de una página de inicio

perfecta

¡Hola a todo aquel que nos lea!

Hoy vengo a hablaros de diseño web, concretamente de la home de una página web y
de los elementos fundamentales que debe o no incluir. Muchas veces los clientes en las
reuniones nos dicen que quieren que esté todo en la página de inicio, que haya
muchísimas fotos, que haya muchísimo texto explicando sus servicios… ¡FRENO PLEASE!
Esta página es la más importante de tooooooooodo tu site, pero no por ello debe incluir
todo tu contenido y convertirse en un monstruo.

Déjate aconsejar, escucha a primero los consejos de los profesionales y fíate de su

criterio (para ello debes ponerte en buenas manos claro). Si después de hacerles caso,
poner la web en producción y medir los resultados, ésta no funciona como esperabas,
sí será el momento de aportar y opinar, no antes.

No me entiendas mal, no es que no me fíe 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ño web no es una excepción.

¿Empezamos?

Diseño web: la home o página de inicio

La página de inicio de una web puede ser de mil maneras diferentes, pero para no
volvernos locos, aquí te planteo la estructura de una ‘home tipo‘ dividiéndola en tres
zonas:

La primera parte de la home es la parte dedicada a tu propia marca.

https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 1/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

La segunda zona es la parte donde muestras cuáles son los servicios que ofrece
tu empresa.
Por último, en tercer lugar la parte más variable de tu sitio donde mostraremos
elementos como blog, mapa, redes sociales o testimonios, por ejemplo.

Vamos a ver cada una de ellas por separado:

ZONA 1: MUESTRA AL USUARIO QUIÉN ERES Y QUÉ

TE HACE TAN ESPECIAL
Cuando un usuario llegue a tu web por primera vez debe saber en máximo tres
segundos a qué te dedicas.

El mercado está lleno de competencia y saber diferenciarte y definirte en cuestión de

segundos es esencial para ganar o perder clientes. Por ello, cuando hablamos del
diseño de la página de inicio es fundamental seguir el esquema de la pirámide
invertida, colocando los elementos más importantes en la parte de arriba y lo menos
relevante debajo.

https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 2/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

¿Qué elementos incluir en esta sección?

Slider
Para conseguir impactar al usuario añade un slider o imagen principal que defina tu
negocio y un texto que describa qué beneficio va a ganar el usuario si te compra a ti.

Esto es lo primero que verán los usuarios al ‘caer’ en tu web y la parte de tu sitio que
seguramente más visitas reciba. Cuídala, mímala y dedícale el tiempo que necesites
para dejarla fetén.

Logotipo
Esto es de cajón, pero nunca se sabe…

Añade el logotipo de tu marca. Generalmente se coloca en la parte superior izquierda

de la pantalla ya que numerosos estudios de eyetracking demuestran que es una de las
zonas más calientes de las páginas web, acumulando mucho más tiempo de visionado
que otras partes de una misma página.

El logotipo debe verse claro, subirlo en PNG para que tenga mayor calidad y, si es
posible, sobre un fondo transparente. No hace falta que sea de un tamaño gigantesco.
De hecho, si ocupa demasiado espacio puede que no quede muy bien maquetado y se
verá bastante mal en la versión móvil.

Puedes jugar con él, escondiéndolo cuando el usuario haga scroll, por ejemplo, o
reduciendo su tamaño al bajar y aumentarlo al subir. Pero ante todo asegúrate de que al
visitante «le llega». Es tu marca y no puedes permitirte el lujo de no impactar con ella al
usuario.

Menú
Otro aspecto importante de esta sección es el menú, que aunque sea común en todas
las páginas, donde suele verse por primera vez es en la home.

Hay distintos tipos de menú: el que permanece fijo, el que se esconde al hacer scroll, el
de hamburguesa… A mi personalmente me parece mucho más intuitivo para el usuario el
menú clásico de toda la vida.

Unas 5 o 6 pestañas son suficientes para resumir tu negocio y facilitarte la vida a la

persona que llegue a visitarte: inicio, servicios, quiénes somos, contacto, blog… ¡Y poco
más!

https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 3/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

Si necesitaras añadir más pestañas puedes crear menús desplegables para agrupar la
información y evitar que el menú quede demasiado largo. Además de que podemos
provocar que el usuario se frustre y se marche de nuestra web, un menú demasiado
largo resulta cargante estéticamente. El menú, cuanto más corto y directo mejor.

Caja de Búsqueda
Algunos clientes nos piden por defecto añadir una caja de búsqueda en su web… pero,
¿es necesario?

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ñade la caja.

Si tu empresa ofrece 4 servicios no tiene sentido añadir la caja de búsqueda, si no

consigues que el usuario los encuentre fácilmente es que algo has hecho mal…

Datos de Contacto
Es muy importante añadir bien visibles los datos de contacto en la propia página de
inicio.

Ten en cuenta que quien visita tu web es posible que precisamente este buscando
nuestro teléfono o email. Déjalo claro en un primer vistazo para evitar que el usuario se
vuelva loco si quiere contactar contigo fácilmente.

Además, en el caso de los smartphones, el número de teléfono es clicable, por lo que

será muy sencillo para el usuario contactar contigo y llamarte.

Favicon
Por último, un elemento que muchas veces he visto que las páginas web dejan de lado
es el favicon (que te cuento aquí qué es por si no lo sabes).

No sé tú, pero yo cuando me quiero dar cuenta tengo más de 15 pestañas abiertas ¡por
navegador! Unas tantas en Chrome en incógnito, otras cientos en Chrome ‘normal’, mi
Twitter en Firefox con los últimos artículos pendientes de leer… En total, cientos de
pestañas abiertas que siempre identifico rápidamente gracias al favicon.

Conclusión: ¡pon el tuyo!

Vamos a ver dos ejemplos de páginas web que hemos hecho en Ensalza que se ajustan
a lo que comento más arriba.

https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 4/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

Por un lado vemos en esta imagen la web de Apartamentos Madrid Plaza. Estos
apartamentos están especialmente orientados a pasar largas estancias en ellos.
Nuestro cliente, en cierta manera, «huye» de las estancias de un par de días ya que todo
está enfocado a que los clientes estén alojados al menos un par de semanas.

Se ha cuidado que el copy exprese exactamente lo que queremos: «Bienvenido a su

casa, póngase cómodo». La primera imagen que muestra el slider refleja lo que
queremos que sientan los clientes y es comodidad y confort en los apartamentos.

Vemos también el logotipo en la parte superior izquierda, el menú sencillo y el teléfono

para contactar con ellos.

Antes de mostrar el siguiente ejemplo voy a hacer un pequeño iniciso para…¡ABRIR UN

DEBATE!

¿SLIDER SÍ O NO?
Me gustaría que me dejaras después un comentario con tu opinión.

https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 5/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

Mi (nuestra) respuesta directa es «slider sí pero depende«. Sabemos que este es un

debate abierto desde hace tiempo y que últimamente muchos profesionales se inclina
hacia ‘slider no’.

Sin embargo, en Ensalza pensamos que es un elemento muy interesante si se sabe

utilizar. El hecho de que haya estado tanto tiempo de moda ha hecho que algunos
diseñadores ya no sepan diseñar una página de inicio sin un slider y que otros le hayan
cogido bastante manía.

Esto, unido al auge de dispositivos móviles y la necesidad de versiones responsive de

nuestro site, ha hecho que sean muchos los que hayan desterrado este elemento de sus
páginas web principalmente por estar muy vistos y por ralentizar mucho la carga.

Sin embargo, hay casos en los que sí está justificado el uso de un rotador. En el
ejemplo que veíamos más arriba sobre Apartamentos Madrid Plaza se creó un slider
para reforzar el concepto que queremos que se lleve el usuario nada más llegar:
apartamentos para largas estancias donde sentirse cómodo en el centro de Madrid.

En conclusión, tres imágenes con tres buenos copys para que, en cuestión de
segundos, el usuario sepa qué puede hacer este negocio por él.

¿Y sabes qué?, los datos de Analytics y de otras herramientas de medición

implementadas en esta página nos dan completamente la razón. Ni te imaginas la
cantidad de usuarios que interactuan con los rotadores de imágenes.

https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 6/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

Sin embargo, como comentaba antes, esto no es una verdad absoluta.

Clic para tuitear

¡TU OPINIÓN IMPORTA! ➡️'¿Slider

sí o slider no?' Debate abierto en
@ensalzacom

No todos los clientes necesitan un slider para su página de inicio. De hecho,

encabezonarnos con añadir un slider, rotador o como quieras llamarlo sería un auténtico
error.

Veamos un ejemplo que demuestra esto:

En este ejemplo sería bastante absurdo añadir un slider. ¿Para qué voy a obligar al
usuario a hacer scroll pudiendo añadir a simple vista lo que quiero que hagan?

En la web de Azucena Fraile, el objetivo es obtener leads, y para ello usamos un

mensaje claro y directo. En este caso, un slider solo estorbaría.

Hay muchos ejemplos de páginas web sin slider que puedes ver en nuestro portfolio.

Conclusión:
SLIDER solo cuando tenga sentido y se obtenga un beneficio. ¿Cuál es tu opinión?
Déjame un comentario al final de post y me lo cuentas.

https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 7/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

ZONA 2: CUÁLES SON TUS SERVICIOS

La segunda parte de la home es la que vamos a dedicar a hablar de nuestros servicios.

Muchas veces nos preguntan que para qué hay que añadir esta sección en la página de
inicio si los servicios son una de las pestañas del menú principal. Pues bien, hay dos
motivos FUNDAMENTALES por los que incluir este espacio en la página de inicio.

Por usabilidad
¿Para qué obligar al usuario a hacer clic en la pestaña de servicios de arriba si puedes
mostrarle lo que haces sin que tenga que hacer ninguna acción? Añadir los servicios en
la página de inicio servirá para que los posibles clientes sepan cuáles son tus servicios
de un vistazo (si no todos, parte de ellos).

Si tienes muchos servicios que ofrecer puedes optar por mostrarlos todos, aunque sean
imágenes o textos pequeños; también puedes elegir dos o tres servicios que más y
mejor te representen y colocarlos de una forma mucho más visual.

Vamos a ver un par de ejemplos.

https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 8/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

En este ejemplo se muestran todos los servicios que ofrece Lartec de una forma muy
estructurada, directa, sencilla y clara. Aunque las imágenes y los textos son pequeños se
leen cómodamente con su respectiva imagen que define el servicio.

Sin embargo, en esta ocasión para los chicos de Holiday Australia agrupamos sus
servicios en tres grandes grupos para que el cliente pudiera elegir entre ellos sin ser
agobiado con todas las opciones que ofrecen (que no son pocas).

Por SEO
Sí amigos. Añadir los servicios en la home es una oportunidad para incluir keywords
relevantes para tu posicionamiento en la sección de tu web a la que más importancia
https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 9/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

otorga Google, así que no es ninguna tontería.

¿Puede haber algo mejor? Para el caso de Lartec por ejemplo, sería ideal que los
usuarios llegaran a su web después de escribir «restauración de fachadas», mientras
que «viajes guiados Australia» son las palabras idóneas para llegar a la web de Holiday
Australia.

Así que ya sabes, añadiendo tus servicios en la Home tienes un 3×1: usabilidad +
rentabilidad (destacando los servicios que más te convienen) + posicionamiento

Clic para tuitear

'Dos razones de peso para añadir tus

servicios en la página de inicio de tu
web' por @yanirablaya

ZONA 3: EXTRAS QUE REFUERCEN TU MARCA

De la misma manera que las otras dos secciones podemos decir que son casi
obligatorias, esta última parte de la web es mucho menos estricta y depende al 100% de
cada caso.

Como veíamos, el contenido debe ordenarse como pirámide invertida para que lo
menos relevante esté en la parte final de la home. Vamos a ver algunos de los elementos
que se pueden añadir en esta última sección:

Testimonios: un muy buen recurso para reforzar tu marca y aumentar la

confianza. Eso sí, añade testimonios siempre y cuando tengas testimonios
REALES, con fotografías de clientes de verdad. No cometas el error de añadir una
foto de galería con una opinión inventada: el usuario no es tonto, se dará cuenta y
se largará pitando de tu sitio con un concepto horrible sobre tu marca.
Logotipos de clientes: si tienes la suerte de haber trabajado con grandes
empresas, ¡añádelos sin pensarlo! Esto reforzará tu imagen profesional de
empresa seria y trabajadora. Si Renfe, Fundación Once o La Comunidad de Madrid
han confiando en ti será que ofreces un buen servicio.
Redes sociales: siguiendo la misma línea, si tienes un perfil de Twitter con tres
seguidores y un tweet de 2015 no enlaces a tu perfil. Dará mala imagen. Añade tus
redes sociales de aquellos perfiles de los que te sientas orgulloso y te gustaría
que tus clientes conozcan.
Últimos artículos del blog: te digo exactamente lo mismo que con las redes
sociales. Si tu último artículo es de 2013 intenta por lo que más quieras que los
https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 10/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

usuarios no lleguen a verlo, ¡queda fatal!

Mapa y contacto: si tienes una tienda física que es el centro neurálgico de tu
negocio añade el mapa para que te localicen rápidamente. Si no tienes una tienda
física, olvídate del mapa y preocúpate de añadir un teléfono, formulario o email
donde puedan ponerse en contacto contigo fácilmente.

ÚLTIMOS ASPECTOS A TENER EN CUENTA DEL

DISEÑO DE TU PÁGINA DE INICIO
Por último, añado unas últimas pinceladas generales que no debemos pasar por alto:

Intenta que la maquetación de esta sección de tu web sea notablemente distinta

que el resto para que la identifiquen fácilmente
Procura que el diseño sea limpio, sin agobios. No añadas fondos con patrones y
formas que le conviertan en el protagonista.
NO añadas (por favor, no lo hagas) banners ni pop-ups que molesten al
usuario. Piensa que acaba de conocerte y bajo ningún concepto va a querer ni
suscribirse ni comprar nada. Le va a sentar mal que seas tan invasivo.
No pongas demasiadas llamadas a la acción distintas. Elige una o dos acciones
que quieras que hagan los usuarios: visitar los servicios, rellenar un formulario o
leer el blog. Déjaselo claro, llévale de la mano y guíale pero sin agobiar.
Por último, nunca, nunca, nunca añadas en tu página de inicio enlaces que
vayan fuera de tu web. Aprovecha que ya han caído en tu sitio y esfuérzate por
que no salgan de ahí.

¡Y hasta aquí! Si te has leído el artículo hasta el final muchíiiiiiisimas gracias, te invito a que
dejes tu opinión sobre el tema del ‘slider sí o no’ o cualquier otro debate paralelo que
haya abierto sin darme cuenta.

¡Muchas gracias y un abrazo ensalzero!

https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 11/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

Diseño web: anatomía de una página de inicio perfecta de Ensalza

Yanira
Responsable de redes sociales, contenidos en marketing y gestión de proyectos.
Me
encanta leer y viajar. Muy curiosa, amante de la (buena) música, conciertos, de
Madrid y del aperitivo a mediodía.
 @yanirablaya

¿Te apuntas a nuestra newsletter?

https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 12/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

Tu nombre

Email

Sí, acepto la política de privacidad

¡Me apunto!

* Para cumplir con la nueva Ley de Protección de Datos y que tus datos estén seguros con nosotros, debes leer y aceptar nuestra política de
privacidad. Tus datos serán gestionados por nosotros, Ensalza S.L y almacenados en Mailchimp, nuestro proveedor de mailing. No tenemos intención
de ceder tus datos a terceros salvo mandato legal y siempre podrás ejercer tus derechos sobre ellos. Puedes informarte sobre nuestra política de
privacidad al pie de esta página.

15 comentarios en «Diseño web: anatomía de una página de inicio perfecta»

Adela
20 julio, 2017 a las 7:36

Como diseñadora gráfica y web estoy Totalmente de acuerdo con este artículo y
destacó que el cliente la mayoría de las veces no sabe lo que quiere hasta que
una web funciona para el usuario.

Responder

Yanira
20 julio, 2017 a las 10:35

¡Muchísimas gracias por tu comentario Adela!

Responder

xavi
9 junio, 2018 a las 12:28

https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 13/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

Hola, tengo algunas dudas. Actualmente tengo una tienda online de venta de
juguetes. Mi home, consta de un bloque con todas las categorias con imagenes
pequeñas de cada una, que te redirige a la categoría elegida.

Quería actualizar mi diseño, y aunque veo que esto no lo tienen casi ninguna
tienda, creo que, al menos para visión con pc , es muy intuitivo, no¿?

A parte, al lado tengo otro bloque en vertical clásico/fijo con todas las categorías
sin imágenes . escritas)

Me podría dar su opinión.

Muchas gracias de antemano

Responder

Yanira
19 junio, 2018 a las 16:16

¡Hola Xavi!

Según cuentas si parece una buena estructura. Sin embargo, me sería mucho
más sencillo que me dijeras el nombre de la tienda para darte una mejor
opinión =)

Te espero,

¡un saludo!

Responder

Xavi
19 junio, 2018 a las 17:32

https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 14/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

Hola Yanira,

Gracias por contestar. LA tienda; malabarestrabalam.es

Un saludo

Responder

Yanira
20 junio, 2018 a las 9:23

Hola Xavi,

fijándome solamente en la home me resulta un poco caótica porque hay

muchas opciones nada más entrar, mucho texto, muchos colores… Aunque te
funcione más o menos bien, comprueba qué porcentaje del tráfico que
recibes lo hace desde móvil porque es el canal que más crece por excelencia.
He podido echar un ojo y desde móvil se ve un poco regular…

En cuanto a las categorías que aparecen la home, yo las reduciría a las 4-5
más destacadas, aquellas que te rente más vender. Así, "llevas de la mano" al
usuario guiándole para que compre lo que te interese más : )

Si necesitas cualquier otra cosa nos dices, y si quieres cambiar la web,

¡también! ; – )

Un saludo Xavi,

¡buen día!

Responder

Steven Sanchez
4 marzo, 2019 a las 23:36

https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 15/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

Muchas gracias me parecieron muy claros vuestros puntos de vista, de la

estructura de una pagina principal, me parecen muy lógicos me guiare de ellos
para realizar mi proyecto de hacer una pagina web principal. Un saludo:)

Responder

Yanira
5 marzo, 2019 a las 14:14

¡Muchas gracias Steven!

Un abrazo.

Responder

Aquiles Adan
6 marzo, 2019 a las 23:58

Me gusta que sea sencillo y descriptivo a llaves, importante sobre tendencias

actuales es que el menú, ya sea en el Header o de un lado(dependiendo diseño),
se está usando que permanezca fijo sin importar el scroll.

Responder

Jorge Pardo
28 noviembre, 2020 a las 0:50

Excelente artículo, eh aprendido muchísimo en no muchos minutos de lectura.

Gracias
https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 16/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

Responder

Beatriz
9 diciembre, 2020 a las 10:52

¡Qué alegría Jorge! Muchas gracias por tomarte también unos minutos para
comentar 🙂

Gracias a ti por leernos, abrazo <3

Responder

Gabriela
3 marzo, 2021 a las 15:08

enhorabuena por el gran contenido, me gustó mucho.

Responder

Beatriz
12 marzo, 2021 a las 8:40

¡Gracias, Gabriela!

Responder

jose jimenez
19 mayo, 2021 a las 23:27

https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 17/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

Bien explicado ,no lo habia logrado entender del todo, con estos ejemplos me
quedo todo mas claro GRACIAS.

Responder

Beatriz
26 mayo, 2021 a las 11:51

Nos alegramos muchísimo de haberte sido de ayuda, ¡José!

Un abrazo y gracias por leernos

Responder

Deja un comentario

Nombre *

Correo electrónico *

Web

Acepto la política de privacidad (Sí, tus datos están seguros con nosotros) *

Avísame por correo electrónico si alguien responde a mi comentario.

https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 18/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

Publicar comentario

Antes de enviar el formulario, puedes leer aquí la información básica sobre protección de datos:
Responsable: Ensalza S.L
Finalidad: responder a tu comentario y notificarte sobre nuevas respuestas.
Legitimación: tu consentimiento a través de este formulario.
Destinatarios: no tenemos previso ceder sus datos a terceros, salvo por obligación legal. 
Derechos: tienes derecho a acceder, rectificar, suprimir, portabilidad y oposición a tus datos. Los datos de contacto serán
almacenados en nuestros servidores y en Mailchimp, nuestro proveedor de mailing. 
Info adicional: puedes consultar la información adicional y detallada sobre protección de datos en el enlace al pie de
esta página.

¿QUIÉNES SOMOS?

¿DE QUÉ HABLAMOS AQUÍ?

 Diccionario
 Marketing online
 Diseño web
 Emprendedores
 Novedades Ensalza
 Hosting, e-mail y servidores

#ENSALZAMOLA
https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 19/20
19/11/21 14:39 Diseño web: anatomía de una página de inicio o home perfecta

Somos un grupo de gente maja que trabajamos codo con codo para que tus proyectos
e ideas tomen forma.

Diseñamos, programamos y marketeamos. Conoce más sobre nuestro trabajo

en ensalza.com.


Ensalza: agencia de desarrollo y diseño web Madrid
Calle de Alfonso Gomez, 33, 3, 28037 Madrid

https://blog.ensalza.com/diseno-web-la-pagina-de-inicio/ 20/20