Título	Caso de estudio: Kings Hill Cars
Tipo de Proyecto	Proyecto de Taller
Palabras Clave	Responsive Design, Caso de estudio
Período	2013-2013
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)	Christopher Fattori
Profesor	Katherine Exss
URL	http://kingshillcars.com/

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.

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

480x320px

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

Márgenes: 42 px
Columna interna: 364 px
Sub columna :300px

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

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

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

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

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.

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.

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

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.

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

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.

Logo

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.

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.

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.