Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Diseño para aplicaciones Web

No description
by

Blanca Vázquez

on 13 November 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Diseño para aplicaciones Web

Técnicas de diseño
Objetivos
Uno de los principales retos de la interfaz de las WebApps, es trabajar con la naturaleza indeterminada del punto en el que entra el usuario.
5.3 Diseño de interfaz de la WebApp
Describe la estructura y organización de la interfaz de usuario. Incluye una representación de la plantilla de pantalla, una definición de los modos de interacción y una descripción de los mecanismos de navegación. Toda interfaz de usuario debe presentar las siguientes características:

Flujo de trabajo en el diseño de la interfaz
Las siguientes tareas representan un flujo de trabajo rudimentario para el diseño
de la interfaz WebApp.
5.4 Diseño Estético
También llamado diseño gráfico, describe la apariencia y sentimiento de la WebApp.
Incluye esquemas de color, plantilla geométrica, tamaño de texto, fuente y ubicación, uso de gráficos y decisiones estéticas relacionadas.

Taller de Ingeniería de Software
Diseño para aplicaciones web
Intuitiva
Características
Debe ofrecer al usuario final una experiencia satisfactoria y gratificante. Los conceptos, principios y métodos de diseño de la interfaz brindan al ingeniero web las herramientas requeridas para lograr esta lista de atributos.

OBJETIVOS
Establecer una ventana congruente con el contenido y las funciones que brinda

Organizar las opciones de navegación y contenido disponibles para el usuario

Guiar al usuario a través de una serie de interacciones con la WebApp

ALUMNOS
CURSA
LEGAJO
MATERIAS
N_MATERIA
ALUMNOS
CURSA
LEGAJO
MATERIAS
N_MATERIA
ALUMNOS
CURSA
MATERIAS
LEGAJO, N_MATERIA
Árboles de Join equivalentes
X
ALUMNOS
PROFES
Diseño fijo

Diseño líquido (o fluido)

Diseño elástico (o flexible)
Tareas:
Revisar la información contenida en el modelo de análisis y refinarla conforme se requiera.

Desarrollar un bosquejo aproximado de la plantilla de la interfaz de la WebApp.

Correlacionar los objetivos del usuario con acciones específicas de la
interfaz.

Definir un conjunto de tareas de usuario que estén asociadas con cada
acción.
Elaborar bosquejos con imágenes de la pantalla para cada acción de la interfaz.

Refinar la plantilla de la interfaz y los bosquejos con el uso de entradas desde el diseño estético.

Identificar los objetos de la interfaz del usuario que se requieren para implementarla.


Desarrollar una representación de procedimiento de la interacción del usuario con la interfaz.

Desarrollar una representación del comportamiento de la interfaz.

Describir la plantilla de la interfaz para cada estado.

Refinar y revisar el modelo de diseño de la interfaz.
Es un esfuerzo artístico que complementa los aspectos técnicos de la ingeniería web. El diseño gráfico considera cada aspecto de la presentación y percepción de una WebApp.
El proceso de diseño gráfico comienza con la plantilla y procede hacia la consideración de esquemas de color globales, tipos de fuentes, tamaños y estilos, el uso de medios audiovisuales complementarios y todos los demás elementos estéticos de una aplicación.
Sin el diseño gráfico probablemente la aplicación web sea funcional pero no atractiva, para llegar a cabo ésta tarea, es necesario revisar las jerarquías de usuario definidas que ayude a decidir el diseño estético según lo que esperan los usuarios hacia los que está dirigido.
No tema al espacio en blanco
Hacer énfasis en el contenido
Organizar elementos con una distribución que vaya desde arriba a izquierda, hacia abajo a la derecha.
Agrupar la navegación, el contenido y función en forma geográfica dentro de la página.
No aumentar la superficie para que el usuario utilice la barra de desplazamiento.
Considerar la resolución y tamaño de la ventana del navegador.
Considerar el uso de pantallas tipo para que mantener las pantallas homogéneas.

¿Alguna pregunta?
Consistente
Eficiente
Fácil de usar, aprender y navegar
Libre de errores
Funcional
Diseño híbrido

Fixed web design
en inglés, es con diferencia, el más utilizado de la Internet, y es aquel que permanece inalterable sea cual sea el dispositivo donde se visualiza el sitio web. Es indiferente al tamaño de la pantalla y a la anchura del navegador web que la visualiza. Sean cuales sean las características del dispositivo, pantalla o navegador, siempre se visualiza el mismo tamaño preestablecido por el diseñador web en píxeles.
Se llama así pues al igual que sucede con los fluidos, el contenido ocupa todo el área visual disponible según el tamaño de pantalla y las dimensiones de la ventana del navegador.
Este tipo de diseño es recomendado para sitios web con un marcado carácter práctico, esto es, herramientas accesibles a través de web.
El diseño líquido tiene un impacto visual más limitado dado que por definición las proporciones de los elementos que lo componen son variables, abriendo necesariamente espacios vacíos entre ellos.
Los diseños elásticos son aquellos en los que las medidas de los bloques se definen en emes, de manera que al aumentar el tamaño de fuente, aumenta también la anchura de estos bloques, es decir, aumentar el tamaño de fuente provoca un efecto zoom sobre toda la página.
Las emes son una unidad relativa, y por lo tanto este tipo de diseños cumple la pauta anteriormente mencionada de no utilizar unidades absolutas, sin embargo en la práctica se comportan exactamente igual que los diseños fijos y tampoco están libres de problemas, aunque son una de las técnicas recomendadas para cumplir con las Pautas para la Accesibilidad Web.

Se habla de diseño híbrido cuando en una web se combinan áreas con ancho fijo y otras con ancho variable. El resultado final es realmente una web de diseño líquido que conserva las proporciones en determinadas áreas.
Es preciso, revisar aspectos de distribución, puesto que siempre se tiene un espacio limitado, características de navegación, contenido de información y funciones dirigidas al usuario. Cuando se diseña la estética no hay reglas absolutas, sin embargo, resulta útil considerar lineamientos generales de la distribución general como:
Full transcript