Maquetación web: primeros pasos de un buen diseño

¡Hola!

Hoy os traigo un tema básico para cualquiera que esté pensando en hacer una página web, ya sea desde el punto de vista del desarrollador o del cliente.

Y es que antes de ponerse a diseñar, lo ideal es que tengamos todo bien clarinete desde el momento cero.  Principalmente los objetivos que se desean conseguir con la página y a partir de ahí, definir el tipo web que se va a desarrollar.

Somos un poco cansinos con esto, pero es que es I-M-P-O-R-T-A-N-T-Í-S-I-M-O tener en cuenta que para que un proyecto web salga adelante, debe de pasar por varias fases de desarrollo, y que el comienzo sea con buen pie ya lo va a traer todo casi casi rodado.

¿Qué necesitamos para empezar a diseñar una página web?

Ya te he adelantado el punto clave: conocer el objetivo principal que se pretende conseguir con ella. Puede ser desde generar visibilidad y tráfico hacia la marca, conseguir leads o suscriptores, vender productos o servicios, promocionar un evento u oferta puntual…

Después, lo fundamental es tener preparado el contenido base que va a llevar la web. Si no sabes por donde empezar, estos consejos para escribir los textos de tu web que nos dio David en su día, te van a venir de lujo, aunque no te preocupes porque en las agencias de diseño estamos acostumbrados a darle un buen repaso a los textos para hacerlos un poco más atractivos o incluso (que suele ser lo más frecuente) organizarlos para dotarlos de mayor coherencia.

Con los textos y las fotos (que habremos de optimizar antes de subir a la web) ya podremos hacernos una idea de la extensión de la página y será el momento en el que definiremos una estructura amigable para el posicionamiento y comprensible para los que visitan tu página.

No hace falta que seas un Picasso, pero algo de gusto tienes que tener a la hora de elegir las imágenes que van a ilustrar tu página web: ya sean propias o de un banco de imágenes. Si nos haces la faena de seleccionar fotos muy feitas, el resultado será muy feito… magia no podemos hacer.

La identidad de marca es también un factor a tener muy en cuenta: logos, tipografía, colores…Todo ha de tener coherencia entre sí y facilitar la lectura con un tamaño de letra adecuado y legible.

También necesitarás un dominio, un servidor y tener clara la plataforma en la que va a funcionar tu web, por ejemplo WordPress… pero bueno, esos temas técnicos los dejamos para otro post que para hoy yo creo que hay información de sobra.

¿Ya lo tienes todo? Pues pasamos al siguiente punto…

¿Qué es la maquetación web?

La maquetación web se encarga de la distribución de los diferentes elementos en una página: encabezados, columnas, menús…

Mediante esa maquetación, definimos ante qué tipo de página nos encontramos: la página de inicio, también llamada home o homepage, una página de aterrizaje o landing page, la ficha de producto en una tienda online, secciones corporativas, textos legales etc.

Basta con dar una vuelta por internet para darse cuenta de que a medida que han mejorado las herramientas de diseño también ha mejorado la estética general de las páginas web. Por eso cada vez «cantan» más las webs que llevan años sin pasar por chapa y pintura.

Y si profundizamos un poco más, veremos cómo ha contribuido a ello la propia evolución del desarrollo web: lo que antes se hacía con tablas, un método complejo que causaba bastantes problemas en el código y que a veces era difícil de reconocer por los buscadores, actualmente se realiza mediante un sistema de capas, a las que también se conoce como divisiones o contenedores.

Todo ello ha facilitado mucho las cosas en el diseño web, permitiendo mejorar todos los aspectos de la maquetación, así como la gestión del propio contenido y demás, permitiendo actualizarlo por cualquier persona y prácticamente desde cualquier dispositivo. 

Lo primero es definir la estructura de la página y eso, como casi todo, se hace con un boceto previo. Se pueden utilizar wireframes, un simple dibujo sobre un papel, o bien se trabaja directamente sobre un prototipo: esto depende de cada diseñador.

La estructura general de la página se va rellenando con diferentes elementos y unas buenas pinceladas de creatividad y diseño. Esos elementos se deciden en función del tipo de página que se desea realizar… ya te imaginarás que no es lo mismo una página de venta que una página de contacto, pero vayamos un poco más allá. 

Veamos ahora los principales tipos de páginas de los que se ocupa la maquetación web y qué elementos son imprescindibles en ellas…

1# Página de inicio

La página de inicio o home es esencial en un desarrollo web. Es la que vertebra un sitio web, y la que van a buscar todas aquellas visitas que hayan accedido a cualquier otra de las páginas de la web y precisen más información o detalles que les inspiren confianza. Por lo general, suele ser la página con mayor peso y en la que recalan la mayoría de las visitas.

Tradicionalmente, la maquetación web de la página de inicio intenta representar tres aspectos importantes: la marca (que ocupa la zona alta de la home), los servicios o productos (que quedan en la zona media de la página) y finalmente otros aspectos complementarios de interés (en la parte inferior o footer), como pueden ser los datos de contacto.

Zona superior de la home:

Los elementos que debe distribuir adecuadamente la maquetación web de la página de inicio pueden ser los siguientes:

• Logotipo
• Imagen fija o slider (carrusel de imágenes y/o texto)
• Menú
• Favicon
• Datos de contacto esenciales
• Caja de búsqueda
• Slider

Zona media de la home:

En una web corporativa, esta zona se utiliza para mostrar de un primer vistazo los principales productos o servicios, y también el espacio en que explayarse en los contenidos con un buen copy (texto persuasivo clásico del marketing) para introducir las palabras clave por las que es importante conseguir que la página aparezca en los primeros resultados de los buscadores.

Explicar los aspectos diferenciadores del negocio de forma atractiva y ubicar correctamente llamadas a la acción son tareas clave que ha de tener en cuenta la maquetación web de una buena página de inicio. 

Zona inferior de la home:

Es el espacio en el que poner aspectos adicionales, pero también importantes para el usuario (y por qué no decirlo, para el posicionamiento).

Algunos de ellos son:

• Testimonios de los clientes.
• Mapa y detalles de contacto.
• Redes sociales que seguir.
• Últimos artículos publicados en el blog.

2# Páginas web corporativas

Además de la página de inicio, suelen incluir varias secciones diferenciadas con una maquetación acorde al estilo de la página y ajustada con la cantidad de texto o imágenes con las que se cuente:  quienes somos, página de contacto y opcionalmente, una muestra de los servicios o trabajos realizados.

Página de servicios

La página de servicios es una de las más importantes de una web corporativa. Es la que muestra todas esas posibilidades que ofrece una empresa a sus potenciales clientes, y otra cosa no, pero confianza si debe dar. Antes de lanzarse a hacer una página de servicios, es buena idea que prepares un listado con todas las características que se te ocurran para darles la mejor estructura.

Si los servicios cuentan con contenido suficiente, se pueden realizar varias páginas de servicios diferenciadas. Si por el contrario, el contenido de cada uno de ellos es mínimo, lo ideal sería desplegar un menú con todos ellos. No son las únicas posibilidades: cuando existen servicios muy diferentes, algunos expertos en diseño web prefieren trazar diferentes recorridos por la web en función de a quién van dirigidos: por ejemplo, servicios para empresas y servicios para particulares. 

La maquetación web de una página de servicios debe siempre incluir llamadas a la acción que inviten al usuario a contactar para obtener más información. 

3# Landing page

Una landing page o página de aterrizaje tiene como principal objetivo lograr una conversión. Por eso es una página única a la que se suele llegar a través de un banner, un anuncio publicitario o un enlace en otra web.

Precisamente por la función que debe cumplir, la maquetación web de este tipo de página debe ser visualmente muy atractiva, dar información detallada y muy bien estructurada, ofrecer pocas distracciones y a poder ser, ningún enlace salvo la llamada a la acción que se busca y con la que se pretende una conversión. 

Por no llevar no debería llevar ni menú superior. Quien entra en una landing debe convertir o irse. Ni más ni menos. Así de simple. Clic para tuitear

4# Tiendas online

Además de una experiencia de usuario agradable y sencilla, en los eCommerces es esencial mimar mucho las fichas de producto, así como facilitar al máximo la navegación de las páginas de carrito y de compra.

Ficha de producto

La maquetación de una ficha de producto organiza toda la información en torno al mismo, y (en teoría) debe ser igual para todos ellos. Los elementos de que consta son:

• • Imágenes.
  • Texto descriptivo con funciones, medidas, precio, etc.
  • Valoraciones mediante estrellas (opcional).
  • Call to Action (por ejemplo, “Añadir a la cesta”)
  • Más información generadora de confianza sobre garantías, envíos, etc.
  • Productos relacionados.

5# Blog

Un blog puede formar parte de una web corporativa más grande o ser un blog independiente. En cualquier caso, el objetivo general debe ser conseguir tráfico y ofrecer contenido de calidad, por lo que es primordial que cuente con una buena velocidad y un rendimiento óptimo, tanto en escritorio como en dispositivos móviles y una experiencia de navegación más que agradable.

Lo más habitual en un blog, es encontrarse una parrilla o grid de posts, bien ordenados por categorías o cronológicamente y un sidebar o barra lateral donde suelen colocarse diferentes elementos de ayuda como una caja de búsqueda, un listado con las últimas entradas, enlaces patrocinados o el feed de las redes sociales.

Como siempre el límite lo pones tú, pero te recomendamos que utilices solamente los plugins y widgets necesarios para no ralentizar la carga de la página y eliminar al máximo las peticiones externas.

¿Necesitas ayuda con la maquetación o el diseño de tu web? 

Cualquiera puede lanzarse a crear una web, igual que a sacar una foto… el resultado es otra historia.

Una buena maquetación web logra que tu negocio o proyecto muestre todo su valor a golpe de vista. Y eso, no lo dudes, debe ponerse siempre en manos de buenos profesionales.

En Ensalza, como agencia de desarrollo y diseño web en Madrid llevamos ya muchos años ayudando a nuestros clientes a transmitir al mundo el mensaje que desean mediante un buen desarrollo y una adecuada maquetación web. ¿Necesitas ayuda para crear la página que mereces? Contacta y te diremos cómo podemos ayudarte.

También puedes dejarnos un comentario para aportar lo que te apetezca 🙂 

Y sobre todo, si has llegado hasta aquí…¡muchas gracias por leernos! <3