Diseño Escalable UP 2009

22
Diseño Escalable Betina García Café Binario - [email protected] MEMBER

description

 

Transcript of Diseño Escalable UP 2009

Page 1: Diseño Escalable UP 2009

Diseño EscalableBetina García

Café Binario - [email protected]

M EM B E R

Page 2: Diseño Escalable UP 2009

Una historia conocida

página 1

“Design is never done”“El diseño nunca está terminado” (Bruce Sterling)

Cuando ya creíamos terminarlo renace con nuevos cambios.

Concepto:Los sitios no deben pensarse como productos finales.

Page 3: Diseño Escalable UP 2009

¿Cómo evitamos esta frustración de pelear contra nuestro propio trabajo?

Una posible respuesta a considerar

“Diseñar pensando en el futuro”

página 2

Diseño Escalable

Page 4: Diseño Escalable UP 2009

¿Qué tener en cuenta al diseñar nuestro sitio?

Diseñar pensando en la escalabilidad.

Comprender los distintos roles en el proceso de diseño web: metodología esencial de trabajo.

Conocer los elementos que permiten adaptar el diseño a nuevos contenidos.

página 3

Page 5: Diseño Escalable UP 2009

El plan de negocio puede escalar.

Los contenidos crecen constantemente.Las empresas utilizan contenidos dinámicos. (ejemplo: web social).

página 4

Anticipar dónde y cómo crecerá el contenido a futuro y estar atentos a la integración con nuevas tecnologías y sus implicancias (web 2.0, redes sociales, blogs, wikis, Google Maps, etc).

Diseñar pensando en la escalabilidad

Page 6: Diseño Escalable UP 2009

Bloggin (Bloggers)Fotos (Flickr)Marcadores (Del icio.us)Agregadores (Bloglines)Sindicación (Feedburner)Mapas API (Google Maps)Audio (Odeo)Búsqueda Blogs (Technorati)Correo etiquetado (Gmail)Autoría masiva (Wikipedia)Retroalimentación (Ebay)Opinión Clientes (Amazon)

página 5

ejemplos

Publicación personalRedes SocialesCliente a clienteAplicación a medida

operacionesCSSAJAXRSS/ATOMAPIP2PHTML/XHTMLOPML

tecnología MicrocontenidoUsuarios individualesColaboraciónConversación

aplicación

web 2.0PlataformaWeb Lectura/EscrituraControlado por usuarios

concepto

Diseñar pensando en la escalabilidad

Page 7: Diseño Escalable UP 2009

Contenidos que escalan

página 6

estructuras textos imágenes

Diseñar pensando en la escalabilidad

Page 8: Diseño Escalable UP 2009

página 7

estructuras

Diseñar pensando en la escalabilidad

Page 9: Diseño Escalable UP 2009

página 8

textos

Diseñar pensando en la escalabilidad

Page 10: Diseño Escalable UP 2009

página 9

imágenes

Diseñar pensando en la escalabilidad

Page 11: Diseño Escalable UP 2009

Resumen:

página 10

Comprender que la web es una parte del negocio de la empresa y es muy probable que éste crezca acompañando el crecimiento de la misma (nuevos mercados, ampliación del negocio, etc).

Prever contenidos dinámicos:

Anticipar dónde y como crecerá el contenido en el futuro.

Atender a posibles contenido de comunidades de usuarios, Web 2.0, redes sociales, blogs, wikis, etc. y nuevas tecnologias (Google Maps, etc)

Diseñar pensando en la escalabilidad

Page 12: Diseño Escalable UP 2009

Diseño de experiencia de usuario

Diseño de Interacción

Diseño de interfaces

página 11

Desarrollo

EstándaresPrincipios Interacción

Escalabilidad

Distintos roles en el proceso de diseño web

Disciplinas

Page 13: Diseño Escalable UP 2009

Consultor UX / Análisis Cualitativo

Consultor IXD / Análisis Cuantitativo

Diseñador / Maquetador

página 12

Desarrollador

EstándaresPrincipios Interacción

Escalabilidad

Distintos roles en el proceso de diseño web

Roles

Page 14: Diseño Escalable UP 2009

página 13

Estructuras de pantallas.

Estructuras de interfaz de usuario.

Componentes.

Conocer los elementos que permiten adaptar el diseño a nuevos contenidos.

Page 15: Diseño Escalable UP 2009

Estructuras de pantallas

página 14

Una buena estructura pensada desde la escalabilidad del sitio ayuda mucho a la hora de su crecimiento.

(Así como un arquitecto decide en su plano cómo va a ser la cocina y cuál va a ser el lugar donde va a instalar el nuevo horno)

Navegación del contexto

Mensajes (opcional)

Datos de secciones Herramientas

Filtros

Datos

Page 16: Diseño Escalable UP 2009

página 15

Estructuras de pantallas

Page 17: Diseño Escalable UP 2009

página 16

Estructuras de pantallas

Page 18: Diseño Escalable UP 2009

página 17

no escala bien

Ejemplo de lista horizontal que no escala bien en otros idiomas.

Se aconseja para estos casos, utilizarlistas desplegables o listas verticales si los items debieran estar visibles.

Nota:El diseñador debe evaluar la elección de la estructura de acuerdo a la necesidad (o no) de escalabilidad.

Estructuras de interfaz de usuario

Page 19: Diseño Escalable UP 2009

página 18

Si bien el componente escala bien, debemos probar cómo se adapta a su contenido.

La última figura muestra cómo debería escalar encaso de tener un ítem con tres palabras.

Componentes

Probar su funcionamiento con distintos contenidos

Page 20: Diseño Escalable UP 2009

página 19

Usar estructuras de pantallas nos permite estar preparados para futuros cambios.

Trabajar con una interfaz de usuario flexible permite que el contenido se adapte a las nuevas necesidades.

Estudiar y conocer qué componentes nos ayudan a que los contenidos dinámicos escalen.

Componentes

Resumen

Page 21: Diseño Escalable UP 2009

Diseñar pensando en el futuro nos obliga a considerar la escalabilidad como una variable

más de nuestro sitio.

página 20

Page 22: Diseño Escalable UP 2009

¡Muchas Gracias!Betina García

[email protected]

M EM B E R