UNIVERSIDAD MAYOR DE SAN SIMON

FACULTAD DE CIENCIAS Y TECNOLOGIA

DIRECCIÓN DE POSGRADO

LAS MEJORES PRÁCTICAS PARA EL

DESARROLLO DE MOCKUPS
EN DISEÑOS WEB(UI)

TRABAJO FINAL PRESENTADO PARA OBTENER EL CERTIFICADO

DE DIPLOMADO EXPERTO EN DESARROLLO DE APLICACIONES
EMPRESARIALES VERSIÓN I
.

POSTULANTE : Bryan Orosco Montaño

TUTOR : Mgtr. Ing. Valentin Laime

Cochabamba – Bolivia
2018

1
 Primeramente, dar gracias a Dios
por la salud y mi familia.
Esta monografía fue un proceso de
aprendizaje y experimentación personal,
que necesito de la paciencia de mucha
gente para llegar a buen término. Por esto,
agradezco mucho a mi Tutor Ing. Valentín
Laime por permitirme tantos caprichos y por
perdonar mi inconstancia. Gracias.
Por otra parte, también dar las
gracias a mi familia que siempre ha estado
ahí brindándome su apoyo incondicional
para poder llevar a cabo este trabajo.

2
 3

Tabla de Contenido
Tabla de gráficos……………………………………………………………………………… 4

Resumen ………………………………………………………………………………………………….5

Introducción ............................................................................................................................. 7

1 Generalidades .................................................................................................................. 8

1.1 Antecedentes Generales.................................................................................................. 8

1.2 Antecedentes Específicos ....................................................................................................8
2 Metodología ...................................................................................................................... 8
3 Definiciones y diferencias de conceptos de diseño ...................................................... 8
3.1 ¿Qué es un sketch? ......................................................................................................... 9
3.2 ¿Qué es un wireframes? .................................................................................................. 9
3.3 ¿Qué es un Mockup? ......................................................................................................10
3.4 ¿Qué es un prototipo? ....................................................................................................11
4 La anatomía de un Mockup ............................................................................................12
4.1 Jerarquía Visual...............................................................................................................13
4.2 Navegación ......................................................................................................................14
4.2.1Primero el contenido…………………………………………………………………………….15
4.2.2Colocación.......................................................................................................................16
4.2.3Claridad ...........................................................................................................................16
4.2.3.1 Esencia de la información ..........................................................................................16
4.2.3.2 Revelación progresiva ................................................................................................17
4.3 patrones de interfaz de usuario .....................................................................................17
5 Entendiendo la jerarquía visual y los patrones de IU para una interfaz de usuario web 18
5.1 Creación de organización visual ......................................................................................18
5.2.1 Patrón F ..........................................................................................................................19
5.2.2 Patrón Z ..........................................................................................................................21
5.3 Contraste .........................................................................................................................22
5.4 Herramientas del comercio: Color, tamaño y espacio..................................................23
5.4.1 Color ...............................................................................................................................23
5.4.2 Tamaño ...........................................................................................................................24
5.4.3 Espacio ...........................................................................................................................24
 4

6 Entender los elementos y el principio MAYA para la interfaz de usuario web ...........25
6.2 La esencia de la Interfaz .................................................................................................25
6.3 Controles de Entrada ......................................................................................................26
6.4 Navegación ......................................................................................................................27
6.4.1 Sistemas de navegación lineal ......................................................................................28
6.4.2 Sistema de navegación no lineal ..................................................................................28
6.4.3 Sistemas de navegación jerárquica ..............................................................................29
6.4.4 Sistemas de navegación compuesta ............................................................................29
6.5 Animaciones ....................................................................................................................30
6.6 Configuración por defecto ..............................................................................................31
6.7 Acciones Guiadas ...........................................................................................................31
6.8 Claridad Visual y Claridad del Lenguaje ........................................................................32
6.9 Principio MAYA ...............................................................................................................33
7 herramientas para el desarrollo de Mockups ................................................................34
7.1 Balsamiq ............................................................................................................................34
7.2 Axure RP ..........................................................................................................................35
7.3 JustinMind .......................................................................................................................36
7.4 Lucidchart ........................................................................................................................37
7.5 Ninjamock ........................................................................................................................38
8 Conclusiones...................................................................................................................38
9 Bibliografia…..……………………………………………………………………………………39
 5

TABLA DE CUADROS, GRAFICOS Y FIGURAS

Figura 1: grafica de procesos de Diseño ………………………………………………….12

Figura 2: Patrón F..……………………………………….……………………..……………20
Figura 3: Patrón Z…………………………………………………………………….………21
Figura 4: Convinacion y contraste…………………………………………………..………23
Figura 6: Ejemplo de navegacion lineal………………………………………………..…..28
Figura 7: Ejemplo de navegacion no lineal………………………………….……………..28
Figura 8: Ejemplo de navegaccion jerarquica …………………………………………….29
Figura 9: Ejemplo de navegacion compuesta……………………………………………..29
Figura 10: Balzamiq pagina de inicio………………………………………………….……34
Figura 11: Axure RP pagina de inicio………………………………………………………35
Figura 12: JustinMind página de inicio.……………………………...……………..………37
Figura 13: lucidchart pagina de inicio………………………………………………………37
Figura 14: ninjamockup pagina de inicio…………………………………………...………38
 6

Resumen

En la presente monografía pasaremos a explicar que es un sketch, un wireframe, un mockup y

un prototipo conceptos que en la actualidad no se los tiene muy claros o se los ha llegado a
confundir ya hecho el hincapié en estos conceptos llegaremos a introducirnos más en los que es
el diseño de mockups para lo que llegaría ser las páginas web veremos las mejores prácticas
que podemos utilizar para que estos puedan diseñarse de manera precisa y consistente.
Considerando también que tememos ya apoyo de herramientas tanto de pago como también
gratuitas para poder realizar los mockups, apoyándonos en estas para poder realizar un diseño
el cual también nos llevara a ver conceptos de los que son las interfaces de usuarios(UI)
conceptos los cuales manejan los diseñadores para poder realizar mejor sus bocetos de los
cuales llegaran a que el usuario tenga una buena interface con la cual se pueda trabajar de
manera adecuara.
 7

Introducción

En la actualidad está tomando mucha importancia y relevancia el presentar un prediseño de una

página web que se convertirá en nuestro producto final para llegar a tener un vistazo general de
la página web que se pretende poner en marcha, necesitamos que el diseñador web invierta
muchos esfuerzos para este prediseño, para tal motivo contamos con los mockups los cuales
nos ayudaran a poder realizar este trabajo con el cual podremos tener un prediseño más
específico y profesional de acuerdo con lo que se requiera.
Con la experiencia adquirida podemos llegar fácilmente a desarrollar una página web para ello
contamos con editores de hipertexto contamos con lenguajes de desarrollo para poder llevar a
cabo este propósito pero también podemos llegar a diseñar la página web casi al mismo tiempo
que estamos codificando la página sin tener unas directrices de diseño de páginas web o
simplemente ya agarramos plantillas prediseñadas para poder basarnos en estas y al más
mínimo cambio podemos arruinar la estructura que llevaba esta plantilla, para ello presentaremos
practicas recomendables para el diseño de los mockup para páginas web empezando por la
anatomía básica de un mockup y nos iremos adentrando a lo que llegaría a ser los patrones que
adopta la vista del usuario cuando esta frente a una página web veremos temas como espacios,
colores, tamaño cosas que tal vez siempre pasamos por alto pero desempeñan un papel muy
importante cuando se realiza el diseño de una página web.
Con la presente monografía queremos dar a conocer los conceptos con los cuales se mueven
básicamente las interfaces de usuario cuando se elabora una página web, podrán llegar a diseñar
y comprender el diseño que lleva esta.
 8

1 Generalidades
1.1 Antecedentes Generales
Los grandes diseñadores dibujan sus ideas y crean bocetos antes de empezar sus proyectos.
Los mockups son muy útiles para que, cuando empieces el diseño final, no pierdas de vista el
objetivo. Los bocetos sirven como brújulas durante el proceso de diseño. También tenemos que
tomar en cuenta aspectos los cuales nos llevaran a poder diseñar un buen mockup para una
página web.

1.2 Antecedentes Específicos

En el diseño de mockups para páginas web llegamos a tener ciertos parámetros en los cuales
tenemos que detenernos por un momento y ponernos a pensar de cómo será este también que
página web estamos queriendo diseñar las definiciones que se realizaran nos mostraran en que
fase se encuentra un mockup que sistema de navegación utilizaremos jerárquico, global, local o
especifico verificaremos también los patrones para una interfaz de usuario el cual es muy
importante para poder darnos las directriz de que mockup de página web estamos diseñando.

2 Metodología
Para el presente trabajo se utilizarán los siguientes métodos de investigación:
 Método Bibliográfico, debido a que se realizara la lectura y compilación de libros
relacionados al tema de estudio.
 Método Analítico, debido a que se procederá a revisar y analizar ordenadamente
documentos relacionados al tema de estudio, para la redacción del Plan de Emergencia.

3 Definiciones y diferencias de conceptos de diseño

Para poder realizar diseños para una interfaz web podrá encontrar varias herramientas muy útiles
para esto, pero existe la tendencia a confundirlas a la hora de aplicarlas. Para tener más claro el
panorama y poder realizar un buen proyecto, tenemos que poner en claro las diferencias entre
Sketch, Wireframe, Mockup y Prototipo para que pueda ingresar en el mundo tecnológico
online sin ningún problema.
 9

Aunque pueden verse similares, su contraste se centra en la calidad de diseño que se aprecia
en cada una de ellas. Es importante seguir un orden al momento de crear un sitio web, de esto
dependerá que el producto sea de calidad y el usuario pueda navegar con total facilidad.

3.1 ¿Qué es un sketch?

Un sketch en teoría es un dibujo rápido o bosquejo de guía general que no tiene por qué tener
muchos detalles ya que reproduce un concepto, idea, o generalidad de un proyecto de una
manera muy sencilla. Por generalidad se realiza a mano con lápiz y borrador por su facilidad en
el momento de plasmar una base o punto de partida

3.2 ¿Qué es un wireframes?

Un wireframe es la primera representación de un diseño. En el caso de un sitio web se muestran

una serie de recuadros y líneas que indican qué tipo de contenido irá y donde será localizado.
Aunque es usual que los wireframes empiecen en papel, luego se digitalizan para poder trabajar
con medidas exactas. En el boceto en papel puedes tener una idea general de dónde van los
elementos, pero al mejorar y digitalizar el boceto ya no se tratan con aproximados, sino de
medidas exactas que deben seguirse cuando se pase a la siguiente fase de diseño. Queda claro,
entonces, que los wireframes básicamente tienen dos objetivos:

 Mostrar el tipo de contenido que conforma el diseño del sitio

 Mostrar dónde se ubica ese contenido

Los wireframes son la primera representación que se tiene de la estructura del diseño. Al mismo
tiempo, también se representan los principales elementos, pero a un nivel bastante básico. Es
decir, se conoce qué tipo de elementos se colocarán, pero todavía no se cuenta con una
aproximación del aspecto visual de dicho elemento.

Si bien es importante crear una representación fiel del diseño final, no se tiene detalle de ciertos
elementos. Son como una guía que ayuda a los miembros de equipo a entender la estructura del
sitio, pero aún se desconoce el aspecto de los elementos. Por esta razón se suele representar
 10

con recuadros las zonas donde irán elementos o botones, y con líneas los títulos y párrafos de
texto. (maria Gloria del ri, 2007)

Los wireframes son indispensables en las primeras fases del diseño ya que suelen servir como
bocetos, ya sea para intercambiar ideas con los miembros de tu equipo o para explicar de manera
más gráfica el concepto del diseño. Ya que se pueden crear en papel, son excelentes
herramientas al trabajar en equipo. Al digitalizarlos también cumplen este propósito, aunque son
igual de necesarios ya sea que se trabaje en equipo o por cuenta propia pues es una guía que
debes seguir en las próximas fases del diseño.

3.3 ¿Qué es un Mockup?

Un mockup es una representación visual y estática de un diseño. En el campo del diseño web
los mockups se utilizan para que los miembros de equipo tengan una idea más clara de cómo
lucirá el sitio web. De hecho, más que ser cercana, es una idea exacta de cómo se verá al sitio
web una vez que se pase a la siguiente fase.

Los mockups se realizan en base a las medidas y a la organización previamente establecida en

el wireframes, pero a diferencia de éste, un mockup ya tiene un sentido mayor para el cliente
pues es más visual. Se ven todos los elementos como texto, iconos e imágenes.

Ya que es una representación visual estática, algunos elementos que se añada como videos
deberán ser representados mediante una imagen y el icono de reproducción. Asimismo, no existe
interacción alguna entre los elementos de menú, botones, enlaces, etc. Lo que suelen hacer
muchos diseñadores es crear mockups también de cómo lucirán los botones en sus diferentes
modos, de esta manera el desarrollador web puede saber con exactitud que modificaciones debe
hacer. Sirven también para explicar al cliente de manera más precisa cómo funcionan las
interacciones en el sitio web.
 11

Típicamente de mediana a alta fidelidad, los modelos reflejan las opciones de diseño para
esquemas de color, diseños, tipografía, iconografía, imágenes de navegación y la atmósfera
general del producto.
Además de reservar tiempo para responder preguntas visuales importantes, los mockups tienen
otros beneficios:

 Intuitivo para las partes interesadas: gracias a su mayor fidelidad, los modelos
requieren menos contexto que los documentos lo-fi, como los wireframes. Los
interesados pueden ver más fácilmente el producto final.

 Perspectiva realista: una cosa es tomar todas las decisiones visuales, pero otra es
verlas trabajar de una manera cercana a la realidad. Los modelos pueden ayudar a
revelar problemas que no son tan obvios en el papel (por ejemplo, choques de color
o delitos de tipo más pequeño que pasan desapercibidos).

 Primeras revisiones: es más fácil hacer revisiones en un modelo que en las etapas
de codificación posteriores (siempre que el modelo no esté codificado).

Como ya hemos mencionado, los mockups son de gran ayuda cuando se trabaja en equipo, pues
ayuda a visualizar mejor a todo el equipo el diseño final del sitio. Asimismo, son de gran utilidad
para mostrar el diseño al cliente sin necesidad de añadir ningún tipo de interactividad. Son
perfectos cuando quieres recibir comentarios o revisiones por parte del cliente.

3.4 ¿Qué es un prototipo?

Un prototipo es también una representación de la versión final de un diseño web que, además,
simula la interactividad. Se entiende que, aunque es un prototipo, el diseño debe ser cercano a
la versión final del diseño. A menudo, se realiza en base al wireframe y los mockups que
proporciona el diseñador. Por esta razón, suele tener medidas exactas y, por supuesto, la
estructura también se mantiene. Si el diseño es cercano a la versión final, las interacciones
también deben ser desarrolladas con mucho cuidado, teniendo en cuenta su semejanza con la
 12

versión final del sitio web. Entonces, un prototipo sirve para examinar no sólo el contenido sino
también la interactividad del sitio. (Toni Granollers i Salteveri, ontubre 2005)

Un prototipo se suele usar para poner a prueba ciertas funciones del sitio y verificar si la
usabilidad es la adecuada. En base a estas pruebas se puede proceder a realizar cambios según
convenga. Ya que un prototipo es una aproximación cercana al producto final, tanto en diseño
como en interacción, es un proceso que suele tomar más tiempo, pero puede ser necesario en
ciertas páginas web. Por ejemplo, si se trata de una aplicación web, se deben realizar pruebas
para verificar si ésta funciona correctamente antes de ofrecer dicho producto a los clientes.

Con los conceptos vistos anteriormente y con lo ya reflexionado sobre que función cumple cada
uno de estos tenemos que saber diferenciar lo que llega a ser un sketch, un wireframe, un
mockup y por último un prototipo, ya que esto nos permite llegar a comprender a cabalidad como
tenemos que proceder y en qué punto estamos al empezar a diseñar la interfaz de nuestro
programa página web o aplicación móvil.
En la siguiente grafica podemos llegar a ver cómo se va avanzando de etapa en etapa

Figura 1: grafica de procesos de Diseño

(Tate,2010)

4 La anatomía de un Mockup

Una de las preguntas que normalmente solemos realizarnos es ¿Qué debería incluir en mi
mockup? Para responder a esta pregunta tenemos que pensar en que detalles llegaríamos a
poner a una página web o a una aplicación.
 13

Lo que estamos realizando es una representación visual de muestro producto en todo caso un
mockup debe ser la pieza. Mientras que en un mockup estamos sacrificando lo que llegaría a ser
la interactividad, El propósito de un mockup es mostrar claramente lo que el producto final llegaría
a ser. Por lo que esto requiere que los elemento que el producto final llegaría a tener. Ya que un
mockup está centrado en la apariencia tenemos que aplicar las reglas de estética para el
producto terminado.

Además, una maqueta debe insinuar la usabilidad y la función, aunque no necesariamente la

utiliza (para eso son los prototipos). Incluso los botones apropiados, los cambios de color y los
flujos de página darán a los interesados una impresión de cómo puede funcionar el producto
final.

Al planificar un mockup, asegúrese de tener en cuenta la jerarquía visual, la navegación y

cualquier patrón de interfaz de usuario aplicable.

4.1 Jerarquía Visual

La jerarquía visual es un elemento esencial para el diseño de UI de sitios web, por lo que también
es esencial para maquetas, ya que comparten la misma significación visual. En este subtitulo
veremos brevemente lo que es más relevante para maquetas.

En lo que respecta a lo básico, es importante recordar estos elementos:

 Diseños: los avances modernos en el seguimiento de los ojos han señalado dos
patrones principales para la visualización de sitios web, el patrón F (para contenido
de texto pesado) y el patrón Z (para contenido general). Al predecir dónde van a ir
los ojos de sus usuarios, puede planificar el diseño de su sitio con mayor control.

 Contraste: El uso de contraste de color claro/oscuro y tibio/frío hará que su

maqueta sea más estimulante visualmente, y cuando se haga correctamente puede
 14

ayudar a guiar los ojos de sus usuarios donde quiera, por ejemplo, a un llamado a
la acción.

 Color: Con sus sugerentes humores y su capacidad para atraer/repeler la vista de

sus usuarios, los colores son una poderosa herramienta para cualquier diseñador
especialmente el esquema de color global del que determinará la personalidad del
sitio y un enorme impacto en el UX. Para los fundamentos sobre el uso de los
colores en el diseño web,

 Tipografía: Teniendo en cuenta que el contenido de la mayoría de los sitios web

es la palabra escrita, la tipografía juega un papel importante en la experiencia
general del usuario. El uso de los tamaños y fuentes adecuados es casi tan
importante como la escritura en sí. Mark Boulton describe algunos consejos útiles
para optimizar su tipografía.

 Espaciado: No sobrecargue la página con demasiados visuales, no importa lo

buenos que sean. Sus elementos necesitan espacio para respirar para alcanzar su
potencial completo, por lo que un buen diseñador sabe cómo lograr un equilibrio
entre demasiado mucho y muy poco.

Hay mucho que decir sobre la importancia de los visuales en el diseño web de hecho, los
libros enteros se han escrito sobre el tema. Estos son sólo los elementos básicos que son más
aplicables a la construcción de una maqueta.

4.2 Navegación

La palabra navegación viene de una palabra latina para dirigir una nave. Para un marinero en el
mar abierto, saber dónde está el buque y a dónde va puede ser una cuestión de vida o muerte.
Para el éxito de un sitio web, el diseño de la navegación puede ser igual de importante.
 15

Ya sea que vaya a media o alta fidelidad, necesita mostrar cómo se verá la navegación. Es
después de todo, la vía de información para su sitio web o aplicación .

4.2.1 Primero el contenido

Cree el contenido antes de esbozar un solo alambre. Su mensaje al mundo debe dar forma a la
estructura de navegación, no ser confinada por ella. Los sitios web innovadores combinan ideas
creativas con un propósito valioso. Si el contenido es carente, incluso la navegación impecable
diseñada no puede proporcionar la energía que permanece. Después de crear el contenido,
construya la navegación que puede guiar la experiencia del usuario.
Para esto que la navegación no carezca de contenido veremos estos aspectos básicos:

 Menú: el primer lugar que la gente busca para entender lo que está incluido en el
sitio.

 Links: Ayuda a los usuarios a establecer conexiones entre contenido relacionado.

 Navegación secundaria: es un tipo de esquema de navegación secundaria

que revela la ubicación del usuario en un sitio web o aplicación Web Muchos
usuarios no aterrizan en la página de inicio, por lo que la orientación es
esencial.

 Filtros: Los sitios pesados de información se pueden hacer manejables con

filtros.
También tenemos que tomar en cuenta que la arquitectura de la información es cómo se agrupan
y organizan las ideas de un sitio. El contenido bien planificado debe tener una estructura de
organización natural. El mapeo de contenido debe sentirse intuitivo para una amplia variedad de
usuarios
Un menú ayuda a las personas a visualizar la arquitectura de la información. Una arquitectura
amplia y poco profunda generalmente proporciona una mejor experiencia del usuario, ya que
reduce el número de clics necesarios para navegar, lo que significa menos decisiones para el
usuario. Una arquitectura de información poco profunda podría empaquetar contenido
relacionado en una página para requerir menos clics.
 16

4.2.2 Colocación
La navegación es una serie de opciones: ¿Desea hacer clic o desplazarse? ¿Leer o ver?
¿Introducir datos o golpear el botón de atrás?, dentro de los límites del espacio bidimensional, a
menudo debemos decidir sin ver lo que va a seguir. Un sitio con una fuerte usabilidad proporciona
al usuario la organización y las señales visuales para ayudar a la navegación.
La colocación de las opciones de acción en la página impacta cómo responde la gente.
Entrenamos nuestros cerebros para priorizar y filtrar información. Por ejemplo, las personas que
hablan idiomas que se escriben de izquierda a derecha (como el inglés) centran más atención
en el lado izquierdo de una página; mientras que las personas que hablan lenguas escritas de
derecha a izquierda (como el árabe) se centran en la derecha. La investigación compartida por
Jakob Nielsen indica que las personas a menudo utilizan un patrón en forma de F para leer una
página, haciendo unos escaneos horizontales en la parte superior.

4.2.3 Claridad

La escritura clara ayuda a la gente a navegar. En esencia, un sitio web es una comunicación
pregrabada del desarrollador al usuario. El mensaje debe entenderse de principio a fin.

Muchas convenciones web son metáforas efectivas que ayudan a nuestro cerebro a entender el
ciberespacio de la misma manera que entendemos el espacio físico. Los ejemplos incluyen un
menú intuitivo, enlaces claramente etiquetados e indicadores de "usted está aquí". Cuando no
se dispone de la Convención de la derecha, se debe utilizar una explicación simple y directa.
Dentro de la estructura de navegación, la claridad no debe ser sacrificada por la creatividad.

4.2.3.1 Esencia de la información

Cuando la gente aterriza en su sitio, ellos están buscando algo. Podría ser una receta para el
licuado perfecto, o tal vez revisiones para una nueva película. Los usuarios están siempre en la
búsqueda, pero en el modo de escaneo al mismo tiempo. Con frecuencia aterrizarán en una
página que no contiene exactamente lo que están buscando, y el sitio debe ofrecer orientación.
 17

No es suficiente tener un camino claro desde la página de inicio a contenido específico. Los
usuarios necesitan pistas para decirles que están en el camino correcto, si una página no
comunica claramente lo que sigue, un usuario puede abandonar el sitio.

4.2.3.2 Revelación progresiva

La gente sólo puede digerir pequeños fragmentos de información a la vez. Para sitios complejos
con contenido profundo, es útil simplificar. La divulgación progresiva ofrece resúmenes cortos
con la opción de expandir el contenido más detallado. Esto permite a los usuarios entender lo
que está disponible, y seleccionar la opción más adecuada.

Revelación progresiva ha sido aplicado mediante la creación de un enfoque multinivel que

requiere que el usuario haga clic y cargue varias pantallas. En muchos casos, este enfoque
reduce la usabilidad. Sin embargo, la facilidad de uso se ve reforzada por dar a los usuarios un
sistema simplificado de punto de partida antes de mayor contenido de exploración.

4.3 Patrones de interfaz de usuario

Mucho puede decirse acerca de patrones de IU, pero en palabras sencillas es diseñar
mejores prácticas utilizadas por el éxito de sitios y aplicaciones para resolver problemas comunes
en UI problemas. La mayoría de los diseñadores se acerquen a ellos como puntos de partida o
de inspiración.
Los patrones de diseño de UI usualmente caen dentro de cuatro categorías que
aplican a todos los sitios web y apps:

 Obtener entrada: los patrones para recibir entrada, como los campos de
formulario y los controles, son la espina dorsal de la interactividad.

 Navegación: Como se mencionó anteriormente, los patrones como los menús y

las migas de pan permiten a los usuarios orientarse y explorar con confianza.
 18

 Estructuración de datos y contenido: Estos son los patrones que organizan y

muestran su contenido, infundiendo su producto con su propia personalidad y
estilo.

 Compartir redes sociales: Todo el mundo quiere que su producto sea

compartido sobre cuestiones sociales. Los medios de comunicación, y estos
patrones pueden alentar esta.

Los patrones de la UI son también maneras eficaces de defender decisiones del diseño
cuando presentando maquetas, puede ser absolutamente convincente demostrar los sitios
populares que utilizan patrones de diseño similares. Su maqueta no se verá igual que esos sitios,
pero tendrá una prueba visual de la lógica detrás del diseño.

5 Entendiendo la jerarquía visual y los patrones de IU para una interfaz de

usuario web

Más que ser creativo, un buen artista también debe considerar sutilezas como composición,
colores, tamaño, qué incluir, y, quizás más importante, qué dejar fuera No es una hazaña fácil,
por eso tenemos maestros como Da Vinci y Van Gogh en tan alta estima. (Carrie Cousins, 2017)

Un sitio web es una forma de arte visual en sí mismo. Sigue muchas de las mismas reglas que
las formas de arte más tradicionales. Es la ciencia de la estética, combinada con los principios
de los negocios, y una extraordinaria interfaz de sitio web debe sentirse sin esfuerzo y atractiva.
Explicaremos cómo crear una jerarquía visual y usar patrones de IU como punto de partida.

5.1 Creación de organización visual

Luke Wroblewski, autor y Director de Diseño de Producto en Yahoo!, explica que la presentación
visual de una interfaz web es esencial para:

 Informar a los usuarios: como una mano invisible, la interfaz debe guiar a los usuarios
de una acción a la siguiente sin sentirse dominado. Por ejemplo, pago el procesador
 19

Square le guía a través de sus propuestas de valor a medida que se desplaza hacia abajo,
con llamadas relevantes a la acción en cada paso del camino.

 Comunicar las relaciones de contenido: La interfaz debe presentar contenido de una

manera que coincida con la forma en que los usuarios priorizan la información. Por
ejemplo, un popular sitio web de diseño incluye categorías amplias en la parte superior,
contenido destacado en el medio, y categorías detalladas en el pie de página.

 Creando impacto emocional: la gente visita los restaurantes por más que solo una
comida. Quieren sabor, textura, presentación y un recuerdo memorable. ambiente El
diseño de la interfaz no es diferente, y la gente puede ser más propenso a perdonar las
deficiencias de su sitio si produce un sentimiento emocional positivo de respuesta. Por
ejemplo, wufoo.com es un ejemplo perfecto de un sitio con una interfaz que produce un
sentimiento emocional positivo eso es usable y placentero.

El objetivo final de su diseño de interfaz de usuario es responder tres preguntas:

1. ¿Qué es esto? (Utilidad)
2. ¿Cómo lo uso? (Usabilidad)
3. ¿Por qué debería importarme? (Atractivo)

5.2 Patrones de escaneado: la predictibilidad del ojo humano

Al igual que con un movimiento rápido en el rabillo del ojo o un paseo sexy de alguien al otro lado
de la calle, el ojo humano se dirige automáticamente a ciertos puntos de interés. Si bien parte de
esto depende de la persona, la mayoría de las personas tiende a seguir tendencias definidas,
incluida la forma en que ven una página web.

5.2.1 Patrón F

Por lo general, para sitios web con mucho texto como blogs, el F-Pattern viene del lector primero
escanear una línea vertical en el lado izquierdo del texto en busca de palabras clave o puntos de
 20

interés en las oraciones iniciales del párrafo. Cuando el lector encuentra algo les gusta,
comienzan a leer normalmente, formando líneas horizontales. El resultado final es algo que se
parece a las letras F o E. Como claros ejemplos témenos a CNN y NYTimes ambos usan el
patrón F.
Las implicaciones del patrón F para el diseño web son claras y muestran la importancia de seguir
las pautas para escribir para la web en lugar de reutilizar el contenido impreso:

 Los usuarios no leerán su texto a fondo palabra por palabra. La lectura exhaustiva es
rara, especialmente cuando los clientes potenciales están llevando a cabo su
investigación inicial para compilar una lista corta de proveedores. Sí, algunas personas
leerán más, pero la mayoría no lo hará.

 Los dos primeros párrafos deben indicar la información más importante. Hay alguna
esperanza de que los usuarios realmente lean este material, aunque probablemente lean
más del primer párrafo que del segundo.

 Comience con subtítulos, párrafos y viñetas con palabras que contienen información que
los usuarios notarán cuando escaneen el lado izquierdo de su contenido en la raíz final
de su comportamiento de F. Leerán la tercera palabra en una línea con mucha menos
frecuencia que las dos primeras palabras.|

Figura 2: Patrón Z
(wireframe realizado con la herramienta Axure RP)
 21

5.2.2 Patrón Z

La exploración del patrón Z se produce en páginas que no están centradas en el texto. El lector
primero escanea una línea horizontal en la parte superior de la página, ya sea debido a la barra
de menú, o simplemente por el hábito de leer de izquierda a derecha desde la parte superior.
Cuando el el ojo llega al final, se dispara hacia abajo y hacia la izquierda (de nuevo según el
hábito de lectura), y repite una búsqueda horizontal en la parte inferior de la página.

El patrón Z es aplicable a casi cualquier interfaz web, ya que aborda el núcleo requisitos del sitio
web como jerarquía, marca y llamadas a la acción. El patrón z es perfecto para interfaces donde
la simplicidad es una prioridad y la llamada a la acción es la principal comida para llevar. Forzar
un patrón Z para un sitio web con contenido complejo no puede funciona tan bien como el patrón
F, pero un patrón Z puede ayudar a darle una sensación de orden a Diseños más simples (y
aumentar las tasas de conversión). Aquí hay algunas mejores prácticas para mantener en mente:

Figura 3: Patrón Z
(mockup realizado con la herramienta Axure RP)

 Fondo: separe el fondo para mantener la vista del usuario dentro de su

marco de referencia.

 Punto # 1: Esta es una ubicación privilegiada para su logotipo.

 22

 Punto # 2: agregar una colorida llamada secundaria a la acción puede ayudar a guiar a
los usuarios a lo largo del patrón z

 Centro de la página: un control deslizante de imagen destacada en el centro de la página

separe las secciones superior e inferior y guíe los ojos a lo largo de la trayectoria Z.

 Punto #3: agregar iconos que comiencen aquí y se muevan a lo largo del eje inferior
puede guíe a los usuarios a la llamada a la acción final en el punto # 4.

 Punto # 4: esta es la línea de meta, y un lugar ideal para su llamada principal a acción.

Predecir a dónde irán los ojos del usuario puede ser una gran ventaja. Antes de arreglar los
elementos de tu página, prioriza los más importantes y los menos importantes. Una vez tú saber
lo que quiere que vean sus usuarios, es solo una cuestión de colocarlos en los "puntos calientes"
del patrón para las interacciones correctas.

Incluso puede extender el patrón Z a lo largo de toda la página, repitiendo Puntos 1-4 si cree que
se necesitan más propuestas de valor antes de la llamada a la acción.

5.3 Contraste

Para explicar mejor el uso del contraste, volvamos a Luke Wroblewski. En pocas palabras, el
contraste es la ocurrencia de dos elementos diferentes colocados juntos. En el diseño de la
interfaz de usuario web, estos elementos pueden ser colores, texturas, formas, dirección, o
tamaño, para nombrar los más importantes.

Alternar entre diferentes fuentes de tamaño y colores crea una jerarquía instantánea para su
interfaz, Por ejemplo, como puede ver a continuación para el contacto constante, cambiando de
un fondo claro a un fondo oscuro separa inmediatamente la llamada principal a la acción de
"Contáctenos" desde el menú de navegación y la llamada secundaria "Enviar una postal Simple"
combinado con el patrón Z del sitio, el tratamiento proporciona una clara jerarquía visual que
resalta el formulario de envío de correo electrónico seguido de la página central Menú de
Navegación.
 23

Figura 4: Contraste y Combinación.

.
5.4 Herramientas del comercio: Color, tamaño y espacio

Al "pintar" la interfaz web, no olvides utilizar tus herramientas visuales más poderosas: color,
tamaño y espacio. Los colores y el tamaño administran la atención, mientras que el espaciado
ayuda a administrar las relaciones visuales.

5.4.1 color

En pocas palabras, los colores brillantes se destacan de los colores apagados. Esto puede
parecer obvio, pero lo importante es su aplicación: puede explotar esto para atraer a su la
atención del usuario a donde quieras. Además, ciertos colores pueden ayudar a establecer el
estado de ánimo del sitio completamente (los azules son tranquilos, los rojos son agresivos, etc.).

Figura 5: Conbinacion de color

 24

El uso del color de Fitbit en su interfaz de patrón Z anterior es especialmente inteligente. El uso
brillante de magenta coloca inmediatamente las llamadas a la acción cerca de la parte superior
de la jerarquía visual, pero también coincide con el color del botón "Activar", lo que indica de
manera inconsciente que los dos conceptos están relacionados. Tonos de azul similares también
se usan en los objetivos de acondicionamiento físico y en las secciones del producto, lo que crea
una asociación inteligente entre los dos (y atrae los clics a las partes más valiosas de la interfaz).

5.4.2 Tamaño

El tamaño, particularmente para el texto, es una herramienta poderosa porque evita las reglas
tradicionales de lectura de izquierda a derecha y de arriba a abajo. Eso significa que una palabra
o frase grande en la esquina inferior derecha puede ser la primera cosa que una persona lea.
Además, el tamaño puede agregar énfasis al mensaje o contenido real, haciéndolo más
significativo.

Cuando se trata del tamaño del texto, un estudio de tipografía realizado por Smashing Magazine
en 50 interfaces populares de sitios web encontró que los encabezados generalmente se
mantienen entre 18 y 29 píxeles con copia de cuerpo que oscila entre 12 y 14 píxeles.

5.4.3 Espacio

Uno de los trucos más importantes para hacer algo bonito es la ausencia absoluta de algo bonito.
Agrupar demasiadas imágenes atractivas juntas es una forma rápida de arruinarlas todas. Es
importante que su interfaz web tenga espacio para respirar y que se espacie todo. Reducir la
cantidad de "ruido visual" hará que los puntos que desea mantener sean aún más fuertes.

De hecho, Dmitry Fadeyev, fundador de Usaura, informa que el espacio en blanco realmente
mejora la comprensión. Un estudio de 2004 encontró que el uso estratégico de los espacios en
blanco mejoró la comprensión en casi un 20%. Si bien el espaciado no afectó el rendimiento de
 25

las personas en el sitio web, sí afectó la satisfacción y la experiencia del usuario (lo que es
igualmente importante, si no más importante).

Teniendo en cuentas los puntos vistos anteriormente estos nos llevaran cada vez más cerca de
tener una idea más clara acera de cómo realizar mockups de las páginas web.

6 Entender los elementos y el principio MAYA para la interfaz de usuario web

Diseñar una interfaz web es más que simplemente conectar su nombre de marca a un gran
algoritmo y hacer clic en "enviar". No existe una plantilla que resuelva todo, no hay un conjunto
de reglas definitivo y universal. Solo hay principios generales, guías, instrucciones, teorías y
simples consejos amistosos. (Theo Mandel, 1997)

Continuando en esa línea, este capítulo discutirá algunos principios generales y específicos que
se ha demostrado que ayudan a otros sistemas de UI en el pasado. Abrazar estos te ayudará a
utilizar completamente los patrones y técnicas visuales que aprendimos en el capítulo anterior.
Discutiremos la esencia de las interfaces, las mejores prácticas para componentes específicos y
por qué es importante tener en cuenta el Principio MAYA.

6.2 La esencia de la Interfaz

Lo primero es lo primero, tengamos una comprensión clara de lo que realmente es la interfaz

de usuario. "Interfaz" puede ser un término complicado, por lo que tomaremos un momento
para envolver nuestras cabezas en torno a lo que implica. Ryan Singer, Gerente de productos
de “Basecamp”, nos aconseja no pensar en las "pantallas o botones o píxeles de la interfaz", ya
que es tentador para los diseñadores, sino más bien como una colección de "trabajos", cada
uno con un principio, un punto medio y un final.

Para dar más comprensión a este apartado nos pondremos en el caso de estamos diseñando la
interfaz para la página de inicio de Facebook. La primera pregunta que debe hacerse es:
“¿Cuáles son los trabajos que la gente quiere hacer aquí?” Dado que es Facebook, las
 26

respuestas serán cosas como compartir noticias, imágenes, mensajes, enviar y recibir
invitaciones, etc.

Cada uno de estos trabajos necesita un comienzo, un medio y un final. Si su usuario desea
publicar noticias sobre su nuevo bebé, o gatito, primero debe hacer clic en el cuadro "Actualizar
estado" (comienzo). Esto expande la ventana de mensajes y les permite escribir su mensaje
(centro), y cuando terminan, hacen clic en "Publicar" y pueden ver su nueva actualización de
estado en la pantalla para que sepan que es oficial (fin).

6.3 Controles de Entrada

La interfaz solo sería una "cara" sin interacción, y mucho de eso proviene de los controles de
entrada. Pero hay una paradoja con los controles, porque los usuarios quieren más opciones,
pero cada nuevo control complica la interfaz de usuario y llena la pantalla. La mejor manera de
lograr ese equilibrio perfecto es tener controles bajo demanda.

Al ocultar sus controles hasta que sea necesario, ahorra espacio en la pantalla sin tener que
sacrificar las opciones del usuario. Es una solución de ganar-ganar que ha sido adoptada por la
mayoría de los sitios web de alto perfil en este momento. Los controles se pueden ocultar y
revelar al desplazarse sobre el contenido afectado (Pinterest), ocultos en los menús desplegables
plegados mediante pestañas (Google Docs), o un híbrido de los dos, como en el ejemplo de
CollabFinder.

Otro control de entrada necesario es el campo de texto. Este es un elemento de la interfaz de

usuario que a menudo se da por sentado, y muchos diseñadores están contentos con el uso de
campos de formulario genéricos y se olvidan de que están ahí. Sin embargo, un campo de
entrada personalizado puede ayudar a infundir cierta personalidad en su sitio, o incluso evitar un
choque desafortunado de colores con diseños genéricos. Este podría llegar a ser fácilmente el
caso de Google que la primera pantalla es un campo de entrada para este caso nos es
conveniente que el cursor ya se ubique en dicha posición para comenzar con la búsqueda.
 27

6.4 Navegación

Es difícil apreciar un sitio si está perdido, por lo que la navegación es obligatoria cuando se habla
del diseño de la interfaz de usuario web.
Podemos tomar en cuenta estas dos reglas para realizar la navegación:

 Los usuarios siempre deben saber su lugar actual en el sitio: conocido como
orientación, esto es fundamental para que los usuarios se sientan cómodos y optimiza el
sitio en su extremo. Las formas de orientar a su usuario incluyen elementos de menú
resaltados, rastros de ruta de navegación y encabezados.

 El sistema de navegación sigue siendo coherente: en otras palabras, no mueva la

barra de menús. Imagina lo frustrante que sería si estuvieras perdido en una ciudad y las
señales de las calles cambiaran entre los postes, los lados de los edificios, la acera, etc.

Como explicamos a continuación, para garantizar el contexto y la coherencia, su navegación

debe coincidir con el flujo de contenido a través de la ubicación adecuada.
Debe asegurarse de que el contenido del sitio esté completo antes de abordar la navegación. Si
su contenido no se encuentra, ni siquiera la mejor navegación guardará el sitio. La navegación
debe soportar el contenido: Menus, Navegacion secundaria, Filtros y enlaces.

Para tal motivo tenemos que tomar en cuenta los tipos de navegación con los cuales podremos
encontrarnos al momento de diseñar nuestra página web. Para lograr el éxito es necesario
conocerlos y entender en qué medida ofrece flexibilidad y una noción del contexto en el que nos
encontramos. Pueden identificarse cuatro tipos de sistemas de navegación, ellos son:

- Sistemas de navegación lineal

- Sistemas de navegación no lineal

- Sistemas de navegación jerárquica
- Sistemas de navegación específicos
 28

6.4.1 Sistemas de navegación lineal

Es una estructura muy simple similar a las páginas de un libro. Desde una página concreta se
puede ir a la página siguiente o la página anterior. Es especialmente útil si deseamos que el
usuario siga un itinerario fijo y guiado sin posibilidad de acceder a otras páginas que pudieran
distraerle. Ejemplo: Guía o tutorial de aprendizaje. No es recomendable si el número de páginas
encadenadas es muy elevado porque produce sensación de fatiga y no permite retomar
fácilmente la secuencia allí donde se abandonó en la última sesión.

Figura 6: ejemplo de navegación lineal

6.4.2 Sistema de navegación no lineal

Es adecuada cuando se tiene que conservar el camino general, pero hay que dar lugar a ligeras
variaciones, tales como saltarse determinadas páginas. Permite algunos desvíos controlados, la
estructura obliga a regresar al camino principal, y normalmente al tener un desvío lateral es
porque se muestra una pequeña información adicional.

Figura 7: Ejemplo de navegación no lineal

 29

6.4.3 Sistemas de navegación jerárquica

Estructura en árbol donde existe una página índice o principal desde donde se accede al resto
de páginas. Desde estas subpáginas se puede acceder a otras y así sucesivamente creando
distintos niveles o jerarquías. Es ideal para sitios web de centros o proyectos. No se aconseja
utilizar más de 4 niveles para evitar que el usuario se desoriente durante la navegación. Conviene
situar en todas las páginas un menú que permita moverse de una forma fácil y directa por los
distintos niveles y páginas de cada nivel.

Figura 8: Ejemplo de navegación jerárquica

6.4.4 Sistemas de navegación compuesta

La navegación compuesta es la que aquella que llega a combinar diferentes sistemas de

navegación para permitirle al usuario contar con un recorrido más personalizado dentro del sitio.

Figura 9: Ejemplo de navegación compuesta

 30

6.5 Animaciones

Las animaciones son divertidas. De hecho, son tan divertidos que las personas a menudo olvidan
que son útiles y pueden agregar a su interfaz de usuario de manera subrepticia sin que el usuario
lo sepa.
Podemos enumerar tres razones excelentes (además de divertidas) que las animaciones son
indispensables para una gran interfaz de usuario

 El ojo es atraído por el movimiento: Esto ha sido probado científicamente y se puede

utilizar para su beneficio. Un ícono animado indicará un cambio para el usuario de manera
mucho más efectiva y menos alarmante que un cambio plano.

 Establecer conexiones: Las animaciones hacen excelentes transiciones, que ayudan a

que el uso del sitio sea más coherente, especialmente si hay muchas tareas que se
realizan al mismo tiempo. Tome el ejemplo de un icono en el que se expande para abrirse,
en lugar de que simplemente aparezca una nueva ventana. Estas pequeñas transiciones
pueden hacer una gran diferencia cuando el usuario está atrapado en lo que está
haciendo y puede ayudar a establecer conexiones emocionales.

 Señales y pistas: Una animación es excelente para indicar que una tarea se ha
completado y, en relación con el punto anterior, animaciones similares son excelentes
para dibujar conexiones entre dos tareas. Una animación bien pensada puede incluso
sugerir acciones para el usuario: si un elemento se "agrega" de manera inteligente, el
usuario podría adivinar que también lo sería “eliminado”.

Las animaciones pueden agregar vida a la navegación, el fondo del sitio y las transiciones entre
páginas también tenemos que tomar en cuenta que una página sobrecargada de animación
también distraería al usuario poder concentrarse en la información principal de la página web.
 31

6.6 Configuración por defecto

En términos estadísticos, los usuarios rara vez cambian la configuración predeterminada, incluso
si las opciones de personalización están disponibles. Eso significa que depende de ti hacerlo
bien la primera vez.

Como diseñador de UI, usted tiene la responsabilidad de prever cómo el usuario desea su
configuración antes de que incluso use el sitio. Sin embargo, hay una ventaja: puede usar la
configuración predeterminada para instigar las acciones que desea que el usuario siga. Living
Social adopta un enfoque inteligente al hacer que la audiencia predeterminada para las ofertas
de correo electrónico sea "para todos", lo que alienta a los usuarios a enviar ofertas a personas
del otro género (lo que presumiblemente ayuda al objetivo de adquisición de usuarios de la
empresa).

Dicho esto, sea amable y facilite que el usuario cambie su configuración predeterminada. Crear
un proceso complicado para mantener al usuario en la configuración predeterminada solo los
frustrará y los alejará. Después de todo, no todas las usuarias pueden querer seguir recibiendo
ofertas para la ropa de los hombres en su bandeja de entrada.

Asegúrese de usar solo la configuración predeterminada cuando su back-end pueda realizar

conjeturas calificadas con respecto a las preferencias del usuario o que sepa que esos valores
predeterminados benefician al usuario. Cuando se trata de campos de entrada, no utilice valores
predeterminados para nada que requiera que el usuario lo piense (por ejemplo, suscribirse a
boletines informativos o aceptar los términos de uso).

6.7 Acciones Guiadas

La gente, en general, está abierta a la sugerencia. Porque puedes fomentar una mayor
participación, interacción e incluso comentarios, siempre y cuando la acción que estás sugiriendo
no sea engorrosa.
 32

Cómo usar correctamente la acción guiada es LinkedIn. Cuando el usuario abre la página, por lo
general hay indicaciones para acciones, por ejemplo, que respaldan las habilidades de sus
conexiones. A la gente le gusta ayudar a sus amigos, por lo que esta acción funciona porque es
algo que quieren hacer, pero es posible que no lo hayan pensado por su cuenta (además, crea
una participación más profunda en el sitio).

6.8 Claridad Visual y Claridad del Lenguaje

Si bien esto debería explicarse por sí mismo, lo tocaremos aquí para recordarle que no pierda de
vista. Una de las marcas de una mala interfaz de usuario es la confusión, que generalmente
resulta de cuando los controles, funciones u otros elementos no se explican completamente.

Si el usuario no entiende algo, lo ignorarán. Si desea aprovechar al máximo su interfaz de

usuario, asegúrese de que todo esté claro. Solo como una guía general para la claridad:

 La simplicidad es la clave: no sobrecargue al usuario con demasiadas funciones o

controles.

 Revise su redacción: la redacción adecuada puede resolver problemas de confusión,

mientras que la mala redacción los causa.

 Evita las contradicciones: como verás en el ejemplo de StackExchange, si el botón dice

"Elegir archivo", no lo llames "clic en buscar". Mantener el lenguaje consistente.

 Evite exagerar: sea breve; una explicación excesiva puede producir el efecto contrario
al deseado.

 Explicaciones de desplazamiento: no hay mejor manera de aclarar la confusión sobre

los íconos sin saturar la pantalla. Podemos tomar a Gmail es un buen ejemplo del uso de
explicaciones flotantes para explicar íconos algo ambiguos.
 33

6.9 Principio MAYA

El famoso diseñador industrial Raymond Loewy acuñó la expresión "Más avanzado pero
aceptable" (MAYA) para explicar que el público es naturalmente resistente al cambio y no
aceptaría una innovación radical nueva, incluso si fuera una solución mejor.
La sabiduría del principio MAYA se aplica al diseño web, es decir, asegúrese de incluir
referencias a las experiencias con las que los usuarios ya están familiarizados. Esto no quiere
decir que un diseño web no deba ser innovador y empuje los límites; sin embargo, si lo hace,
también debe incluir tres cosas:

 Metáforas visuales familiares: las acciones en su sitio deben tener raíces en las tareas
reales con las que los usuarios tienen experiencia. Por ejemplo, los usuarios adoptaron
las funciones de desplazamiento y control deslizante cuando se introdujeron porque se
parecían a hojear páginas o cuadernos.

 Opciones de respaldo tradicionales: los diferentes usuarios tendrán diferentes niveles de

comodidad. Ofrecer una opción “tradicional” además de una nueva y diferente les dará a
los usuarios una sensación de seguridad, incluso si nunca la usan. Por ejemplo, Etsy
tiene una opción animada de búsqueda por color” complementada por una barra de
búsqueda tradicional.

 Alcance sensible: en otras palabras, no reinvente la rueda. Innecesario las adiciones

consideradas como "nuevas", "mejores" o "mejoradas" solo frustran a los usuarios. Si
estás haciendo un esfuerzo por crear algo innovador, asegúrate de que sea realmente
vale la pena.

Para ir cerrando solo nos queda decir que una Interfaz es más que imágenes bonitas: es un
medio a través del cual los usuarios pueden lograr sus objetivos en su sitio web. Hecho
correctamente, los controles de entrada pueden agregar un divertido crédito fotográfico: „Tweel”.
Wikimedia. La navegación debe tener forma alrededor del contenido, como un agradable bulevar
que guíe a los usuarios a su destino. Las animaciones agregan vida a la interfaz, y las acciones
 34

guiadas y las configuraciones predeterminadas ayudan a leer la mente del usuario sin sentirse
invasivo.

7 Herramientas para el desarrollo de Mockups

Hoy en día contamos con varias herramientas para poder realizar sketch, wireframes,
mockups o prototipos, pero pocas son las herramientas que nos permiten resolver estas
cuatro etapas peo como vimos antes un diseño que podamos realizarlo con una
herramienta desde un wireframe. En este capítulo mostraremos algunas herramientas
que nos serán muy utilices para realizar nuestros diseños webs, cada una tiene una
característica muy particular para poder trabajar con ellas.

7.1 Balsamiq

Balsamiq podríamos decir que es una aplicación/servicio pues no sólo cuenta con una
aplicación nativa para OS X (también Windows y Linux) sino también con una versión
web, de modo que podemos trabajar desde cualquier lugar. Y su finalidad no es otra que
ayudar al desarrollo de aplicaciones con una herramienta que facilita la creación de
mockups adicionando que esta herramienta nos ayudara realizar sketch y wireframes
nos ayudaría a la realización de mockups, pero nos sería complicado y llegaríamos a
tener un mockup de baja fidelidad.

Esta herramienta también nos ayuda a poder realizar la exportación de nuestros

mockups en distintos formatos además de esto también nos permite tener apoyo con
herramientas como Jira, Confluence, Google drive entre otros es una herramienta con la
cual tienes varias plantillas a disposición listas para poder usarlos . (Balsamiq, 2018)
 35

Figura 10: Balsamiq Página de inicio

7.2 Axure RP

Axure RP es una aplicación de escritorio que se utiliza para crear mockups, prototipos
interactivos, diagramas de flujo y documentación para las aplicaciones comerciales, sitios web
y aplicaciones móviles propuestas. (AXURE, 2018)

Se centra en las características de flexibilidad que ofrece para construir en todo el espectro de
fidelidad visual e interactiva de baja a alta, y en potenciar a los no programadores, dando acceso
a su gama completa de funciones a través de una interfaz amigable de arrastrar y soltar.

Cada proyecto de equipo consta de una copia central del proyecto, denominada "directorio del
equipo", que administra los recursos compartidos y una o varias copias locales, cada una de las
cuales pertenece a un coautor que contribuye al proyecto del equipo. El directorio del equipo de
un proyecto de equipo puede estar ubicado en Axure Share, un servidor de versiones o una
unidad de red.
 36

Cada usuario puede consultar las páginas y otros atributos del proyecto (maestros,
generadores) para editar en su copia local. Cuando una página está desprotegida para un
usuario, ningún otro usuario puede editar esa página. Cuando se completan los cambios, el
usuario puede registrar sus cambios en el proyecto del equipo. Los cambios registrados
pueden ser vistos por otros usuarios, y las páginas y los atributos registrados se liberan para
que otros coautores los revisen para su posterior edición.

Figura 11: Axure RP página de inicio

7.3 JustinMind

Una herramienta de prototipado para todas las pantallas, Diseñar wireframes y prototipos de
aplicaciones móviles y web sin una sola línea de código. La herramienta fácil de usar de
JustinMind viene con kits de IU para web, iOS y Android, además de todas las interacciones
que necesita para ir desde el concepto hasta el prototipo de alta fidelidad.
Esta herramienta también puede trabajar integrada a Jira con lo cual lo hace más atractiva para
el diseño de los Mockup, pero no solo esto esta herramienta también puede llegar a realizar
prototipos y estos ya estarían relacionados con las experiencias del usuario más que con la
interfaz de usuario.
 37

Figura 12: JustinMind página de inicio

7.4 Lucidchart

Esta es una herramienta muy atractiva no instalas ningún programa trabajas vía web tiene un
buen sistema de seguridad, puedes llegar a realizar wireframe, mockups sin ningún problema
también puedes integrar esta herramienta con Confluence, Jira, Bitbucket, G Suite, MS Office,
Slack y más.
Esta herramienta cuenta con varias plantillas para diferentes proyectos, pero para tener las
plantillas para prototipos de interfaz UI tenemos que tener una versión premium para poder
acceder a ellas ya que estas no están activadas para una versión de prueba y solo se puede
tener tres plantillas.

Figura 13: Lucidchart página de inicio

 38

7.5 Ninjamock

Utilizar Ninjamock como herramienta de armado de wireframes es la forma más rápida, mejor y
más divertida de crear maquetas y armazones de aspecto profesional. Para que empecemos a
diseñar. En solo unos minutos podrás hacer tu primer wireframes. Nos servirá para utilizar las
funciones avanzadas para su wireframe o mockup. También nos permite realizar la colaboración
con nuestro equipo en tiempo real. Gestiona tus proyectos y sigue el progreso.

Figura 14: Ninjamock página de inicio

En cuanto de herramientas se hable contamos con un abanico de posibilidades a mi criterio estas

herramientas ya mencionadas anteriormente nos permitirán realizar nuestros diseños de
mockups de páginas web e incluso ir un mas allá no hay una regla para elegir una herramienta
así que tienen que elegir la herramienta que más se ajuste a lo que quieran realizar.

8 Conclusiones

En el entendido que revisamos toda la información contenida en esta monografía sobre

como diseñar mockups para páginas web con las mejores prácticas de Diseño nos hace
comprender que el diseño de una página web no llega a ser simplemente un lugar donde
 39

mostramos información, sino que es el lugar donde cobra vida nuestra información vertida
para que así el usuario se sienta que esta el lugar correcto, con la información correcta y
relevante a lo que está buscando.
En el momento que tenemos que elegir una herramienta tenemos que tener en claro que
etapa de diseño estamos queriendo representar si es un sketch, wireframe, mockups o un
prototipo, ya que como pudimos ver las herramientas están ahí para que estas nos puedan
ayudar, pero si no tenemos bien pensado lo que queremos hacer nos llegara a perjudicar
en nuestro proceso.
La combinación de los elementos para una elaboración de página web y elegir la
herramienta correcta nos llevaría a tener un buen producto.

9 Bibliografía

AXURE. (27 de 09 de 2018). Obtenido de AXURE:

https://www.axure.com/support/reference/intro
Balsamiq. (31 de 09 de 2018). Obtenido de Balsamiq: https://docs.balsamiq.com/desktop/

Carrie Cousins, J. C. (2017). WEB DESIGN BOOK OF TRENDS.

maria Gloria del ri, m. E. (2007). Modulos Part Design, Wireframe & Surface Design,Assembly

Design y Drafting. Madrid: editorial Tebar.

Theo Mandel, P. (1997). The Golden Rules of User Interface Design. En P. Theo Mandel, The

Elements of User Interface Design (págs. 1-2).

Toni Granollers i Salteveri, J. l. (ontubre 2005). Diseño de sistenas interacativos centrados en el

usuario. Barcelona: editorial Eureca Media.

Tate, T. (2010, junio 29). Concerning Fidelity in Design. Concerning Fidelity in Design.