Rediseño de la Portada de Nireblog

He modificado la apariencia de la página nireblog.com/all.

No soy diseñador y tengo el gusto en el culo (algunos diseñadores también y no pondré ejemplos) pero honestamente creo que estoy mejorando (al final de tanto mirar algo se queda), así que quiero que seais benevolentes.

El resultado del rediseño es este:

Nuevo Diseño de la Portada de Nireblog

Podéis comprobar la versión anterior aquí, si no la hubiera hecho yo diría que es pelín hortera.

Creo que las mejoras son evidentes (no era muy dificil mejorar), aunque no me gusta del todo y seguramente lo modificaré, me parece que las letras en rosa/fucsia no resaltan mucho sobre el fondo oscuro, posiblemente utilice un tono más claro de rosa.

Se ve mejor en Firefox que en Explorer ya que he utilizado la propiedad -moz-border-radius para redondear algunos div (no es estandar pero no afecta a la navegación), en un futuro se añadirá como estandar en CSS3 la propiedad border-radius.

Opiniones por favor si es de los expertos mejor (Miguel (Processblack), Maxkuri, Tribak) y no tiréis por el camino sencillo que sería (¡¡¡¡ Contrata a un diseñador !!!!)

Esta entrada fue publicada en Trabajos y etiquetada , , , . Guarda el enlace permanente.

5 respuestas a Rediseño de la Portada de Nireblog

  1. Miguel dijo:

    A mi me gusta… pero….🙂
    Me parece que los tacos son demasiado oscuros y los textos que contenen vínculo contrastan muy poquito…
    Sabes que cuando pulsas en “tags” se descoloca el div de debajo?

  2. David dijo:

    Gracias Miguel
    Efectivamente es un fallo el poco contraste del texto con el fondo.
    Respecto al tema de los Tags si se mueve todo al pinchar, aunque no me parece muy importante, voy a intentar solucionarlo con un clear: both cada 3 Bloques.

  3. Aupa David! Voy algo tarde con mis comentarios.
    Seré escueto:
    – Falta algo de info en esta página sobre lo que es este sistema. Aunque sea un párrafo con un “+info” detrás, pero no estaría de más. Probablemente la gente llegue sabiendo de qué se trata, pero tenlo en cuenta. A veces el que está fuera percibe las cosas de otro modo.
    – Color de links. Estooo, hombre… esos colores por defecto de los estados de link podrían ser diferentes quizá. Chirrían mucho.
    – Creo que como herramienta práctica que es, es acertado empezar siendo directos con la opción de crear los blogs, y eso se agradece. De todos modos, hay páginas previas a ésta, ¿no? Pues deberías ver la consistencia del diseño gráfico y si éste se aplica uniformemente en cuanto a los colores, por ejemplo. Pégate una revisión y mira si es así.
    – Viendo otras páginas, se ven elementos “externos” gráficamente como 3 peones del tipo MSN en la opción “Sortu zure Blog Taldea edo Komunitatea gehitu”. No te recomiendo que hagas esto ya que despista, desconcierta, hace perder la noción de encontrarnos dentro de un mismo site, etc. Consistencia. Si creas un estilo gráfico determinado que te identifica, mantenlo. Sino te darás de bruces con una falta de identidad que te hará improvisar cada vez que tengas necesidad de crear un gráfico.
    – Piensa en emplear texto que no sea editable en algún que otro caso. Lo digo en casos como en banners o llamadas al usuario. Siempre podrás usar una técnica de reemplazo de imágenes con texto subyaciente. Le darán mayor relevancia al banner. No emplees tipografías a lo loco. Elije un juego tipográfico que se adecúe a tu imagen, que resulte legible y que tenga una familia con diferentes cuerpos (light, regular, bold, heavy, y sus versiones itálicas) si te es posible.
    – Jerarquización visual: yo trataría de forzar más la jerarquía visual. Sobre todo con los tamaños de la tipografía. Haz un escalado gradual. Usar tipos grandes está de moda y es cómodo, pero al loro con que interfieran en el primer barrido visual en el que el usuario identifica áreas y establece la jerarquía antes de comenzar a absorber los contenidos.
    Fíjate en los titulares de la home y la referencia del blog que se trata… se pegan, no sabes cuál es más relevante… el tema de la jerarquización visual se da a nivel general y a nivel de detalle… desde el layout hasta la última e irrelevante coma de un texto. Yo siempre pongo como ejemplo las muñecas matriushka rusas. Así debe ver un usuario la página, como cuando se ve sólo el marcado sin estilos… una jerarquización no sólo de código sino también visual.
    – AI – Arquitectura de la información: al hilo del anterior párrafo incidiría en la AI. No me queda muy claro cuál es el menú principal, o si hay varios. Toda vez que nos salimos de algo habitual, liamos la madeja.
    Hay opciones como “Bloga – Tags – Taldea” que trataría de explicar antes de que tengan que descubrirlo los usuarios. Con una frasecita explicativa para cada uno bastaría. “Bloga” puede ser cualquier blog, “Tags”… tags de qué?, y “Taldea” ni idea porque entro y no encuentro nada salvo los horrendos peones tipo MSN a la derecha del titular… arrggghh!!
    A todo esto, ¿los tags en la parte superior son tan relevantes? Si no lo son tanto no los pondría en la Miraconcha de la página. A lo mejor debe conformarse con un área del tipo Igeldo (que ni tan mal oiga, jejej). Además, existe la opción “Tags” que quizá sirva para este menester. No digo que esté mal ponerlo a pesar de que exista tal opción, simplemente plantéate su ubicación en ausencia de un habitual menú general bien marcado.
    – Bueno, podríamos comentar esto de modo largo y tendido. Quizá estaría bien que llevaras unos pantallazos a un cocktail o un finde y los vemos… ¿o qué? Que esto de escribir sin tener respuesta al momento y con tanto desconocimiento de los porqués de ciertos detalles me hacen sentirme como un astronauta perdido en Irati jopelas!!
    Bueno David, que mejor lo hablamos con una cañita. Saludos!! Por cierto, sale usted esplendoroso en el desfile de Tabacalera!!🙂

  4. David dijo:

    ¡¡ Muchísimas Gracias Goio !!
    Me lo tengo que leer con más calma pero así de primeras:
    Color enlaces: toda la razón, ¿alguna sugerencia?.
    Homogeneizar Colores, Tipografías, … soy un auténtico desastre, si que es verdad que en la portada se ve Fucsia, negro, Azul/Gris, Amarillo (2 tonos), más los muñegotes, …
    Imagen de los muñegotes (tipo MSN Spaces) los he sacado de galería de Iconos Tango son iconos libres y están en formato vectorial, tampoco me convence los muñegotes lo hice un poco para salir del paso.
    Diferenciar títulos de Blog respecto a título de Post (tamaño) tendría que poner una tamaño de letra más grande al título del Blog, pero claro me haría unos estropicios de la leche con títulos largos, se puede intentar diferenciar con distintos tipos de colores ¿no?
    Respecto al tema de dar más información o explicar un poco más determinadas cosas (Tags, Blogs, …) al estar en varios idiomas y depender para las traducciones de varias personas, hace que a veces intente reducir al máximo los textos. (mal hecho)
    Sobre utilizar Banners en vez de texto, vuelve a aparecer el problema de estar en varios idiomas, necesitaría crear 8 imágenes (una por idioma), pero si que serí bastante más efectivo.
    Sobre la AI, he pensado en poner una barrita de navegación tipo Portada > Tag > Donostia para que la gente no se pierda aunque Nireblog no tiene mucha profundidad en la navegación y al final siempre está el enlace de Logo para ir a la página principal.
    Sobre la aprición de los Tags en la parte arriba, si ves la página en castellano o en la la Portuguesa si que aparecen Tags más relevantes, el problema con la página en Euskera es que todavía no hay Tags suficientes para hacer algo parecido, según se vayan generando más contenidos haré lo mismo, ahora mismo en la versión en Euskara hay Tags no muy relevantes, de todas formas dan más visibilidad a los Blogs (Buscadores)
    Soy consciente que hay que mejorar un montón el diseño de las páginas de Nireblog, en realidad cuando pedía opinión sobre el rediseño era sobre la página Nireblog.com/all pero te agradezco mucho estás opiniones que van a venir de perlas para darle un repasillo a Nireblog.

  5. Goio dijo:

    El color de los enlaces. Consejo genérico: algo que contraste bien, pero que no chirríe.
    Tampoco es un pecado tener una paleta de color algo amplia siempre que se use con homogeneidad y en similares niveles de densidad.
    La de Tango la conozco y está bien para iconos pequeñitos y así, pero algunos iconos grandes son un poco “asín”.
    Si en los titulares no puedes jugar con el tamaño juega con el color, las negritas, e incluso un color de fondo para dar más relevancia a un texto frente al otro.
    El tema de las traducciones es una jodienda de cara a banners. No pasa nada. Emplea textos editables que en este caso es de necesidad imperiosa, pero deja algo de aire entre gráficos y texto y trata de fijarte en sitios como Flickr que hacen un uso divino de textos grandes editables.
    Nada oye, que ya te he soltado una parrafada que no es muy práctica así puesta. Ya hablaremos en un cocktail de estas cosas!😉 jejjeje
    Salut!!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s