1. Diplomados
en Tecnología
DIPLOMADOS UNIR. Todos los Derechos Reservados. Instituto Universitario de Tecnología "Readic" UNIR.
Rif J-30001989-6 © 2007.
Diseño y desarrollo
De páginas Web
Principios y Conceptos Básicos del Diseño Web
Facilitador: Daniel Martín
TEMA: DISEÑO DE INTEFAZ WEB

2. Diplomados
en Tecnología
ASPECTOS A CONSIDERAR AL MOMENTO DE
DISEÑAR UNA INTERFASE WEB.
Definición de Interfaz:
La interfaz de usuario es la manera en que los usuarios se pueden comunicar
con un ordenador.
La creación de una página Web es posible con la unión de diferentes factores
necesarios para su funcionamiento: aquello que se ve y es visible para el
usuario - el diseño Web y el contenido - y aquello que no se ve pero que es
igual o más importante - la programación Web, accesibilidad y la interfaz Web -.
Todo junto forma una estructura virtual que tiene como función hacer llegar al
usuario o cliente toda la información de manera adecuada y accesible.
La interfaz, es un conjunto de elementos Hardware y Software de un ordenador
que presentan información al usuario y le permiten interactuar con la
información y con el ordenador. Si la interfaz de usuario está bien diseñada, el
usuario encontrará la respuesta que espera a su acción. Si no es así puede ser
frustrante su operación, puesto que el usuario normalmente se tiende a culpar
a sí mismo por no saber utilizar el objeto.
Debemos recordar que el Hardware son todos aquellos elementos físicos que
comprenden una computadora: monitor, Mouse, teclado, cpu, etc. Mientras que
el Software son los programas que utilizamos para interactuar con la maquina.
La utilización de los software en este caso esta referida a programas como:
navegadores Web, los cuales son utilizados para interpretar la información que
es recibida desde Internet y mostrarla en nuestra pantalla.
Puntos de vista en el desarrollo de una Interfase de usuario (IU):
Existen tres puntos de vista distintos en una IU: el del usuario, el del
programador y el del diseñador. Cada uno tiene un modelo mental propio de la
interfaz, que contiene los conceptos y expectativas sobre ella, desarrollados a
través de su experiencia.
Estos modelos deben estar claros por los participantes en el desarrollo de un
producto, de forma que se consiga una interfaz atractiva y a la vez efectiva
para el trabajo con el programa. Una interfaz no es simplemente una cara
atractiva; esta puede impresionar a simple vista pero decepcionar a la larga.
Aquello importante es que el programa se adapte bien al modelo del usuario,
cosa que se puede comprobar utilizando el programa más allá de la primera
impresión.
DIPLOMADOS UNIR. Todos los Derechos Reservados. Instituto Universitario de Tecnología "Readic" UNIR.
Rif J-30001989-6 © 2007.

3. Diplomados
en Tecnología
Aspectos importantes al momento de diseñar una interfase de usuario:
Estos cinco puntos representan una parte pequeña pero importante del diseño
de interfaces de usuario y ayudan a que la usabilidad de la aplicación mejore
enormemente.
• El usuario no está utilizando tu aplicación
La cuestión más básica a considerar en el diseño de interfaces de
usuario es que el usuario no quiere utilizar tu aplicación. Quieren hacer
su trabajo de la forma más sencilla y rápida posible, y la aplicación no es
más que otra herramienta para ayudar a conseguirlo. Cuánto menos
estorbe tu aplicación al usuario, mejor.
• La Ley de Fitt…………………………………………………………………..
Esta es la ley más básica y más conocida entre las leyes del diseño de
interfaces de usuario. Esta ley dice que cuando más grande y más
próximo al puntero del ratón es un objeto, más sencillo es hacer click
sobre él. Es de sentido común, pero, muchas veces es ignorado
completamente en el diseño de interfaces. El tiempo para llegar a un
objetivo es en función de la distancia y el tamaño del objetivo. Es por
esto, que es conveniente usar objetos grandes para las funciones
importantes.
• Interferencias Innecesarias
Cuando un usuario está trabajando, su atención está centrada en el
trabajo que está realizando. Cada vez que debe concentrarse en la
aplicación, le saca tiempo el volver a centrarse en el trabajo. Por lo
tanto, se debe minimizar la cantidad de distracción y de interferencias
por parte de tu aplicación. Cada aplicación tiene un elemento clave en la
que centrarse – un editor de texto, es el texto; en un navegador Web, es
la página Web – así que se debe de hacer de este elemento clave el
centro de la interfaz.
• Utilizar la potencia de la computadora
En el diseño de interfaces para el usuario, las implicaciones que tiene
esta idea son claras: cada vez que haya una decisión a tomar o trabajo a
hacer, intentaremos que la interfaz lo haga por el usuario. Los
ordenadores son muy potentes así que hemos de usar su potencia para
ayudar al usuario. También se debe hacer que se pueda distinguir
fácilmente entre elementos similares y, sobre todo, recordar las opciones
de la aplicación.
DIPLOMADOS UNIR. Todos los Derechos Reservados. Instituto Universitario de Tecnología "Readic" UNIR.
Rif J-30001989-6 © 2007.

4. Diplomados
en Tecnología
• Haz que sea fácil distinguir los elementos y buscarlos
Los elementos de la pantalla que hacen cosas distintas deberían ser
fácilmente distinguibles unos de los otros y el elemento seleccionado
debe ser sencillo de distinguir y de leer. No se debe abrumar al usuario
con demasiadas opciones.
Proceso de diseño de Interfaz
Fase de Análisis. En esta primera fase realizamos reuniones con los
responsables para establecer ya des de un principio una visión clara del site a
diseñar y organizar estudios de campo. Todo con un equipo multidisciplinario
para asegurar un conocimiento global. También buscaremos productos
competitivos, crearemos perfiles de usuario y, a partir de aquí, describiremos y
documentaremos los escenarios y los requerimientos de operativa del usuario.
Fase de diseño. En la fase de diseño se hacen una serie de reuniones en las
que se barajan conceptos y metáforas y se realizan bocetos diferentes para
encontrar el más adecuado. Se desarrollan posibles modelos de navegación y
se elaboran dos tipos de prototipos para ver la diferencia: “Low fidelity” y “high
fidelity”. Se lleva a cabo una documentación de estándares y directrices y,
finalmente, se elabora una especificación de diseño.
Fase de Implementación. Se va implementando el diseño y se realiza una
evaluación global y se inicia la organización de test de usabilidad.
Fase de desarrollo. Se efectúan encuestas para obtener feedback (una
retroalimentación, una respuesta) por parte de los usuarios. Además, se
organizan estudios de campo para obtener información de cómo se está
usando lo website. También se comprueban los objetivos y su consecución - o
no - mediante test de usabilidad.
Entrega. Con frecuencia, los estudios para la usabilidad de proyectos, tanto en
el análisis y el desarrollo como en la producción, suelen culminar con la
elaboración y presentación de un documento final de “agujeros de usabilidad
detectados” y medidas paliativas propuestas.
DEFINICION DE Wireframes:
También se les conoce cómo Prototipos de Baja fidelidad, StoryBoard,
Schematics, Blueprints o Page Architecture y son un conjunto de dibujos que
representan cómo estarán organizados los elementos en las páginas, sin
elementos gráficos, de tal manera que implementan aspectos generales del
DIPLOMADOS UNIR. Todos los Derechos Reservados. Instituto Universitario de Tecnología "Readic" UNIR.
Rif J-30001989-6 © 2007.

5. Diplomados
en Tecnología
sistema sin entrar en detalle, estos se deben realizar antes de empezar a
programar y de crear el diseño visual de la página.
Otro concepto para definir un wireframe “Es una representación esquemática
sin elementos gráficos, formada por el contenido y elementos que formarán
parte del proyecto (página web, poster, dípticos…). Siendo así una herramienta
de discusión entre los responsables de contenido, diseñadores, programadores
y cliente. Una representación esquemática de una página web sin elementos
gráficos que muestran contenido y comportamiento de las páginas.”
Esto es lo que hace grande a los wireframes, y esto es lo que hace tan
importante no saltarse este paso como parte de un proceso de creación o
actualización de cualquier soporte (papel, web, visual…)
La manera de crear un wireframe puede ser usando un lápiz y papel, o
utilizando cualquier programa que permita crear lineas y formas poligonales
(photoshop, fireworks, illustrator…), aunque cada vez mas están apareciendo
muchos programas que tienen galerías de elementos ya creados para poder
agilizar esta labor
Las ventajas de usar Wireframes son por un lado el equipo y el cliente se
centra en el diseño de contenidos y no en el diseño visual, y por otro lado,
definiendo la organización y estructura en etapas previas al diseño y
programación se evitan cambios posteriores más costosos, reduciendo así
costos y tiempos.
Al carecer de elementos gráficos, variar los comportamientos de los datos,
información o elementos resulta mucho más fácil y menos costoso a nivel de
tiempo.
La información que deben contener los wireframes es:
 Inventario de contenido.
 Elementos cómo: cabeceras, enlaces, listas, imágenes, formularios, etc.
 Vínculos, títulos, etc.
 Layout. (diseño de la interfaz)
 Notas que nos indiquen el comportamiento de algunos elementos.
La composición principal de Wireframe es un diagrama, el cual es una
representación grafica de información que representa datos, existen varios
tipos de diagramas, pero en el caso del diseño web los diagramas se encargan
de mostrar la organización y comportamiento de los elementos que tienen cada
una de las pantallas (paginas y sub paginas) que conforman nuestro sitio web
En este paso de diseño web se debe tener en claro un aspecto fundamental, La
complejidad del wireframe (diagrama). En algunos casos no es necesarios que
nuestros diagramas sean perfectos y bien definidos, por lo general se
DIPLOMADOS UNIR. Todos los Derechos Reservados. Instituto Universitario de Tecnología "Readic" UNIR.
Rif J-30001989-6 © 2007.

6. Diplomados
en Tecnología
recomiendan que sean bosquejos rápidos y fáciles de digerir, esto ayuda a
explorar y analizar una idea de forma mas rápida y efectiva, debemos
relacionar este comportamiento a tomar notas de las ideas principales que se
nos presenta en una reunión de trabajo o mientras estamos presenciando una
charla o clase. Los wireframes (diagramas) informales son preferibles: no nos
atan prematuramente a una idea durante el proceso de exploración, y le dan a
los diseñadores más libertad al momento de producir el diseño visual.
Un wireframe (diagrama) busca capturar ideas principales, olvidándose un poco
de lo estético y darle más importancia a lo funcional, ya que ellos están hechos
para comunicar ideas principales. (Una vez el diseñador y el equipo que
participa en la fase de creación y planificación del proyecto tenga bien en claro
la estructura del proyecto a presentar, este diagrama debe pasar de ser un
bosquejo de ideas generales y abstractas que solo lo pueden entender unos
pocos, a un diseño bien definido que maneje un excelente criterio de la estetica
a fin que pueda ser entendido por los demas integrantes del proceso de
armado de la pagina web como: programadores, redactores, gerentes y demas
departamentos involucrados en el proyecto.
Este criterio obedece si somos parte de un equipo desarrollador de proyectos
web para una empresa, dichos equipos por lo general están conformados por
varios departamentos que realizan acciones en conjunto para la entrega de un
proyecto web a un cliente. En el caso que estemos desarrollando un proyecto
en el cual se trabaja directamente con el cliente sin contar con el soporte de un
extenso departamento de diseño se sugiere que el proceso de elaboración de
diagrama se simplifique, ya que podemos utilizar esta técnica para desarrollar
diagramas que nos permitan a nosotros mismos poner en orden nuestras
ideas. Una vez teniendo claro lo que deseamos presentar al cliente como una
propuesta de diseño, es cuando procedemos a ejecutar el siguiente paso.
Elaboración de un diseño final:
Una vez se tengan claras las ideas y la diagramación de la página Web se
procede a realizar el diseño final utilizando programas especializados para esta
tarea como: (ADOBE PHOTOSHOP, FIREWORKS, GIMP, entre otros) para
este diseño final no es necesario que el proyecto sea desarrollado directamente
en un documento Web, simplemente se realiza una composición de las
pantallas en formato (JPG, PNG o TIFF) y se la presenta al cliente como una
propuesta impresa la cual debe lucir tan real como el proyecto final ya que
siempre debemos asumir que nuestro cliente carece de creatividad, por lo
tanto, es difícil que pueda imaginar con la misma claridad que lo hacemos
nosotros las ideas que vamos a presentar.
DIPLOMADOS UNIR. Todos los Derechos Reservados. Instituto Universitario de Tecnología "Readic" UNIR.
Rif J-30001989-6 © 2007.

7. Diplomados
en Tecnología
Algunos ejemplos de diagramas.
Caso de estudio – Terra.org
http://www.terra.org/
Caso de Estudio.
NationWide / NASCAR
http://nationwide.nascar.com/nationwide-series/
DIPLOMADOS UNIR. Todos los Derechos Reservados. Instituto Universitario de Tecnología "Readic" UNIR.
Rif J-30001989-6 © 2007.

8. Diplomados
en Tecnología
Caso de Estudio
5 Años de Firefox
http://www.spreadfirefox.com/5years/es-ES/
Caso de Estudio
GEOINT2009 (Microsite)
http://geoint2009.com/
Recursos
Algunas herramientas para el diseño de wireframes.
http://webdesignledger.com/tools/10-excellent-tools-for-creating-web-design-wireframes .
Tutorial para diseñar una plantilla web en photoshop
http://www.elwebmaster.com/editorial/taller-de-adobe-photoshop-disenar-un-sitio-web-o-blog
Colocar un Slideshare
http://www.slideshare.net/blackcreativebox/abc-wireframes
Tesis de maestria de la universidad de Palermo Argentina.
http://www.palermo.edu/dyc/master/pdf/tesis.completas/43.luzardo.pdf
DIPLOMADOS UNIR. Todos los Derechos Reservados. Instituto Universitario de Tecnología "Readic" UNIR.
Rif J-30001989-6 © 2007.