A estas alturas, no hace falta que te digamos la importancia de tener una buena página web. Sabemos que es una tarea complicada la de diseñar o rediseñar una página web, puesto que debes tener muchos aspectos en cuenta. Pero no te satures, hoy vamos a explicaros cuales son los pasos que debéis de seguir para no dejaros nada. Para poder diseñar una página web atractiva, debes seguir los siguientes pasos.
Pasos a seguir para diseñar una página web
Define los objetivos de tu página web
Los objetivos de tu página web definirán su estructura y por eso es importante que los definamos primero. Para diseñar una página web el primer paso es definir tu idea y objetivos. Decide qué tipo de web quieres crear y qué es lo que quieres ofrecer con ella. Aquí os dejamos algunas ideas:
- Tener una carta de presentación de tu empresa para poderla mostrar a clientes actuales.
- Tener un sitio web para atraer visitantes y mediante un proceso transformarlos en clientes nuevos para tu negocio.
- Una tienda online en la cual ofrezcas tus productos, servicios o contenidos a los usuarios de manera directa.
- Un blog o portal de noticias el cual se convierte en un negocio de información más que de venta.
- Una página para atraer visitantes a un evento.
Por ejemplo, si tu objetivo es conseguir más contactos con clientes potenciales, necesitarás mostrar de forma atractiva lo que ofreces y permitir de forma sencilla entrar en contacto. Si por el contrario quieres aumentar ventas a través de internet, tendrás que centrarte en simplificar el proceso de pago.
Crea un mapa del sitio
Crear un mapa de sitio es otro de los pasos básicos de una página web, esto no es más que determinar cuáles serán las secciones que deberá incluir en tu página y a su vez que subsecciones existirán dentro de estas. Lo más práctico para esto es tomar un pedazo de papel y un lápiz y empezar a crear una lista.
Estos son algunos ejemplos habituales:
- Página de inicio.
- Sobre mí.
- Contacto.
- Blog.
- Páginas de productos o servicios.
- Preguntas frecuentes.
- Página landing.
Otra posibilidad es que crees una web de una sola página. En este tipo de webs, lo que normalmente serían diferentes páginas se combinan formando secciones en una única página. La experiencia de los usuarios con estas webs puede ser muy buena, ya que necesitan hacer menos clics, pero solo la aconsejamos si no tienes mucha información, para que no haya que desplazarse mucho con el ratón.
Define los contenidos para tu web
Ya tienes tu mapa del sitio. Ahora es necesario que tengas muy en cuenta lo que vas a decir en tus páginas web. Los contenidos son los que te van a hacer posicionar en los buscadores, si quieres apostar por una estrategia SEO, no dejes el contenido para lo último.
El contenido convence al usuario que visita tu web de quedarse y adquirir los productos o salir de la web y buscar otra cosa. Por tanto, debes tener un contenido atractivo y veraz.
Define muy bien qué quieres decir, qué terminologías y qué vocabulario quieres utilizar.
La psicología del color
Obviamente, los colores deberían ser los asociados a tu marca, producto o sector.
Hoy en día hay muchos colores que ya se han asociado a diferentes emociones o situaciones. Si no, imagínate un hospital con paredes negras o un velorio con personas que parezcan que van a un carnaval. Raro ¿verdad? Aquí te dejamos algunos colores y a que se asocian
- Blanco: Limpieza, tranquilidad, paz y pulcritud.
- Azul: Simpatía, profesionalismo, libertad y confianza.
- Rojo: Peligro, agresividad, dinamismo y pasión.
- Naranja: Juventud, dinamismo, alegría y diversión.
- Amarillo: Inteligencia, fuerza, creatividad, concentración y optimismo.
- Verde: Armonía, crecimiento, esperanza y relajación.
- Violeta: Ambición, reflexión, espiritualidad, misterio, meditación y sensualidad.
- Rosa: Dulzura, inocencia y delicadeza.
- Negro: Autoridad, fortaleza, elegancia y formalidad.
- Gris: Autoridad, respeto, estabilidad, sobriedad, tenacidad y tranquilidad.
Tipo de fuente
Normalmente es más que suficiente utilizar dos fuentes, una para los títulos y otra para el texto. Puedes cambiar el aspecto drásticamente dentro de la misma fuente simplemente utilizando itálica, negrita, fina, etc. Intenta elegir familias de fuentes que combinen bien.
Recuerda utilizar un tamaño de fuente legible que el usuario no tenga que sacar la lupa.
Mockup y Wireframe
Tras tener claros los objetivos, el contenido, los colores y la tipografía pasamos al diseño. No tengas miedo a coger un trozo de papel y plasmar sobre el papel lo que tienes en mente.
El mockup es un esbozo muy básico de las páginas y la estructura general de la página web. Puedes definir tus páginas principales y cómo se navega entre ellas, pero sin entrar en detalles de textos.
El siguiente paso es transformar este primer esbozo en un wireframe, un diseño incipiente en el que se ven los elementos de cada página, su tamaño y posición.
Con todo esto terminarás con un mapa conceptual con el que saber en qué paso estás y cuál es el siguiente.
Cualquier sitio debe atender a la cuestión de la usabilidad web y unas proporciones de diseño que hagan que el diseño de una página web funcione de forma efectiva.
Elige las imágenes y crea los gráficos necesarios
Es hora de vestir tu página e ilustrar los puntos más importantes.
Utiliza imágenes de tu empresa y personal, de algunos de los trabajos que has realizado, de tus productos o de algunos de tus clientes. Si no cuentas con imágenes puedes utilizar algún banco de imágenes y comprar algunas imágenes asociadas a vuestros servicios.
También es importante que definas si requieres alguna tabla, gráfica o elemento visual para explicar mejor algún punto, si es el caso deberás crearlo.
Recuerda estar al día de las últimas tendencias en diseño web:
- Mobile-first al thumb-first.
- Ilustración con carácter.
- Vídeos.
- Formas suavizadas y naturales.
- Profundidad y realismo 3D.
- Monocromático.
- Enmascaramiento de imágenes y texto.
- Ilustraciones simplificadas.
- Patrones y texturas.
Conclusión
Ya tienes tu diseño web y ahora falta el desarrollo web.
Recuerda tener un diseño web atractivo y que represente tu marca y tus servicios, adaptado a móviles y tablets.