Revisión del 04:47 11 jul 2013

Título	dconstruct.org
Tipo de Proyecto	Proyecto de Curso
Palabras Clave	responsive design
Período	2013-2013
Asignatura	Gráfica Digital
Del Curso	Gráfica Digital 2013,
Carreras	Diseñ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
Profesor	Katherine Exss
URL	http://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

Home
Conference
Workshop
Programs
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.

Home
Participants

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

En el Home en el cual se está trabajando 1024x600px , la diagramación posee una grilla de ancho 184px por el largo de la totalidad 730px.

Grilla 1250 px

Luego teniendo en cuenta estos tamaños de grilla "principal" simulamos los tamaños de los distintos soportes, para tener más claridad de los movimientos que suceden al ir disminuyendo de tamaño la pantalla en la cual se está mirando. Como primera mirada vemos que las imágenes circulares van cambiando de posición y tamaño según la grilla , linealmente para el lado derecho. El rectángulo rojo o, donde aparece el precio de la conferencia , al ir disminuyendo la pantalla este va cambiando de posición , de forma y de tamaño , pues de ser un rectángulo más o menos equitativo pasa a ser un rectángulo donde la diferencia de ancho y largo cada vez es más alta.

Cambios de encabezado

Aquí podemos denotar especifico el movimiento del rectángulo rojo mencionado anteriormente. Se puede ver que en los tres primeros distintos tamaños ( computador,ipad y iphone4) su cambio de tamaño menos elocuente respecto a su ley , es el rectángulo rojo. Luego el logo se mantiene igual su tamaño, menos en la pantalla de iphone tres el cual es su posibilidad más pequeña, ahí tiene unas pequeñas disminuciones de puntos.

Tamaños título .jpg

Tamaños logo
Tamaños venta anuncio.jpg

Tamaños ventana de precios

Cambios de imagen

Los cambios de imágen en el home se producen de una manera linear , y siguiendo en proporción a la grilla que se saco de la pantalla 1024

Archivo:Ipad imágenes.jpg

hola

Cambios de párrafo y menu de nombres

Grilla Participants

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

Tipografía Menu de nombres

Cambios en el footer

@@ Línea 59: / Línea 59: @@
 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
+En el Home en el cual se está trabajando 1024x600px , la diagramación posee una grilla de ancho 184px por el largo de la totalidad 730px.
 <gallery>
 Image:Grilla computador .jpg|Grilla 1250 px
 </gallery>
+Luego teniendo en cuenta estos tamaños de grilla "principal" simulamos los tamaños de los distintos soportes, para tener más claridad de los movimientos que suceden al ir disminuyendo de tamaño la pantalla en la cual se está mirando. Como primera mirada vemos que las imágenes circulares van cambiando de posición y tamaño según la grilla , linealmente para el lado derecho. El rectángulo rojo o,  donde aparece el precio de la conferencia , al ir disminuyendo la pantalla este va cambiando de posición , de forma y de tamaño , pues de ser un rectángulo más o menos equitativo pasa a ser un rectángulo donde la diferencia de ancho y largo cada vez es más alta.
 [[Archivo:Colores_juntos_.jpg|500px]]
 ===Cambios de encabezado===
+Aquí podemos denotar especifico el movimiento del rectángulo rojo mencionado anteriormente.
+Se puede ver que en los tres primeros distintos tamaños ( computador,ipad y iphone4) su cambio de tamaño menos elocuente respecto a su ley , es el rectángulo rojo. Luego el logo se mantiene igual su tamaño, menos en la pantalla de iphone tres el cual es su posibilidad más pequeña, ahí tiene unas pequeñas disminuciones de puntos.
 [[Archivo:Encabezados juntos home real.jpg|600px]]
@@ Línea 78: / Línea 85: @@
 ===Cambios de imagen===
+Los cambios de imágen en el home se producen de una manera linear , y siguiendo en proporción a la grilla que se saco de la pantalla 1024

Diferencia entre revisiones de «Dconstruct.org»