roadmap diseño web

Hola! Me llamo David Zamora y en este artículo te explicaré el proceso que utilizo para hacer páginas para clientes y todo lo que he ido aprendiendo durante mi experiencia como diseñador y desarrollador en estos largos años como freelance.

Antes de empezar, me gustaría decir que lo que voy a contar a continuación puede que no le funcione a todo el mundo. Aunque creo firmemente en mi método (cada vez más perfeccionado) quizás a otras personas les funcione de otra manera.

Sea como sea, a mi me ha funcionado bastante bien y estoy seguro que a mucha gente que empieza como freelance le puede interesar.

Como crear una página web desde cero

Tabla de contenidos

Como ya sabrás, existen muchas maneras de hacer una página web, en este caso nos centraremos en el proceso de creación de páginas con un dominio propio y de forma gratuita.

Crear una página web gratis con dominio propio

Vamos a ver un poco por encima las opciones más comunes que hay para hacer una página web con un dominio propio.

Crear página web en WordPress

Que voy a explicar de WordPress que no sepamos ya. Actualmente, más del 30% de todas las páginas web están hechas con este CMS (casi nada) y creo que es una de las soluciones más versátiles para crear cualquier tipo de página web. Además, no hace falta saber programar, puedes usar cualquier builder tipo elementor para maquetar una página.

Crear página web en HTML

Cuando se habla de hacer una página web en HTML, no solo nos referimos al lenguaje de marcado html, sino que también nos referimos a las hojas de estilo CSS, JavaSscript, lenguajes de backend como PHP o Python y la utilización bases de datos.

Además de implementar todo lo anterior y que funcione, la página web ha de quedar visualmente atractiva y le ha de gustar al cliente.

Siempre puedes utilizar algún framework o plantilla, para mitigar un poco la carga de trabajo y no empezar desde 0.

Crear una página web en HTML es una de las mejores soluciones que hay si quieres algo completamente personalizado y a medida. Eso sí, esta opción es mucho más costosa que crear una página en WordPress u otro CMS.

Crear una página web con Wix u otra plataforma similar

Nunca me he planteado hacer una página web con Wix o una aplicación similar para un cliente. No digo que no se pueda hacer, pero estas aplicaciones suelen estar orientadas a usuarios finales y no a diseñadores/desarrolladores. Además suelen estar muy limitadas a nivel de diseño y funcionalidades.

Pasos para crear una página

Una vez ya tengas decidido todo el tema técnico, ahora “solamente” quedará abordar todo el proceso con el cliente.

Me hubiera encantado que me hubieran explicado estos pasos cuando empecé, así que creo que estos conejos te pueden ser de utilidad, especialmente si estás empezando.

Bueno vamos al lío!

Para empezar a crear páginas web a clientes y para empezar cualquier cosa diría yo, hay que planificarse. La planificación nos va a ahorrar mucho tiempo y mucho dinero. Así que lo primero que te aconsejaría es apuntarte las cosas. Apuntar que es lo que tienes que hacer y cómo lo vas a hacer.

A mi, lo de apuntar las cosas en un papel no me funciona muy bien, prefiero utilizar cualquier aplicación como Google Drive, Trello, Todolist, etc. Realmente da igual donde te lo apuntes, siempre y cuando puedas tenerlo a mano cuando lo necesites.

Vamos al lío.

Primera Reunión

primera reunion

Si exacto, lo has adivinado, la primera reunión es la más importante de todas. Aquí intervienen un montón de factores para que se produzca la venta. Habrá un montón de factores externos que no podemos controlar, pero hay muchos otros factores que sí podemos controlar, incluso utilizar en nuestro propio beneficio. La primera reunión con un cliente es un tema del que se podría hablar largo y tendido. Pero como Ivan de seodelnorte me ha pedido que sea breve y que no me enrolle mucho (siento haberme enrollado un poco más de la cuenta), os voy a decir los puntos más importantes para mi (intentaré ser breve).

Apuntarse las cosas

Apúntatelo todo, no te imaginas la de veces que me han intentando hacer la “trece catorce”. Diciendo una cosa al principio y luego querer otra cosa diferente. Siempre que puedas deja constancia por escrito, si hace falta, puedes enviar otro email posterior a la reunión para confirmar todo lo comentado en la reunión.

No utilices el móvil

Esto es algo personal, pero creo que lo mejor es no utilizar el móvil para tomar notas de la reunión. Queda un poco mal que el cliente esté hablando y tú estés escribiendo en el móvil, ya que no tiene manera de saber si estás tomando apuntes o estás enviando algún meme por Whatsapp.

En mi caso, utilizo una libreta. “¡Pero si antes has dicho que no escribías notas en papel!” Efectiviwonder, no utilizo notas en papel, pero si tomo notas en mi libreta o block de notas en las reuniones. Siempre he tenido la sensación de que a la gente le gusta que tomes notas mientras ellos hablan (toma neuromarketing).

Conoce el negocio de tu cliente

Tenemos que saber qué es lo que quiere exactamente nuestro cliente. No todo el mundo quiere crear una página web bonita y ya está. Quizás tenga necesidades específicas como la captación de leads, venta de productos, etc.

En definitiva, cuantos más detalles sepas del negocio de tu cliente menos te costará saber lo que busca exactamente y arrancar con una idea inicial.

Cobrar una parte antes de empezar

En estos tiempos de incertidumbre, por llamarlo de alguna manera, es importante pedir una paga y señal.

“Tranquilo ya me pagarás cuando puedas” esta frase es uno de los peores enemigos de los freelancers.

Si el cliente se niega o se muestra reticente en este aspecto, es muy probable que tengas problemas para cobrar después. Y si él no muestra una serie de garantías, créeme que no te interesa trabajar con esa persona.

Evidentemente, tienes que ofrecer unas garantías tú también.

Planteamiento

Plantearemos cómo vamos a hacer la página web. Es decir, definiremos cual es su estructura, secciones, categorías, etc. También haremos benchmark de la competencia, para saber qué es lo que funciona y lo que no. Si se te ocurre algo muy obvio que nadie hace, siento decirte que a lo mejor es porque no es la mejor solución. Es por eso, que siempre conviene hacer un poco de espionaje… digo, me refiero al “estudio de la competencia”. 

MockUp de la página

Una vez tengamos clara la estructura de la web y lo que queremos, realizaremos el mockup de la página. Esto se puede hacer de muchas formas. A mi personalmente, me gusta hacer primero un boceto en papel, ya que siempre es más rápido que utilizar cualquier aplicación.

Una vez tengamos el sitio web plasmado en papel, empezaremos a hacer el MockUp que usaremos como Breafing para mostrar al cliente.

Esta es una de mis partes favoritas. Yo suelo usar AdobeXD o Photoshop para hacer el mockup del diseño, pero hay un montón de aplicaciones gratuitas que te pueden servir, como Pencil Project.

Una vez finalizado el MockUp se le entrega al cliente para su validación. Es importante no pasar al siguiente paso antes de recibir el okey por parte del cliente.

Reconozco que soy un poco purista de los mockups, pero en ocasiones, este paso no es estrictamente necesario. Si hacemos una página web informativa de 400€ pues obviamente, no creo que haga falta hacer un mockup.

Diseño de la página

mcokup de la pagina web

Una vez tengamos validado el diseño por parte del cliente, pasaremos a la maquetación del sitio web. Plasmaremos el diseño del Mockup que hemos hecho.

Evidentemente, realizaremos el diseño de la página en un servidor local o de pruebas para poder trabajar mucho más rápido.

Yo suelo usar Visual Studio Code para escribir el código, para proyectos sencillos que no “requieren backend”. Si por el contrario tengo que hacer algo con WordPress o PHP, utilizo Wamp server + Visual Studio Code.

Desarrollo web

desarrollo de la pagina web

Por si alguien no lo sabe, cuando hablamos de desarrollo web nos referimos a la programación, normalmente con PHP, JavaScript o Python, en caso de una página web.

La fase del desarrollo de la página web se suele hacer después del diseño. Se trata de implementar todas las funcionalidades del sitio como formularios de contacto, login de usuarios, sistema de comentarios, etc.

En el caso de WordPress, implementaremos los plugins necesarios para que la página tenga las funcionalidades que el cliente necesita.

Si necesitas comprar algún plugin para hacerle la web a un cliente, recomiendo no cobrarlo directamente e incluirlo en la factura como gastos suplidos*. Así te evitas tener que explicarle al cliente que es un plugin, cómo funciona, para qué sirve, etc…

Revisiones y validación del cliente

Una vez terminado tanto el diseño, como la parte funcional de la web, se lo enseñaremos al cliente para que lo vea y lo pueda testear.

Para no complicarnos la vida, una de las opciones más rápidas es subir el sitio web en un servidor de pruebas (online) o en un subdominio.

Si tu diseño no contiene backend, es decir si está hecha con html, css y js, puedes enseñarle la página web al cliente con una aplicación como netlify.

Desplegar

desplegar pagina web

Me gusta la palabra “desplegar” para referirme a esta fase, y creo que queda mejor que decir “subir la página al servidor”. Pero si quieres parecer un super-profesional-programer, puedes utilizar el término “deploy” para hacer referencia a este proceso.

Aquí es donde vamos a subir la página web al servidor, crearemos las bases de datos necesarias y prepararemos en definitiva, su lanzamiento para que esté online.

Finalización de proyecto (Cobrar)

Esta es la fase donde coges el dinero y echas a correr.

Ahora en serio, después de el largo proceso que supone la creación de una página web, seguro que estarás impaciente para cobrar el duro trabajo de freelance que has hecho. Llegados a este punto, es posible que el cliente se haga un poco el loco, no te preocupes es normal, en estos casos recomiendo tener un poco de paciencia.

Puestos a dar consejos, te voy a dar otro que he aprendido después de algunos años como freelance: Normalmente, “cuanto más insistas en cobrar, menos caso te harán”.

Entonces, ¿Significa esto que no le tengo que decir nada al cliente? No, por supuesto que tienes que decírselo. De hecho creo que la mejor manera de hacerlo es de forma directa y respetuosa, pero sin hacerse pesado.

Indexación

la buena fe de indexar

Cuando hayas cobrado y ya tengas el fajo de billetes en tu mano, ya podrás indexar con tranquilidad la página web de tu cliente.

Lo que suelo hacer yo es abrirle una cuenta de Google Search Console e indexar el sitio. Esto no es obligatorio, pero es algo que se agradece, bueno a mi no me lo han agradecido nunca, pero lo hago porque así el cliente ve la página web en google más rápido.

Y aquí termina el proceso de creación de una página web como freelance, más o menos resumido…

Ahora vamos a contestar algunas preguntas típicas que la gente suele hacerse cuando empieza en como freelance.

Se puede crear una página web gratis

Por supuesto que sí, la opción más sencilla es utilizar un CMS como WordPress, que no requiere conocimientos en programación y es fácil de aprender. Con WordPress puedes hacer páginas web muy completas sin gastarte ni un céntimo.

También puedes hacer una página web gratis con HTML, CSS, JavaScript, PHP, etc. y cualquier lenguaje de programación.

¿Cuánto vale hacer una página web?

El precio de una página puede variar en función de muchos factores. Pero después del tocho de artículo que has leído, imagino que no te valdrá con un simple “depende”. Así que, a continuación voy a intentar explicar de forma muy resumida los principales tipos de páginas web y sus costes de mercado.

Antes de nada, quiero recalcar que no vamos a hablar de todos los costes derivados de una página web, como las fotografías, logo, texto, etc. Veamos pues los principales tipos de diseños web que puedes encontrar en cualquier agencia de diseño web o marketing digital en general.  

Diseño WordPress

hacer paginas en wordpress

El diseño de páginas web en WordPress es la opción más común. Es una solución económica y relativamente fácil de implementar.

Puedes usar cualquier tipo de plantilla para su diseño o utilizar plugins de maquetación como Elementor, Divi, Beaver Builder, etc. Si tienes poco presupuesto, es una de las mejores opciones.

El precio de mercado de una página web hecha en WordPress es de 500€ a 1000€ aproximadamente.

Ventajas

  • Es fácil de instalar.
  • Facilidad de administración (ideal para que el cliente pueda autogestionar).
  • Es de código abierto.
  • Es gratis.

Contras

  • Nivel de personalización y funcionalidades un poco limitadas.
  • Contiene código sobrante.
  • Riesgo de vulnerabilidad (especialmente si no se configura adecuadamente).

WordPress a medida

wordpress theme a medida

Un WordPress a medida es una solución más personalizada que un wordpress tradicional. Normalmente no se utiliza una plantilla comercial, sino un desarrollo con un Starter theme o una solución a medida desde cero. Si quieres ver un buen ejemplo de este tipo de diseño, échale un al artículo de Cómo crear un Theme para WordPress a medida.

El precio de mercado de un diseño WordPress a medida, es a partir de 1000€.

Ventajas

  • Mayor nivel de personalización.
  • Menos código sobrante (CSS, Scripts, etc).
  • Carga de la web más rápida.

Contras

  • Riesgo de vulnerabilidad (aunque un poco menor que con WordPress tradicional).
  • Mayor coste que WordPress con plantilla estándar.
  • Requiere conocimientos avanzados (HTML, CSS y PHP.

Página web a medida (html)

codigo html

Como hemos comentado anteriormente, cuando hablamos de webs a medida o en html, nos referimos a páginas hechas con un frontend (HTML, CSS y JS) y con un backend (PHP, Python, MySQL, etc).

Se podría decir que esta es la opción más profesional, pero también más costosa que hacer una web con WordPress.

El precio de un diseño a medida suele ser a partir de los 1500€ – 2000€ (aproximadamente).

Ventajas

  • Página más rápida.
  • Es más seguro.
  • Es más rápido.
  • Máximo nivel de personalización.

Contras

  • Requiere más trabajo.
  • Es bastante más caro que otras opciones.
  • Requiere conocimientos amplios en diseño y desarrollo web.

Conclusión final

No quería acabar el artículo sin comentar algunas conclusiones que creo que son interesantes, especialmente para aquellas personas que quieran iniciarse en el diseño web.

Lo primero que le diría a alguien que empieza, es que no subestime el diseño web.

Existe una parte técnica de la que todo el mundo habla, pero también hay otras partes, como la estética, de la que no se suele hablar tanto y en ocasiones es más complicada. Una vez tienes la parte técnica y la parte estética dominada, es decir, páginas web funcionales y con un diseño atractivo, has de empezar con tratar a los clientes, que es todo un mundo ¡En ocasiones, te tendrás que armar de paciencia!

Otro consejo que considero importante, es que creo que es mejor un WordPress bien optimizado que no un «diseño a medida mediocre» en HTML. Esto puede parecer una tontería pero a día de hoy sigo viendo algunas páginas web a medida sin certificado SSL o cargando un montón de librerías y peticiones externas que hacen que la página vaya lenta.

Bueno, pues hasta aquí la lluvia de consejos.

Aunque parezca mentira, este artículo es solo un resumen de lo creo que hay que hacer para realizar una página web como freelance desde cero y tener el control de la situación.

Ahora si, me despido, pero no sin antes animarte a que pruebes las cosas por ti mismo y encuentres lo que mejor te funciona por ti mismo.

⬇️ Si te has quedado con alguna duda o quieres dar tu opinión ⬇️

Posts relacionados

Deja una respuesta