Diferencia entre revisiones de «Awwwards»

De Casiopea
Sin resumen de edición
 
(No se muestran 16 ediciones intermedias del mismo usuario)
Línea 9: Línea 9:
}}
}}


=Análisis=
=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 [http://www.resizemybrowser.com/ 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===


<gallery>
<gallery>
Image:1.-_Elementos_simplificados.png|1.- Simplificación
Image:About_Us.png|1. About us
Image:2.-_Menú.png|2.- Menú
Image:Article_full_screen.png|2. Article
Image:3.-_Tipografía.png|3.- Tipógrafía
Image:Awards_of_the_day.png|3. Awards of the day
Image:4.-_Columnas.png|4.- Columnas
</gallery>
</gallery>


=ScreenShots=
===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===
 
{{#widget:SlideShare
|doc=anlisispantallafullawwwardspresentacin-130711163105-phpapp01
|width=514
|height=422
|alignment=center
}}


==Caso 1==
==Tamaño IPhone 4 (960 x640px)==
*'''Tamaño:''' 320 x 480
 
*'''Modelo:''' IPhone 3G3GS
===Capturas páginas tipo===


<gallery>
<gallery>
Image:320 x 480 IPhone 3G3GS1.png|1
Image:About_UsIphone4.png|1. About us
Image:320 x 480 IPhone 3G3GS2_y_3.png|1 y 2
Image:ArticleIphone4.png|2. Article
Image:320 x 480 IPhone 3G3GS4.png|4
Image:Awards_of_the_dayIphone4.png|3. Awards of the day
Image:320 x 480 IPhone 3G3GS5.png|5
Image:320 x 480 IPhone 3G3GS6.png|6
Image:320 x 480 IPhone 3G3GS7.png|7
Image:320 x 480 IPhone 3G3GS7B.png|7b
Image:320 x 480 IPhone 3G3GS8.png|8
Image:320 x 480 IPhone 3G3GS8B.png|8b
Image:320 x 480 IPhone 3G3GS9.png|9
Image:320 x 480 IPhone 3G3GS10.png|10
Image:320 x 480 IPhone 3G3GS11.png|11
Image:320 x 480 IPhone 3G3GS12.png|12
Image:320 x 480 IPhone 3G3GS13.png|13
</gallery>
</gallery>


===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===
{{#widget:SlideShare
|doc=anlisispantallaiphone4awwwardspresentacin-130711163803-phpapp01
|width=514
|height=422
|alignment=center
}}
==Tamaño Meizu M8 (480 x 720px)==


==Caso 2==
===Capturas páginas tipo===
*'''Tamaño:''' 480 x 720
*'''Modelo:''' Meizu M8


<gallery>
<gallery>
Image:480 x 720_Meizu M81.png|1
Image:About_Usmeizu.png|1. About us
Image:480 x 720_Meizu M82.png|2
Image:Articlemeizu.png|2. Article
Image:480 x 720_Meizu M83.png|3
Image:Awards_of_the_daymeizu.png|3. Awards of the day
Image:480 x 720_Meizu M84.png|4
Image:480 x 720_Meizu M85.png|5
Image:480 x 720_Meizu M86.png|6
Image:480 x 720_Meizu M87.png|7
Image:480 x 720_Meizu M88.png|8
Image:480 x 720_Meizu M89.png|9
Image:480 x 720_Meizu M810.png|10
Image:480 x 720_Meizu M811.png|11
Image:480 x 720_Meizu M812.png|12
Image:480 x 720_Meizu M813.png|13
</gallery>
</gallery>


==Caso 3==
===Datos obtenidos===
*'''Tamaño:''' 1024 x 768
 
*'''Modelo:''' IPad
# 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===


<gallery>
{{#widget:SlideShare
Image:1024 x 768_IPad1_y_2.png|1 y 2
|doc=anlisispantallameizum8awwwardspresentacin-130711164427-phpapp01
Image:480 x 720_Meizu M82.png|3
|width=514
Image:1024 x 768_IPad4_y_5.png|4 y 5
|height=422
Image:1024 x 768_IPad6.png|6
|alignment=center
Image:1024 x 768_IPad6b.png|6b
}}
Image:1024 x 768_IPad7.png|7
Image:1024 x 768_IPad7b.png|7b
Image:1024 x 768_IPad8.png|8
Image:1024 x 768_IPad8b.png|8B
Image:1024 x 768_IPad9.png|9
Image:1024 x 768_IPad10.png|10
Image:1024 x 768_IPad11.png|11
Image:1024 x 768_IPad12_y_13.png|12 y 13
</gallery>

Revisión actual - 18:44 11 jul 2013






Caso de Estudio
NombreResponsive Web Design: www.awwwards.com
Período2013-2013
Estudiado enGráfica Digital 2013
Estudiado porNicol Valenzuela
URLhttp://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.

  • 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

  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

Presentación visual de los datos obtenidos

Tamaño IPhone 4 (960 x640px)

Capturas páginas tipo

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

Presentación visual de los datos obtenidos

Tamaño Meizu M8 (480 x 720px)

Capturas páginas tipo

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

Presentación visual de los datos obtenidos