Diseo Web II !

fundamentos !

DISEO DE CONTENIDOS:
Cmo ocupar el espacio (2)

Diseo Web II !
fundamentos !

Ocupar el espacio?
Cul origen del problema?
Venimos de dispositivos con pantallas pequeas.
(a pesar de que ahora los smarthphones (iPhone, HTC, etc.) en auge constante no sean demasiado grandes)

Necesitbamos condensar el contenido.

Apretarlo.

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

Ocupar el espacio?
Y qu provocaba esto?
Paddings estrechos Falta de aire. Mrgenes apretados Dicultad para discernir bloques de contenido. Textos de tamao minsculo Cansa la vista a ciertos usuarios. Interlineados apretados Diculta la legibilidad.

Ansiedad & Cansancio.

Diseo Web II !
fundamentos !

Ocupar el espacio?
MIEDO AL SCROLL!!! (PageFold) Y dnde se corta la pgina? U, quiero que entre todo sin hacer scroll..
En que navegador? Qu monitor tienes? Tienes la ventana maximizada?

http://www.thereisnopagefold.com/ http://whereisthefold.com/

Diseo Web II !
fundamentos !

http://www.thereisnopagefold.com/ http://whereisthefold.com/

Ocupar el espacio?
MIEDO AL SCROLL EN RETROCESO !!

Monitores con mayor resolucin. Dispositivos hpticos

(iPhone & HTC y tabletas (iPad)).

Ajax con el inite scroll

(Google Images lo ha popularizado).

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

http://www.thereisnopagefold.com/ http://whereisthefold.com/

Ocupar el espacio?
Tcnicas de Scrolling!
Mens persistentes, que literalmente se pegan (sticky menus). Ejemplo: http://lookslikegooddesign.com/ Links scrolling back to top En la tcnica del innite scrolling, informar al usuario del punto en que se encuentra (% de carga, n de pgina, n de articulos)

Diseo Web II !
fundamentos !

Ocupar el espacio?
Marco de Opciones ergonmicas
Con ms resolucin (ancho/alto) y con la prdida de miedo al scroll:

Columnas de contenido ms anchas. Mayores mrgenes verticales entre elementos. Tipografa con un cuerpo mayor. Mayor interlineado en textos. Poder jugar con ms aire(white space o negative margin en ingls).

Diseo Web II !
fundamentos !

Ocupar el espacio?
a dnde nos lleva esto?

Obtener una buena LEGIBILIDAD

Hay aplicaciones que han surgido a raz de esto. (http://www.instapaper.com / http://www.readability.com )

Diseo Web II !
fundamentos !

Formas de ocupar el espacio

1.! Centrada 2.! Plano abierto
1.! Scroll down 2.! Scroll right 3.! Responsive!!! 4.! libre

3.! Metfora

Diseo Web II !
fundamentos !

GRID

http://www.2breed.nl

Diseo Web II !
fundamentos !

http://www.nlengenharia.com/

Diseo Web II !
fundamentos !

http://ryancjonesphoto.com/

Diseo Web II !
fundamentos !

http://lafabrica.com/es/

Diseo Web II !
fundamentos !

http://lafabrica.com/es/

Diseo Web II !
fundamentos !

http://lookslikegooddesign.com/

Diseo Web II !
fundamentos !

. http://deda.me/

Diseo Web II !
fundamentos !

http://jamesanderson613.com/

Diseo Web II !
fundamentos !

http://www.crafty2010.com/#index

Diseo Web II !
fundamentos !

http://www.bitbytebit.co.uk/#

Diseo Web II !
fundamentos !

http://www.bitbytebit.co.uk/#

Diseo Web II !
fundamentos !

http://www.bitbytebit.co.uk/#

Diseo Web II !
fundamentos !

http://nanotorres.com/

Diseo Web II !
fundamentos !

A flexible grid

Diseo Web II !
fundamentos !

Responsive Web Design 25 de Mayo, 2010 by Ethan Marcotte. Artculo en A list apart
INTERESANTE LECTURA: http://www.alistapart.com/articles/responsive-web-design/

http://mediaqueri.es/

Diseo Web II !
fundamentos !

Responsive Web Design 25 de Mayo, 2010 by Ethan Marcotte. Artculo en A list apart
INTERESANTE LECTURA: http://www.alistapart.com/articles/responsive-web-design/

http://mediaqueri.es/

Diseo Web II !
fundamentos !

http://www.jonathanyuen.com/

Diseo Web II !
fundamentos !

http://www.cooper.com/#home

Diseo Web II !
fundamentos !

hhttp://www.funnel.tv/archive03_05/experimental.html

Diseo Web II !
fundamentos !

http://www.saccovallarino.it

Diseo Web II !
fundamentos !

http://www.spunthemovie.com/spun/main.html

Diseo Web II !
fundamentos !

Diseo Web II !
fundamentos !

http://www.ileduboucanier.com/ileduboucanier.html

Diseo Web II !
fundamentos !

http://gorillaz.com/Scene.php

Diseo Web II !
fundamentos !

http://www.sukiland.com/

Diseo Web II !
fundamentos !

http://www.teddiesinspace.com/

Diseo Web II !
fundamentos !

http://www.billyharveymusic.com/

Diseo Web II !
fundamentos !

http://www.bcaa.it/

Diseo Web II !
fundamentos !

http://www.digitalvaults.org

Diseo Web II !
fundamentos !

http://www.forests-forever.com/cgi-bin/index.cgi