Diseño de una aplicación web

Resumen

Prototipado, tipos de prototipos, prototipos de baja fidelidad.

Contenido

Debes ver el vídeo Prototipado: wireframes, mockups y prototipos en el que se explica la importancia de prototipar una aplicación web antes de implementarla, los diferentes tipos de diagramas para representar la navegación, la estructura y el funcionamiento de una aplicación web.

Recursos

Vídeos

Imprescindible
  1. Prototipado: wireframes, mockups y prototipos: La importancia de prototipar una aplicación web antes de implementarla, los diferentes tipos de diagramas para representar la navegación, la estructura y el funcionamiento de una aplicación web.

Lecturas

Imprescindible
  1. A visual vocabulary for describing information architecture and interaction design: Diagrams are an essential tool for communicating information architecture and interaction design in Web development teams. This document discusses the considerations in development of such diagrams, outlines a basic symbology for diagramming information architecture and interaction design concepts, and provides guidelines for the use of these elements.
  2. Arquitectura de información. Fundamentos: Arquitectura de información, usabilidad, accesibilidad… todas ellas son disciplinas diferentes aunque íntimamente relacionadas, englobadas en una macrodiscisciplima denominada Experiencia de usuario (UX) que aglutina la arquitectura de información y la mayoría de las disciplinas cercanas a ella. El objetivo de este artículo es introducir los fundamentos de la arquitectura de información (AI), es decir, los principios y cimientos de la disciplina. Para estructurar el contenido he tomado como guión uno de los mejores libros que existen sobre el tema “Arquitectura de información en entornos web” de Mario Pérez-Montoro Gutiérrez (Pérez-Montoro, 2010). Para los que ya lo han leído, este artículo puede servir de esquema resumen. A los demás os animo a leerlo, pues en él se desarrollan en profundidad todos los apartados con gran rigor y muy bien documentados.
  3. La diagramación en la arquitectura de información: En el presente artículo se propone un acercamiento conceptual a los diagramas en el proceso de creación de arquitecturas de información. Se muestran algunas formas de hacer diagramas, tipos de diagramas existentes y posibles herramientas para su elaboración. El autor también propone su propia forma para la elaboración de diagramas.
  4. Prototipado: Un prototipo es un modelo (representación, demostración o simulación) fácilmente ampliable y modificable de un sistema planificado, probablemente incluyendo su interfaz y su funcionalidad de entradas y salidas.
  5. Un vocabulario visual para describir arquitectura de información y diseńo de interacción: Los diagramas son una herramienta esencial para comunicar arquitectura de información y diseńo de interacción en equipos de desarrollo Web. Este documento trata las consideraciones en el desarrollo de tales diagramas, delinea una simbología básica para diagramar conceptos de arquitectura de información y diseńo de interacción, y entrega guías para el uso de estos elementos.
  6. Wireframes: Wireframe, Blueprint, Prototipo, Storyboard, Mock Up, Diagrama de contenido, Sketching… Lo primero aclaremos la terminología.
Complementario
  1. Arquitectura de la información en entornos web: En los últimos años estamos asistiendo al desarrollo y a la consolidación de una nueva disciplina en los contextos laborales relacionados con los entornos web: la arquitectura de la información. La arquitectura de la información, partiendo de los sólidos principios clásicos de la ciencia de la información tradicional (principalmente, de la disciplina de la organización y la representación del conocimiento), nace hacia finales de los años noventa. En un sentido técnico, se trata de una disciplina (y, a la vez, una comunidad de práctica) centrada en los principios del diseño y la arquitectura de espacios digitales de forma que cumplan criterios de usabilidad y recuperación. O, dicho en otros términos, se trata de una disciplina que se encarga de estructurar, organizar y etiquetar los elementos que conforman los entornos informacionales para facilitar la localización y recuperación de la información que contienen y mejorar, así, su utilidad y aprovechamiento por parte de sus usuarios. El objetivo principal de esta obra es abordar y caracterizar esta disciplina emergente. Para cubrir ese objetivo, por un lado, en este trabajo se ofrecen, de una manera clara, concisa y abundantemente ilustrada con ejemplos, los principales conceptos básicos y los elementos estructurales que articulan la disciplina de la arquitectura de la información. Por otro, se abordan todos y cada uno de los sistemas y elementos que sustentan la arquitectura de la información de un sitio web: los sistemas de organización, de etiquetado, de navegación, de búsqueda y los lenguajes documentales. Y se presentan las estructuras que, en definitiva, conforman la anatomía de la arquitectura de una web. Revisados los diferentes elementos de esa anatomía arquitectónica, la obra se completa con un apartado metodológico, dedicado a la presentación de una guía metodológica que, surgida a partir de la experiencia profesional y del análisis de las alternativas existentes, pretende servir de ayuda para poder implantar, teniendo en cuenta la naturaleza peculiar de cada contexto, un proyecto de diseño e implementación de la arquitectura de la información de un sitio web.
  2. Designing and Coding a WordPress Theme From Scratch (Part 2): Designing your first WordPress theme may seem incredibly ambitious at first but it’s really not that hard. It may help your understanding of WordPress if you find a theme you like and disect or remix it. This is how I learned to code and one of my first attempt was a variation of Derek Punsalan’s theme The Unstandard.In Part 1 I talked a bit about the tools you’ll need and how to get prepared. Now that you’ve done that we’re going to get started.
  3. Documenting the design of a web application -Part one: Using Garrett’s Visual Vocabulary to document the Information Architecture: For the past two and a half years I have been working in the world of User Experience and web interface design. Most of that time was spent designing interfaces for web applications for different clients while working at PA Consulting, since joining the team at ProcServe I have been doing the same kind of work for our own applications. Over this time, I have tried, dismissed, adopted and adapted many different ways of documenting and communicating my designs to various groups of people; clients, managers, developers, other interface designers, etc. After this trial and error approach, I’ve settled on using a combination of three main document types; Information Architecture diagrams, Static HTML mock up screens, and Page State Diagrams. Over the coming weeks I plan on explaining each of these in tern, starting this week with Information Architecture diagrams.
  4. Glosario: Terminología relacionada con la usabilidad y la accesibilidad
  5. Importance of Wireframes in Web Design: Wireframe helps build the structure of a website by displaying the basic elements like Navigation, Header, Footer, Ad-Inventories, Page Columns, sidebars and more. Consider wireframes as QUICK but a ‘thought through processes’ to architect the page.
  6. Interaction Design: Interaction design is the discipline of creating a structured experience for the user. It concerns itself with describing possible user behavior and defining how the system will accommodate and respond to that behavior. Interaction designers typically use flowcharts to describe the options involved in performing and completing user tasks.
  7. Sketching User Experiences: Covers sketching and early prototyping design methods suitable for dynamic product capabilities: cell phones that communicate with each other and other embedded systems, "smart" appliances, and things you only imagine in your dreams. Thorough coverage of the design sketching method which helps easily build experience prototypes-without the effort of engineering prototypes which are difficult to abandon. Reaches out to a range of designers, including user interface designers, industrial designers, software engineers, usability engineers, product managers, and others. Full of case studies, examples, exercises, and projects, and access to video clips that demonstrate the principles and methods.
  8. Sketching User Experiences: The Workbook: In Sketching User Experiences: The Workbook, you will learn, through step-by-step instructions and exercises, various sketching methods that will let you express your design ideas about user experiences across time. Collectively, these methods will be your sketching repertoire: a toolkit where you can choose the method most appropriate for developing your ideas, which will help you cultivate a culture of experience-based design and critique in your workplace. Features standalone modules detailing methods and exercises for practitioners who want to learn and develop their sketching skills. Extremely practical, with illustrated examples detailing all steps on how to do a method. Excellent for individual learning, for classrooms, and for a team that wants to develop a culture of design practice. Perfect complement to Buxton's Sketching User Experience or any UX text.
  9. The Elements of User Experience: User-Centered Design for the Web: Smart organizations recognize that Web design is more than just creating clean code and sharp graphics. A site that really works fulfills your strategic objectives while meeting the needs of your users. Even the best content and the most sophisticated technology won't help you balance those goals without a cohesive, consistent user experience to support it. But creating the user experience can seem overwhelmingly complex. With so many issues involved -- usability, brand identity, information architecture, interaction design -- it can seem as if the only way to build a successful site is to spend a fortune on specialists who understand all the details. The Elements of User Experience cuts through the complexity of user-centered design for the Web with clear explanations and vivid illustrations that focus on ideas rather than tools or techniques. Jesse James Garrett gives readers the big picture of Web user experience development, from strategy and requirements to information architecture and visual design. This accessible introduction helps any Web development team, large or small, to create a successful user experience.
  10. Wireframes: Blog dedicado a los wireframes.
  11. Wireframes for the Wicked: Wireframes beyond the basics, not for the weak at heart. In this panel, three experienced designers will share their tried and true tips for making wireframes really work. We'll talk about how to sketch a wireframe on the fly to demonstrate an idea and how to create a standalone wireframe deliverable; when to show a concept and when to describe nitty-gritty detail; how to make a narrative wireframe and how to make a specification wireframe. And best of all, we'll show you plenty of examples.
  12. Yahoo! Mail: Simplicity Holds Up Over Time: Email was one of the first applications to move to the web, and the first to find widespread popularity among users. In many respects, email is the ideal web application: it’s an application that people often need access to when they’re away from their “home” environment, and the core user tasks (reading and writing) are easily accommodated with standard HTML interface elements. As a result, it should come as little surprise that the basic flow of Yahoo! Mail has hardly changed at all since the portal first acquired the RocketMail service in 1997. But rather than offering an outdated solution to the web-based email problem, Yahoo! Mail demonstrates the lasting effectiveness of a simple approach.