93 792 27 62
  • Contacta
  • Llamar ahora Enviar whatsapp
    Publicado el 12/05/17

    ¿Por qué son tan horteras los diseños web de organismos oficiales? #1



    testviews 118

    En algún momento de nuestra existencia, todos hemos pasado por el calvario de realizar cualquier gestión online a través de la página web de un organismo oficial.

    La sorpresa viene cuando entramos a la página web de dicho organismo y nos encontramos con un diseño que se nota que está a la última. Sí, a la última de la cola.

    Y la pregunta que nos viene a todos en ese momento: ¿qué he hecho para merecer éste castigo? ¿no es suficiente pagar la multa, qué además debo realizar trabajos forzados?

    En esta primera entrega de diseños horteras, vamos a analizar la página web de la DGT. Hemos ajustado el GPS para no perdernos entre los recovecos y callejones de la página web.

    Para los más aventureros, el enlace para acceder: DGT

     

    ¿Por qué es tan hortera el diseño web de la DGT?

    Sólo hace falta echar un vistazo a la página web para ver que nos encontramos ante un diseño web pensado para marear. Puede ser que forme parte de la imagen de marca de la DGT. Algo así como una forma de transmitir al visitante la esencia del «mal conducir».

    La página web, según he podido consultar en web.archive.org, parece ser que fue rediseñada hace cuatro años. Sin embargo, parece de la época de las américas.

    El primer vistazo

    El objetivo del primer vistazo para cualquier página web, debería ser facilitar al usuario la lectura de la información. Escoger lo más importante que deseamos que vea el visitante y mostrarlo de forma que, inconscientemente, la mente del usuario navegue rápidamente entre el contenido. Jerarquizando, para mantener un orden.

    Si entramos en temática, podríamos decir que lo mejor para el usuario sería una carretera de un solo sentido, con las mínimas salidas posibles y sobre todo debemos ofrecer indicaciones.

    Sin entrar en lo visual, el primer fallo que nos encontramos con la página web de la DGT, así resumiendo, es una putada para la mente. ¡¡¡Tenemos a nuestra disposición más de 40 enlaces!!!

    Vendría a ser como ir conduciendo, entrar en una ciudad y encontrarnos en una encrucijada con unas 40 salidas.

    direcciones

    El segundo vistazo

    Una vez nos hemos llevado el primer susto, nos recomponemos de la «hostia visual», recuperamos la movilidad del brazo para mover de nuevo el cursor y pronto recordaremos de nuevo el asunto por el cual nos encontrábamos en la página web.

    Empezando de arriba a bajo, lo que nos encontramos como primer elemento es un enlace al Contacto. No digo que no sea importante, pero, ¿no podríamos incorporarlo al menú principal y nos ahorramos ese primer link solitario? Además de eso, la tipografía escogida es una Arial Regular (Sí, está bastante «outdated», pero eso es lo de menos).

    Para los demás links, vemos que utilizan una Arial Narrow, la versión condensada de la misma tipografia. ¿Por qué el link de contacto debe hacer ese «desentono visual» respecto con los demás enlaces?

     

    Tipografías

    Tal y como hemos puntualizado, se está utilizando una Arial Regular junto con una Arial Narrow. Mal. Haciendo esto, se crea un choque visual entre las tipografías.

    Si usamos tipografías diferentes, lo mejor, es crear contraste entre ellas. En caso de usar una sola tipografía, lo cual es totalmente legítimo, lo mejor es jugar con las negritas o cursivas, pero usar la misma família de tipografía cambiando la condensación de la misma, por norma general, no es nada agradable visualmente.

    Además de eso, también tenemos muchas disonancias entre los tamaños de tipografía de toda la página web. Cada imagen tiene un tamaño diferente de tipografía y además, muchas de ellas, están pixeladas. Todo muy romántico.

     

    Márgenes, paddings y otros elementos

    Al igual que con el punto anterior, no hay una uniformidad entre los elementos de la página web con los márgenes y paddings. Cada elemento va a su rollo. Perfecto para favorecer la experiencia de usuario que estamos teniendo.

    Los sombreados hace tiempo que no se utilizan. Usarlos es una buena manera de hacer que una página web se vea antigua.

    Si nos fijamos en las imágenes del lateral, no entendemos del todo cual es la imagen que quieren ofrecer. Aparecen tres señores confusos haciendo el saludo de Ronaldinho. Puede que sea una forma de hacernos sumergir más en tiempos pasados.

     

    Los banners superiores

    Tenemos el logotipo nuestro preciado Gobierno con un fallo entre medio de las dos cajitas, hay una línea de fondo blanco que no llega hasta arriba, o la quitamos o la ponemos hasta arriba, pero este fallo visual, es muy feo. El logotipo del Gobierno hace 60px de altura, justo al lado el logo de la DGT a 51px de altura. Si pusiéramos los dos a la misma altura, iríamos un poco bien. Si además ponemos un espacio entre los dos logotipos, aún mejor.

    justo debajo del logotipo de la DGT, pasándose la linea horizontal por el forro, tenemos un texto de reconforte a la ciudadanía «a tu lado vamos todos». Gracias DGT.

    A la derecha, tenemos dos banners más. Los dos, así para redondear a 76,39px de altura. Ya puestos, no hubiese estado mal poner el numero π (pi).  Los dos pixelan y los dos tienen diferentes tamaños de tipografía.

     

    Los botones de menú

    Preciosos. Con un hover de lo más bonito que hemos visto hasta el momento.

    Hubiese sido bueno pensar en incorporar un submenú desplegable al poner el cursor encima de cada botón, para reducir el número de enlaces que tenemos en pantalla.

     

    El pasador de imágenes twitter y redes sociales

    El pasador de imágenes, no nos dice mucho, tiene un diseño que parece de los años 50. De cuando aún no había internet. La tipografía está pegada a la imagen directamente. Lo cual es malo para la indexación del contenido y laborioso de mantener desde el backend.

    El widget con el feed de twitter si lo tenemos que poner así pequeño, mejor no lo pongamos.

    Sobre los enlaces a las redes sociales: cada icono tiene su propio tamaño y van sobre un fondo gris oscuro, supongo que a razón de seguir con la «línea gráfica» del menú superior. ¡Vaya! parece ser que la línea gráfica la seguimos de forma excepcional, cuando sabemos que va a quedar mal.

     

    Los tres bloques con enlaces

    En lo que debería ser la parte más fuerte de la página web, nos ponen un listado de enlaces inacabables. Algunos enlaces incorporan imagen al lado, otros no, unos tienen una descripción inferior, otros no.

    Hubiese sido mejor reducir el número de enlaces y unificar el estilo en cuanto al uso de imágenes y descripción.

     

    Si seguimos hacia abajo

    La cosa no mejora. Sigue en la misma tónica. Cero usabilidad y visualmente estresante. No exagero si digo que he quedado con la cabeza atontada conforme iba viendo toda la sarta de sin sentidos gráficos.

     

    Otros aspectos

    • No es responsive. Podemos tomarlo como una forma para alejar al usuario de la tentación que le puede suponer entrar en la web de la DGT a través de su smartphone mientras va conduciendo.
    • En el pie de página podemos ver que nos ofrecen un titular en el que podemos leer «Para personas». Por si alguien se confundía y pensaba que era para tocinos.
    • Si navegamos dentro de los diferentes apartados, veremos que el laberinto se expande de forma exponencial.
    • El código fuente de la página resulta bastante sorprendente
    • La etiqueta <!DOCTYPE> no empieza en la primera línea, lo cual no es una buena práctica

     

    Conclusiones

    Si entras a la página web de la DGT, te recomendamos no haber tomado antes unas copas de más y asegúrate de abrocharte bien el cinturón. También esperamos que si has accedido, haya sido por accidente y no para pagar una multa.

     

     

    Suscríbete y mantente inspirado
    El autor: Jordi Ensenyat
    Graphic & Web Designer + Programmer
    Jordi Ensenyat es un diseñador gráfico y web, programador y
    maquetador, ubicado en el Maresme, Barcelona.
    While I'm designing/programming don't disturb me. I could fatality you.
    www.jordiensenyatdisseny.com

    ¿Quieres empezar un proyecto?
    Trabaja con nosotros
    Mantente inspirado con nuestra newsletter
    Mejores cursos de diseño gráfico para 2021
    leer más
    Tendencias en diseño gráfico 2021
    leer más
    Tus datos Si no rellenas tus datos,
    comentarás de forma anónima
    Publicar e inscribirme a la newsletter
    Publicar y no inscribirme a la newsletter
    Recordar datos para comentar rápidamente
    Cuéntame las últimas novedades

    Blog & Proyectos

    Un espacio para todo aquel interesado en diseño web,
    diseño gráfico y marketing online.
    ¿Tienes alguna duda?

    Preguntas frecuentes

    ¿Por qué lo hacéis todo a medida y no utilizáis plantillas?

    Respuesta rápida: Como creativos hacemos todo el diseño web a medida para ofrecer un valor creativo y un diseño único. Como desarrolladores web esto nos deja libres de limitaciones y conseguimos un mejor rendimiento.

    Respuesta elaborada:

    Nuestra filosofía de trabajo ha sido desde siempre, la creación a medida de los proyectos de diseño web que desarrollamos. Esto implica que tanto el diseño como el desarrollo estén hechos a medida. Como diseñadores y como creativos, pensamos que no debería ser de otra forma, por lo que rechazamos de forma rotunda el uso de plantillas en el desarrollo de páginas web. Normalmente utilizamos WordPress como gestor de contenidos, para que el cliente pueda subir sus contenidos a través de un sencillo panel de administración al que tiene acceso mediante usuario y contraseña.

    Gracias a que WordPress es una famosa plataforma para la creación web, muchos estudios se aprovechan del poco conocimiento por parte de sus clientes y crean websites utilizando plantillas prefabricadas que pueden ser adquiridas a bajo coste, únicamente modificando los textos, imágenes, colores, y poco más. En nuestro caso, cada página web que creamos lo hacemos desarrollando nuestra propia plantilla a medida para el proyecto concreto y empezando todo desarrollo con un documento totalmente en blanco, escribiendo cada línea de código.

    Esto nos permite:

    1. Ser totalmente libres y crear todas las funcionalidades que queremos, incluso llevando el proyecto un paso más allá en caso de tener que crear funcionalidades no soportadas por las plantillas. No hay literalmente nada que se nos pueda resistir.
    2. Entregar un trabajo de diseño y desarrollo web totalmente original y con personalidad, adaptado a la imagen de tu marca.
    3. Conseguir un mayor rendimiento, ya que todas las funcionalidades están creadas a medida, sin necesidad de «atiborrar» el la página web de plugins creados por terceros que a menudo pueden dar problemas de incompatibilidades, si no es ahora, en un futuro.
    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla

    ¿Qué sucede si no me gusta la propuesta de diseño presentada?

    Respuesta rápida: Si la propuesta de diseño web presentada no es la que esperas, presentaremos nuevas propuestas de diseño hasta que quedes 100% satisfecho.

    Respuesta elaborada:

    Normalmente solemos acertar a la primera en el momento de presentar una propuesta de diseño web. Evidentemente siempre hay modificaciones que hacer y que nuestros clientes nos solicitan. Estas modificaciones las hacemos y resolvemos con celeridad. Sin embargo, en los casos en los que la propuesta de diseño web presentada no se ajusta a la línea de que esperaba el cliente, presentamos nuevas propuestas con el objetivo de que quedes 100% contento con el resultado final.

    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla

    He tenido malas experiencias con otros estudios de diseño, ¿cómo puedo estar seguro de vosotros?

    Respuesta rápida: Nuestra cantidad y calidad en los proyectos de diseño y desarrollo web que hemos llevado a cabo a lo largo de los años nos avalan. Puedes consultar nuestro porfolio de proyectos haciendo click aquí. También puedes consultar los premios que hemos recibido por nuestros proyectos.

    Respuesta elaborada:

    No es poco frecuente que en el momento de aceptar un presupuesto nuestros potenciales clientes se muestren preocupados y nos cuenten historias anteriores que han tenido con otros estudios de diseño y desarrollo web. Desde que los han dejado a medias en el desarrollo web, hasta que el desarrollador contratado ha desaparecido sin dar señales de vida dejando un proyecto sin terminar.

    Llevamos años diseñando y desarrollando páginas web para clientes de todo el mundo. Si nos has pedido presupuesto, imaginamos que esto se debe a que ya has consultado los proyectos que tenemos publicados en nuestra página web. Sin embargo, si aún no lo has hecho, te animamos a que le eches un vistazo con ojo crítico haciendo click aquí y seas tu mismo quien determine si somos o no somos dignos de tu confianza.

    Además de disponer de un inmenso portfolio de proyectos realizados, también podemos añadir a la ecuación el hecho de que hemos sido premiados en numerosas ocasiones por nuestros trabajos de diseño. Haz click aquí para ver los premios y menciones por nuestros trabajos y proyectos de diseño web y gráfico desarrollados.

     

    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla

    ¿El presupuesto es cerrado o vais a cargar importes extra durante el desarrollo del proyecto?

    Respuesta rápida: El presupuesto es cerrado, siempre que nos ciñamos a lo presupuestado y que el cliente no pida funcionalidades nuevas, además hay que tener en cuenta que: *hosting y dominio, *textos, *traducciones y *fotografías las ofrece el cliente. En caso de necesidad, podemos ofrecer nosotros mismos los puntos anteriores y en todo caso figuraría como punto en los detalles del presupuesto. Nuestra asesoría y guía para cualquiera de estos puntos no tiene ningún tipo de coste.

    Respuesta elaborada:

    Los presupuestos de desarrollo y diseño web que ofrecemos son siempre cerrados, y únicamente serían ampliables (bajo previa aceptación), en el caso de que el cliente nos pidiera una funcionalidad nueva a medio desarrollo, entendiendo como funcionalidad nueva, cambios o añadidos mayores en el funcionamiento de la página web.

    El cliente ofrecerá el *hosting y dominio, los *textos del website, las *traducciones y las *fotografías.

    *El hosting y dominio en caso de no ofrecerlo el cliente, podemos contratarlo con nuestro proveedor habitual, y teniendo en cuenta que el coste correrá a cargo del cliente. Nuestra asesoría y guía para cualquiera de estos puntos no tiene ningún tipo de coste.

    *Los textos del website en caso de no ofrecerlo el cliente, podemos ofrecer nuestro servicio de redacción, y teniendo en cuenta que el coste correrá a cargo del cliente.

    *Las fotografías necesarias para crear el sitio web, en caso de no ofrecerlas el cliente, las compraremos en nuestro banco de imagen habitual, resultando en un coste de 15€ por fotografía, y teniendo en cuenta que el coste correrá a cargo del cliente. Nosotros mismos te haremos la propuesta de fotografías que consideremos que van más en línea con el proyecto. Tu nos tendrás que dar el visto bueno antes de hacer cualquier compra, la cual la asumiremos nosotros y la repercutiremos en la factura del final de proyecto.

    *Las traducciones en caso de no ofrecerlas el cliente, podemos mandarlas a hacer a nuestro proveedor habitual, ofreciendo un precio cerrado según el número de palabras a traducir, y teniendo en cuenta que el coste correrá a cargo del cliente. Nuestra asesoría y guía no tiene ningún tipo de coste.

    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla

    ¿De principio a fin, qué pasos tiene un proyecto y cual es vuestro método de trabajo?

    Respuesta rápida: Presentaremos las propuestas de diseño web, haremos las modificaciones que nos pidas, Desarrollaremos la página web en nuestro servidor, al cual tendrás acceso para ver el progreso, pondremos el sitio web en vivo. Nuestro trabajo está garantizado, así que cualquier error que se aprecie y que sea responsabilidad del estudio será debidamente solucionado sin ningún coste.

    Respuesta elaborada:

    Fase 1 (Diseño):

    1. Programaremos una reunión o llamada para sentar las bases de tu proyecto y definir todos los puntos a tener en cuenta.
    2. Empezaremos a trabajar en tu proyecto y te presentaremos las primeras propuestas de diseño.
    3. Nos indicarás posibles cambios y modificaciones, los cuales resolveremos con celeridad.
    4. Una vez resueltos los cambios y modificaciones, te presentaremos las versiones finales para poder pasar a la siguiente fase.

    Fase 2 (Desarrollo):

    1. Empezaremos a programar tu página web en nuestro servidor de desarrollo y te iremos mostrando cómo va evolucionando.
    2. Una vez terminada, tu mismo nos podrás indicar posibles cambios y modificaciones menores (generalmente los cambios mayores, suelen darse en la fase de diseño).
    3. Haremos los testeos y comprobaciones previas al colgado de la página web.

    Fase 3 (Puesta en vivo):

    1. Pondremos el sitio web en vivo.
    2. Una vez terminado el proyecto, nuestro trabajo está garantizado así que cualquier error que se aprecie y que sea responsabilidad del estudio será debidamente solucionado sin ningún coste.
    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla

    ¿Dispondré de algún manual o documentación para poder subir y editar el contenido del sitio? ¿Ofrecéis alguna formación?

    Respuesta rápida: Dispondrás de un manual y además te ofreceremos una formación de forma gratuita.

    Respuesta elaborada:

    Al finalizar el proyecto te entregaremos un manual de uso para que puedas gestionar los contenidos que hayamos definido de los cuales necesitas poder gestionar, tales como proyectos, productos, artículos, etc.

    Además te ofreceremos una sesión de formación de forma gratuita para enseñarte a utilizar el gestor de contenidos.

    Si tienes alguna duda, haz clic aquí y te llamaremos para resolverla
    contacta ahora - 93 792 27 62 - info@codewebbarcelona.com
    Pedir presupuesto
    Me gusta perooo... ¿Te contactamos para
    asesorarte sin compromiso?
    Da un paso al frente. Indícanos tu teléfono o email y te contactamos
    para ayudarte a sentar las bases de tu proyecto.
    ¡Perfecto, pronto nos pondremos en contacto contigo!