25 pasos para pasar de ser Diseñador Gráfico a Diseñador Web

Si eres diseñador gráfico ya tienes unas habilidades y conceptos de diseño muy avanzados. Te cuento mi experiencia de qué cosas me han sido útiles para reciclarme en internet y convertirme en un Diseñador Web avanzado. Si eres un buen diseñador gráfico tienes muchísima ventaja para destacar en internet. Vamos a ello.

El diseño web te puede servir como complemento a tus servicios. Resulta muy interesante que puedas ofrecer a tu cliente el diseño de su web además de su imagen gráfica. Para ti va a ser más rentable. Por otro lado, el cliente se beneficia de que sea un único diseñador el que se encarga de manera integral de todo el proyecto. O también puede servir como especialización única.

A esto le sumamos que hoy en día existen gestores de contenido como WordPress que permiten hacer una web de calidad de una manera accesible para todo el mundo. Ya no es imprescindible que seas un experto en código para hacer webs profesionales.

Dada la gran competencia que existe hoy en día en el mercado laboral, se hace necesario adquirir las competencias necesarias en un curso de diseño grafico online o de diseño gráfico en Madrid para aprender todos los trucos de diseño.

Dicho todo lo anterior, si actualmente eres diseñador gráfico y aún no haces webs, ahora es el momento. Además, como diseñador gráfico siempre vas a tener cierta ventaja frente al resto ya que posees bastante experiencia manejando programas de diseño y edición.

Conviértete ya en un súper diseñador web

En este post te voy a dar un montón de consejos para que consigas adquirir la capacidad de diseñar webs del mismo modo que diseñas elementos gráficos en el entorno offline. Para ello, debes comenzar a familiarizarte con el mundo online y empezar a hablar el lenguaje de las webs.

10 Diferencias entre el diseño gráfico y el diseño web

Para diseñar en entorno web es necesario que entiendas bien las diferencias esenciales entre el papel y la pantalla, pues cada uno tiene sus particularidades. Resoluciones, tamaños de pantalla, color, unidades de medida, formatos de imagen, etc. Toma nota:

1. Resolución para imprimir VS resolución web

Para imprimir en papel normalmente se pide una resolución que oscila entre los 150 píxeles por pulgada de la impresión digital a los 300 ppp del offset.

En internet no es necesario subir las imágenes con tanta resolución. Tradicionalmente, las pantallas de los ordenadores vienen ofreciendo una resolución de 72 píxeles por pulgada, por tanto esta es la calidad en la que debes guardar tus imágenes para que se vean correctamente en las webs.

Es muy importante que no subas las imágenes a la web con más calidad de la necesaria, ya que estarías aumentando el tiempo de carga y perjudicando la usabilidad y el posicionamiento SEO de tu web.

Pero ojo, a pesar de que el standard ha sido siempre 72ppp, en los últimos tiempos comienzan a proliferar dispositivos retina que aumentan la resolución y requieren que subas tus imágenes al doble de calidad.

2. Tamaños del diseño en papel VS tamaños de pantalla

En impresión física, a veces puedes enviar un archivo a imprimir con un tamaño y peso mayor del necesario por si acaso te quedas corto en cuanto a calidad de impresión, pero en web no, ya que por mucho que aumentes el tamaño o la resolución de los elementos, la pantalla va a mostrar las imágenes en la resolución exacta y en el ancho exacto que tengan.

Cuando generas imágenes para una web, debes subirlas al tamaño exacto en el que se van a mostrar, ya que ponerlas a un tamaño mayor aumentaría el tiempo de carga.

Si vas a subir imágenes en modo pantalla completa, debes subirlas al tamaño de la pantalla más grande en la que preveas que va a verse tu web, para que en ningún caso la imagen quede pixelada o cortada.

Por ejemplo, si en tu web tienes imágenes de cabecera en full width (ancho completo), debes subirlas a 2560px de ancho si quieres que se vean óptimamente en un iMac de 27 pulgadas.

A continuación te pongo un listado de dispositivos con sus respectivos tamaños de pantalla más comunes en píxeles de ancho:

• Pantalla normal de escritorio o portátil: a partir de 1224 píxeles.
• Pantallas grandes: de 1824 a 2560 píxeles (tamaño del iMac de 27»).
• Tablet: de 768 a 1024 píxeles.
• Smartphone: de 320 a 480 píxeles.

3. Formatos de color en impresión física VS formatos de color en pantalla

En impresión física, se manejan parámetros de color como CMYK o Pantone. En web, los colores se codifican en RGB (Red, Green, Blue) o hexadecimal (código de color con # y 6 caracteres). Cuando trabajas en color de pantalla, los colores tienen mayor viveza.

Si trasladas un color web a color de impresión física, el color suele presentar una pérdida de luminosidad, con lo cual si quieres hacer la equivalencia entre colores de impresión y web tendrás que recalcular manualmente para que queden lo más parecido posible.

Con una herramienta como Paletton puedes elegir una buena paleta de colores web a partir del color que quieras y obtener sus valores hexadecimales para usarlos en tu proyecto.

4. Unidades de medida diferentes

En impresión física los elementos se miden en milímetros, centímetros, etc. En webs, las dimensiones se miden en píxeles. La cantidad de píxeles que tiene una pantalla depende del dispositivo: monitores, tablets, smartphones, etc.

Además, no todos los dispositivos tienen la misma resolución, es decir, en el mismo espacio hay pantallas que ofrecen más píxeles que otras. Todo esto debes tenerlo en cuenta a la hora de diseñar.

Para saber cuántos pixeles mide un elemento de tu pantalla puedes instalar la extensión Page Ruler para Google Chrome.

5. Formatos de imagen para imprimir VS formatos de imagen web

Los formatos de imagen más habituales en las webs son JPG y PNG. El formato PNG va genial para subir imágenes recortadas sin fondo o con transparencia. En cambio, en impresión física, los archivos se suelen enviar a imprimir en formato PDF, AI o EPS, estos dos últimos son formatos vectoriales.

Cuando trabajas en papel, cualquier impresora puede imprimir vectores directamente en formatos de vector como .ai, .eps, .svg, etc.

En entorno web, a priori el navegador no puede interpretar ni mostrar estos formatos de vectores, con lo cual lo ideal es que exportes tus vectores en formato .png o .jpg. No obstante, si trabajas en WordPress, puedes subir directamente vectores a una web mediante plugins como SVG Support.

Al subir los vectores a la web te aseguras de que las imágenes se verán siempre perfectas, independientemente del tamaño y la resolución de la pantalla.

6. Costes y tiempos para crear el diseño y realizar modificaciones

En diseño offline tradicional, se suelen incluir bastantes modificaciones dentro del servicio que ofreces, porque normalmente no tardas demasiado en cambiar un logo de posición o modificar el color de un elemento si te lo pide el cliente.

En web, las modificaciones sobre el diseño realizado son más laboriosas y costosas en tiempo, con lo cual deberías tenerlo en cuenta a la hora de planificar y cobrar el trabajo.

No empieces a diseñar hasta que el proyecto esté bien definido y el cliente esté bastante convencido sobre la línea a seguir. Además, estaría bien que contemples cierto margen extra en los tiempos para realizar el proyecto, ya que en una web influyen bastantes factores y a veces tienes que solucionar cosas que te van a llevar varios días.

El diseñador web debe dar un margen lo más amplio posible para trabajar con mayor tranquilidad y cubrir las eventualidades.

7. Optimización para diferentes navegadores y optimización de la velocidad

Cuando haces un diseño para imprimir y lo envías a imprenta, las únicas dudas que te suelen surgir son: ¿Se verán bien los colores impresos? ¿Las fotos quedarán bien?

En cambio, cuando haces una web, debes tener en cuenta que existen diferentes navegadores y que no todos muestran el contenido exactamente igual, algunos efectos, animaciones y elementos pueden varias en función del navegador.

Por ello, es recomendable que a medida que diseñas vayas comprobando que todo se ve correctamente en los principales navegadores como Chrome, Firefox, Safari y Explorer. Además, cuando envías un archivo a imprimir no importa el peso, pero en una web debes optimizar el tiempo de carga a conciencia.

Con herramientas como GTMetrix puedes medir la velocidad de carga de una web y obtener datos muy valiosos sobre cómo mejorarla.

Para que tu web tenga un buen rendimiento en velocidad te aconsejo que contrates un hosting premium y profesional, ya que la diferencia entre un buen hosting y otro menos bueno suele ser notable.

8. Interacción del usuario con el diseño

En diseño gráfico offline, lo más importante de todo es la composición correcta y atractiva de los elementos, que quede bonito y, por supuesto, que el diseño transmita lo que necesita el cliente. Sin embargo, el usuario no interactúa demasiado con la pieza gráfica, pues ya está impresa y no cambia su aspecto.

En diseño web hay que tener en cuenta la interacción con el usuario, hay que incentivar que los usuarios hagan clicks, naveguen por la página y permanezcan el mayor tiempo posible, se suscriban a nuestras listas de correo, compren nuestros productos, compartan en sus redes sociales, y que todo ello lo hagan con la máxima facilidad.

Por ello, debemos prestar especial atención en disponer la estructura y los elementos de modo que todo sea muy entendible para el usuario y se fomente esa interacción.

9. Tipografías que puedes usar para diseñar

Cuando diseñas una pieza gráfica offline y la envías a imprimir, puedes incluir el paquete de tipografías junto al archivo de impresión o directamente incrustarlas en el documento. En cambio, en diseño web, tradicionalmente tenías que ceñirte al paquete básico de fuentes que venían en los ordenadores Windows (Arial, Times New Roman, Verdana, etc…).

Si usabas una tipografía diferente que sólo tú tenías instalada en tu ordenador, el usuario que veía la web desde su ordenador no podía ver la tipografía y en su lugar aparecía una de sustitución, con lo cual tipográficamente los diseños eran un poco pobres.

De un tiempo a esta parte, gracias a bibliotecas online de tipografías como Google Fonts (gratuita) o Adobe Typekit (de pago), puedes insertar en la web letras bastante más modernas y con la seguridad de que el usuario las verá correctamente.

Pero, ¿y si quieres usar una tipografía que no está en ningún paquete de fuentes online? ¿Y si el cliente te pide usar su propia tipografía corporativa?

Gracias al código CSS (o con plugins o extensiones para gestores de contenidos como WordPress) puedes implementar cualquier tipografía que quieras en una web.

Con una herramienta como What Font, que es una extensión para Google Chrome, puedes obtener el nombre de cualquier tipografía que aparezca en tu pantalla para después usarla en tu proyecto o puedes ver la recopilación de las mejores Google Fonts que hemos recopilado para ayudarte a que escojas la tipografía que le de un diseño especial a tu web.

¿Cómo instalar una tipografía propia en una página web?

Si quieres subir una tipografía propia a tu sitio puedes generar un Webfont Kit mediante herramientas como esta que ofrece FontSquirrel. Subes la fuente, generas el pack, subes los formatos generados y finalmente insertas el código CSS que te da la herramienta en tu hoja de estilos CSS.

10. Posibilidad de editar el diseño una vez terminado

En diseño gráfico offline, cuando envías un diseño a imprimir has de tener muy presente que una vez impreso no puedes modificar la pieza, a no ser que modifiques el diseño y vuelvas a enviarlo a imprimir, con el consiguiente aumento en el coste ya que estarías haciendo más de una tirada.

En cambio, en diseño web el contenido es editable todo el tiempo y puedes modificarlo cuando quieras.

A pesar de esto, no deberías confiarte, pues cada cierto tiempo Google rastrea tu web y la muestra en resultados de búsqueda, con lo cual si cometes un error puede que modificarlo sea fácil, pero luego tendrás que esperar a que Google vuelva a rastrear tu web y actualizar el modo en que ha indexado el contenido para que se vea correctamente en el buscador.

Consejos para convertirte en diseñador web

Teniendo en cuenta todos estos factores y diferencias entre diseño gráfico offline y diseño web online, voy a recomendarte una lista de consejos para que realmente consigas convertirte en diseñador web, fruto de mi experiencia vital:

1. Elige una plataforma adecuada

Antes de ponerte a diseñar webs, decide en qué tecnología vas a especializarte. Hacer webs en HTML y CSS como se han hecho toda la vida tiene el inconveniente de que requiere estudio y experiencia para realmente sacarle provecho. ¿Por qué no mejor un gestor de contenidos que te permite diseñar fácil y relativamente rápido?

Decide qué gestor de contenidos o CMS es el ideal para ti. Hay diversas opciones: ¿WordPress? ¿Joomla? ¿Drupal? Yo te recomiendo sin duda que elijas WordPress, ya que es la más económica y al mismo tiempo la que te ofrece mayores posibilidades de personalización y diseño.

Hoy en día, además, casi todos los clientes que quieren una web piden que sea en WordPress por su facilidad para actualizar el contenido y modificar ajustes, lo cual brinda la cliente mucha independencia y control sobre su propia web.

Aquí tienes una guía completa para aprender a diseñar webs con WordPress. Y si te interesa, nosotros hacemos un curso práctico de WordPress en el que sales con tu página web terminada, y sabiendo hacer más. Lo hacemos en modalidad presencial o en modalidad online con clases en directo en streaming + tutorías individuales.

2. Elige plantillas premium para obtener mejores resultados

Si vas a trabajar con un gestor de contenidos, debes saber que la elección de una buena plantilla es esencial. Hay bastante diferencia entre elegir una plantilla realmente buena y otra que lo sea menos.

Una plantilla de calidad estará bien estructurada y codificada, y funcionará con mayor fluidez, sin fallos, con mayor velocidad de carga, etc.

Además, las plantillas premium suelen incluir muchas más opciones para personalizar el contenido y conseguir un mejor resultado, tienen mejor servicio de soporte, efectos y animaciones modernas, compatibilidad con otras plataformas y extensiones, etc.

3. Diseña de manera global y pensando en los múltiples dispositivos que existen

Ten en cuenta que cuando diseñas webs tienes que adoptar una mentalidad más amplia que cuando diseñas en offline, ya que el contenido se debe adaptar y funcionar perfectamente en todos y cada uno de los dispositivos del mercado, y no puedes prever cómo se verá la web en todas las pantallas que existen porque hay miles de dispositivos distintos.

Por tanto, a la hora de diseñar, asegúrate de que el contenido es responsive y se adapta proporcionalmente a todos los tamaños, y sobre todo no te centres únicamente en cómo se ve la web en tu propio ordenador. Ten siempre a mano otros dispositivos para hacer pruebas, o usa herramientas como ScreenFly  que te permiten ver tu web en diferentes tamaños y formatos de pantalla.

Las plantillas premium son ya responsive, por tanto esto no es algo que deba preocuparte en exceso. Simplemente, no te olvides de testear la web en múltiples dispositivos para evitar sorpresas.

En este post tienes un listado de tamaños de pantalla según cada dispositivo y cómo adaptar la web a cada uno de ellos mediante código HTML y CSS.

4. Piensa aún más en el usuario y analiza bien la usabilidad del sitio

En diseño gráfico, por supuesto que también debías tener en cuenta el modo en que el usuario iba a consumir tu contenido. Pero en diseño web debes prestarle incluso más atención, porque en gran medida el éxito o fracaso de una web estará relacionado con que los usuarios interactúen, generen conversiones, leads, ventas, etc.

Por tanto, diseña estructuras que fomenten esta interacción, dispón los elementos de modo que de alguna manera orientes el modo en que el usuario va navegando por el sitio. Piensa siempre en la usabilidad, que todo sea entendible, que los elementos estén donde deberían estar, que los botones sean fácilmente clickables, que los menús principales siempre sean visibles.

Con una herramienta como Hotjar puedes monitorizar mapas de calor de tu sitio web para saber dónde hacen click los usuarios y grabar sesiones para observar cómo navegan por la web.

5. Optimiza y reduce el peso de las imágenes siempre que puedas

No olvides optimizar siempre tus fotos, esta debería ser una obsesión constante como diseñador web si quieres que tus sitios realmente carguen rápido, lo cual va a incidir positivamente en el posicionamiento SEO y por supuesto en la usabilidad.

Te recomiendo subir las imágenes al tamaño que se van a ver en pantalla, no más. Si es para pantallas retina, súbelas al doble de resolución. Utiliza herramientas como Photoshop para optimizar tus fotos, colocándoles el tamaño exacto y la resolución adecuada. Tienes alternativas gratuitas online a Photoshop como Fotor, Gimp.

Si además quieres una reducción extra de peso, te recomiendo dos aplicaciones online muy buenas: TinyPNG y JPGMini.

En este post tienes un montón de consejos para reducir el tiempo de carga de tus webs.

6. Haz un seguimiento y mantenimiento constante de la web

Como diseñador web, tu labor no termina al acabar el diseño del sitio. Una vez diseñado, deberás prestar atención a su funcionamiento y llevar a cabo tareas de mantenimiento para que todo siga estando correctamente. Las webs reciben actualizaciones cada cierto tiempo: nuevas versiones del software, plantilla, plugins, etc.

Una web actualizada funcionará de manera óptima y evitarás problemas puntuales. Además, será más segura. Pero ojo, el mantenimiento de una web tiene un coste en tiempo y debes cobrarlo aparte del diseño del sitio, según las tareas que vayas a llevar a cabo.

7. Mantente actualizado y no pierdas la curiosidad

Lee muchos blogs y publicaciones sobre diseño web, busca webs que te sirvan como fuente de inspiración y analiza su funcionamiento, empápate de buenas ideas para tener siempre inspiración a la hora de diseñar tus webs, aprende cada día.

En el entorno online los diseños antiguos no quedan nada bien y además piensa que una web tiene un periodo de vida útil de unos años, por lo que deberías diseñar webs muy modernas para que no queden obsoletas demasiado pronto.

A diferencia del diseño gráfico tradicional, el diseño web está en constante cambio y evolución, por tanto si no quieres quedarte atrás deberías suscribirte a blogs interesantes, leer foros donde se plantean problemas y soluciones, etc.

8. Comparte tu contenido y trabaja tu marca

Si quieres tener muchas propuestas de trabajo y proyectos web, te recomiendo que hagas una web o blog donde compartir tus conocimientos. Esto te sirve para darte a conocer y trabajar tu marca personal como diseñador, además de traer tráfico a tu sitio y posibles clientes.

Sé generoso, comparte lo que sabes, crea comunidad en torno a tu blog y los resultados llegarán. Por supuesto, dedica el tiempo necesario para diseñarte una buena página ya que tu propia web es tu verdadera carta de presentación online.

Coloca tu portfolio online para que tus potenciales clientes puedan ver tus trabajos, pues son al fin y al cabo el mejor modo de demostrar tu valía como diseñador web.

9. No olvides que eres diseñador y aprovéchalo

Muy bien, estás haciendo webs y ahora tu entorno ha cambiado, pero sigues siendo diseñador y eso implica que tienes cierta ventaja frente al que no lo es. Eres capaz de generar fácil y rápidamente los elementos de diseño para la web como franjas, banners, iconos, etc.

Además, ves todo el sitio como una entidad global con coherencia gráfica. Entiendes de colores y sus combinaciones más acertadas. Tienes ojo para diferenciar algo elegante de algo que visualmente no funciona.

En definitiva, aprovecha tu factor diferenciador y aplica toda tu experiencia del offline en el entorno online.

Diseña tu imagen de marca de manera que se vea coherente y atractiva en todos los soportes, tanto tu web como las imágenes que compartas en redes sociales, fotos de perfil, aplicaciones corporativas, etc.

10. Ponte a diseñar webs ya

Empieza a aceptar propuestas para hacer webs. Si eres diseñador gráfico offline, probablemente tendrás una cartera de clientes que son la base de tus ingresos.

Aquí te voy a recomendar algo muy importante: lánzate con decisión al entorno web y comienza a aceptar proyectos online aunque al principio te sientas un poco más inseguro y pienses que lo más cómodo es seguir diseñando offline ya que es un ámbito en el que te manejas perfectamente y has conseguido minimizar los problemas.

No te acomodes. Si realmente quieres ser diseñador web, ten en cuenta que para aprender a hacer buenas webs lo mejor es hacer muchas webs y enfrentarte a problemas reales que irás dominando con el tiempo y la experiencia. Asume el reto y a por ello.

Para que empiecen a llegarte solicitudes de proyectos desde tu página web, sé muy claro a la hora de estructurar tus servicios y coloca tus tarifas en un lugar visible para que el cliente sepa cuáles son tus precios aproximados.

Otra cosa que te aconsejo es que diseñes un formulario atractivo para ganar suscriptores y enviarles buenas promociones de vez en cuando. Como diseñador gráfico, tienes la ventaja de que puedes maquetar newsletters espectaculares que consigan más clicks.

Aquí tienes una guía para diseñar newsletters y programarlas con Mailchimp.

11. Estudia un poco de código o al menos aprende a editar el código de las webs

Conocer código web (HTML y CSS) puede ser muy interesante para ti como diseñador, ya que te da una mayor libertad y capacidad de personalizar las plantillas.

Para hacer una web con un CMS no es necesario ser un experto en código, pero no viene mal saber un poco al menos o tener nociones sobre cómo modificar tu código web.

En este post te muestro cómo modificar y personalizar el código HTML y CSS y un extenso listado con los códigos web más útiles para los diseñadores y cómo aplicarlos.

Además, si sabes código HTML y CSS y usas una herramienta como Mailchimp, puedes crear newsletters totalmente personalizadas y gráficamente muy atractivas.

No olvides que el Email Marketing sigue siendo una estrategia muy recomendable. Aprovecha que eres diseñador para crear newsletters espectaculares que te ayuden a conseguir tus objetivos.

12. Aprende un poco sobre SEO y aplícalo en tus proyectos web

De poco sirve que diseñes webs muy atractivas si luego no posicionan bien en Google.

Quizá no tengas pensado ser un experto en SEO, pero viene muy bien que aprendas herramientas, trucos y consejos para aplicarlos en tus proyectos web.

En este artículo te contamos cuáles son los mejores plugins para SEO en WordPress. Si lo haces con plugins, siempre será más fácil y rápido.

En este otro te mostramos nuestra recopilación de los mejores libros sobre SEO, WordPress, Marketing, etc.

Cómo elaborar un presupuesto de diseño web

Para hacer un presupuesto de diseño web has de tener en cuenta el briefing (documento donde el cliente expone las necesidades del proyecto) o directamente mantener mínimo una reunión con él y tratar de obtener toda la información posible sobre lo que quiere conseguir con su nueva web.

Una vez que tienes toda la información sobre el proyecto, deberías desglosar todas estas cosas en el presupuesto y poner precio a tus servicios en función del tipo de web que vayas a hacer.

También puedes cobrar por horas, pero esto es más difícil de precisar porque no todo el mundo trabaja a la misma velocidad.

Aquí tienes una guía completa en PDF para hacer un presupuesto web paso a paso.

¿Cuánto cuesta una página web?

El precio de una página web puede variar en función del método de trabajo (código, CMS), tipo de web (corporativa, blog, tienda, etc), y otros aspectos importantes del proceso.

Si haces una web con código puro, es decir, sin utilizar un gestor de contenidos, lógicamente el precio ha de ser mayor ya que el tiempo invertido suele ser superior. A día de hoy te desaconsejo que hagas webs corporativas mediante código ya que tendrás que invertir más tiempo, con lo que encarecerás el precio sin que el resultado tenga por qué ser mejor frente a la opción del gestor de contenidos o CMS.

Realmente no son muchos los clientes que van a necesitar un desarrollo a medida, sólo en casos puntuales, ya que existen infinidad de plugins y extensiones prediseñadas a precios realmente asequibles para casi cualquier cosa que necesite tu proyecto.

En Codecanyon puedes encontrar multitud de plugins de gran calidad para hacer casi cualquier cosa que se te ocurra en una web. Te recomiendo visitar nuestro artículo de los mejores plugins usados por los mejores blogs de marketing en donde encontrarás una recopilación de 33 plugins que te serán de gran ayuda para mejorar la web.

Para los desarrollos a medida, podrías colaborar o contratar a un desarrollador que pueda modificar el código de los temas y plugins a petición del cliente.

Si optas por ofrecer un presupuesto web basado en CMS, podrás dar un precio más competitivo y ofrecer un resultado gráficamente incluso superior porque podrás dedicar mucho más tiempo a mejorar la apariencia gráfica sin preocuparte tanto por el código.

Entonces, ¿cuanto cobrar por una página web con un CMS?

Una web corporativa básica, hecha con un CMS por un profesional freelance, suele oscilar de media entre los 1500-3000€.

Si además incluye tienda online o plugins avanzados para hacer cosas como intranets, foros, traducciones, menús avanzados, sistemas de gestión de datos como portales de empleo, anuncios, directorios etc., el precio puede oscilar entre los 3000-5000€ aproximadamente.

Todo esto puede variar en función de la cantidad de funcionalidades extra que requiera el proyecto (ten en cuenta que los precios planteados suelen ser superiores cuando se trata de una agencia la que realiza el desarrollo).

Si el proyecto va a requerir mucha personalización extra en la plantilla, tendrás que incrementar el coste porque modificar el código es más costoso en tiempo y en algunos casos necesitarás incorporar a un desarrollador.

Por tanto, gracias al CMS ofrecemos a nuestro cliente 3 ventajas muy importantes:

• Apariencia gráfica muy profesional basada en plantillas premium
• Independencia del cliente para subir y gestionar su propio contenido
• Menor coste y menor tiempo de desarrollo y modificaciones

¿Merece la pena incluir el precio del hosting en el presupuesto, así como las plantillas, plugins de pago, etc?

Estos servicios te recomiendo desglosarlos aparte de tus propios servicios de diseño, ya que son requerimientos económicos que tiene el proyecto y de cuyo pago debería ocuparse el cliente con total independencia.

Mejor guiar al cliente para darse de alta en las diferentes plataformas: hosting, portales de venta de temas y plugins, suscripciones a servicios. Si los compras tú tendrás que incluirlo en el presupuesto y estar cada año presentándole la factura por un servicio que tú realmente no estás rentabilizando.

Lo ideal es que el cliente tenga total autonomía y pueda gestionar él mismo su propio hosting y demás servicios que haya comprado.

¿Y si mi cliente no tiene ni idea de hostings? ¿Y si va a necesitar mantenimiento de la web?

Si tu cliente no sabe nada de aspectos técnicos, probablemente en el futuro va a requerir tus servicios para cuestiones concretas de la web que no pueda hacer por sí mismo. No olvides que tú estás cobrando por diseñar una web, lo cual no incluye consultoría ni mantenimiento indefinido.

Calcula cuántas horas al mes puede llevar resolver estas necesidades de tu cliente y pon precio a tu hora de trabajo. Recuerda que todos los profesionales (médicos, abogados, profesores) cobran por sus horas de trabajo. El diseño no tiene por qué ser una excepción.

Herramientas para diseñadores web (casi todas gratuitas):

Para optimizar el peso de las imágenes:

• JPGMini
• TinyPNG
• Compressor

Para editar fotos y vectores:

• Fotor
• Gimp
• Inkscape

Para testear la web en diferentes dispositivos:

• ScreenFly
• Responsinator
• Responsive Test

Para medir y optimizar la velocidad de carga de la web:

• GTMetrix
• Google PageSpeed
• Test My Site

Para analizar la web al completo y mejorarla

• Woorank
• Web Developer
• Pingdom

Para obtener paletas de colores:

• Paletton
• Coolors
• Flat UI Colors

Para comprar recursos muy buenos (plantillas, vectores, audio, vídeo):

• Envato
• Elegant Themes
• Template Monster

Para descargar imágenes y vectores gratis

• Freepik
• Pixabay
• Pexels

Para conseguir iconos gratuitos y de calidad

• Fontawesome
• Flaticon
• Iconfinder

Para ver tipografías e incluirlas en el sitio web

• Typecast
• Typewonder
• Webfont Test
• What Font

Para buscar nombres de dominio interesantes y creativos

• Domainsboot
• Namemesh
• Domainr

Para analizar enlaces y otras cuestiones SEO

• Hrefs
• Majestic
• Open Site Explorer

Para monitorizar la navegación de los usuarios por la web

• Hotjar

Para medir el tamaño de cualquier elemento de tu pantalla

• Page Ruler

Danos tus consejos o plantea alguna duda

¿Qué te ha parecido este artículo? ¿Tienes algún otro consejo para dar a todos aquellos diseñadores gráficos que quieran ser diseñadores web? Déjanos tu comentario y hagamos de este artículo una guía para ayudar a todos los que quieren dar el salto del offline al online.

Si quieres mejorar tu marketing, aquí te proponemos 615 acciones de marketing y publicidad según 25 expertos