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
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

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.

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.

Colores juntos .jpg

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.

Encabezados juntos home real.jpg


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, lás imagenes van variando mínimamente sus tamaño. Por lo analizado las imágenes de el soporte más grande suelen ser más pequeñas que lás del menor soporte que son más grandes notoriamente.


Computador imagenes .jpg

Error al crear miniatura: Falta archivo

Iphone4 imagenes.jpg

Iphone 3 imagenes .jpg


Aquí podemos ver lo mencionado anteriormente, viendo el cambio de tamaño de una columna de la grilla , y el de una imagen.


Error al crear miniatura: Falta archivo

hola


Cambios de párrafo y menu de nombres

Quise poner de ejemplo a dos categorias del sitio web , por lo que la siguiente tenía que tener como primera condición para comparar una sección con un párrafo de lectura. Para ver como son los cambios de tamaño y posición que se produce con un texto.

Se volvió a tomar como referencia la grilla de la pantalla 1024x600 , para ver como era su posición , pero en este caso a diferencia de la sección home , el movimiento de la grilla no es lineal ni proporcional a los distintos puntos de quiebre. En este caso se prioriza por una mejor legibilidad y mínima posibilidad de que la columna se disminuya a algo ilegible.


Aquí vemos todos sus variaciones, en los 4 soportes que elegimos donde se producía los puntos de quiebres más notorios.

Error al crear miniatura: Falta archivo
Error al crear miniatura: Falta archivo
Error al crear miniatura: Falta archivo
Error al crear miniatura: Falta archivo



Tipografía Párrafo

la tipografía de la lectura es Arial Bold , en los tres primeros tipos de soportes no se divisa ninguna variación de tamaños, sus líneas destacadas están con 20 pt y su lectura más extensa con 16. El punto de quiebre diferenciador que se produce es en el soporte más pequeño (320x400 px) el cual sus tamaños cambian a 13 pt y 10 pt.


Error al crear miniatura: Falta archivo

hola


Cambios en Menu de nombres

El cambio de menu de nombres se mueve linearmente ,siguiendo la grilla de las imágenes, pues como son columnas de textos con un gran interlineado o en otras palabras un listado, se puede incluir en la misma grilla que rige las imágenes.

Aquí podemos visualizar lo mencionado anteriormente.

hola



Tipografía Menu de nombres

La tipografía del menu de trabajo funciona bajo la misma observación que encontramos en la tipografía de lectura.Por lo que en general el cambio mínimo en el sitio es el del tamaño de sus tipografías.

hola

hola


Cambios en el footer

hola