GD 2013

De Casiopea

GRÁFICA DIGITAL

Encargo I: Estudio de sitio responsive "Kings Hill Cars"

Kings Hill Cars es un sitio que aplica el sistema responsive design, este sitio presenta servicios para la contratación de taxis vía web. A continuación se presenta el estudio de este sitio en 5 diferentes formatos demostrando así las decisiones de diseño tomadas para la presentación en distintos dispositivos.

Estudio-0.jpg

Los distintos formatos al adaptarse al ancho de pantalla deben extender su contenido. Entre menor espacio horizontal tenga el sitio, aumenta la lectura vertical y la simplicidad en el diseño de este, pues se debe entregar la mejor información al usuario.

Grilla

Al momento diseñar se debe crear una grilla que sirva de estructura para todos los elementos que contenga el sitio. Al aplicarse el modelo responsive en el diseño, este debe adaptarse, por lo tanto la grilla también se debe adaptar. A continuación se presentan el sitio en distintos formatos:

320x480px

320x480px- IPhone En este formato se aprecian las siguientes características:

  • Márgenes: 32 px
  • Columna interna: 220 px
  • Sub columna: 167px
Estudio-1.jpg

480x320px

480x320px- Google nexus En este formato se aprecian las siguientes características:

  • Márgenes: 42 px
  • Columna interna: 364 px
  • Sub columna :300px
Estudio-2.jpg

768x1024px

768x1024px- IPad vertical En este formato se aprecian las siguientes características:

  • Márgenes: 40 px
  • Columna interna: 650 px
  • Sub columnas : 2 columnas de 305px
Estudio-3.jpg

Este formato ofrece cambios notorios en el diseño, pues al ser dos columnas el menú y la diagramación de iconos y servicios cambia. A la vez que la imagen del automóvil es acompañado por un texto destacado. El párrafo que antes estaba sobre él ahora se ubica debajo ocupando todo el ancho de la columna interna. El footer también cambia, ubicándose los enlaces y créditos a lo ancho.

1024x768p

1024x768px- IPad horizontal En este formato se aprecian las siguientes características:

  • Márgenes: 42 px
  • Columna interna: 900 px
  • Sub columnas: 2 columnas de 445px y 4 columnas de 210 px con margen de 25 px
Estudio-4.jpg

Este formato también ofrece nuevos cambios en la diagramación. El menú cambia ubicándose de manera horizontal y el color tanto de las letras como de las casillas cambia, el párrafo que se ubicaba debajo del automóvil ahora se ubica a un costado y los links a redes sociales se ubican ahora en la esquina superior derecha.

1422x757px

1422x757px- Máximo En este formato se aprecian las siguientes características:

  • Márgenes: 165 px
  • Columna interna: 1080 px
  • Sub columnas: 2 columnas de 540px y 4 columnas de 260 px con margen de 20 px
Estudio-5.jpg
Estudio-6.jpg

Casillas

En el diseño responsive además de adaptarse al ancho los elementos también deben de adaptarse, por esta razón se deben considerar el cambio en el diseño de estos. A continuación se presentan el cambio en el menú de navegación:

Menú

Las casillas que componen al menú siguen patrones similares a lo largo del diseño. Las casillas que componen tanto al menú en un ancho de 320 px de pantalla y un ancho de 480 px de pantalla cumplen con las siguientes características:

  • Alto de menú: 314px
  • Alto de casilla: 44px
  • Espacio entre casillas: 9px
  • Margen superior e inferior: 15px
  • Margen interior izquierdo: 14px
  • Tipografía: 11px de alto
Estudio-10.jpg

Ambos formatos se diferencian en que el ancho de 320px presenta un ancho de menú de 220px y el 480px uno de 364px para adaptarse al ancho de pantalla. El menú de 764px sigue similares características en cuanto al alto de casillas, espacio entre casillas, márgenes y tipografía pero se estructura en dos columnas de 315 px cumpliendo un alto de menú de 194 px.

Estudio-11.jpg

Luego cambia drásticamente de apariencia ante un ancho de pantalla mayor, colores distintos y en posición horizontal uno al lado de otro, el ancho de casillas varía según el largo del rótulo, pero cumple con el alto de casillas, márgenes y tipografía del menú anterior.

Estudio-12.jpg

En cuanto al menú en máximo ancho de pantalla los márgenes internos aumentan de 14px a 26px.

Estudio-13.jpg

Casillas

Al igual que en el menú las casillas y el botón para ingresar datos y el botón cambian según el ancho del formato. Se puede apreciar que en los distintos formatos el botón y la altura de las casillas mantienen las mismas dimensiones a lo largo del diseño, exceptuando el ancho de las casillas.

Estudio-14.jpg

Imágenes

Como se mencionó anteriormente todos los elementos deben de adaptarse, así las imágenes también se ajustan para mostrarse de la mejor manera en los distintos dispositivos, cambiando de tamaño según corresponda.

Auto

Imagenn original

Kingshill-taxi.png

Se puede apreciar que la imagenn del auto aumenta entre los cambios de 320, 480, 764 pixeles y se mantiene en el formato 1024 y 1422 pixeles, pues estos son los máximos de pantallas.

Estudio-7.jpg

El logo también cambia de tamaño pero en menor medida pues se mantiene constante en varios formatos cambiando únicamente en dos opciones, en un mínimo de 140 x85 a un máximo de 140 x220 pixeles.

Estudio-9.jpg

Iconos

Por el contrario existen imágenes calculadas para ser legibles a todos los formatos, por ello su tamaño no cambia. Este caso corresponde a los iconos, y las imágenes icónicas.

Estudio-8.jpg

Textos

Uno de los elementos más cambiantes en el diseño responsive es la fluidez de los textos, los cuales se adaptan tanto en tamaño del cuerpo como en los anchos de párrafos.

Cabecera

En el formato 320px se encuentran los siguientes estilos de textos:

Estudio-15.jpg

En el formato 480px se encuentran los siguientes estilos de textos:

Estudio-16.jpg

En el formato 764px se encuentran los siguientes estilos de textos:

Estudio-17.jpg

En el formato 1024px se encuentran los siguientes estilos de textos:

Estudio-18.jpg

En el formato 1422px se encuentran los siguientes estilos de textos:

Estudio-19.jpg

Columna principal

En el formato 320px se encuentran los siguientes estilos de textos:

Estudio-20.jpg

En el formato 480px se encuentran los siguientes estilos de textos:

Estudio-21.jpg

En el formato 764px se encuentran los siguientes estilos de textos:

Estudio-22.jpg

En el formato 1024px se encuentran los siguientes estilos de textos:

Estudio-23.jpg

En el formato 1422px se encuentran los siguientes estilos de textos:

Estudio-24.jpg

Pie de página

En el formato 320px se encuentran los siguientes estilos de textos:

Estudio-25.jpg

En el formato 480px se encuentran los siguientes estilos de textos:

Estudio-26.jpg

En el formato 764px se encuentran los siguientes estilos de textos:

Estudio-27.jpg

En el formato 1024px se encuentran los siguientes estilos de textos:

Estudio-28.jpg

En el formato 1422px se encuentran los siguientes estilos de textos:

Estudio-29.jpg