12 Ago ¿Cómo debe ser la página de inicio de una web?
La página de inicio es lo que muchas personas ven cuando encuentran por primera vez un sitio web por lo cual es un factor decisivo que influye en la decisión de volver o no a él.
En este artículo, repasaremos algunos consejos de diseño web para diseñar páginas de inicio y descubriremos algunos de los pasos necesarios para crear una página de inicio eficaz y exitosa.
Responder a preguntas como “¿Quién soy?” o “¿Qué hago?” es posible que no sea necesario para una marca o empresa conocida (como Coca Cola), pero la mayoría de las empresas aún necesitan responder estas preguntas para que cada visitante sepa que está en el lugar correcto. Steven Krugg lo resume mejor en su libro más vendido, Don’t Make Me Think: si los visitantes no pueden identificar qué es lo que haces en segundos, no se quedarán mucho tiempo.
Evernote es un gran ejemplo de una página de inicio que tiene el conocimiento de la marca en el centro. Conocida por sus sencillas funciones para tomar notas, la página de inicio amplía el alcance de esa reputación y muestra cómo la aplicación se ha convertido en una suite organizativa completa.
Tiene una barra de navegación bonita y limpia y una combinación de colores que resalta, pero no es demasiado dura, un excelente esfuerzo de una marca reconocida.
Identificar el propósito del sitio web
La página de inicio es la mejor oportunidad de un sitio web para causar una impresión, por lo que un visitante del sitio debe ver exactamente lo que está buscando en el momento en que llega.
Por qué funciona:
El primer encabezado atrae inmediatamente al usuario y, la animación que le sigue, pone en evidencia casos reales en los que Grammarly es de gran ayuda.
Prueba social: las calificaciones altas de los clientes y un número aún mayor de personas que usan el servicio se muestran de manera prominente.
Animaciones: Grammarly hace un gran trabajo al mostrar la aplicación en acción con animaciones de diferentes casos de uso, como correo electrónico, documentos de Word y más. Incluir animaciones en el diseño de su página de inicio es una forma efectiva (¡y divertida!) de ilustrar mejor los puntos fuertes y llamar la atención.
Definir el propósito del sitio web te ayudará a ver que los atrae a los usuarios al sitio.
Ten en cuenta que el propósito del sitio web es diferente del tema del sitio web. Por ejemplo, «bienes raíces» no es un ejemplo de un propósito.
“Vender casas” tampoco puede ser el propósito: ¿cuál es la probabilidad de que alguien compre una casa en un sitio web sin ver la propiedad de antemano?
Siguiendo el ejemplo, el propósito de un sitio web de bienes raíces podría ser uno de los siguientes:
- Para mostrar propiedades nuevas o destacadas a la venta
- Para ayudar a los visitantes a encontrar la información de contacto de la empresa o el agente inmobiliario
- Para ayudar a los visitantes a encontrar el agente inmobiliario adecuado para sus necesidades
Cada uno de estos propósitos puede llevar al visitante a una acción y puede guiarlo a dar más pasos para adquirir una propiedad como resultado directo de visitar el sitio web. En este ejemplo, el sitio web es una puerta de entrada para realizar la venta de una vivienda.
Otro ejemplo que podemos utilizar es un portfolio online. ¿Cuál es el propósito de una portfolio? Decir «conseguir clientes / un trabajo» es demasiado amplio teniendo en cuenta que el propósito del sitio debe ser tangible y realista.
Algunos ejemplos pueden ser:
- «Para animar a un cliente potencial a que se ponga en contacto conmigo»
- «Para impresionar a los compañeros diseñadores y ganar una reputación positiva en la comunidad»
- «Para impresionar a un empleador potencial»
Si el propósito principal es mostrar sus trabajos o impresionar a un empleador potencial, la página de inicio podría mostrar miniaturas de piezas de la cartera de una manera que atraiga al visitante a ver más piezas.
Todos estos propósitos conducirán a más clientes o trabajos, pero es importante establecer objetivos concretos para diseñar la estrategia del diseño de la página principal.
Haz que el contenido resalte
Al elegir qué contenido es el más importante, ten en cuenta los siguientes pasos.
Paso 1: priorizar
Determina qué componentes y contenido son más importantes para lograr el propósito del sitio y organízalos por orden de prioridad. Puedes considerar resaltar trabajos o publicaciones destacadas o información de contacto.
La importancia de estos componentes depende del propósito que deseas lograr. Con esta información en mente, puede comprender mejor cómo crear un diseño de una manera que llame la atención sobre los elementos más importantes.
Paso 2: organizar
Toma la lista construida en el primer paso y organiza el contenido de una manera que llame la atención en el orden correcto.
Piensa en cómo unir los componentes del diseño.
El patrón en forma de F se usa a menudo para determinar el orden de organización del contenido en un sitio web. La parte superior izquierda es donde el ojo aterriza primero, luego hacia la derecha y hacia abajo. Cuanto más avanza el usuario en una página, menos se interesa y menos lee.
Paso 3: llamar la atención
Para llamar la atención sobre ciertos contenidos, investiga las siguientes posibilidades:
- Aumentar el contraste de un determinado elemento con respecto a su fondo y los elementos circundantes.
- Aumentar su tamaño en relación con los objetos que lo rodean.
- Proporcionar mucho espacio en blanco a su alrededor.
Soundcloud es un ejemplo brillante de una única página de inicio que se creó para atraer a dos tipos de usuarios: compositores y oyentes.
Es un diseño de página elegante, brillante y atrevido donde los elementos más importantes se destacan en colores contrastantes para llamar la atención.
Recuerda incluir las “necesidades”
Hay componentes importantes del sitio que los usuarios esperan encontrar en un sitio web. Debido a que la mayoría de los sitios los tienen, dedicar tiempo a su diseño y posicionamiento estratégico en un diseño puede ser efectivo para crear una página de inicio funcional y memorable.
Estas «necesidades» incluyen:
- logo / línea de etiqueta del sitio
- menús de navegación
- información del contacto
Encuentra lo que se necesita en la página principal, dale prioridad y haz que se note.
Ten una justificación para todo
Un error común entre los diseñadores web con respecto al diseño de la página de inicio es colocar widgets aleatoriamente y piezas de contenido al azar en la página de inicio sin pensar en su función y contribución al diseño general del sitio.
Debes tener en cuenta que la simplicidad es muy importante en un diseño web usable y funcional. Un diseño desordenado puede hacer que las cosas sean difíciles de encontrar y acceder, además de ralentizar el tiempo de respuesta de la página.
Cuestione cada elemento que haya decidido incluir en su página de inicio: «¿Qué hace?», «¿La gente lo usará?», «¿Cómo ayuda al propósito del sitio?».
En el caso de Dropbox, el diseño limpio, ordenado y simple se combina con un poderoso lema que explica completamente el producto: “Mantén tu vida organizada y continúa con tu trabajo desde un solo lugar”.
Ten en cuenta el tiempo de respuesta de la página
Si bien el tiempo de carga eficiente es importante en todo el sitio web, es especialmente necesario en la página principal.
Dado que una página de inicio suele ser la primera parada para muchos usuarios, esta debe ser accesible rápidamente. Un sitio web de carga lenta frustrará al visitante y aumentará la posibilidad de que se vaya antes de que la página web termine de mostrarse.
Minimizar y optimizar la cantidad de gráficos
Evalúa la necesidad de todos tus elementos gráficos y cuando los hayas reducido al mínimo, considera usar herramientas para reducir el tamaño de los archivos.
Puedes también considerar usar sprites CSS para agrupar las imágenes. Esto reduce la cantidad de solicitudes HTTP que necesita una página web para representar sus páginas web, lo que reduce los tiempos de respuesta de la página.
Combinar archivos JavaScript y CSS
Lo que también puede ralentizar el sitio web son los archivos JavaScript o archivos CSS que el sitio web tiene que cargar antes de funcionar correctamente. Si es posible, combínalos en un solo archivo. Cargar un archivo más grande es más rápido que cargar cinco archivos más pequeños cuando se habla de tiempos de respuesta.
Minimizar códigos
Intenta minimizar los scripts para reducir el tamaño de tus archivos y hacer que el código sea legible.
Conclusion
Diseñar una página de inicio es tanto una ciencia como una forma de arte. Requiere atención a los detalles, prestando atención al propósito y los objetivos del sitio, y, al mismo tiempo, al rendimiento de la página web.
Espero que esta publicación te haya dado una idea de algunas de las cosas a considerar al diseñar una página de inicio. No dudes en compartir tu opinión y tus consejos sobre el diseño de páginas de inicio en los comentarios.