Trionn Design

De Casiopea





Caso de Estudio
NombreTrionn Design
Período2013-2013
Palabras ClaveResponsive Design
Estudiado enGráfica Digital 2013
Estudiado porCamila Valenzuela
URLhttp://www.trionndesign.com/


Introducción

El resposive web design nos permite crear un único diseño con la capacidad de adaptarse al tamaño de la pantalla del dispositivo que se esté utilizando.

Se pueden definir columnas, tamaños tipográficos y tamaños de imágenes, entre otras variables, que se redimensionarán y/o reestructurarán automáticamente (según los parámetros definidos en la cascada de estilo) en relación al tamaño y orientación de la pantalla.

Trionn Design

Estados de las páginas del Sitio

Trionn Design Home.jpg

Grillas

Trionn Design elementos-01.jpg

Elementos de cambio significativo

Trionn Design elementos-02.jpg

Elemento 1

Trionn Design elementos-03.jpg

  1. El menú está ubicado en la parte superior izquierda.
  2. El menú está casi centrado, sobre la imagen del header.
  3. El menú se fusiona en un único botón.
  4. La imagen y el texto del header se reubican.

Elemento 2

Trionn Design elementos-04.jpg

  1. Elementos en línea horizontal.
  2. Elementos en línea horizontal.
  3. Elementos centrados verticalmente.
  4. Elementos centrados verticalmente.

Elemento 3

Trionn Design elementos-05.jpg

  1. Elementos en línea horizontal.
  2. Elementos centrados verticalmente. El texto descriptivo se reubica a un lado del título.
  3. Elementos centrados verticalmente.
  4. Elementos centrados verticalmente.

Elemento 4

Trionn Design elementos-06.jpg

  1. Tres elementos en línea horizontal.
  2. Tres elementos en línea horizontal.
  3. Cuatro elementos.
  4. Cuatro elementos.

Elemento 5

Trionn Design elementos-07.jpg

  1. Tres elementos en línea horizontal.
  2. Cuatro elementos.
  3. Cuatro elementos.
  4. Cuatro elementos ordenados de forma vertical.

Observaciones Generales

  • No se observa una grilla clara, más bien los contenidos están centrados respecto al ancho de la pantalla.
  • La mayoría de los elementos cambia su tamaño y solo algunos cambian su estructura.
  • Llama la atención una leve deformación en las fotografías ubicadas casi al final de la página.