Ver el código de «Kings Hill Cars - Estudio Responsive»

{{Proyecto
|Título=Caso de estudio:  Kings Hill Cars
|Tipo de Proyecto=Proyecto de Taller
|Palabras Clave=Responsive Design, Caso de estudio
|Año de Inicio=2013
|Año de Término=2013
|Carreras Relacionadas=Diseño Gráfico
|Cursos Relacionados=Gráfica Digital 2013
|Profesor=Katherine Exss,
|Alumnos=Christopher Fattori,
|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.
[[Archivo:Estudio-0.jpg|600px|center]]
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
[[Archivo:Estudio-1.jpg|600px|center]]

=== 480x320px ===
'''480x320px'''- Google nexus
En este formato se aprecian las siguientes características:
* Márgenes: 42 px
*Columna interna: 364 px
* Sub columna :300px

[[Archivo:Estudio-2.jpg|600px|center]]

=== 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
[[Archivo:Estudio-3.jpg|600px|center]]

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
[[Archivo:Estudio-4.jpg|600px|center]]

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
[[Archivo:Estudio-5.jpg|600px|center]]
[[Archivo:Estudio-6.jpg|600px|center]]

==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
[[Archivo:Estudio-10.jpg|600px|center]]

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'''.
[[Archivo:Estudio-11.jpg|600px|center]]

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.
[[Archivo:Estudio-12.jpg|600px|center]]

En cuanto al menú en máximo ancho de pantalla los márgenes internos aumentan de 14px a 26px.
[[Archivo:Estudio-13.jpg|600px|center]]

=== 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.
[[Archivo:Estudio-14.jpg|600px|center]]

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

[[imagen: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.
[[Archivo:Estudio-7.jpg|600px|center]]

===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.
[[Archivo:Estudio-9.jpg|600px|center]]

===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. 
[[Archivo:Estudio-8.jpg|800px|center]]

==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:
[[Archivo:Estudio-15.jpg|600px|center]]

En el formato 480px se encuentran los siguientes estilos de textos:
[[Archivo:Estudio-16.jpg|600px|center]]

En el formato 764px se encuentran los siguientes estilos de textos:
[[Archivo:Estudio-17.jpg|600px|center]]

En el formato 1024px se encuentran los siguientes estilos de textos:
[[Archivo:Estudio-18.jpg|600px|center]]

En el formato 1422px se encuentran los siguientes estilos de textos:
[[Archivo:Estudio-19.jpg|600px|center]]

=== Columna principal ===
En el formato 320px se encuentran los siguientes estilos de textos:
[[Archivo:Estudio-20.jpg|600px|center]]

En el formato 480px se encuentran los siguientes estilos de textos:
[[Archivo:Estudio-21.jpg|600px|center]]

En el formato 764px se encuentran los siguientes estilos de textos:
[[Archivo:Estudio-22.jpg|600px|center]]

En el formato 1024px se encuentran los siguientes estilos de textos:
[[Archivo:Estudio-23.jpg|600px|center]]

En el formato 1422px se encuentran los siguientes estilos de textos:
[[Archivo:Estudio-24.jpg|600px|center]]

=== Pie de página===
En el formato 320px se encuentran los siguientes estilos de textos:
[[Archivo:Estudio-25.jpg|600px|center]]

En el formato 480px se encuentran los siguientes estilos de textos:
[[Archivo:Estudio-26.jpg|600px|center]]

En el formato 764px se encuentran los siguientes estilos de textos:
[[Archivo:Estudio-27.jpg|600px|center]]

En el formato 1024px se encuentran los siguientes estilos de textos:
[[Archivo:Estudio-28.jpg|600px|center]]

En el formato 1422px se encuentran los siguientes estilos de textos:
[[Archivo:Estudio-29.jpg|600px|center]]