amorales

Diseño visual para medios digitales



Strict Standards: Only variables should be assigned by reference in /home/amorales/amorales.cl/wp-includes/post.php on line 115
Sofatutor: progresi贸n de dise帽o de contenedor de temas (F盲cher)

Sofatutor: progresi贸n de dise帽o de contenedor de temas (F盲cher)


Deprecated: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in /home/amorales/amorales.cl/wp-includes/formatting.php on line 74

A continuaci贸n describo y muestro la progresi贸n para el dise帽o del contenedor de temas implementado para Sofatutor. Para la mayor铆a puede sonar muy t茅cnico pero para los dise帽adores de interfaz es de todos los d铆as :) Pueden ver y descargar la imagen tambi茅n en mi Flickr.

01 Propuesta Wireframe

  • Forma: Contenedor cl谩sico de temas desplegables/colapsables con ancho fijo y alto indeterminado.
  • Tipograf铆as: Uso de familia tipogr谩fica que permita mostrar cantidad de videos de los temas.
  • Color: Construcci贸n crom谩tica para diferencia de contenido e interacci贸n.
  • Interacci贸n: Acci贸n para desplegar/colapsar segundos niveles.

02 Propuesta Inicial

  • Forma: Contenedor de contorno mixto (cabecera curva con brillo y pie recto a 1 pixel), bordes a 1 pixel e interior blanco con l铆neas divisorias de 1 pixel con degradaciones para vol煤men.
  • Tipograf铆as: Propuesta inicial con Lucida cuerpos 13 y 11 en estilo normal para 1er y 2do nivel respectivamente; opci贸n con Arial para disminuir anchos de palabras del idioma en cuerpos 13 en negro y 11 normal para 1er y 2do nivel respectivamente.
  • Color: Juego generales de estilos grises provenientes del verde corporativo de la marca, con uso de tonalidades verdes (diferencia de niveles) para etiquetas de cantidades.
  • Interacci贸n: Acci贸n para desplegar/colapsar segundos niveles con uso de iconograf铆a +/- respectivamente. Propuesta opcional de despliegue de contenedor para m谩s temas con pie volum茅trico y cabecera con acci贸n de intercambio de videos.

03 Propuesta de 3er Nivel

  • Forma: Aumento de ancho.
  • Tipograf铆as: Propuesta de cuerpos 13 en negro, 12 y 11 normal para 1er, 2do y 3er nivel respectivamente.
  • Color: Eliminaci贸n de etiquetas por textos. Estados de 铆conos de acciones en color.
  • Interacci贸n: Acci贸n de intercambio de videos iconografizados.

04 Propuesta de interacci贸n de despliegue/colapso

  • Interacci贸n: Acci贸n para desplegar/colapsar segundos niveles con uso de flechas izquierdas antecesoras al texto construyendo acci贸n m谩s reconocible y usable. Acci贸n de intercambio de videos iconografizado con flechas de intercambio.

05 Propuesta Final

  • Forma: Incorporaci贸n de subl铆neas divisorias punteadas entre 1er, 2do y 3er nivel.
  • Tipograf铆as: Estilo negrito del 2do nivel para remarcar jerarqu铆as tipogr谩ficas.
  • Interacci贸n: Diferenciaci贸n entre v铆nculos para desplegar/colapsar temas y cantidad de videos.

No hay comentarios para este Articulo.

Escribe un comentario