Cómo empezar a diseñar una web

En esta clase una profesora te explica todo lo que necesitas antes de ponerte a diseñar una web: preproducción, presupuestos, funcionalidades y mucho más

Diseñar una web NO es como crees ni como te han contado. De hecho, el diseño de la web es ahora mismo es el menor de tus problemas. Has de tener un montón de cosas en cuenta antes de ponerte a diseñar y te las vamos a contar todas en esta clase. Y es que, es increíble la cantidad de personas que nos escriben para pedirnos presupuesto de diseño web sin aportar una información mínima que podamos utilizar para crear un presupuesto.

Vas a encontrar un montón de vídeos por YouTube hablando sobre este tema. Pero solo en este encontrarás el paso a paso para que tu web tenga un diseño adecuado a tu marca y, lo más importante, que tenga alguna posibilidad de conseguir clientes por internet ¡Empezamos!

La preproducción de una página web

Si es la primera vez que me ves en tu vida y no sabes quien soy ni qué he hecho hasta ahora, simplemente contarte que llevo desde 2008 trabajando en Internet y la mayor parte de este tiempo me he dedicado a gestionar proyectos de Marketing Digital. Puedes añadirme a tu red de LinkedIn para saber más. En todos estos años, creo que la tarea que peor he visto hacer en proyectos (normalmente de clientes totalmente desesperados) es la preproducción.

Si tienes bien la preproducción van a ocurrir varias cosas:

  • Vas a ahorrar tiempo
  • Vas a ahorrar dinero
  • Vas a evitar errores innecesarios
  • Tu proyecto tendrá más oportunidades de llegar a buen puerto

Y lo más importante: Tendrás la sensación de que tu proyecto está controlado y evitarás quemarte en el proceso.

Información sobre la empresa o proyecto

Al tener un canal y una web con tantas visitas, principalmente enfocado en la formación en Marketing Digital, me llegan infinidad de solicitudes de presupuesto. No obstante, no todos los potenciales clientes están preparados para contratar mis servicios por varios motivos:

  • No conocen cómo funciona el sector
  • No son conscientes del trabajo que implica diseñar una web
  • No terminan de saber qué necesitan

Es decir, ninguno de los presupuestos que me llegan viene con un documento de solicitud tipo briefing, donde se detallen las características del proyecto, qué necesita la empresa o cuáles son los objetivos. Me toca a mí descubrirlo y, para hacerlo he de solicitar esta información previa o preguntarla directamente a los potenciales clientes. La información a recopilar sería:

  • Nombre de la empresa
  • Por qué es distinta a la competencia
  • Otra información relevante: procesos de compra, atención al cliente, nº de empleados, estrategias anteriormente implementadas…
  • La lista de productos y servicios a promocionar en Internet
  • Cuales son los objetivos que quieren cumplir con la web

Te sorprendería la cantidad de gente que no es capaz de responderme a estas preguntas. Si pasa esto les remito a los cursos gratis (normalmente al curso de Introducción al Marketing Digital) y a la academia para que entiendan un poco mejor el trabajo a realizar. Hay personas que se han enfadado por solicitar tanta información pero considero que sin esto no soy capaz de hacer bien mi trabajo y mi intención es generar buenos proyectos para que mis clientes queden contentos.

Puede que estés empezando como diseñador o diseñadora web y crees que no puedes presionar un poco a los clientes pero créeme, de cuanta más información dispongas antes de empezar, mejor le irá al proyecto. Y esto, tarde o temprano, te traerá más clientes, que es de lo que se trata.

Lista de productos o servicios

Quiero explicar este punto a parte porque realmente es esencial para entender el proyecto a realizar. Todos los productos y servicios que quiera potenciar la empresa deberían aparecer en la web. Si tiene un catálogo muy extenso es posible que no podamos meterlos todos desde el inicio por lo que se deberá crear un plan en varias fases, dependiendo del presupuesto inicial que tengan.

Por otro lado, si la empresa no es capaz de remitirnos un listado completo en un tiempo razonable, es posible que deban mejorar sus procesos internos antes de comenzar con la web. El Marketing Digital puede traer mejores números a nivel de ventas pero si la empresa no está organizada puede acentuar problemas previos que no han sido anteriormente detectados.

Objetivos

¿Para qué se hace la web? Hay clientes que no me saben contestar a esta pregunta, por increíble que parezca. Y aquello de “Si no estás en Internet no eres nadie” no me sirve. La respuestas a estas preguntas podrían ser:

  • Para recibir más solicitudes de presupuesto
  • Para captar leads
  • Para aumentar mis ventas online
  • Para mejorar mis procesos de trabajo
  • Para solucionar tickets de soporte
  • Etc

Es habitual que los objetivos del proyecto supongan algún tipo de rendimiento económico para la empresa. Lo cual me lleva a otro punto importante: Hay que tener cuidado con las expectativas de los clientes. A día de hoy todavía hay muchas personas que piensan que hacer una página web es la solución a todos sus problemas y que facturarán lo mismo que PCComponentes, con un presupuesto infinitamente menor. Esto ya no es así y la web por sí sola no es suficiente.

Es por esto que en ocasiones recomendamos realizar antes un plan de Marketing Digital o una auditoría SEO que nos permita conocer un poco mejor cómo se mueve ese mercado en Internet y tener una idea previa de las espectativas que podemos tener.

En seosve no somos de prometer absolutamente nada. Prometemos trabajo, no resultados. El motivo es que los resultados no dependen de lo que hagamos nosotros únicamente, sino la competencia del proyecto o el desempeño de la propia empresa. Ojo con las promesas vanas, que el sector está regular.

Lista de funcionalidades

En este punto vamos a intentar responder a la pregunta ¿Qué necesito que tenga mi web? Parece fácil pero en ocasiones es complicado responder a esta pregunta, sobre todo si no tengo mucha experiencia montando este tipo de proyectos. Imaginemos que vamos a montar una web de venta de servicios, como seosve.com. La lista de funcionalidades para este proyecto sería:

  • Un blog con páginas de autor
  • Páginas de servicio
  • La posibilidad de hacer SEO
  • Que la web cargue rápido
  • Formularios de contacto
  • Conexión con WhatsApp business
  • Un pop up para enviar a los usuarios a la academia
  • Funcionalidades anti-SPAM
  • Instalar Google Analytics y Search Console
  • Cumplir con la GDPR
  • Plugins de seguridad web

Si embargo, para un proyecto como el de seosve.academy, que es una academia online y tiene un sistema de membresías, las funcionalidades cambiarán enormemente:

  • Sistema de academia online: cursos, clases, exámenes y la posibilidad de descargar documentos
  • Tickets de soporte
  • Sistema de suscripción mensual y anual
  • Varios métodos de pago: Stripe, Paypal y transferencia bancaria
  • Sistema de facturación online
  • Reproductor de vídeo sin enlaces
  • Instalar Google Analytics y Search Console
  • Cumplir con la GDPR
  • Plugins de seguridad web

De hecho, no todas las funcionalidades de la academia se han construido dentro de la academia y tenemos externalizadas:

  • Resolución de dudas durante el proceso de compra por WhatsApp y el correo
  • La comunidad privada, que se encuentra en Discord
  • El sistema de reserva de clases particulares y grupales, que se encuentra en Calendly

Esta lista de funcionalidades es esencial para saber qué podemos esperar del diseño web y para poder confeccionar una lista de tareas y, por lo tanto, un presupuesto realista. Tenerla de antemano es vital para evitar malentendidos y que te cobren tareas de más porque “esto no estaba en el presupuesto”.

¿CMS o web a medida?

Empecé mi carrera como diseñadora web en 2008 y por aquel entonces un desarrollador me dijo: Los diseñadores sois taaaaan prescindibles… Pues bien, en pleno 2024 considero que son prescindibles tanto desarrolladores como diseñadores. Antes de enviarme hate por comentarios deja que explique esto que acabo de decir, porque es muy fuerte pero también es verdad.

Si tienes un gran presupuesto, por supuesto que has de contar con un buen diseñador y un buen desarrollador web. De hecho, es posible que si escalas mucho el proyecto tengas a varios de estos perfiles en tu equipo. No obstante, si tu proyecto es pequeño y parte de cero, cuenta que el diseño web es muy caro y el desarrollo a medida lo es aún más. Que no se te olvide: yo soy gestora de proyectos de Marketing Digital. La pasta que se va en diseño y desarrollo no se destina a SEO, redes sociales orgánico o campañas. Es decir, que si todo tu presupuesto se va en diseño y desarrollo, ya me dirás de donde traerás el tráfico.

Dicho lo cual, si tienes un presupuesto limitado mi recomendación es que utilices WordPress, una plantilla gratis como GeneratePress o su versión Pro (enlace de afiliados y disponible en la academia) que permite subir webs prediseñadas rápidamente. Luego la adaptas a tu imagen de marca, tipografía y colores corporativos y a correr. Hay otros CMS que ya presentamos en la clase de Herramientas de Diseño gráfico web pero para nosotras WordPress suele ser la mejor opción en la mayor parte de los casos con los que trabajamos.

Acceso a herramientas de medición

Este es un punto MEGA ULTRA IMPORTANTE. El motivo es que si la web tiene ya visitas y conversiones, un rediseño puede cargarse todo el tráfico. Además, un proyecto que tiene datos históricos es mucho más fácil de hacer despegar que uno que parte de cero. Los accesos que siempre pido son:

  • Google Search Console
  • Google Analytics
  • Acceso a cualquier otra herramienta de medición que tenga la web instalada

Incluso, si veo que la web está más o menos decente a veces instalo Google Search Console en el proyecto antiguo y lo dejo un par de semanitas a ver qué datos me arroja.

¿Cómo crear un presupuesto para una página web? [Exclusivo academia]

¿Qué necesitas antes de empezar?

Ya tienes la preproducción hecha pero antes de empezar a crear tu web vas a necesitar 3 cosas más:

  • La imagen corporativa básica de tu empresa o proyecto
  • La arquitectura SEO de tu web
  • Algunos contenidos Web

Imagen corporativa básica

Tendrás que generar o te tendrán que enviar: el logo en formato vectorial, a poder ser en formato vertical y horizontal, los colores corporativos y la tipografía. Nosotros trabajamos en Illustrator pero es posible que te los envíen también en .pdf

Imagen corporativa básica

Arquitectura SEO

SEO significa Search Engine Optimization, en castellano Optimización en motores de búsqueda. Muchos usuarios que buscan “diseño web” en realidad no necesitan diseño web, sino SEO. El motivo es que haces la web para conseguir ventas, sin tráfico no hay ventas y sin tener bien el SEO (normalmente) no hay tráfico.

Alguien (ya seas tú o tu cliente) deberá haber realizado un estudio de palabras clave y teniendo en cuenta esta información, planteado el menú de la web. No puedes empezar a diseñar sin esto porque la estructura de las URL y los contenidos dependen de las palabras clave seleccionadas. Y a lo mejor me dices: Es que la web no es para SEO. ¿Para qué vas a hacer una web si no es SEO? Un buen ejemplo sería la web de nuestra academia, pero igualmente tuvimos que hacer este trabajo para nuestra web de empresa.

Arquitectura SEO

En cualquier caso, recuerda que tienes nuestra clase de arquitectura SEO en la academia y la plantilla para realizar este ejercicio en exclusiva.

Arquitectura SEO

Contenidos Web

Se puede empezar una web sin tener los contenidos. Puedes hacer una primera aproximación utilizando imágenes prediseñadas y herramientas para generar texto tipo Lorem Ipsum. No obstante, te recomendamos diseñar una página de cada (la home, página de servicios general, página de servicios final, blog y una entrada de blog) y, en cuanto puedas, añadir los contenidos reales.

Este paso se solapa con los siguientes, por lo que ahora si, puedes empezar a diseñar tu web.

¿Cuál es el proceso de creación de una página web?

Con todo lo anterior, es hora de ponernos a trabajar en el diseño de la web. Estos son los pasos fundamentales:

  • Contratar dominio y hosting
  • Crear un proyecto en local o en una plataforma de pruebas
  • Instalar CMS
  • ¡Ahora sí! Aplicar el diseño web

Contratar dominio y hosting

Un dominio es una dirección que nos ayuda a acceder a una página web desde un navegador (por ejemplo, escribiendo seosve.com en la barra de navegación de Chrome). Un alojamiento o hosting es un espacio que alquilamos en un ordenador que contiene todos los archivos de dicha página web. Ese ordenador estará siempre encendido y conectado a Internet para que cualquier persona pueda acceder al contenido.

Para tener una página web profesional es necesario seleccionar tanto nuestro hosting como nuestro dominio de forma correcta.

Crear un proyecto en local o en una plataforma de pruebas

Puedes empezar a trabajar directamente en el servidor, en una plataforma de pruebas o en local. Si no estamos preparados para comprar un dominio y hosting podemos instalar WordPress en nuestro ordenador. De esta manera comprenderemos cómo funciona sin invertir un solo euro. Para hacerlo, podéis utilizar el programa XAMPP. No obstante, para usuarios que no estén demasiado familiarizados con labores técnicas web a lo mejor es un poco lío.

Nuestra solución preferida es trabajar directamente con el dominio y hosting final si el proyecto lo permite, o en plataforma de pruebas si el servidor dispone de ella. Si tienes la oportunidad de trabajar en el dominio y hosting final, tendrás que instalar WordPress. El proceso de instalación es distinto dependiendo de cada servidor.

Instalar CMS

En Raiola (el servicio de hosting que patrocina esta clase) se instala WordPress desde CPanel. A mi personalmente me gusta mucho, ya que no soy desarrolladora y considero que me facilita muchísimo la vida al hacer cualquier configuración.

Instalar CMS

Una vez entremos al panel de control podemos bajar hasta Applications y desde ahí seleccionar WordPress:

Instalar CMS

Llegaremos entonces al panel de instalación, donde simplemente haremos click en “Instalar esta aplicación”.

Instalar CMS

Después podremos seleccionar opciones de ubicación, versión y otros temas relacionados con la configuración de WordPress ¡Muy fácil!

Instalar CMS

¡Ahora sí! Aplicar el diseño web

El diseño de tu web va a depender de:

  • Si es CMS o web a medida
  • El tema que utilices
  • El editor visual que utilice ese tema
  • Los plugins instalados

Siguiendo con el ejemplo anterior, os ponemos un ejemplo de la instalación de seosve.com:

El proceso de diseño fue similar al comentado anteriormente. Al disponer de GeneratePress Pro instalamos una plantilla predeterminada y la modificamos teniendo en cuenta las necesidades de nuestra marca.

Diseño Web

Las opciones de personalización de esta plantilla son muy completas y tiene una profundidad enorme. Aquí podéis ver las de colores:

Diseño Web

Aquí las de tipografías.

Diseño Web

En el curso de WordPress podréis encontrar el tutorial completo de GeneratePress y de los plugins que utilizamos.

Ojo: El diseño web empieza (no termina) cuando publicas la web

A lo mejor estás pensando… Vale, sigo la guía de seosve, monto mi web en un plis plas con una plantilla predeterminada y ya estoy. ¡Pues no! No has hecho nada más que empezar porque a lo mejor tu diseño funciona… o no. O a lo mejor funciona muy bien durante un tiempo y luego cambia Internet completamente y tienes que cambiarlo todo de nuevo. Y así hasta el infinito.

Una web no está grabada en piedra

Una vez un cliente me dijo: Quiero una web que me dure 5 años. A mi se me escapó la risa. Una web no dura nada. O, al menos, no debería dudar nada. Las webs más exitosas generan diseños que generan datos y luego van cambiando sus diseños en base a esos datos. Esto lo hago yo constantemente en todas mis webs, que suelen ser de proyectos pequeños que yo misma puedo manejar.

Pero vamos a un proyecto muy muy gordo: PCComponentes. Estaremos de acuerdo en que esta web es un eCommerce muy exitoso en España. Muchos potenciales clientes quieren una web como esta, sin entender la cantidad de trabajo y el equipazo que tiene detrás. Pues bien, en el enlace anterior ellos mismos explican la cantidad de rediseños y fases por las que ha pasado el proyecto desde su fundación en 2005.

Diseño Web

Se ve además cómo han añadido y quitado funcionalidades, redes sociales y estrategias conforme se ha expandido el proyecto. Y esto me lleva al último punto de la clase: la analítica web.

Analítica web

Ya explicamos en la clase de herramientas para Diseño Web que una web se ha de cambiar y actualizar con el paso del tiempo. Internet cambia muy rápido y los usuarios también. Diseños que en su día funcionaron genial es posible que al cabo de los años se vean desactualizados y sean poco navegables.

Analítica Web

Para medir el diseño de la web existen herramientas que nos van a dar distintas KPIs interesantes. En la academia tenéis en exclusiva la explicación de cómo medimos los diseños web con GA4, Search Console y otras herramientas de UX.

Trabaja en el sector del Marketing Digital desde 2007 y cuenta con estudios reglados de marketing digital, educación, diseño gráfico-web y branding. Actualmente se dedica a gestionar proyectos, dar clases y estudiar un Doctorado en Tecnologías de la Información.

Espacio para dudas y comentarios

Nuestra Newsletter mola