Guía completa sobre cómo planificar un proyecto web

Cómo hacer la planificación de un proyecto web

Para empezar una web con buen pie siempre es necesario desarrollar un plan de acción que nos evite problemas futuros. En esta guía explico los pasos a tener en cuenta al planificar cualquier proyecto web.

Al final del artículo os dejo un Google Sheets donde podrás marcar/desmarcar las secciones trabajadas para una mayor organización.

1. Cómo definir el enfoque de tu proyecto web

Esta sección será de gran ayuda para saber cómo planear el diseño, desarrollo y análisis futuro de una web. Para definir el enfoque de tu web deberías:

  • Analiza tu competencia
  • Define tu público objetivo
  • Define tu buyer persona

Revisa páginas web de tu competencia

Antes de empezar revisa un buen número de webs de tu competencia, analízalas y fíjate en lo siguiente:

  • Cuáles son sus puntos fuertes
  • Cuáles son sus puntos débiles
  • Cómo las mejorarías
  • Cómo han enfocado el diseño
  • Con qué tono se dirigen al lector
  • Analiza rendimiento de la web con PageSpeed Insights
  • Si tienes acceso a herramientas de análisis como Semrush o Ahrefs ¡Genial!

Ten en cuenta que si existe competencia y han hecho un trabajo coherente, deberían haber realizado un estudio previo ¡Si analizas lo que ellos han hecho te ahorrará mucho trabajo!

Define tu público objetivo

El público objetivo nos da rasgos generales del comprador ideal, sin una identidad propia y específica. nos servirá para centrarnos en un grupo de segmento del mercado.

Define tu buyer persona

Un buyer persona sería un perfil ficticio de una persona concreta y de rasgos definidos. A mi forma de verlo es súper útil para saber a quién dirigirme y qué necesidades cubrir a la hora de crear contenido. En el punto 12 del artículo “características de una web exitosa” escribo sobre una herramienta gratuita para definir el buyer persona.

Por ejemplo, un público objetivo sería:
Mujeres embarazadas de entre 25 y 40 años con unos ingresos mensuales de entre 800 y 1000€. Se conectan a redes sociales como instagram.

Por ejemplo, un buyer persona sería:
María, 38 años. trabaja como cajera de un supermercado y pasa el tiempo en su barrio o en casa viendo la tele o mirando instagram.

2. Cómo hacer la planificación del diseño de una web

Antes de realizar nada en el diseño de una web deberíamos planificar bien algunas cosas para tener una estructura homogénea y, si estamos creando una web bien personalizada, tener un código CSS limpio. Además, tendremos que tener claro si vamos a tener varias páginas, o una One Page (páginas web de una sola página).

Proporciones de márgenes y padding

De cualquiera de las formas que creemos la web es importante tener un protocolo establecido de márgenes y paddings para todos los dispositivos y mantenerlo en toda la web. Esto hará que tengamos una estética estable en toda la web dando sensación de profesionalidad.

Si trabajamos con una web personalizada podremos declarar variables CSS para estos parámetros. Así también podremos controlarlo todo desde un solo lugar.

Tamaños de las imágenes

También es importante mantener un protocolo de tamaños de imagen. Esto hará que evitemos la carga de imágenes en tamaños diferentes a los que realmente se están mostrando, con la consecuente sobrecarga de la web, tanto de uso del servidor como velocidad de carga.

Yo suelo trabajar con 4 tamaños de imagen diferentes para el 90% de los proyectos. Estos son:

  • 1400x350px
  • 600x400px
  • 350x350px
  • 250x250px

Formato de las imágenes

¿Vamos a permitir subir SVG a WordPress o vamos a añadir formatos de nueva generación? Estos son puntos clave a plantearnos antes de ponernos a diseñar la web.

Tamaño de las fuentes

Otro punto a tener en cuenta es el tamaño de las fuentes. Para tener un diseño sólido y que dé sensación de profesionalidad necesitaremos mantener el mismo tamaño de fuentes para todas las páginas.

Si trabajamos con webs personalizadas, al igual que con los márgenes y paddings, podremos declarar variables CSS para controlar todos los tamaños desde un punto. Y no solo eso, también evitaremos mucho código al declarar las media queries.

Establecer puntos de ruptura (responsive)

Estos son los puntos responsive (para tener una web adaptable a cualquier dispositivo) en que la estructura web cambia más. Por ejemplo: Podemos encontrarnos con 3 elementos distribuidos en 3 columnas, pero en el móvil se distribuyen en una única columna. Esto se realiza mediante los media queries en código CSS. Recomiendo 2 puntos de ruptura: 768px y 1024px.

Estable colores principales y secundarios acordes con tu identidad corporativa

Esto depende mucho de cada proyecto, claro. Pero en líneas generales no recomendaría usar más de 4 colores (sin contar blanco, negro o gris). Hay estudios en los que se comenta que mientras más colores más distracción, lo que se traduce en menos conversiones.

Si trabajamos con CSS podremos declarar los colores en root y así organizarlos todos desde un solo punto.

Define cuántas páginas va a tener tu web

No es lo mismo una web para promocionar un negocio de albañilería local que una web de una escuela online. Dependiendo de tus necesidades debes tener bien claro qué páginas se incluirán. Y cuanto antes lo sepas mejor

Define qué funcionalidades son necesarias en tu web

Esto es importante si no queremos que nuestro desarrollador acabe tirándose de los pelos. Antes de empezar con el proceso de desarrollo es muy importante que nos planteemos qué funcionalidades son necesarias para nuestra web. Así tendremos un plan de desarrollo coherente.

3. Antes de empezar con el desarrollo conoce el enfoque SEO básico

A diferencia de lo que muchos creen es importante hacer un buen trabajo de SEO técnico antes incluso de tener la web. Así podrás colocar las imágenes con un nombre adaptado a este estudio previo.

4. Cómo planificar el desarrollo web

En esta etapa lo más importante es definir claramente las funcionalidades y tecnologías que se usarán.

Por ejemplo, si conocemos las ventajas de una web en WordPress 100% personalizada podremos trabajar en PHP, código nativo de WordPress, JavaScript, jQuery, MySQL, etc. Desde WebHeroe estamos convencidos que es la opción más recomendada, y no es por nada, es porque conocemos los beneficios en cuanto a rendimiento.

Una vez conozcamos qué funcionalidades, qué páginas y cómo será el diseño de la web, lo que quedará es la implementación o desarrollo.

Siempre recomiendo trabajar con algún servidor local como Xampp, ir haciendo copias de seguridad, y luego subir el trabajo definitivo a nuestro servidor.

Al terminar con el desarrollo debemos recordar habilitar la web para su indexación. Por ejemplo, si usamos WordPress, deberíamos desactivar la casilla «Pedir a los motores de búsqueda que no indexen este sitio»

5. Identificar necesidades

Muchas veces queremos abarcar todo el trabajo y no nos damos cuenta que podemos obtener un diseño web a precios muy competitivos con empresas a las que puedes delegar muchas tareas. Así que preguntémonos:

Con qué recursos cuento

Hazte las preguntas:

  1. ¿Tengo dinero para invertir en el proyecto?
  2. ¿Puedo reducir otros gastos para facilitar la inversión en el proyecto?
  3. ¿Tengo conocimientos para realizar un proyecto así?
  4. ¿Quiero que mi proyecto genere ingresos en 1 año o menos?

Claro, si no tenemos conocimientos de desarrollo, marketing, diseño o SEO, no nos quedará otra que sacrificar el bolsillo o condenar el proyecto a un crecimiento muy lento o fracaso.
También hay otros factores como la competencia. Si nadie vende tu producto o servicio, nadie escribe en internet sobre ello y hay un gran número de usuarios a la búsqueda de lo que ofreces, es probable que te posiciones rápidamente en Google y tu negocio triunfe sin una inversión. Pero honestamente, es una posibilidad muy remota.

Cuál es mi especialidad

Si realmente dominamos algún campo relacionado con el proyecto ¡Genial! Pero ten en cuenta que no podemos saberlo todo, y un proyecto web bien hecho abarca un gran número de factores.

Cómo hacer mi web

Hay un gran número de plataformas y CMS que nos permiten hacer una web de un modo sencillo y rápido. Siempre aconsejo utilizar WordPress por su precio, su rápido aprendizaje y su capacidad de personalización. Y además, dispone de un gran número de herramientas, como los maquetadores visuales, que nos permitirán hacer una web de forma rápida y sencilla. Pero no todo son beneficios, cualquier plugin, como los maquetadores, genera un gran impacto en el rendimiento, así que también tendremos que preguntarnos el siguiente punto.

6. Aplicaciones para gestionar proyectos web

Aquí os presento 2 posibilidades:

  1. Si queremos trabajar con un equipo existen muchas aplicaciones con las que podremos gestionar todas las tareas y así tener bajo control qué, quién y cuándo hace estas tareas. Os recomiendo las siguientes aplicaciones:
    1. Asana
    2. Trello
    3. Airtable
      Todas ellas tienen versión gratuita
  2. Si preferimos no trabajar con un equipo podemos seguir este Google Sheets para planificar marcar/desmarcar cada uno de los pasos de esta guía:
    Planificador de Proyecto Web
    Puede crear una copia del documento haciendo click arriba a la izquierda. En Archivo/Hacer una copia

Deja un comentario

    Explícanos tu proyecto, nos pondremos en contacto contigo brevemente


    contacto@webheroe.com