3 Interfaces Web Stefania Trisotti

CLASE 1
Webinar
Diseño interfaces web
Abordando proyectos desde la estrategia hasta la forma.
Estefanía Trisotti
@TRI_
#FormaciónEBusiness
Día 1 Día 2 Día 3
Presencial Presencial Virtual
Experiencia de Responsive Design Revisar temas que

Usuarios puedan quedar
Diseño de Grillas pendientes de los días
Diseño Centrado en el
anteriores
Usuario Wireframes de Baja
Intensidad
Usabilidad Consejos prácticos
Relevancia de la UX Wireframes de Alta

Credibilidad en la web
Intensidad
UX aplicado en web
Look & Feel Paso a desarrollo
Metodología Diseño
Encontrar inspiración Análisis
Personas
Diseño de Iconos
Escenarios
Cardsorting Color
Benchmark Tipografía
AI Dirección de Arte
Fotográfico
Diagramas Flujo/Clases
Referencias
Referencias
INTRODUCCIÓN
Objetivos del curso
Entender el proceso de diseño implícito en un proyecto digital
Comprender ciertas claves para realizar proyectos digitales eficientes
Ver cómo el diseño puede marcar una gran diferencia para realizar
negocios exitosos
Revisar teoría y luego hacer ejercicios prácticos
Analizar ejemplos
Lo que los usuarios no vemos
Diseño
Interfaz
Prototipos
Estructuras, navegación, etc.
Ideas
Desarrollo conceptos e hipótesis
Definiciones
Necesidades usuario / Objetivos
User User-Centered
Experience / UX Design / UCD Usability
Experiencia de Usuarios Diseño Centrado en el Usabilidad
Usuario / DCU
UX y USD
Tiene que ver con diseñar para personas
UX USD
User Centered Design
User Experience
Experiencia de Usuarios Diseño Centrado en el Usuario
En ambos casos, la idea está en considerar al usuario

en cada una de las etapas de creación de un producto.
¿Son lo mismo?
Algunos dicen que sí,
UX
User Experience
otros discrepan con
algunas diferencias. USD
No existe un
concepto único!
La experiencia de usuario es el conjunto de El Diseño Centrado en el Usuario es una

factores y elementos relativos a la filosofía de diseño que tiene por objetivo la
interacción del usuario, con un entorno o creación de productos que resuelvan
dispositivo concretos, cuyo resultado es la necesidades concretas de sus usuarios
generación de una percepción positiva o finales, consiguiendo la mayor satisfacción
negativa de dicho servicio, producto o y mejor experiencia de uso posible con el
dispositivo. mínimo esfuerzo de su parte.
Todos conocemos productos que
nos facilitan o nos complican
Todos conocemos productos que
nos animan o nos frustran
Los UX o Diseñadores Centrados en el Usuario,
trabajan para crear estas experiencias.
¿Y la Usabilidad?
"Usabilidad es la efectividad, eficiencia y satisfacción con la

que un producto permite alcanzar objetivos específicos a
usuarios específicos en un contexto de uso específico"
(ISO/IEC 9241-11)
Usabilidad
“La usabilidad es un "atributo de calidad que mide lo fácil
que son de usar las interfaces web"
(Jakob Nielsen).
"La usabilidad realmente significa estar seguro de que algo

funciona bien: que una persona con habilidades promedio (e
incluso por debajo del promedio) pueda utilizar una cosa (ya
sea un sitio web, un jet de combate o una puerta rotatoria)
para su intención sin terminar enormemente frustrado"
(Steve Krug)
“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”
“Disciplinas relacionadas con la usabilidad”

http://olgacarreras.blogspot.com/2007/01/disciplinas-relacionadas-con-la.html
http://www.usableyaccesible.com/images/disciplinas_UX_2013.jpg
Facetas de la Experiencia de Usuario
(UX honeycomb – Peter Morville)
Pero más importante que las definiciones, lo importante es entender
¿POR QUÉ ES IMPORTANTE

APLICAR DISEÑO CENTRADO EN
LOS USUARIOS?
Porque así podemos lograr una buena experiencia de
una marca con sus consumidores
Al presentar información de manera clara y lógica,
ayudaremos a los usuarios a entender/usar tus productos
20% de pérdidas...
100.000 millones de
dólares!
Las deficiencias del diseño de productos pueden derivar

frecuentemente a pérdidas de mercado
Un diseño efectivo logra que el usuario no se confunda,
por ende se evita una frustracción.
El crecimiento e inovacción de una empresa depende en
gran parte de la creación de nuevos productos
Podemos mejorar la posición de una empresa frente a
sus competidores
La forma en que una empresa presenta sus productos
dice a sus clientes acerca de quién es
UX aplicado en la Web
UX para Web
Los sitios/aplicaciones
web son en sí medios
complejos, que al carecer
de UX, pueden hacer que
los usuarios se sientan
“tontos” por no poder
realizar una tarea
específica.
(Y no hay forma más fácil

de alejar a usuarios que
haciéndolos sentir tontos)
UX para Web
Los sitios/app web funcionan

como autoservicio, no existen
personas ni guías que nos
ayuden a usarlas:
El usuario debe inferir sólo

dónde encontrar lo que
busca, en base a la
experiencia que tenga.
The Elements of User Experience

“The Elements of user experience”
UX para Web
Si no cumplen con
estándares de experiencia de
usuarios, puede causar
frustración en el usario.
Lograr entender los que las

personas quieren o necesitan
ha sido de baja relevancia en
la historia del diseño web.

“The Elements of user experience”
¿Por qué no se ha considerado
ampliamente la Experiencia de usuarios?
Pocos conocimientos relativos a la disciplina
Muchos sitios aparecen con la idea de que el éxito consiste en ser

los primeros del mercado (si luego esto funciona o no, es algo que
quizás se evaluaría más tarde)
Esa competencia de traer algo nuevo o más features (aplicable

también para muchos otros tipos de productos, como móviles, etc.)
hace que los productos o servicios se vuelvan más complejos y
difíciles de usar.
Sin embargo...
Cada vez con más frecuencia, las empresas se han dado cuenta
de la importancia de proporcionar una experiencia de usuarios de
calidad a sus usarios.
La Experiencia de Usuarios
es escalable a todo tipo de proyectos
Si bien hay una diferencia entre un sitio basado en ventas online, y otro
de información básica (por ejemplo el sitio de un restaurant) que sólo
otorga información acerca de sí mismos, es relevante que ambos
comuniquen de manera efectiva lo que necesiten comunicar.
Si los usuarios no encuentran/entienden lo que necesitan, están a un
click de encontrarlo en otro lado y no volver.
O bien creer también que tu empresa es igual de complicada.
ROI
Return of Investment / Retorno de la Inversión
¿Cómo medimos efectividad en Web?
Es un porcentaje que se calcula en función de la inversión y los beneficios

obtenidos.
En términos monetarios ¿Cuánto de mi inversión retorna a mi?
También puede ser traducido como el valor de la compañía, más allá de lo

monetario, bajo un tipo de medición específica.
Tasa de Conversión
Conversion Rate
Al tener un registro de cuántos

usuarios están cumpliendo un
objetivo, podremos también medir
si nuestro sitio está realizando
efectivamente las metas que
buscamos.
Conversion Centered Design
USD
CCD
Conversion Centered Design
La diferencia fundamental es el foco de la conversión, que en marketing

consiste en convencer al usuario, directamente con los objetivos de negocio.
Metodología de Diseño
Good design is a lot
like clear thinking
made visual.
— EDWARD TUFTE
Faces Generales del Proceso de Diseño
Estrategia Diseño de Diseño de

de Diseño Interacción interfaces
Metodología Proceso de Diseño
Estrategia Diseño Diseño Estrategia

de Diseño de interacción de Interfaz de Diseño
Realizar
Definir Idear Construir Analizar
Prototipos
Iteraciones
Zurb.com
DEFINIR
Definir necesidades del usuario

Definir el problema / estátus del proyecto
Definir
Evaluar oportunidades
Definir objetivos y metas
Plan de posicionamiento frente a la competencia
Definir
Personas
¿Qué son las “Personas”?
(o Modelos de Usuarios / Perfiles de Usuarios)
Es un método de investigación de usuarios, donde se construyen

arquetipos de perfiles de usuarios ficticios, los cuales representan las
necesidades y el rango de nuestros usuarios tipo
Muestran diferentes patrones de conducta y entornos
Se realizan ya que a veces al diseñar, perdemos la medida de las

personas reales para las cuales estamos diseñando
¿En qué nos ayuda la creación de Personas?
Nos dan contexto
Al identificar usuarios tipo con una cara y foto, nos es más fácil
mantenerlos presentes durante el proceso de diseño
Se realizan ya que a veces al diseñar, perdemos la medida de las

personas reales para las cuales estamos diseñando
Nos ayudan a:
› Crear Escenarios
› No diseñar para nosotros mismos
› Tener en mente usuarios “reales” con características específicas
› No detenernos demasiado en casos extremos
Ejemplo:
Padres Universitarios
Alumnos enseñanza básica Profesores
Alumnos enseñanza media
Contenidos que podríamos considerar
Objetivos (motivaciones, etc)
Actitudes (modelos mentales, etc.)
Conocimientos técnicos (relacionado a lo digital)
Trabajo
Entorno
Conocimientos técnicos
Frustaciones (obstáculos)
Otros
http://mystrokapp.wordpress.com/2011/06/09/campus-compass-user-persona/
http://www.smartinsights.com/marketplace-analysis/customer-analysis/web-design-personas/
Ejercicio Rápido
Estoy pensando en la creación

de un servicio online de
impresión de álbumes de
fotos personalizadas
(impresión de alta calidad...)
¿Quiénes podrían ser

posibles clientes?
¿A qué se dedican?
¿Qué conocimientos
técnicos tienen?
¿Cuáles son sus obstáculos?
Etc...
Definir
Escenarios
¿Qué son los Escenarios?
Son un método de diseño que ayuda

a desarrollar ideas que implican
interacciones con múltiples
usuarios por un período de tiempo.
Los escenarios nos dan contexto

acerca de para quienes estamos
diseñando.
Creación de Escenarios
Se define un equipo de personajes que usarán el producto o servicio que

estamos desarrollando
Considera detalles personales de cada personaje
Se identifican momentos claves en que los usuarios interactuan con

nuestro producto o servicio
Puede realizarse como storyboard, y ser corroborado por todo el equipo
http://lmc.gatech.edu/~agrosz3/masters/design/scenarios-and-storyboards/
http://lmc.gatech.edu/~agrosz3/masters/design/scenarios-and-storyboards/
http://www.smartinsights.com/marketplace-analysis/customer-analysis/web-design-personas/
Mariana
? ? ?
Mariana recibió fotos de
alta calidad que le envió
la fotógrafa de su
Matrimonio. Ya quiere
verlas en papel y
mostrárselas a familiares
y amigos, pero no tiene
demasiado tiempo para
realizar un libro.
Definir
Cardsorting
¿Qué son los Cardsorting?
Es una técnica de categorización de contenidos centrados en el usuario
Permite establecer patrones sobre cómo los usuarios esperan encontrar

un contenido o una funcionalidad
Tipos de Cardsorting
ABIERTOS CERRADOS
Usuarios pueden agrupar Usuarios reciben

libremente, en el número categorías predefinidas
de conjuntos que ellos
estimen convenientes, sin
categorías previas.
Tipos de Cardsorting
I N D I V I D UA L C O L E CT I V O S
Un usuario representa a un Un grupo variado de

perfil o segmento usuarios ordena las
tarjetas por consenso.
Pasos Previos al Cardsorting
Selección Selección Preparación de

de Contenidos de Participantes las Tarjetas
Generalidades y Representantes del Entre 30 y no más

potenciales público objetivo de 100 (entre 20 y
contenidos 45 es el ideal)
Durante el Cardsorting
Comunicar claramente los objetivos
Establecer clima de confianza
Aclarar que no hay sólo una manera correcta
No entregar contenidos ordenados
No intervenir ni presionar
Poner atención a las discusiones
Atender consultas
Registrar adecuadamente los resultados
Ejemplo Rápido
Noticias
Ofertas
Ideas Mi Cuenta
Crear Libro
Precios
Contacto
Galería
Formas
Envíos Acerca de
de Pago Nosotros
Definir
Benchmark
¿Qué es un Benchmark?
Un benchmark es un análisis comparativo de productos o de servicios

de la competencia, para un producto existente o para el diseño de un
nuevo producto.
Se evalúa cómo funcionan y vemos qué beneficios podemos nosotros

obtener.
No se trata en ningún caso de copiar (al menos, literalmente).
Ejemplo
Ejemplo
(Jerarquías tipográficas)
Ejemplo
(Estructura de Navegación)
Ejemplo
(Uso del color)
Ejemplo Recursos
IDEAR
Desarrollo de ideas y conceptos
Idear Bocetos y dibujos de baja intensidad
Se abren preguntas e hipótesis
Idear
Arquitectura de la Información
¿Qué es la Arquitectura de la Información?
“Es la disciplina encargada de estructurar, organizar y etiquetar

los elementos que conforman los entornos informacionales
para facilitar de esta manera la localización (o el acceso) de la
información contenida en ellos y mejorar, así, su utilidad y su
aprovechamiento por parte de los usuarios”
(Pérez-Montoro 2010).
http://relevanciamovediza.wordpress.com/
Arquitectos de la Información
“El arquitecto de información es la

persona que debe identificar la misión
(los objetivos) y la visión (las
expectativas de los usuarios) de la
pagina web, determinar los contenidos y
funcionalidades de la página, facilitar el
acceso mediante sistemas de
organización, etiquetado, navegación y
búsqueda y planificar en previsión de
futuras modificaciones y crecimiento de
la página”
(Morville y Rosenfeld, 1998)
http://arquitecturadelainformacion.com/
Componentes o anatomía de la AI
Los sistemas, estructuras o

recursos para estructurar una
web y que definen la AI de un
sitio se llaman componentes o
anatomía de la arquitectura de
información y son los siguientes:
• Sistemas de organización
• Sistemas de etiquetado
• Sistemas de navegación
• Sistemas de búsqueda
• Vocabularios o lenguajes
AI Visual
Vocabulary
http://www.jjg.net/ia/visvocab/
Ejemplos
elementos
visuales AI
Ejemplos
elementos
visuales AI
Mapa de Navegación
Mapa de Navegación
Mapa Metal
(Mind Map)
palabras dibujos
ideas conceptos
tareas ...
Mapa Conceptual
Mapa de Accesos
Herramientas: Papel y Lápiz
Herramientas: OmniGraffle
OmniGraffle
Herramientas: balsamiq
Idear
Diagramas de Flujos y Clases

¿Qué son los Diagramas de Flujo y los de Clases?
Diagramas de Flujo Diagramas de Clase

(o de Interacción) o UML
Es la representación de Los diagramas de clases especifican

secuencias que componen un qué clases intervienen en el desarrollo
sistema, para facilitar el del sistema y cómo se relacionan.
entendimiento de información
y la relación que mantiene A diferencia de los de interación, éstos
entre las diferentes partes. modelan la parte estática y no la
dinámica.
Diagramas de Flujo Diagramas de Clase
Ejemplo Diagrama de Flujo
Ejemplo Diagrama de Flujo
Ejemplo Diagrama de Clases
REFERENCIAS
REFERENCIAS
The Elements of User

Experience
Jesse James Garret - 2002
(disponible también en PDF)
REFERENCIAS
Business Model
Generation
Alexander Osterwalder y
Yves Pigneur - 2011
REFERENCIAS
Gamestorming: A
Playbook for
Innovators,
Rulebreakers, and
Changemaker
Dave Gray
REFERENCIAS
A Practical Guide to
Designing for the Web
Mark Boulton
REFERENCIAS
The Strategic Web

Designer: How to
Confidently Navigate
the Web Design
Process
Christopher Butler
REFERENCIAS
The Ultimate
Guide To
Conversion
Centerd Design
Unbounce (PDF)
unbounce.com/resources
REFERENCIAS
Design Thinking
Business Innovation
MJV Press (PDF)
REFERENCIAS
Libros que no hay que comprar...
¡Gracias!
Estefanía Trisotti
@TRI_
www.interlat.co www.upb.edu.co www.cmlatam.co
Usa este hashtag:
@interlat
@UPBBogota
@cmlatam
CLASE 2
Webinar
Estefanía Trisotti
@TRI_
Experiencia de Diseño de Grillas Revisar temas que

Usuarios puedan quedar
Responsive Design pendientes de los días
anteriores
Usuario Wireframes de Baja
Intensidad
Usabilidad Consejos prácticos
Relevancia de la UX Wireframes de Alta

Credibilidad en la web
Intensidad
UX aplicado en web
Look & Feel Paso a desarrollo
Metodología Diseño
Encontrar inspiración Análisis
Personas
Diseño de Iconos
Escenarios
Cardsorting Color
Benchmark Tipografía
AI Dirección de Arte
Fotográfico
Referencias
Referencias
Iterar
Prototipos Concordancia con todas las personas involucradas
Obtenemos respuestas al eliminar alternativas
Se cierran posibilidades y toman decisiones
Idear
Grilla y Estructura
¿Qué es una Grilla?
(o retícula, malla, cuadrícula)
Diseño de Grillas
La retícula o Grilla (Grid en inglés),

es una herramienta muy útil que
nos puede asegurar mayor
organización y equilibrio en
nuestra composición al momento
de diseñar.
En el contexto del diseño gráfico una grilla es un instrumento para
ordenar elementos gráficos del texto y de las imágenes
Orden y Consistencia
La utilización de grillas no es algo nuevo
Búsqueda de un
sistema de medidas
Hombre de Vitruvio
Canon de las
proporciones humanas-
Leonardo DaVinci
Búsqueda de un
sistema de medidas
La Gioconda
Proporción Aurea
Leonardo DaVinci
La divina proporción!
Búsqueda de un
sistema de medidas
Modulor
Sistema de medidas
detallado por Le
Corbusier (1887-1965)
Búsqueda de un
sistema de medidas
En la Arquitectura
Ejemplo de utilización de
una grilla para la
ubicación de los ejes
estructurales en un plano
arquitectónico.
Búsqueda de un
sistema de medidas
En la Arquitectura
Ejemplo de utilización de
una grilla para la
ubicación de los ejes
estructurales en un plano
arquitectónico.
Búsqueda de un
sistema de medidas
NYC Grid Plan

Ejemplo de grilla, mapa
de Nueva York
Búsqueda de un
sistema de medidas
Marcas
Logo de Braun, por
Will Münch,1934.
Búsqueda
de un
sistema de
medidas
Afiches
basados en
Grillas
Müller-Brockmann
(1914 -1916)
Impulsor del uso de
retícula (Escuela
Germano Suiza de
Diseño)
Grillas para Web
El sistema de grillas ha resurgido los últimos años en el diseño web
Esta técnica de diseñar sitios web con grillas aún es desconocida por
muchos diseñadores web
Hoy en día es difícil pensar en comenzar un diseño sin tener como base
una grilla que respalde nuestra creación.
Al diseñar en base a sistemas de grillas, podemos no sólo lograr
interfaces más bellas y legibles, sino también más usables
Una Grilla no limita la creatividad!
Podemos usar más de un tipo de grilla en un sitio, en el caso de ser
necesario
Fijémonos en los márgenes
Fijémonos en los márgenes
Espacio Vacío
Más flexibilidad en columnas, menos en horizontes
¿Nos sirve realmente esta grilla?
Las grillas son una ayuda, no una garantía
Hagamos con las guías un juego de relaciones
Algunos recursos para diseñar con Grillas...
http://978.gs/
http://978.gs/
http://978.gs/
http://www.29digital.net/grid/
http://modulargrid.org/#app
http://www.awwwards.com/grid-based-web-design-resources.html
http://www.subtraction.com/pics/0703/grids_are_good.pdf
http://www.subtraction.com/pics/0703/grids_are_good.pdf
Hagámos un ejemplo para aplicar una grilla desde cero
Responsive Design
O Diseño Web Adaptivo
Responsive Design
Diseño WebAdaptivo
Son una serie de practicas

aplicadas al diseño web que
le permiten al usuario
acceder a un sitio web
desde diferentes medios
como dispositivos mobiles,
tablets, pantallas wide y
diferentes resoluciones en
los computadores.
Responsive Design
Diseño WebAdaptivo
Si ya estamos pensando en que

todo diseño web debe estar
centrado en la experiencia del
usuario, es de alta relevancia
pensar en que la experiencia será
positiva sin importar las
características del dispositivo con
que estás accediento a un sitio.
Abandonamos los anchos fijos por fluidos (por ejemplo width: 960px)
Es decir, pensamos en proporciones más que números
Ejemplo de grilla adaptable
Veámos un ejemplo en el browser: http://thenextweb.com/
Resultados / Beneficios
Eficiencia a menor costo
Se diseñan sistemas, en vez

de modelos estáticos (px)
Mejor experiencias del usuario
Amigable con tendencias a futuro
Responsive Design:
¿Recomendable para todo(s)?
Depende. Se deben considerar los siguientes puntos:
Contexto del Proyecto
Presupuestos y fechas límites
Conocimientos del equipo técnico
Expectativas del cliente
Navegación
Navegación
Es el proceso por el cual

accedemos a determinados
contenidos, por medio de un
navegador o browser
organizado por hipertexto.
http://mosaic.uoc.edu/2012/10/01/propuesta-de-arquitectura-de-la-informacion-de-un-sitio-web/
http://mosaic.uoc.edu/2012/10/01/propuesta-de-arquitectura-de-la-informacion-de-un-sitio-web/
Los contenidos deben ser fáciles de encontrar
La navegación debe ser consistente
¿Podemos inferir qué hay dentro de cada etiquetado?
Los etiquetados o nombres deben ser obvios para el usuario
¿¿De veras debo leer todo eso??
Menos es más
Recordémosle al usuario dónde está
Navegación Estado Normal
Hover ítem principal
Hover ítem secundario
Hagámos un ejercicio práctico para mejorar
la usabilidad del sitio “Medical”
http://medicalproinfo.businesscatalyst.com/
Lo que haremos:
01 Reúnanse en parejas
02 Revisen el sitio de Michael en conjunto

(quedémonos por ahora sólo en la
portada), en base a temario del siguiente
slide.
03 Conversemos en conjunto sus

impresiones y anotaciones
¿A qué consensos llegaremos?
04 En base a las conclusiones, hagámos un

upgrade de diseño rápido de la portada, y
luego comparemos.
Conversen, y analicen en conjunto los
siguientes aspectos del sitio:
¿Cuál es su primera impresión acerca del sitio?

Emoción que evoca, de qué creen que se trata, etc.
¿Qué aspectos del sitio les parece que están bien aplicados?
Arquitectura de la Información, Jerarquías, Tipografías, Fotos, Estilos, Usabilidad, si
corresponderá al público que va dirigido... lo que estimen.
¿Qué aspectos del sitio les parecen que podrían mejorar?
¿Cuáles son para uds. los contenidos más relevantes a comunicar?
¿Les parece que el estilo de grilla y navegación en general es adecuado?

, de lo contrario, ¿Qué ideas aplicarían?
Idear
Wireframes Baja Intensidad

Idear
Wireframes Alta Intensidad

Diseño de interfaz y Desarrollo
Construir Reunión de todas las conclusiones de etapas previas
Propuestas visuales y de estilos
Iteracción de últimas variaciones
Paso de diseño de interfaz a Front-end
El producto se vuelve tangible
Temas funcionales son afinados
Construir
Diseño de Interfaz
Color
Color
En el diseño web el color

es una herramienta
imprescindible que
poseemos para poder
captar la atención del
usuario.
Color
Hay una relación directa

entre el color y los
elementos de una
composición, alterar el color
de un objeto puede
repercutir en la valoración
jerárquica que se haga, y la
emoción que transmite.
Psicología del color
Psicología del color
Ejemplo de selección de colores para una app
Debemos ser fieles a la identidad corporativa de la marca
Debemos ser fieles a la identidad corporativa de la marca
Logremos un buen contraste y orden de jerarquías
¿Cuál es la norma?
¿Cómo aplicaremos los colores a nuestra interfaz?
¿Cuál es la lógica del color?
Pongamos énfasis en los enlaces y elementos críticos de navegación
Limitemos nuestras opciones
Regla del
60 - 30 - 10
Color Color Color

primario acentos secundario
¿Cuántos colores sería adecuado considerar?
Tipografías
Familias Tipográficas
La tipografía para
cada diseño web
depende del
propósito del sitio y
su creador debería
elegirla teniendo en
cuenta la legibilidad
e identidad de lo que
estamos creando.
Familias Tipográficas
Su elección y combinación es
fundamental en términos de
usabilidad y comunicación.
Clasificación tipográfica
Serif o serifas
Serif o serifas
Serif o serifas
Sans-Serif
Sans-Serif
Sans-Serif
Sans-Serif
Script
Script
Script Font
Script Font
Sc!pt Font
Script
Display
Display
Display
Display
Antes, debíamos usar sólo
tipografías “estándar” para
web, cualquier otra tenía que
ser cargada como imagen.
Esto era para asegurar que

ellas se vieran bien en todos
los navegadores y sistemas.
Aplicación de tipografías para web
PERO ESO CAMBIÓ!
Las tipografías web “seguras” son
cosa del pasado. Hoy podemos
sincronizar nuestros sitios con
muchísimas tipografías de forma
fácil y amigable.
Aplicación de tipografías para web
(pero no abusemos)
Recomendaría
No más de 3 tipografías
(considerando que cada una tiene variaciones)
¿Cuántas tipografías serían adecuadas para mi sitio?
Debemos fijarnos en los tamaños y proporciones
Espacios y márgenes (interlineado, espacio entre caracteres, etc).
Debemos lograr un buen contraste
Coherencia con la marca o lo que se quiera transmitir
¿Dónde encontrar
tipografías especiales para web?
Google Web Fonts
Filtros de búsqueda Google Web Fonts
Estilos tipográficos, Google Web Fonts
Estilos tipográficos, Google Web Fonts
fontsquirrel
Myfonts.com
Myfonts.com
Iconografía
Iconografía
Los iconos son gráficos que

representan un área o sección de
tu página pero de una manera
compacta, visual, ayudan a que
tu diseño sea mas limpio (sin
abusar de la cantidad) y son
agradables a la vista del usuario
Ejemplo de aplicación y uso de iconos
Buscar y corroborar conceptos
http://thenounproject.com/
http://www.pixeden.com/icons-set
http://www.iconfinder.com/
Dirección de Arte Fotográfico
Dirección Fotográfica
Una buena imagen en un sitio

web puede marcar una gran
diferencia, ya que engloba
muchos conceptos de marca,
comunicación y emocionales.
¿Qué conceptos entontramos dentrás de estas fotos?
Debemos lograr coherencia con la marca
Imágenes con contraste
Imágenes con contraste
Buena integración con la interfaz
Espacios vacíos
Expertos en persuasión!
Personas atractivas, bebés...
Ejemplo de efectividad de fotografía con eyetracking
¿Dónde encontrar
fotografías para web?
histockphoto.com/
gettyimages
veer.com
Creative commons search
REFERENCIAS
REFERENCIAS
Smashing Magazine
http://www.smashingmagazine.com
REFERENCIAS
AWWWARDS
http://www.awwwards.com/
¡Gracias!
Estefanía Trisotti
@TRI_
Usa este hashtag:
@interlat
@UPBBogota
@cmlatam
CLASE 3
Webinar
Estefanía Trisotti
@TRI_
Experiencia de Diseño de Grillas

Wireframes de Baja
Usuarios
Responsive Design Intensidad
Usuario Look & Feel Wireframes de Alta
Intensidad
Usabilidad Encontrar inspiración
Caso Medical
Relevancia de la UX
Diseño de Iconos
UX aplicado en web Consejos prácticos
Color
Metodología Diseño Credibilidad en la web
Tipografía
Personas
Paso a desarrollo
Escenarios Dirección de Arte
Fotográfico
Análisis
Cardsorting
Referencias
Benchmark Caso Inalco
AI
Referencias
Idear
Diseño de Wireframes
¿Qué son los Wireframes?
Los wireframes son una

representación esquemática de
un sitio web.
No es el diseño final sino la

forma en que vamos a ordenar
los elementos de la página.
Con los wireframes designamos una estructura de grilla
Con los wireframes designamos una estructura de grilla
Con los wireframes designamos jerarquías
Los wireframes van de la mano con la Arquitectura de la Información
... por lo que ya nos da un primer acercamiento a la lógica de navegación
dimensión de búsqueda
ideas de interacción
Con ellos podemos evaluar si vamos o no por el camino correcto
Nos ayudan a optimizar tiempo
Podemos incluirles notas para detallar características no tan evidentes
Características wireframes
El hecho de que sean
realizados en escalas de
grises, nos ayudan a
mantener el foco en las
acciones primarias de
funciones, navegación, etc.
Sólo si es necesario, podríamos

agregar más adelante colores para
destacar elementos específicos.
Los wireframes carecen de elementos emocionales (fotos, colores, etc.)
Ejemplo énfasis marca y avatars
¿Podemos usar algo de color?
No debemos intertir demasiado tiempo, la clave es mantenerlos simples
Los wireframes pueden ser de baja intensidad
O de alta intensidad, donde ya tenemos más definiciones plasmadas
Ejemplo énfasis banners
Ejemplo de wireframe de alta intensidad
Al diseñar wireframes, debemos acostumbrarnos a mover módulos y elementos
Algunas herramientas
para realizar wireframes
Omnigraffle (MAC) http://www.omnigroup.com/products/omnigraffle/
Balsamiq (WIN, MAC, LINUX) http://balsamiq.com/products/mockups/
Mockflow http://www.mockflow.com/
SimpleDiagrams (WIN, MAC, LINUX) http://www.simplediagrams.com/
Pencil Project (Add-on para Firefox, WIN, MAC y Linux) http://www.simplediagrams.com/
Adobe Fireworks
Adobe Photoshop
Veámos cómo podríamos
optimizar el sitio de “Medical”
Pasos a seguir
Revisión contenidos y AI
Bocetos wireframes de baja intensidad
Diseño wireframe alta intensidad
Definición grilla
Definición marca (de ser posible)
Creación paleta de colores
Definición de tipografías
Selección imágenes
Otros
Consejos Prácticos
Cotizar Proyectos Web
? $
¿Cómo cotizar un proyecto digital?
Brief para Diseño Web
Acerca de la empresa
Objetivos y expectativas del diseño
Usuarios al que va dirigido
Personas empresa involucradas
Material disponible y por hacer (marca, etc)
Alcance del proyecto (tiempos, contenidos, etc)
Otros (referencias tipo benchmark, ventajas y

desventajas, alcance técnico, etc)
Un buen “Brief” es vital para comprender el contexto
Contrabrief
Feedback
Informe Análisis
Para cotizar, es relevante interactuar con cliente hasta tener una visión
completa del encargo, y luego ver cómo nosotros respondemos a eso
¿Cuánto vale
mi trabajo?
Cobrar por proyecto o por horas (¿O existe otra forma?)
Nombre
Fecha
Lo que la cotización incluye:
“Propuesta diseño de wireframes”:

Basado en la AI proporcionada por el cliente entre
las fechas (x), etc.
Considera 3 versiones con ajustes, 1 reunión.
“3 Propuesta diseño interfaz”:

Una vez aprobada la maqueta final de wireframes,
el presupuesto considera 3 propuestas diferentes
de diseño...
“Otra cosa”:
....................................................................................
Realizar propuesta formal
Consejos Cotización
Definir cantidad determinada de entregas y tiempos límites
¿Qué trabajo le corresponde a qué persona?
Notas al pie:
- Forma de pago: 100% a contraentrega.
- El presupuesto tiene una validez de 30 días

a contar de su fecha de entrega
- Cualquier recurso que no esté especificado

en este documento, se cotizará de forma
independiente - No se realizarán diseños de
páginas que no tengan los contenidos
definidos con anterioridad
- La aceptación de esta cotización supone la

aceptación de los términos expuestos en ella.
Incluir detalles
diseño
Basarse siempre en los VB para continuar
--
Credibilidad Web
¿Qué hace que un sitio web sea creíble?
1. Design Look – 46.1% 10. Writing Tone – 9.0%

2. Information Design/Structure – 28.5% 11. Identity of Site Operator – 8.8%
3. Information Focus – 25.1% 12. Site Functionality – 8.6%
4. Company Motive – 15.5% 13. Customer Service – 6.4%
5. Information Usefulness – 14.8% 14. Past Experience with Site – 4.6%
6. Information Accuracy – 14.3% 15. Information Clarity – 3.7%
7. Name Recognition and Reputation – 14.1% 16. Performance on Test by User – 3.6%
8. Advertising – 13.8% 17. Readability – 3.6%
9. Information Bias – 11.6% 18. Affiliations – 3.4%
http://www.slideshare.net/bjfogg/web-credibility-bj-fogg-stanford-university
Paso al desarrollo
Debemos ser muy precisos en las especificaciones
Análisis
Análisis del desempeño del proyecto
Analizar Conversión
Interpretación de data
Ajustes
¿Qué es el análisis web?
El análisis web es un conjunto

de técnicas relacionadas con
el análisis de datos relativos
al tráfico en un sitio con el
objetivo de entender su tráfico
como punto de partida para
optimizar diversos aspectos
del mismo.
Métricas
¿Qué resoluciones están usando nuestros usuarios?
Tráfico
¿Cómo está funcionando la conversión?
Posicionamiento en
motores de búsqueda
es el proceso de
mejorar la visibilidad
de un sitio web en los
resultados orgánicos
de los diferentes
buscadores.
SEO - Search Engine Optimization
Test Heurísticos
A/B Test
A/B Test
Eyetracking
Eyetracking
¡Gracias!
Estefanía Trisotti
@TRI_
Usa este hashtag:
@interlat
@UPBBogota
@cmlatam

3 Interfaces Web Stefania Trisotti

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

3 Interfaces Web Stefania Trisotti

Cargado por

Copyright:

Formatos disponibles

CLASE 1

Experiencia de Responsive Design Revisar temas que

Relevancia de la UX Wireframes de Alta

Objetivos del curso

Entender el proceso de diseño implícito en un proyecto digital

Comprender ciertas claves para realizar proyectos digitales eficientes

Revisar teoría y luego hacer ejercicios prácticos

Experiencia de Usuarios Diseño Centrado en el Usuario

En ambos casos, la idea está en considerar al usuario

Algunos dicen que sí,

La experiencia de usuario es el conjunto de El Diseño Centrado en el Usuario es una

nos facilitan o nos complican

nos animan o nos frustran

"Usabilidad es la efectividad, eficiencia y satisfacción con la

"La usabilidad realmente significa estar seguro de que algo

“Disciplinas relacionadas con la usabilidad”

(UX honeycomb – Peter Morville)

¿POR QUÉ ES IMPORTANTE

Las deficiencias del diseño de productos pueden derivar

(Y no hay forma más fácil

Los sitios/app web funcionan

El usuario debe inferir sólo

The Elements of User Experience

Lograr entender los que las

The Elements of User Experience

Pocos conocimientos relativos a la disciplina

Muchos sitios aparecen con la idea de que el éxito consiste en ser

Esa competencia de traer algo nuevo o más features (aplicable

¿Cómo medimos efectividad en Web?

Es un porcentaje que se calcula en función de la inversión y los beneficios

También puede ser traducido como el valor de la compañía, más allá de lo

Al tener un registro de cuántos

The Elements of User Experience

La diferencia fundamental es el foco de la conversión, que en marketing

Estrategia Diseño de Diseño de

Estrategia Diseño Diseño Estrategia

Definir necesidades del usuario

Definir objetivos y metas

Plan de posicionamiento frente a la competencia

Es un método de investigación de usuarios, donde se construyen

Muestran diferentes patrones de conducta y entornos

Se realizan ya que a veces al diseñar, perdemos la medida de las

Nos dan contexto

Se realizan ya que a veces al diseñar, perdemos la medida de las

Alumnos enseñanza básica Profesores

Alumnos enseñanza media

Objetivos (motivaciones, etc)

Actitudes (modelos mentales, etc.)

Conocimientos técnicos (relacionado a lo digital)

Estoy pensando en la creación

¿Quiénes podrían ser

¿Cuáles son sus obstáculos?

Son un método de diseño que ayuda

Los escenarios nos dan contexto

Se define un equipo de personajes que usarán el producto o servicio que

Considera detalles personales de cada personaje

Se identifican momentos claves en que los usuarios interactuan con

Puede realizarse como storyboard, y ser corroborado por todo el equipo

Permite establecer patrones sobre cómo los usuarios esperan encontrar

Usuarios pueden agrupar Usuarios reciben

Un usuario representa a un Un grupo variado de

Selección Selección Preparación de

Generalidades y Representantes del Entre 30 y no más