header



iesfleming.jpg

Estaba rondando por mi cabeza desde hace tiempo la idea de escribir una entrada sobre webs artisticamente preciosas, pero he decidido que mejor lo hago al reves y doy un precioso ejemplo de como no hacer un sitio web, y justo entonces, bam! veo la página web del instituto en que estudio, voy a dejar el tema de su diseño (o ausencia de el) para luego y voy a concentrarme en lo que es la usabilidad.

Usabilidad: ¿Que coño es esto?

El contenido de la página son exactamente cuatro páginas portada incluida, más otra web diferente (¿WTF?) del hampa y una información sobre cada cosa que imparten (juega a adivinar donde están los enlaces, es divertido!).

iesfleming2.jpg

Como no podia ser de otra forma, todo ello se halla encerrado en una estructura de marcos, el invento más molesto de la web (con la excepción de esto), la parte de arriba trae dos enlaces, y ninguno de ellos lleva a la portada, no intentes clicar en el logotipo gigante de abajo, tampoco va a funcionar, pero oh, espera, has visto ese botón tan logicamente colocado marginado tan del resto en el menú?, premio.

Sigamos caminando hacia abajo, el footer contiene el logotipo del instituto, que como ya podreis adivinar, tras ver la web, fue creado por un alumno de bachillerato que si viese lo que estan haciendo con el en los anuncios del colegio, pediria una compensación por derechos morales, pero fijate en el botón de información de contacto, en Opera y Firefox O cualquier navegador != IE) sale una preciosa imagen, pero en IE sae un enlace al plano de como localizar el sitio (magnifico).

iesfleming3.jpg

Pero lo mejor de todo llega en extraescolares, aqui directamente solo se pude ver en IE, por que si prefieres navegar con rapidez y usas otro navegador verás lo de arriba, en Firefox todavia es legible, en Opera ni eso.

Aaargh, mis ooojos (Diseño)

Los problemas de la web se pueden resumir en dos puntos, los citados arriba y que es fea como ella sola, por eso, aqui dejo lo que yo haria para mejorarla, pasito a pasito:

1. Los marcos apestan, en serio Solo el hecho de convertir esa estructura amorfa en algo manejable la deja mucho más profesional.

iesflemingrd1.jpg

2. Cada cosa en su sitio las navegaciones verticales con pocos elementos son ridiculas y corren el contenido a la izquierda, y por supuesto, lo primero que se lee deberia ser algo relaccionado con el sitio.

iesflemingrd2.jpg

3. El gris es demasiado retro una web tiene que ser minimamente colorida, aunque sea para diferenciar sus aspectos principales, además, tiene que tener elementos de branding consistentes y respetarlos lo más posible.

iesflemingrd3.jpg

4. Fotos, fotos, fotos! En toda la página no hay ni una sola imagen del centro, vale que el instituto no sea precisamente bonito, pero el lego (El nuevo aulario) es algo bastante digno de poner para dar una imagen de modernidad.

iesflemingrd4.jpg

5. Últimos toques Un footer en condiciones, novedades destacadas y en general, las cosas que deberia tener ya no caben en mas puntos separados, asi que aqui está el resultado final.

iesflemingrd5.jpg

4 Responses to “Como *no* diseñar una pagina web”


  1. Gravatar Icon 1 Clapp! 6th, 2007 at 9:48 am

    Muy bueno! Eres un artista… La mía no está tan tan penosa… por que Flash se ve igual en todos xD

    http://severochoa.com

  2. Gravatar Icon 2 L!nk 6th, 2007 at 9:53 am

    Dios! la del tuyo tiene diseñador y todo! :D

    (Yo creo que si envias ese menu a los de Usalo.es se suicidan xD)

  3. Gravatar Icon 3 Clapp! 6th, 2007 at 3:50 pm

    Claro, luego ves la web del “diseñador” y no te extraña nada xDDDD