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
Dise├▒o de Video Player para Sofatutor

Dise├▒o de Video Player para Sofatutor


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

Dentro de todo el trabajo que fue dise├▒ar completamente la plataforma Sofatutor, hubo una faena en particular que fue muy interesante. Se trataba de dise├▒ar la interfaz del Player de los Videos de la plataforma. El desaf├şo se volvi├│ interesante porque era la primera vez que me tocaba investigar y dise├▒ar en torno a esta interfaz que como primera complejidad trae el tama├▒o. En una reducida ├írea de 650 x 370 px se deb├şa diagramar todos los elementos gr├íficos de la interfaz: botones de acciones b├ísicas (play, pausa, tiempo, volumen); botones de acciones auxiliares (full screen, on-off de comentarios); comentarios hechos por otros usuarios en el timeline; y, por supuesto, el propio men├║ que deb├şa dejar la posibilidad que el usuario controlara el video (ranking, tags, links, preguntas, email). Visitadas muchas plataformas de videos se lleg├│ a esta interfaz que no deb├şa romper la arm├│nia de la est├ętica ya dise├▒ada en la plataforma, es por eso que se escogi├│ el color negro para garantizar un buen contraste con el men├║ y sus ├şconos asociados que se dise├▒aron con aspecto silver (usando grises del verde corporativo). El aspecto de los ├şconos conserv├│ l├şneas suavizadas y blandas con un cuerpo degradado que deja la posibilidad de contener l├şneas internas suavizadas o duras. En cuanto al color se estableci├│ el verde corporativo como el color para la interacci├│n en los botones (efecto over), as├ş como tambi├ęn para su estado acti, que inclu├şan los t├ştulos. Se conserv├│ el azul para links (textos y botones) y el rojo consignado a las alertas.

En mi Flickr pueden ver todas las pantallas dise├▒adas, adem├ís de los wirefames enviados por el cliente. Es importante que se den cuenta la cantidad de pantallazos que salen de una “peque├▒a” ├írea de interacci├│n. Para que lo tengan en cuenta a la hora de cotizar colegas.


No hay comentarios para este Articulo.

Escribe un comentario