5 claves para identificar un dise├▒o web profesional y de calidad
5 claves para identificar un dise├▒o web profesional y de calidad

5 claves para identificar un dise├▒o web profesional y de calidad

27/04/2019
Tiempo lectura:

Shutterstock radoma

Si est├ís leyendo este art├şculo es porque quieres tener un dise├▒o web profesional, ┬┐verdad?

Perm├şteme decirte que no eres ning├║n bicho raro, todo lo contrario.

Hoy en d├şa, todos los negocios, empresas, blogs o tiendas online quieren tener un dise├▒o web profesional y que su p├ígina est├ę a la ├║ltima en cuanto a tendencias creativas.

Todos queremos una web espectacular, creativa, diferente, que cargue rápido.

De hecho, me suele llamar la atenci├│n cuando un cliente me pide presupuesto para dise├▒ar su web y me dice lo siguiente: quiero que la web sea bonita, que funciona bien y refleje mi personalidad.

Y yo me quedo pensando: claro, como todo el mundo ?ÔÇŹÔÖé´ŞĆ

¡De fotocopias está lleno el mundo!, ¿no crees?

Todos hemos asumido que para estar en internet necesitamos una imagen trabajada, un diseño profesional que además represente los valores de nuestro negocio o marca.

Entonces, ┬┐por qu├ę sigo escuchando / leyendo frases del tipo "la web me la va a hacer mi sobrino" o "compro una plantilla y monto la web yo mismo"?

As├ş es, son solo un par de ejemplos de los comentarios que recibimos los dise├▒adores web cuando entregamos un presupuesto.

(Si hay alg├║n dise├▒ador en la sala, puede confirmarlo en los comentarios).

Querido inepto, ¿de verdad que tú o tu sobrino, por muy avispados que seáis, vais a conseguir el mismo resultado que un diseñador web freelance con años de experiencia?

┬┐Acaso cuestionas al fontanero que va a tu casa a arreglar la reparaci├│n de tu caldera?

No, ┬┐verdad?

Entonces, ┬┐por qu├ę subestimas el trabajo de un dise├▒ador web profesional? (y esto lo extiendo al Dise├▒ador Gr├ífico, Community Manager, fot├│grafo y creativo en general).

C├│mo diferenciar un dise├▒o web profesional de uno amateur (o chapucero)


S├ş, he utilizado la palabra "chapucero". Te sorprender├şan las verdaderas chapuzas que me encuentro a diario en algunas p├íginas web en WordPress.

Por ese motivo he querido crear este post, para enseñarte a reconocer una página chapucera de un diseño web profesional.

Porque no nos engañemos, puede que una página tenga un diseño más o menos acertado, pero detrás de una web hay muchos más elementos.

Algunos de ellos son:

C├│mo diferenciar un dise├▒o web profesional de uno amateur (o chapucero)

#1 Dise├▒o

Como no pod├şa ser de otra manera, el primer indicador para detectar una web amateur en vez de un dise├▒o web profesional es el dise├▒o.

Y con el diseño no solo me refiero a cómo está el contenido, sino a la maquetación de cada uno de los elementos de la página: imágenes, textos, alineaciones, márgenes, etc.

Otros aspectos para detectar un mal dise├▒o web son:

  • La plantilla. Si el "autor" del dise├▒o ha dejado la plantilla que viene por defecto cuando instalas WordPress o usa una plantilla gratuita, es un mal dise├▒o. ┬íOJO! No tengo nada en contra de los temas graut├ştos (para nada), pero hay plantillas y plantillas.
  • Los colores. La paleta de colores es otro de los indicadores, para m├ş uno de los fundamentales en cuanto a dise├▒o. Si los colores de la web est├ín elegidos sin ning├║n criterio y los diferentes tonos de la paleta no guardan relaci├│n unos con otros, no es un dise├▒o web profesional. En mi opini├│n, elegir bien los colores es muy importante (y a la vez dif├şcil) para que la web tenga la personalidad que se merece.
  • Las im├ígenes son otro indicador muy sencillo para diferenciar un mal dise├▒o web de uno profesional. Si las im├ígenes no tienen calidad, est├ín mal ajustadas en cuanto a tama├▒os o ya las has visto antes en otras 50 p├íginas, est├ís antes un mal dise├▒o.
  • Y lo mismo sucede con el resto del material gr├ífico (ilustraciones, iconos o vectores).

Si quieres algunas ideas chulas para tu web, ├ęchale un vistazo a estas herramientas para encontrar p├íginas web creativas.

#2 Organizaci├│n

El segundo aspecto que me indica si una página tiene un diseño web profesional es su estructura y la organización de su contenido.

Aspectos relacionados con la organización de una página web que debes observar son:

  • El men├║. La organizaci├│n de las diferentes pesta├▒as del men├║ es uno de los primeros indicadores en los que me fijo. Por ejemplo, n├║mero de elementos (que no tenga demasiados), desplegables (cuando un men├║ tiene muchos submen├║s no est├í teniendo en cuando la usabilidad para el usuario), la ubicaci├│n del men├║, si hay varios men├║s en la p├ígina (uno principal y otro secundario).
  • El contenido. La organizaci├│n del contenido tambi├ęn es importante y hace referencia a elementos como categor├şas, subcategor├şas, pesta├▒as o etiquetas.
  • Otras variables / Filtros. En el caso de un ecommerce, por ejemplo, que los art├şculos se filtren por colores, tallas, promociones, etc.

#3 Optimizaci├│n

Otro punto fundamental para diferenciar un dise├▒o web profesional de uno amateur es su nivel de optimizaci├│n.

Y aqu├ş no hay dudas. O tienes experiencia en dise├▒o web o dudo que sepas optimizar WordPress como un profesional.

┬┐Qu├ę elementos son clave cuando hablo de optimizaci├│n de un sitio web?

  • Velocidad de carga. Este es un tema del que ya he hablado en varias ocasiones. Tener una p├ígina que cargue r├ípido es fundamental a d├şa de hoy, es algo que se nos est├í demandando mucho a los dise├▒adores web.
  • Im├ígenes. Tener las im├ígenes optimizadas es uno de los factores que afectan en la velocidad de carga. Cuando hablo de optimizaci├│n de im├ígenes, me refiero a su peso y tama├▒o.
  • Cach├ę. Otro de los factores que m├ís afectan a la velocidad de carga de un sitio web es la carga bajo cach├ę.
  • Limpieza de la base de datos. Por ├║ltimo, no me quiero olvidar de la base de datos de WordPress, que debe estar limpia y optimizada para el correcto funcionamiento de la web.

┬┐Est├ís seguro de que tu primo o cu├▒ado saben optimizar todos estos elementos? ­čśë

#4 SEO

Con el SEO pasa un poco lo mismo que con la optimizaci├│n, o lo controlas o no lo controlas.

Y a d├şa de hoy, con el nivel de competencia que hay en Internet para todos los sectores, necesitas tener al menos unas nociones.

No hace falta que te conviertas en Dean Romero o Luis Villanueva, pero para que tu página tenga un diseño web profesional, necesitas que te suenen al menos estos conceptos:

  • T├ştulo SEO. T├ştulos para SEO, as├ş como estructura de t├ştulos (h1, h2, h3...).
  • Meta descripci├│n. Son etiquetas SEO que te permiten establecer una descripci├│n del contenido para los buscadores.
  • Keyword research. Debes manejar alguna (o varias) herramientas que te muestren las palabras clave relacionados con tu actividad o negocio y que te interesan posicionar en Google, as├ş como su nivel de competencia y grado de dificultad.
  • Copywriting para SEO. Una vez tienes claras las keywords que quieres posicionar, necesitas redactar textos adaptados a SEO, siguiendo una estructura de t├ştulos y una densidad correcta de la palabra clave, por ejemplo.

Y no sigo, que no te quiero asustar.

Si optas por una web dise├▒ada por tu primo, aseg├║rate que controla todos esos conceptos ­čśÇ

#5 Servicios complementarios

Y por ├║ltimo, otro punto que me permite reconocer un dise├▒o web profesional es el relacionado con los servicios complementarios y los extras.

Por supuesto, una página tiene extras de los que no te puedes olvidar y en este tipo de detalles es dónde se ve si es un diseño web profesional o si está hecha por un sobrino / primo / cuñado.

Algunos de estos extras son:

  • Twitter Cards. Son los tuits enriquecidos que muestran la informaci├│n multimedia de los art├şculos y p├íginas de un sitio web. Te cuento todo sobre las Twitter Cards aqu├ş.
  • Metadatos Open Graph en Facebook. Al igual que en Twitter, Facebook tambi├ęn muestra informaci├│n multimedia cuando compartes un enlace de tu web.
  • Google Analytics. Crear una cuenta en Analytics y vincularla con tu p├ígina web es fundamental para estar al tanto de tus estad├şsticas.
  • Search Console. Es la herramienta de Google que te permite verificar la propiedad de tu web de cara al buscador, as├ş como avisarle para que la indexe.

Aqu├ş puedes ver un ejemplo de las dos primeros en el caso de esta web.

5 claves para identificar un dise├▒o web profesional y de calidad
Facebook Open Graph

5 claves para identificar un dise├▒o web profesional y de calidad
Twitter Card

Por cierto, no te olvides de la lista de elementos que debes revisar antes de lanzar una web ­čśë

5 ejemplos de paginas web profesionales


Para terminar, te dejo varios ejemplos de paginas web profesionales que espero que te sirvan de inspiraci├│n. Todas han sido dise├▒adas por m├ş para clientes del servicio de dise├▒o web.

ejemplos de paginas web profesionales
evateruel.com
ejemplos de paginas web profesionales
talentpointhr.com
ejemplos de paginas web profesionales
charoguijarro.com
ejemplos de paginas web profesionales
abeo.es
ejemplos de paginas web profesionales
tarrago.com

En definitiva, hoy en d├şa cualquiera puede crear un sitio web. Las herramientas (plantillas, bancos de im├ígenes, maquetadores visuales para WordPress, etc) est├ín ah├ş, al alcance de todos.

La diferencia entre un dise├▒o web profesional y uno amateur est├í en el uso de esas herramientas, de la creatividad a la hora de ordenar la estructura de la p├ígina y de mostrar la informaci├│n, as├ş como de la destreza para de plantear soluciones creativas.

Existe un concepto al que me gusta llamar la magia del dise├▒ador y que estoy convenido de que tu sobrino o cu├▒ado no tienen ­čÖé

De ah├ş mi lema: Cautiva, Fascina, Enamora ÔŁĄ´ŞĆ´ŞĆ

Summary
­čÄĘ 5 claves para identificar un dise├▒o web profesional
Article Name
­čÄĘ 5 claves para identificar un dise├▒o web profesional
Description
C├│mo identificar un dise├▒o web profesional, diferenciar un dise├▒o de calidad de uno amateur y ejemplos de paginas web profesionales.
Author
Publisher Name
Max Camu├▒as
Publisher Logo

18 Comentarios

  1. eduardo

    Más claro y directo imposible.

    Saludos

    Responder
  2. Lumedia

    Excelente art├şculo. Es demasiado frecuente encontrar webs montadas con plantillas WordPress o con editores de proveedores de internet en los que la optimizaci├│n seo es nula, sin marcado de datos, optimizaci├│n de im├ígenes nula, etc.. El sobrino debe tener mucho chollo. Saludos

    Responder
    • Max Camu├▒as

      Totalmente de acuerdo!

      Cuando curro deben tener los sobrinos ?

      Muchas gracias por comentar.

      Responder
  3. Nacho Ros

    Buen art├şculo Max!
    Tambi├ęn se puede notar cuando hay peque├▒os textos en ingl├ęs como "Read More" o "Share". Son cosas que quiz├í uno piensa: "da igual que est├ę en ingl├ęs, todo el mundo entiende eso".
    Los peque├▒os detalles, como las Twitter Cards que comentas, son los que tambi├ęn delatan una web amateur.
    ¡Un abrazo!

    Responder
    • Max Camu├▒as

      Hola Nacho,

      Este tipo de textos que comentas tambi├ęn son indicador, totalmente de acuerdo.

      Al final los detalles pequeños son los que marcan la diferencia entre un diseño web profesional y uno más amateur.

      Gracias por pasarte.

      Un abrazo!

      Responder
  4. Jorge Salazar

    Excelente articulo Max. Otro detalle que yo he visto, es el apelotonamiento en la web, el no uso del espacio en el diseño, como si trataran de meter todo en una sola pantalla. Aun y que Divi por default da eso, he visto diseños hechos con Divi en donde de plano casi no existen los márgenes. Y de los colores, ni que decir.

    Solo agregar que he analizado webs que dan calificaciones de 15% en Metricspot o 40 en PageSpeed Insights o GMetrix. ┬┐Y sabes que es lo peor? Que me he topado con p├íginas as├ş de mal y hechas por agencias, no por el sobrino sabiondo.

    Saludos

    Responder
    • Max Camu├▒as

      Hola Jorge,

      Totalmente de acuerdo contigo. Me agobian mucho esas páginas en las que todos los elementos están muy juntos y no dejan respirar.

      Sobre las agencias... dar├şa para varios art├şculos extensos jaja

      Es un terreno en el que prefiero no entrar. Que cada uno juzge ­čśë

      Gracias por pasarte.

      Saludos!

      Responder
  5. Leonardo M.

    Muy bien redactado y explicado. Se entiende todo de maravilla. Acabo de descubrir tu blog y, la verdad, me est├í encantando. No puedo estar m├ís de acuerdo contigo en lo que dices, sobretodo cuando mencionas la importancia del color. En mis trabajos personales, cuando lo empec├ę a tener en cuenta (su psicolog├şa, c├│mo se entend├şa en las diferentes culturas) hubo un salto considerable. Es incre├şble el hecho de que un color pueda modificar las emociones tan dr├ísticamente.

    Yo pertenezco a Factoria Creativa, una agencia de publicidad y comunicaci├│n. Te dejo un link de nuestra web. Espero te pases por el blog, que tiene cosas muy interesantes.

    ¡Un saludo!

    Responder
    • Max Camu├▒as

      Hola Leonardo,

      Bienvenido a mi casa ­čÖé

      Totalmente de acuerdo. Una buena (o mala) paleta de colores puede cambiar por completo una web.

      Espero verte por aqu├ş a menudo.

      Saludos!

      Responder
  6. Me llamo Rub├ęn

    Me arrepiento de haber perdido varios minutos de mi vida leyendo esta Oda a dise├▒adores web. Un post en el que no ayudas en absoluto, bueno si, te ayudas a ti mismo.. Abrumas a la gente que no tiene recursos para contratar a un dise├▒ador web y tiene que buscarse la vida para hacerla el mismo. Ese sobrino que mencionas tan ironicamente, por ejemplo. Espero que esa gente no caiga en esta web, donde no aportas ningun valor. Yo he sido uno de esos, he tenido que buscarme las casta├▒as por mi mismo y ahora tengo tres proyectos con mucha calidad, o una calidad aceptable para no ser dise├▒ador web profesional.
    Y d├ęjame que te de un consejo, si es que tu ego de profesional te permite cogerlo, hubieras quedado muchisimo mejor, y mas profesional, si en lugar de abrumar a la gente sin recursos, te hubieras marcado un post de los pies a la cabeza, poniendo ejemplos y herramientas a usar para cada punto que has detallado. Hoy en dia optimizar una web es muy facil, escribir para SEO es muy facil. Solo hay que saber las herramientas. Hubieras perdido algun cliente, pero ganarias fieles seguidores.
    Un saludo campe├│n del dise├▒o web.

    Responder
    • Max Camu├▒as

      Hola Rub├ęn,

      El objetivo del post es ense├▒ar c├│mo detectar un dise├▒o web profesional de uno amateur, precisamente para que ning├║n dise├▒ador te la cuele (te sorprender├şa los clientes que me han venido rebotados de otros ÔÇťdise├▒adoresÔÇŁ con aut├ęnticas chapuzas).

      L├│gicamente es el blog de un dise├▒ador web y hablo desde mi perspectiva. Es mi punto de vista profesional despu├ęs de a├▒os dedic├índome al dise├▒o. No es ninguna oda ni intento imponer nada, todo lo contrario!

      Es como si me meto al blog de un SEO o un Copywriter, por poner un ejemplo, y en un post me animan a contratar los servicios de un profesional de la redacci├│n de textos. Lo entender├şa desde su punto de vista y no me ofender├şa. De hecho, estoy acostumbrado a leer art├şculos de ese tipo. No s├ę, no lo veo nada descabellado.

      De hecho, siempre he defendido que, si tienes una idea y quieres empezar un proyecto desde cero pero no tienes recursos, lo mejor es que lo hagas t├║ (as├ş hemos empezado pr├ícticamente todos!), pero si puedes rodearte de los mejores, conseguir├ís resultados mucho antes y no cometer├ís mil errores.

      De todas formas, si te parece que en este art├şculo no aporto valor, tengo 169 m├ís publicados. En alguno supongo que aportar├ę valor. Tengo un mont├│n de posts m├ís hablando de SEO, plantillas, plugins, herramientas, consejosÔÇŽ y no solo yo, tambi├ęn de expertos en cada materia.

      Por ├║ltimo, si te parece que dise├▒ar una web, escribir textos, posicionarlaÔÇŽ y todo en internet es f├ícil, te animo a hacerlo todo t├║ mismo, como dices que ya has hecho. Yo seguir├ę trabajando con profesionales en cada materia.

      Saludos

      Responder
  7. Me llamo Rub├ęn

    Jajaja por cierto, un buen dise├▒ador web tambi├ęn muestra comentarios negativos. Es una pena que mi comentario anterior que tanto me he currado nadie lo vea. Pero tu ego de profesional solo quiere que la gente vea lo bueno que dicen.
    Sigue asi

    Responder
    • Max Camu├▒as

      Hola de nuevo Rub├ęn,

      Adem├ís de entrar en mi ÔÇťcasaÔÇŁ a faltarme el respeto, veo que no sabes que los comentarios de WordPress necesitan moderaci├│n.

      ┬┐Ves como no se puede ser dise├▒ador, SEO, copy y fot├│grafo todo en uno?

      Ya est├í publicado tu comentario tan ÔÇťcurradoÔÇŁ.

      Y por supuesto, seguir├ę as├ş ­čśë

      Responder
  8. Lautaro

    Saludos desde Argentina.. Soy programador. Muy bueno el post!

    Responder
  9. Software Informatico

    Que bien resumido todo. He de decir que el punto 3 y 4 cada vez están teniendo más importancia para Google, sobre todo el de ña de velocidad de carga.

    Me apuntar├ę un par de cosas para usar como los twitter cards.

    Como aporte si os interesa un art├şculo sobre optimizaci├│n web, punto 3 del que te refieres, algo m├ís extenso.

    Un saludo y muchas gracias.

    Responder
  10. Manuel

    Hola, muy bueno el post!

    En 2021 todav├şa queda algo de conciencia en cuanto al dise├▒o!

    Gracias!

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Para cumplir con el nuevo RGPD y que tus datos est├ęn a salvo, debes leer y aceptar mi pol├ştica de privacidad. Tus datos ser├ín guardados en SiteGround y WordPress, mi proveedor de hosting y el CMS que utilizo en esta web.

¿Necesitas una página web, blog, landing o tienda online?
¡PIDE TU
PRESUPUESTO!

Dise├▒a
tu web

Dise├▒a
tu imagen

Impulsa
tu proyecto

Optimiza
y posiciona

masterclass

10 CLAVES PARA QUE TU WEB BRILLE CON LUZ PROPIA

MASTERCLASS: 10 claves para que tu web brille con luz propia

gu├şa

PARA DISE├ĹAR LOGOTIPOS MEMORABLES

GU├ŹA para dise├▒ar logotipos memorables