Tanto como si estas empezando a emprender online, o si llevas tiempo dedicándole a este mundo, tendrás que saber que tener un buen diseño en tu página web es primordial para tu negocio digital, ya que así atraerás a tu lector, transmitirás confianza y conseguirás vender tus productos o servicios.

Tu web es tu escaparate comercial, es la tienda a los ojos de tus lectores y por ello tienes que cuidar su diseño y la apariencia que quieres transmitir con esta.

Para ello, tendrás que tener un buen gestor de contenidos para tu web: en mi caso te puedo recomendar WordPress; es fácil de manejar y te da la posibilidad de crear una web con estilo a través de una plantilla personalizable. Además, necesitarás contratar un hosting de confianza donde vas alojar tu página.

Si te decantas por esta opción, ten en cuenta que deberás elegir un tema para tu WordPress ligero en carga, limpio en código, y que sea responsive; es decir, adaptable a formato móvil.

Además de la herramientas que te he comentado antes, quiero darte unas bases para que puedas hacer un diseño bonito y atractivo para tu web, que a la vez sea funcional.

 

Estructura de una Página Web

 

Antes de empezar a crear tu página, necesitarás unas nociones básicas para hacer un buen diseño de tu escaparate online para vender tus productos y servicios.

Primero tendrás que conocer los elementos principales que conforman una estructura web:

 

estructura web

 

En el siguiente dibujo podrás diferenciar tres partes:

  • La cabecera (header): donde irá colocado tu logotipo para mostrar tu marca personal y el menú principal, para que tu lector pueda navegar entre las distintas páginas de tu web.
  • El body: es la zona principal donde va el contenido de tu web. Por ejemplo, si estamos en la página del Blog, aparecerán los últimos artículos publicados con un extracto de cada uno de ellos junto a una imagen. En esta zona también incluir un sidebar, o barra lateral, donde puedes colocar banners o las distintas categorías de tu blog.
  • El footer: es la sección del final de la web puedes incluir enlaces de interés, incorporar un formulario de captación de email para tu newsletter, personalizar el copyright de tu web, e incluir los botones que dirigirán a tu lector a tus redes sociales.

Una vez tengamos bien diferenciadas las partes que conforman una página web, tendrás que definir bien los siguientes elementos para hacer un buen diseño.

 

Elementos a tener en cuenta para el diseño de tu web

 

1.- Los Colores:

 

Es importante definir una paleta de colores acorde con nuestro logo y la marca personal que queremos transmitir. Ten en cuenta que los colores transmiten emociones, así que tendrás que elegir bien cuales vas a usar en tu proyecto online.

colores web

 

Mi recomendación es que uses 2 o 3 colores máximo; uno o dos que definan tu marca personal que podrías utilizar para los enlaces, separaciones y distintas estructuras de tu web, y uno más potente para las zonas donde más quieres llamar la atención de tu lector, como podrían ser los botones de llamada a la acción (comprar y suscribirse).

Nunca uses colores a lo loco sin coherencia ninguna, ya que así no conseguirás crear una imagen clara sobre tu proyecto y no podrás destacar las zonas que quieras a tu lector durante la navegación, como podría ser, la venta de un producto o servicio principal.

Una herramienta muy versátil que puedes utilizar para elegir los colores de tu web, es “Pictaculous“, ya que en base a la foto principal que vayas a utilizar en tu página web, te mostrará los colores que incluye esta para poder definir tu propia paleta. ¿No es genial? 🙂

Si por lo contrario, te gustan los colores de una determinada web, podrás averiguarlos fácilmente a través de la extensión de Chrome “Colorzilla“. Esta herramienta hace la función de cuentagotas, así que podrás saber el color exacto de cualquier página en el momento que quieras.

 

2.- Las Tipografías:

 

Este es otro elemento que debemos definir bien para mantener una coherencia en nuestro proyecto. Al igual que te comentaba con los colores, no uses tipografías distintas sin ton ni son.

Puedes elegir un tipo de letra para los títulos principales y otra distintas para el contenido.

Por ejemplo, una combinación muy buena que yo utilizo en mi propia web es “Montserrat” para los títulos principales y menú principal, y “Raleway” para los textos de los contenidos en el body.

Si quieres ver y descargar las distintas tipografías que existen, te aconsejo que vayas “Google Fonts“, donde podrás descubrir un sinfin de tipos y estilos diferentes.

Si por lo contrario ya tienes claro que fuente utilizar, y quieres detectar cual usa una página web en concreto, puedes instalar la extensión para Chrome “WhatFont“.

 

3.- Las Imágenes:

 

Coloca imágenes de calidad en tu proyecto digital, ya que así tu lector querrá continuar navegando en tu web.

Evita las fotos pixeladas y de baja calidad, que dan sensación de un sitio cutre.

Ten en cuenta el tamaño a la hora de subirlas a tu web, ya que esto reducirá el espacio de tu hosting contratado. Por favor, no subas imágenes de 5-10 megas, esto hará que tu página cargue más lento. Un tamaño correcto serían de 100-200 KB como máximo.

Puedes usar bancos de imágenes gratuitos como “Pixabay” para encontrar imágenes de gran calidad que ocupan poco espacio.

Si aún así tienes que retocarlas, puedes guardarlas en formato web con Adobe Photoshop para reducir el tamaño.

Si necesitas hacer composiciones con imágenes y textos de distintos tamaños, puedes usar la web de “Canva” para crearlas. Es una herramienta online gratuita y muy fácil de usar.

 

4.- Cuida la Estructura de la Web:

 

Dibuja y escribe en un papel como vas a estructurar las distintas páginas de tu web:

  • Si vas a establecer un barra lateral que vas a incluir en ella….
  • Qué contenido vas a mostrar en tu página principal…
  • Qué vas a escribir en el apartado de “Quién soy”…. etc.

Puedes insertar distintos bloques en la estructura de la página, mostrando información relevante a tus lectores.

Por ejemplo, en la página de inicio de tu web:

  • Inserta una cabecera con tu foto y una caja de suscripción regalando tu Lead Magnet.
  • Incluye un breve bloque de quien eres (puedes insertar otra imagen o un vídeo).
  • Define una sección de tus servicios principales para ayudarle a resolver su principal problema.
  • Y por último, añade un último bloque de los últimos artículos de tu blog.

Otro consejo: establece espacios y separaciones entre los distintos elementos de tu web para que respiren. No dejes que las distintas secciones de tu página se peguen y aglutinen, ya que no conseguirás una imagen limpia de tu proyecto.

Cuando escribas tus artículos del blog crea listas y destaca partes del texto con negritas y cursivas; y haz párrafos, no escribas todo seguido, porque tu lector se saturara y se irá.

Mantén la coherencia utilizando una misma estructura en las distintas páginas que componen tu web. Por ejemplo, si inicias un tipo de cabecera en cada página, intenta que sean del mismo estilo.

Si puedes, evita insertar anuncios de publicidad tipo Adsense, ya que suelen molestar en la lectura, y no incluyas pop-ups intrusivos, porque así sólo conseguirás espantar a tu lector.

 

Concluyendo

 

Como habrás visto, con estas pequeñas pautas, podrás diseñar la página web de tu proyecto online de forma limpia y coherente, con el objeto de crear tu marca personal, y así transmitir confianza y cercanía con tu comunidad.

Recuerda, un sitio bonito y limpio es siempre más agradable de visitar, que algo desordenado y sucio con una mala imagen.

Espero que te haya servido este artículo para diseñar tu web y te deseo que tengas un feliz emprendimiento online.

 

www.jessicaberlar.com : Diseñadora Web especializada en WordPress para Emprendedores.
Facebook |Twitter | Linkedin | Google+ | Youtube 
 
 

Pin It on Pinterest

Share This