Awwwards

Nombre	Responsive Web Design: www.awwwards.com
Período	2013-2013
Estudiado en	Gráfica Digital 2013
Estudiado por	Nicol Valenzuela
URL	http://www.awwwards.com/

Introducción

OBJETIVO

Escoger un sitio web responsivo con cierta complejidad que tenga 3 portes de cambio en diagramación mínimo y hacer un análisis de él y su comportamiento.

• Sitio web escogido: http://www.awwwards.com/

• Descripción: El sitio escogido por mí tiene la característica curiosa de ser un espacio de acogida del diseño web internacional en general; de hecho llegué a él buscando sitios responsivos en internet. Fue entonces cuando razoné que un sitio que premia a otros sitios por su "responsividad", no podía quedarse atrás, y no me equivoqué, el sitio era responsivo. "Awwwards son los premios que reconocen y promueven el talento y el esfuerzode los mejores desarrolladores, diseñadores y agencias web en el mundo."Cabe destacar de la labor de este sitio, cuya misión es, como ellos mismos mencionan, "...descubrir, reconocer y promover el talento y esfuerzo de los diseñadores web, desarrolladores y agencias que crean experiencias digitales únicas que son útiles, innovadoras, intuitivas y bellas", no es menor, ya que está respaldada por grandes compañías, entre ellas Microsoft y Google.

Desarrollo

Según las medidas que otorga la herramienta "inspeccionar elemento" del navegador Chrome, y con el apoyo del sitio resizemybrowser, para simular los tamaños de Iphone4 y Meizu M8, respectivamente, los resultados son los siguientes:

Tamaño Full Screen (1349 x 1831px)

Capturas páginas tipo

• 

  1. About us

• 

  2. Article

• 

  3. Awards of the day

Datos obtenidos

1. Márgenes exteriores: 81,364px (Ancho)
2. Header, o cabecera: 1182 x 180px (Ancho por alto)
3. Footer: 1182 x 236px (Ancho por alto)
4. Columnas: 376,636px (Ancho)
5. Entre columnas: 27,547px
6. Márgenes dentro de las columnas: 25,815px
7. Tipografía:
   1. Fuente: "Museo Sans"
   2. Tamaño:
      1. Título: 33pt, estilo de fuente 700
      2. Bajada: 19pt, estilo de fuente 100
      3. Cuerpo: 17pt, estilo de fuente 100

• Nota 1: El texto usa dos de las tres columnas.
• Nota 2: La grilla es de tres columnas, aveces usan dos columnas para distribuir los párrafos, o los centran con respecto a la página

Tamaño IPhone 4 (960 x640px)

Capturas páginas tipo

• 

  1. About us

• 

  2. Article

• 

  3. Awards of the day

Datos obtenidos

1. Márgenes exteriores: 122px
2. Header, o cabecera: 700 x 180px
3. Footer: 700 x 237px
4. Columnas: 218,508px (Ancho)
5. Márgenes dentro de las columnas: 21,2px
6. Entre Columnas: 21,239px
7. Márgenes texto dentro de las columnas:21,246px

• Nota 1: La grilla continua siento de tres columnas
• Nota 2: La tipografía no cambia su tamaño ni estilo

Tamaño Meizu M8 (480 x 720px)

Capturas páginas tipo

• 

  1. About us

• 

  2. Article

• 

  3. Awards of the day

Datos obtenidos

1. Márgenes exteriores: 23px
2. Header, o cabecera: 418 x 131px
3. Footer: 418 x 289px
4. Columna: 418px (Ancho)
5. Márgenes dentro de las columnas: 19px

• Nota 1: La grilla pasa a ser de una columna
• Nota 2: La tipografía no cambia su tamaño ni estilo