1. Diseño Escalable
Betina García
Café Binario - betina@cafebinario.com
MEMBER

2. Una historia conocida
Cuando ya creíamos terminarlo renace con
nuevos cambios.
“Design is never done”
“El diseño nunca está terminado”
(Bruce Sterling)
Concepto:
Los sitios no deben pensarse como productos finales.
página 1

3. ¿Cómo evitamos esta frustración de pelear
contra nuestro propio trabajo?
Diseño Escalable
Una posible respuesta a considerar
“Diseñar pensando en el futuro”
página 2

4. ¿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

5. Diseñar pensando en la escalabilidad
El plan de negocio puede escalar.
Los contenidos crecen constantemente.
Las empresas utilizan contenidos dinámicos.
(ejemplo: web social).
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).
página 4

6. Diseñar pensando en la escalabilidad
ejemplos
Bloggin (Bloggers)
Fotos (Flickr)
Marcadores (Del icio.us)
web 2.0
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)
concepto aplicación operaciones tecnología
Plataforma Microcontenido Publicación personal CSS
Web Lectura/Escritura Usuarios individuales Redes Sociales AJAX
Controlado por usuarios Colaboración Cliente a cliente RSS/ATOM
Conversación Aplicación a medida API
P2P
HTML/XHTML
OPML
página 5

7. Diseñar pensando en la escalabilidad
Contenidos que escalan
estructuras textos imágenes
página 6

8. Diseñar pensando en la escalabilidad
estructuras
página 7

9. Diseñar pensando en la escalabilidad
textos
página 8

10. Diseñar pensando en la escalabilidad
imágenes
página 9

11. Diseñar pensando en la escalabilidad
Resumen:
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)
página 10

12. Distintos roles en el proceso de diseño web
Disciplinas
Diseño de experiencia de usuario
Diseño de Interacción
Estándares
Principios Interacción
Diseño de interfaces Escalabilidad
Desarrollo
página 11

13. Distintos roles en el proceso de diseño web
Roles
Consultor UX / Análisis Cualitativo
Consultor IXD / Análisis Cuantitativo
Estándares
Principios Interacción
Diseñador / Maquetador Escalabilidad
Desarrollador
página 12

14. Conocer los elementos que permiten adaptar el diseño
a nuevos contenidos.
Estructuras de pantallas.
Estructuras de interfaz de usuario.
Componentes.
página 13

15. Estructuras de pantallas
Una buena estructura
Navegación del contexto
pensada desde la escalabilidad
Datos de secciones Herramientas del sitio ayuda mucho a la hora
de su crecimiento.
Mensajes (opcional)
(Así como un arquitecto decide
en su plano cómo va a ser la
cocina y cuál va a ser el lugar
Filtros
donde va a instalar el nuevo
horno)
Datos
página 14

16. Estructuras de pantallas
página 15

17. Estructuras de pantallas
página 16

18. Estructuras de interfaz de usuario
Ejemplo de lista horizontal que no
escala bien en otros idiomas.
Se aconseja para estos casos, utilizar
listas desplegables o listas verticales si
los items debieran estar visibles.
Nota:
El diseñador debe evaluar la elección de la
no escala bien estructura de acuerdo a la necesidad (o no)
de escalabilidad.
página 17

19. Componentes
Probar su funcionamiento con distintos contenidos
Si bien el componente escala bien, debemos
probar cómo se adapta a su contenido.
La última figura muestra cómo debería escalar en
caso de tener un ítem con tres palabras.
página 18

20. Componentes
Resumen
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.
página 19

21. Diseñar pensando en el futuro nos obliga a
considerar la escalabilidad como una variable
más de nuestro sitio.
página 20

22. ¡Muchas Gracias!
Betina García
betina@cafebinario.com
www.cafebinario.com
MEMBER