Red IO: Estudio del Servicio Web Embebido

De Casiopea

Mapa de Navegación

Wireframes

Para comenzar a decidir sobre la disposición de las cosas en el espacio, es necesario desarrolar wireframes, una composición de la página sin colores ni diseño emocional, donde se definen las jerarquías y la distribuiciones de los componentes.

En los proximos se encuentran todas las propuestas que se realizaron antes de llegar al diseño final. En un principio las propuestas tendían a ser muy influenciadas por la composición de los sitios web y su estructura, como se ve en los wireframes 1 y 2, Pero después se trató de presentar algo mas parecido a un sistema de datos, pero estas ultimos propuestas resultaban aún mas complicadas de entender. Finalmente se simplificó todo y se propusieron los wireframes finales.


Wireframes 1

Wireframes 2

Wireframes 3

Wireframes 4


Wireframes Finales

Para la navegación de la pagina se propone una esrtuctura en base a tres columnas que desglosan el contenido que va desde lo general, hasta la específico. Con esta estructura es siempre mas fácil saber en donde estás dentro del sitio y volver atras, es mucho mas directo y claro el acceso al contenido. La grilla para estos wireframes está compuesta por 15 columnas de 40 px cada una con un agregado de 10 px por lado para formar una separación de 20 px entre columna.

La pantalla está calculada de 900 px pero el proyecto se inscribe solo en 520 px (sin tomar en cuenta los margenes), se hizo esto buscando una estructura de pantalla mas versátil que funcionara tanto en pantallas de dispositivos como en monitores.



Imagen

Las primeras propuestas de imagen fueron realizadas en base a la idea de un logo previamente propuesto por el profesor el cual relaciona la conexión de nodos con lo medioambiental. De ahí surge el logo del árbol y el nombre del proyecto del mismo significado, arbor, (de la etimología de la palabra árbol). Luego surge la propuesta de la hoja bajo el mismo concepto de red y naturaleza y el nombre del proyecto cambia a IO con una serie de variados significados. Finalmente se deja el concepto literal de lado y se incursiona el las posibilidades gráficas que nos entrega el nombre IO, además pensando en la economía de tiempo al momento de cargar el sitio ya que su simpleza y composición permiten que pueda ser una imagen de 3 x 4 px o mas posibilidades, se llegó entonces al último logo en color verde limón.

Logo-arbol-io.png


Logo-hoja-io.png

Cartografía

La siguiente cartografia corresponde a Ciudad Abierta, se hizo para ser utilizada como base, para poder grafiacar los datos que arrojan los sensores (aquellos que lo requieren para un mejor entendimiento), por ejemplo para entender mejor el desplazamiento de la avifauna o los puntos de la ubicación del algo como los nodos o los lugares relevantes de Ciudad Abierta.


Carto1 red-io.jpg Carto2 red-io.jpg


Interfaz

La propuesta final lo incluye todo en una interfaz.