Jugando con el diseño de Love4Clab

Cuando estoy fastidiada me da por hacer dibujos o por jugar con el diseño de las páginas. Hace días le pregunté a Freddie si podía ayudarlo con algo que implicara dibujar y dijo que me avisaría ¬¬ . Esa tarde me puse a hacer unos trofeos para que los ganadores de algún concurso de Love4Clab pudieran colocarlos en su blog. Hice en flash 3 modelos de trofeos sin variar los elementos:

Trofeo Trofeo love for clab trofeo dorado

También jugué con el diseño del index de Love4clab. Realicé 3 diseños (en realidad fueron 4 pero uno era muy alocado, sin bordes, fotos con etiquetas pegadas con adhesivo desde donde se accesaba a las secciones, una locura). Uno azul, uno morado y uno multicolor.

Brilliant Caribbean Blue

Brilliant Caribbean Blue

Un diseño de color azul brillante con tonos azules suaves, combinados con degradado pastel: verde, azul y morado. El header está formado por una curva que separa al logo de la sección de registro y permite colocar una imagen en el fondo. La imagen que escogí fue una preciosa foto tomada por Jase (¿o fue por Taki?, no sé, pero está super c00l). Incorporé la opción de buscar y una sección llamada información, aunque más bien debió ser FAQ (en el diseño Pastel Color Blowout si está así).

Utilicé otra letra para el logo porque no sé exactamente cuál es la fuente del actual y tengo demasiadas (son tantas que se cuelga photoshop U_U). Agregué dos corazones al logo para darle volumen y hacerlo visualmente más bonito y cercano al logo de Clab (Aunque sé que le agrega una complejidad innecesaria al momento de reproducirlo fuera de la web).

En lo referente a los concursos, coloque información adicional y 3 botones: uno para registrarse, uno para leer más sobre el concurso actual y otro para abrir un concurso (es algo que considero debe agregarse como sección). También debería poder verse los concursos realizados con anterioridad (puede ir en una sección concurso (Ésto lo anexé en diseño Pastel Color Blowout). También me he preguntado cómo se mostrará la información cuando exista más de un concurso vigente, ¿se mostrará la información en el index de forma aleatoria?.

En lugar de participantes, que es el título actual de la sección donde se muestran fotos aleatorias de los usuarios, coloque: Imágenes de la comunidad, me parece que indica más la naturaleza de las fotos que allí se muestran y remarca el sentido de comunidad del sitio. Participantes tiene un significado que se relaciona más con concursos.

Incluí en la portada una sección para leer el último post publicado en el blog con la finalidad de mostrar más información sobre el sitio y motivar a visitar el blog. Igualmente, coloqué una sección para apreciar las imágenes publicadas recientemente y las imágenes más vistas. Dichas secciones incluyen información adicional como el número de comentarios de la imagen, el autor y botón de feed asociado al autor.

Pueden ver el diseño en grande haciendo click en la siguiente imagen.

diseño azul

Blackberry Funny Expression

blackberry funny expression

Un diseño de color morado oscuro con tonos morados claros, casi rosa, y gris. El header une al logo con la sección de registro mediante una estructura curva suave en forma de s,  y permite, al igual que el diseño anterior, colocar una imagen de fondo.

Este diseño incluye las mismas secciones que el diseño anterior más una sección que muestra a los ganadores de los concursos. Adicionalmente, indica de forma muy visible cuándo un concurso ya no está vigente.

En este diseño el feed asociado al autor se muestra únicamente en las Imágenes de la comunidad. Es un diseño más limpio y sencillo.

Para ver el diseño ampliado hagan click en la siguiente imagen.

diseño morado

Pastel Color Blowout

pastel color Blowout

Diseño multicolor que combina colores fuertes y cálidos con colores pasteles, siendo éstos últimos los predominantes. El header constituye una composición de fotos de los mismos participantes de L4C, y muestra el logo de la página centralizado en un recuadro blanco que asemeja igualmente una foto. La composición puede sustituirse por cualquier otra imagen pero sin quitar el logo de la página.

Este diseño tiene muchas cosas que no están implementadas pero de todos los diseños que hice me parece que es el más versátil y que presenta mayor información de mejor forma. Aunque quizás para algunos parezca un carnaval y sea insoportable por tantos colores juntos, yo creo que el colorido le da vitalidad y diversidad a la página. Además, no son tonos fuertes por lo que no molesta el contraste visual. Lo que si noto es que está cargada pero se aprovecha bien el espacio.

Como en la descripción de Love4C que se da al comienzo se describe el sitio como una comunidad de arte, diseño y fotografía y una plataforma para concursos, me pareció conveniente incluir en el inicio esos elementos. Por tal motivo, la franja morada-rosa incorpora la descripción del sitio,  imágenes recientes y concursos recientes, es decir, muestra la naturaleza y actividades presentadas en la descripción del sitio. Esto es lo primero que leemos y nos permite formarnos una idea práctica de las actividades que podemos realizar en el lugar.

En la sección de concursos recientes se condensa bastante información respecto a esa actividad, desde una descripción del mismo, la fecha límite, su status, así como el logo de quien organiza el concurso, botones y un enlace a más concursos.

En el menú se incluyen las secciones: Concursos y FAQ. Me parecen necesarias de implementar en un futuro. Adicionalmente, se incluyen las siguientes secciones:

  • Ganadores del concurso: donde se muestran las imágenes ganadoras con sus respectivos autores (cuando haya varios concursos a la vez se pueden mostrar aleatoriamente y si son más de 4 ganadores pueden verse todos en más ganadores).
  • Artículos recientes: muestra los últimos 5 artículos publicados en el blog.
  • Información: No sé si esta sección sea necesaria, muestra información de contacto, feeds, favoritos, categorías y otras cosas que no están implementadas y que quizás no se implementen U_U. Siempre puede sustituirse por otra sección o eliminarse y agrandar el espacio para lo referente a los concursos.
  • Imágenes más votadas: Esta sección es en caso de que algún día se implemente la votación de imágenes. Puede eliminarse también y colocar en ese espacio otro artículo del blog u otra información.
  • Imágenes más comentadas: Como indica el título, muestra las imágenes con más comentarios.

Básicamente, este diseño condensa pequeñas porciones de información, divididas en bloques de colores, acerca de todo lo que puedes realizar en la página.

Diseño web multicolor

Fue ultra divertido realizar estos diseños. De los 3 me gustan varios elementos pero sé que puedo hacer algo mucho mejor.

También estoy haciendo unos emoticones con forma de fotografía de lo más monos XD.

[poll=8]

No me pregunten de dónde saqué los nombres de los diseños @_@ (pobre de mis hijos XD), los duendecillos me los dictaron U_U, los mismos que me dicen que queme la casa de Yari, Elder y Auyama. Mx es la que sabe poner nombres fashion a las cosas U_U.

Nota: Para los despistados, estos diseños fueron realizados por entretenimiento personal y no serán implementados en Love4Clab (a menos que Freddie fume lo mismo que los de Sunrise y Fael también). Así que pueden dejar de patalear, decir que su abuela medio ciega diseña mejor o preguntarse dónde me gradué de diseñadora (saqué el título de una caja de detergente).

P.D: Z, no llores, algún día jugaré con el diseño de tu blog XD