Diseño EscalableBetina García

Café Binario - betina@cafebinario.com

M EM B E R

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.

¿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

¿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

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

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

Contenidos que escalan

página 6

estructuras textos imágenes

Diseñar pensando en la escalabilidad

página 7

estructuras

Diseñar pensando en la escalabilidad

página 8

textos

Diseñar pensando en la escalabilidad

página 9

imágenes

Diseñar pensando en la escalabilidad

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

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

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

página 13

Estructuras de pantallas.

Estructuras de interfaz de usuario.

Componentes.

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

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

página 15

Estructuras de pantallas

página 16

Estructuras de pantallas

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

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

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

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

más de nuestro sitio.

página 20

¡Muchas Gracias!Betina García

betina@cafebinario.comwww.cafebinario.com

M EM B E R