Proceso de Prototipado

Actualmente nos encontramos trabajando en el traspaso de la información de los Mockups al prototipado web, si bien el avance está recien en proceso, a continuación mostramos un poco de lo que llevamos hasta el momento.

prototipado.png

Este avance es lo que se lleva hasta el momento.

Mockups

Ya con los anteriores Wireframes de Alta Calidad, lo siguiente fue seguir con el traspaso a los mockups, definiendo junto con ellos como será nuestra propuesta gráfica para la página web.

Mockup

Ésta es una fase preliminar del Mockup, puesto que aún no contiene la información real

TIPOGRAFÍAS

raleway

PALETA DE COLORES

colores

Trabajamos con colores suaves, claros y frios,  los cuales rondan colores azules, verdes, y también algunos grises para agregar contraste.

FORMAS

Formas

Nuestro estilo gráfico se basa en la simpicidad, es por eso que decidimos trabajarlo con elementos FLAT, tanto en sus formas e iconos como en los colores.

MULTIMEDIA

La página, posee el apartado de “Recursos Complementarios”,  ahí se encuentran unos videos de apoyo con los cuales el usuario podrá interiorizarse con el contenido de ciencias naturales.

A su vez, tiene links que redirecionan hacia otras páginas con actividades interactivas para poder ahondar aún mas en los contenidos que se desee profundizar.

DIAGRAMACIÓN

reticula

Nuestra diagramación se basa en una retícula de 16 columnas.

Wireframe Baja Calidad

Continuando el proceso, seguimos con los wireframes de baja calidad, los cuales realizamos de manera análoga y son el primer pincelazo del proyecto.

12305558_10208701762207407_1029340889_n

Como definimos anteriormente en el mapa de arquitectura de la información, se optó por realizar el proyecto en una página One Page Layout, la cual se dividirá en 6 sectores:

  1. HOME
    La portada de la página, donde se encontrará un banner con noticias e imágenes relevantes al conetenido de la página.
  2. ESTADOS DE LA MATERIA
    Aquí irá el contenido correspondiente a lo más báscio, lo que involucra los estados de la materia Sólido, Líquido, Gas y Plasmático. 
  3. CAMBIOS DE LA MATERIA
    Siguiendo el contenido, se irá ahondando con la forma en que cambia cada estado dependiendo de un agente externo a ellos, probocando así cambios a causa de la Sublimación Progresiva, Fusión, Evaporación.
  4. ELEMENTOS QUÍMICOS PRESENTES EN EL PLANETA
    Subiendo el nivel de profundidad, ahora se aborda la materia desde su composición química, se hablará de los Elementos Químicos, su Composición y la Tábla Periódica. 
  5. MODELOS ATÓMICOS
    En este escalón, se abordan los modelos atómicos de Dalton, Thompson, Rutherford & Böhr 
  6. APOYO COMPLEMENTARIO
    En esta sección, se llega al último nivel de la página antes del footer, el cual contiene los recursos para ayudar a docentes, apoderados y alumnos. Contiene Guias para descargar, una sección con las respuestas y estadísticas y también links externos para el desarollo de Experimentos

 

Arquitectura de la Información

CONCEPTO

claro, ra

  1. Evidente, patente:
  2. Sincero, franco
  3. Poco denso
  4. [Color] más cercano al blanco:
    azul claro.

Debido a que la información que trabajaremos -La materia y sus trasformaciones- puede llegar a sonar muy denso para los estudiantes, pensamos en trabajar la información y el diseño del sitio, en algo que sea claro y sencillo de comprender tanto en lo visual como en contenido.

ARQUITECTURA DE LA INFORMACIÓN

La forma en que distribuiremos las distintas secciones de información en la página, las explicamos en el siguiente mapa de Garret.

Mapa de Garret

Llegamos a éste modo de distribuir la información, luego de darle muchas vueltas a una forma sencilla de organizar todo, de hacer más eficiente la entrega de la información para los usuarios.

12248781_10208643682395448_125209663_n

Imágen del proceso análogo mientras decidíamos cómo sería el mapa final.

Inicio Proyecto Exámen

¡Bienvenidos!

En esta primera entrada del blog, a continuación se expone un mapa conceptual en el cual se encuentran los objetivos de nuestro proyecto para el examen de Taller de Producción Digital 2015.

NUESTRO TEMA:

Compresión de la naturaleza – “La materia y sus transformaciónes”

mapa resized

REFERENTES

Actualmente nos encontramos trabajando en la investigación de referentes, para la realización del brenchmark, en el cual tenemos dentro de nuestros referentes las páginas:

 

http://www.profesorenlinea.cl

profe en linea

Ésta página fue escogida no por su diseño, sino como referente en cuanto a la información que posee.

http://www.icarito.cl

icarito

Igual que la anterior, el fuerte de esta página como referente nuestro, será la información que comparte, dado que en otros aspectos no está muy bien realizada.

http://www.santillana.cl

santillana

Es interesante ver que en ésta página de editorial de los libros santillana, se encuentra una sección dedicada al apoyo docente, sección que también queremos implementar a nuestro proyecto de exámen.

http://www.monografias.com

monografias

Claramente como referente de diseño no lo usaremos, pero es interesante que posee mucha información clara y esquemas de apoyo para la información que pensamos realizar.

http://natureduca.com/fis_fuermov_inercia01.php

ultima

Un referente más para la información.

REFERENTES VISUALES

http://www.educaweb.com

educaweb

Éste referente nos parece muy útil para la línea visual que queremos utilizar para nuestro proyecto.

http://kappewp.weblusive-themes.com/

referente visual

Escribir una leyenda

Por otro lado,  se consideró ésta página como referente visual para el proceso posterior visual (wireframes & mockups) y de prototipado.

 

Sobre nuestro grupo

Nuestro grupo está conformado por 3 integrantes,  cada uno está encargado de un puesto en específico dentro del proyecto, sin embargo,  el trabajo en equipo se realiza de forma paralela y en constante retroalimentación para poder lograr un buen resultado final.

Prototipado: Luis Ramirez

Visual: Manuel Pereira

Información: Víctor Úbeda

Taller Producción Digital 2015 – Duoc UC – Viña del mar