Diferencia entre revisiones de «Awwwards»
De Casiopea
(No se muestran 10 ediciones intermedias del mismo usuario) | |||
Línea 15: | Línea 15: | ||
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. | 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/ | ||
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. | ||
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 | |||
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= | =Desarrollo= | ||
Línea 46: | Línea 39: | ||
# Footer: 1182 x 236px (Ancho por alto) | # Footer: 1182 x 236px (Ancho por alto) | ||
# Columnas: 376,636px (Ancho) | # Columnas: 376,636px (Ancho) | ||
# Entre columnas: 27,547px | # Entre columnas: 27,547px | ||
# Márgenes dentro de las columnas: 25,815px | # Márgenes dentro de las columnas: 25,815px | ||
# Tipografía: | # Tipografía: | ||
## Fuente: "Museo Sans" | |||
## Tamaño: | |||
### Título: 33pt, estilo de fuente 700 | |||
### Bajada: 19pt, estilo de fuente 100 | |||
### Cuerpo: 17pt, estilo de fuente 100 | |||
*Nota: ''El texto usa dos de las tres columnas.'' | |||
*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'' | |||
===Presentación visual de los datos obtenidos=== | ===Presentación visual de los datos obtenidos=== | ||
{{#widget:SlideShare | |||
|doc=anlisispantallafullawwwardspresentacin-130711163105-phpapp01 | |||
|width=514 | |||
|height=422 | |||
|alignment=center | |||
}} | |||
==Tamaño IPhone 4 (960 x640px)== | ==Tamaño IPhone 4 (960 x640px)== | ||
Línea 64: | Línea 66: | ||
<gallery> | <gallery> | ||
Image:About_UsIphone4.png|About us | Image:About_UsIphone4.png|1. About us | ||
Image:ArticleIphone4.png|Article | Image:ArticleIphone4.png|2. Article | ||
Image:Awards_of_the_dayIphone4.png|Awards of the day | Image:Awards_of_the_dayIphone4.png|3. Awards of the day | ||
</gallery> | </gallery> | ||
Línea 75: | Línea 77: | ||
# Footer: 700 x 237px | # Footer: 700 x 237px | ||
# Columnas: 218,508px (Ancho) | # Columnas: 218,508px (Ancho) | ||
# Márgenes dentro de las columnas: 21,2px | # Márgenes dentro de las columnas: 21,2px | ||
# Entre Columnas: 21,239px | # Entre Columnas: 21,239px | ||
# Márgenes texto dentro de las columnas:21,246px | # 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'' | |||
===Presentación visual de los datos obtenidos=== | ===Presentación visual de los datos obtenidos=== | ||
{{#widget:SlideShare | |||
|doc=anlisispantallaiphone4awwwardspresentacin-130711163803-phpapp01 | |||
|width=514 | |||
|height=422 | |||
|alignment=center | |||
}} | |||
==Tamaño Meizu M8 (480 x 720px)== | ==Tamaño Meizu M8 (480 x 720px)== | ||
Línea 87: | Línea 98: | ||
<gallery> | <gallery> | ||
Image:About_Usmeizu.png|About us | Image:About_Usmeizu.png|1. About us | ||
Image:Articlemeizu.png|Article | Image:Articlemeizu.png|2. Article | ||
Image:Awards_of_the_daymeizu.png|Awards of the day | Image:Awards_of_the_daymeizu.png|3. Awards of the day | ||
</gallery> | </gallery> | ||
Línea 99: | Línea 110: | ||
# Columna: 418px (Ancho) | # Columna: 418px (Ancho) | ||
# Márgenes dentro de las columnas: 19px | # 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'' | |||
===Presentación visual de los datos obtenidos=== | ===Presentación visual de los datos obtenidos=== | ||
{{#widget:SlideShare | |||
|doc=anlisispantallameizum8awwwardspresentacin-130711164427-phpapp01 | |||
|width=514 | |||
|height=422 | |||
|alignment=center | |||
}} |
Revisión actual - 18:44 11 jul 2013
Caso de Estudio | |
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
Datos obtenidos
- Márgenes exteriores: 81,364px (Ancho)
- Header, o cabecera: 1182 x 180px (Ancho por alto)
- Footer: 1182 x 236px (Ancho por alto)
- Columnas: 376,636px (Ancho)
- Entre columnas: 27,547px
- Márgenes dentro de las columnas: 25,815px
- Tipografía:
- Fuente: "Museo Sans"
- Tamaño:
- Título: 33pt, estilo de fuente 700
- Bajada: 19pt, estilo de fuente 100
- 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
Presentación visual de los datos obtenidos
Tamaño IPhone 4 (960 x640px)
Capturas páginas tipo
Datos obtenidos
- Márgenes exteriores: 122px
- Header, o cabecera: 700 x 180px
- Footer: 700 x 237px
- Columnas: 218,508px (Ancho)
- Márgenes dentro de las columnas: 21,2px
- Entre Columnas: 21,239px
- 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
Presentación visual de los datos obtenidos
Tamaño Meizu M8 (480 x 720px)
Capturas páginas tipo
Datos obtenidos
- Márgenes exteriores: 23px
- Header, o cabecera: 418 x 131px
- Footer: 418 x 289px
- Columna: 418px (Ancho)
- 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
Presentación visual de los datos obtenidos