Your SlideShare is downloading. ×
0
Diseño Escalable
         Betina García
Café Binario - betina@cafebinario.com


                    MEMBER
Una historia conocida
Cuando ya creíamos terminarlo renace con
nuevos cambios.

“Design is never done”
“El diseño nunca es...
¿Cómo evitamos esta frustración de pelear
contra nuestro propio trabajo?


Diseño Escalable
Una posible respuesta a consid...
¿Qué tener en cuenta al diseñar nuestro sitio?

      Diseñar pensando en la escalabilidad.


      Comprender los distint...
Diseñar pensando en la escalabilidad


    El plan de negocio puede escalar.

    Los contenidos crecen constantemente.
  ...
Diseñar pensando en la escalabilidad

                                                                          ejemplos
 ...
Diseñar pensando en la escalabilidad


Contenidos que escalan


estructuras textos imágenes




                          ...
Diseñar pensando en la escalabilidad




                              estructuras
                                       ...
Diseñar pensando en la escalabilidad




                                       textos
                                   ...
Diseñar pensando en la escalabilidad




                                imágenes
                                        ...
Diseñar pensando en la escalabilidad
       Resumen:
       Comprender que la web es una parte del negocio
       de la em...
Distintos roles en el proceso de diseño web
        Disciplinas
Diseño de experiencia de usuario


     Diseño de Interacc...
Distintos roles en el proceso de diseño web
              Roles
 Consultor UX / Análisis Cualitativo


Consultor IXD / Aná...
Conocer los elementos que permiten adaptar el diseño
a nuevos contenidos.


         Estructuras de pantallas.

         E...
Estructuras de pantallas

                                                Una buena estructura
            Navegación del ...
Estructuras de pantallas




                           página 15
Estructuras de pantallas




                           página 16
Estructuras de interfaz de usuario

                                Ejemplo de lista horizontal que no
                   ...
Componentes

Probar su funcionamiento con distintos contenidos




                Si bien el componente escala bien, debe...
Componentes

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

    ...
Diseñar pensando en el futuro nos obliga a
considerar la escalabilidad como una variable
            más de nuestro sitio....
¡Muchas Gracias!
     Betina García
betina@cafebinario.com
 www.cafebinario.com



            MEMBER
Upcoming SlideShare
Loading in...5
×

Diseño Escalable UP 2009

437

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
437
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Diseño Escalable UP 2009"

  1. 1. Diseño Escalable Betina García Café Binario - betina@cafebinario.com MEMBER
  2. 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. 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. 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. 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. 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. 7. Diseñar pensando en la escalabilidad Contenidos que escalan estructuras textos imágenes página 6
  8. 8. Diseñar pensando en la escalabilidad estructuras página 7
  9. 9. Diseñar pensando en la escalabilidad textos página 8
  10. 10. Diseñar pensando en la escalabilidad imágenes página 9
  11. 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. 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. 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. 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. 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. 16. Estructuras de pantallas página 15
  17. 17. Estructuras de pantallas página 16
  18. 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. 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. 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. 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. 22. ¡Muchas Gracias! Betina García betina@cafebinario.com www.cafebinario.com MEMBER
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×