Dconstruct.org

De Casiopea
Títulodconstruct.org
Tipo de ProyectoProyecto de Curso
Palabras Claveresponsive design
Período2013-2013
AsignaturaGráfica Digital
Del CursoGráfica Digital 2013,
CarrerasDiseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)Javiera Rojas
ProfesorKatherine Exss
URLhttp://http://2013.dconstruct.org/


Estudio visual de diseño responsivo en sitio web: http://http://2013.dconstruct.org/#/prospective

SITIO WEB: dConstruct 2013

A continuación se presenta el caso de estudio de un sitio responsivo (responsive design) dConstruc (http://2013.dconstruct.org/conference/simone/). dConstruc Es una conferencia, la cual tiene lugar en Brighton Dome el primer viernes de septiembre de cada año. Las conferencias tienen variados temas, algunos de ellos son; la creatividad la cultura y el diseño de interacción. Para analizar este sitio responsivo se deberán observar los distintos tamaños de diagramacíon que varia según el soporte en el que se esta mirando el sitio. Algunas variantes del sitio son ; su grilla , imagenes y tipografías.

Visualización pantalla computador

Como primera mirada analizaremos el sitio por completo con el tamaño del computador que estoy ocupando 1024x600 px. La diagramación de la grilla varia según su categoria.

Categorías:

  • Home
  • Conference
  • workshop
  • location
  • participants


Distintos soportes

Para poder ver los distintos cambios de grilla se analizaran dos categorias; home y participants.

Los componentes que están ubicados en la grilla varian dependiendo del soporte , el cual cambia su ancho de pantalla. A medida que este va disminuyendo su tamaño los elementos se van moviendo para las siguiente linea. Se puede examinar esto al observar en el head el precio de la conferencia que se situa en un rectángulo de color rojo que va cambiando su posición. A la vez , el estrechamiento de la pantalla produce una extensión vertical de la grilla notablemente, este cambio genera una lectura más lenta de todo el contenido presentado.



Movimientos de los elementos en relación al formato que se adapta

Para analizar el estudio de los cambios de diagramación , se crearon maquetas con colores definidos que muestran los cambios de tamaño y posición que produce el sitio en los puntos de quiebre.

  • HOME

Colores juntos .jpg

Cambios de encabezado

Encabezados juntos home real.jpg


Cambios de imagen

Computador imagenes .jpg

Archivo:Ipad imágenes.jpg

Iphone4 imagenes.jpg

Iphone 3 imagenes .jpg



hola


Cambios de párrafo y menu de nombres


Archivo:Tamaño parrafo.jpg

Archivo:Tamaño parrafi .jpg

Archivo:Tamaño parrafe .jpg

Archivo:Tamaño parrafu.jpg



Tipografía Párrafo


hola


Cambios en Menu de nombres

hola





Tipografía Menu de nombres


hola

hola


Cambios en el footer

hola