clase

Desarrollo de
negocios Identidad de una
electrónicos empresa
Identificadores, construcción de marca y percepción

OmarCamacho
 CONTENIDO
1. Identidad de marca

2. Dimensiones de la identidad

3. La marca

4. Manual de identidad corporativa

5. Arquitectura de marca
IDENTIDAD DE MARCA
Consideraciones generales antes de posicionar una marca
 Identidad

“ ¿qué es lo que distingue a las personas y a los

grupos de otras personas y otros grupos? La

”
respuesta sólo puede ser: la cultura.

- Gilberto Gimenez -
Sociólogo
Identidad y
cultura
Para desarrollar sus identidades la
gente echa mano de recursos
culturales disponibles en sus redes
sociales inmediatas y en la
sociedad como un todo, por lo
tanto, la cultura es la fuente de la
identidad.
Identidad

La identidad puede definirse como

un proceso subjetivo (y
frecuentemente auto-reflexivo) por
el que los sujetos definen su
diferencia de otros sujetos (y de su
entorno social) mediante la auto-
asignación de un repertorio de
atributos culturales
frecuentemente valorizados y
relativamente estables en el
tiempo
IDENTIDAD
 Desambiguar terminología

‣ Imagen Institucional
‣ Imagen Pública
‣ Identidad Visual

‣ Imagen Corporativa
‣ Imagen Profesional
‣ Identidad de Marca

‣ Imagen Empresarial
‣ Auditoría de Imagen
‣ Perfil Empresarial

‣ Realidad Institucional
‣ Identidad Institucional
‣ Branding

‣ Conciencia Institucional
‣ Identidad Corporativa
‣ Marca

‣ Comunicación
Institucional ‣ Identidad Gráfica
 Desambiguar terminología

Corporación
Institución
Empresa Se usa con mucha frecuencia, su uso
Suelen ser consideradas “instituciones”
Alude a la estructura organizativa de deriva del inglés “corporate identity”,
todas las entidades públicas o privadas
naturaleza económica por excelencia, donde el termino anglosajón
que administran y gestionan actividades
organismo societario articulado en torno “corporation” alude a “compañía” o
sin fines de lucro directo, designa
a una actividad lucrativa, cualquiera que “empresa”. En español esa palabra alude a
también a todo hecho que adquiera
sea su propiedad, pública o privada. una agrupación de asociaciones que
significado social.
integra a empresas privadas.
 Identidad de marca

“ Es un mundo complicado y ruidoso. Y no vamos a

tener la oportunidad de que la gente recuerde mucho
sobre nosotros.

- Steve Jobs -
”
 DEFINICIONES

¿Imagen, Identidad o Comunicación institucional?

 Imagen institucional

Es la percepción que tiene un determinado público sobre una organización.

Comprende elementos tales como elementos visuales de la marca, slogan,
publicidad, forma como la empresa es noticia en los medios, top of mind,
reputación corporativa, atención al cliente y acciones de RRSS.

Aunque el término suele entenderse como sinónimo de representación visual

hay que considerar también la existencia de imágenes auditivas, olfativas,
táctiles, sinestésicas, etc.
 Imagen institucional

Una vez posicionada una imagen en la mente del público, entra a operar un
mecanismo psicosocial por el que se constituyen estereotipos de imagen.
 Identidad institucional

Es la percepción que tiene la empresa sobre sí misma, incluye el historial de la

organización, sus creencias, su filosofía, el tipo de tecnología que utiliza, sus
propietarios, la gente que en ella trabaja, la personalidad de sus dirigentes, sus
valores éticos y culturales, y sus estrategias.
Comunicación institucional

Está constituido por el conjunto de mensajes

efectivamente emitidos.
Desambiguar terminología

En estas combinaciones, la función de los términos relacionados con la

comunicación, percepción y la semiología se le denomina “Imagen”.
DIMENSIONES DE LA IDENTIDAD
Áreas de división y acercamiento a la identidad corporativa
DIMENSIONES DE LA IDENTIDAD

Lo q ue l
ae
mp
re
sa

IC
D

E
qu
ee
s
DIMENSIONES DE LA IDENTIDAD
stit u c io na lesa
s in p
to Ra sg os c ro
bu ul t
ur
ye
i
r s s d e s a
o o do e r l
e

ct
M

At

ar
e M

s
s o

íri
ír

itu

do
m
IDENTIDAD

st

sd
se
CONCEPUTAL

eh
co
Rasgo

acer
Modos de
IDENTIDAD
OPERATIVA
IDENTIDAD
OBJETIVA
DIMENSIONES DE LA IDENTIDAD

dores intenc
ca ion
tifi a
n d
e

os
Id
COM. DE
PRODUCTOS
Y SERV.
(Mkt)

IDENTIFICADOR
LINGÜÍSTICO COM. INST.
Y VISUAL (Managment)
DIMENSIONES DE LA IDENTIDAD

stit ucionales
s in ap
to Entorno ro
bu ye
ri s Lec
o
il c t

ct a pú
At
IMAGEN DE LA

ar
ur
b
pú
COMPETENCIA

de

blic
ación

a
BUYER POSICIÓN
ific PERSONA EN MENTE Y
OPINIÓN
dent
I
 LA MARCA
La construcción del nombre y la identidad visual
 Nombre de la empresa

En su función específica, todo nombre propio es abstracto, su único referente es el sujeto

al cual bautiza. El nombre propio es un sustantivo semánticamente pobre. Aunque
poseyera una etimología, su función denominativa se cumple solo en la medida en que
tales contenidos se olviden.
 Nombre de
una empresa
El nombre corporativo “Mercedes-Benz” permite
individualizar a esa empresa, diferenciándola de todas
las demás; en esa misión se encuentra su sentido.

Su nombre está tomado de una mujer, hija del

fundador de la empresa. Además, “merced” es un
sustantivo común, o sea, contiene un sentido previo al
nombre propio: significa “concesión”, “favor” o “buena
voluntad”.

Ninguno de estos contenidos aflora en el uso nominal

de “Mercedes-Benz”.
 Nombre de la empresa

La marca se refiere a la forma estable de escribir el nombre oral de

una organización.

Esta sinonimia llega a su punto más alto cuando, gracias a la plena

instalación del símbolo en el público, la marca puede prescindir del
nombre verbal (logotipo) y funcionar eficazmente de un modo
autónomo.
Rebrandings
 Recomendaciones para nombrar
una empresa

‣ De fácil pronunciación
‣ Que no sea tan genérico
‣ Elegir un nombre que sea

‣
(ej. ABC Tecnologías) reconocible en tu

‣
Investigar si ya existe
industria por encima de su
(Google y Marcanet) No tiene que ser
disponibilidad como

‣
demasiado creativo
dominio

‣
Que no sea tan descriptivo
(ej. Carteras del Norte) Procurar que sea corto
‣ Probar el nombre con el

‣ No siga una moda público meta

ACTIVIDAD Identificar el nombre
de tu empresa
Ingresa a

[Link]
[Link]
Comparte tus hallazgos
 La imagen como proceso
cognitivo

La Imagen tiene un proceso que comienza con un estímulo visual que se produce en la
percepción. Esta percepción se canaliza al sistema nervioso y luego al proceso cerebral de
aprehensión, luego al desciframiento hasta que la persona llega a crear un juicio sobre la
imagen percibida que depende del entorno, la realidad y el contexto de la persona.
Imagen institucional

“ 83% de las decisiones las hacemos por los ojos

”
- Víctor Gordoa -
 IDENTIDAD
VISUAL
Un programa de Identidad Visual
es un repertorio de elementos
básicos regulados por un código
combinatorio.
 Identidad visual

CONSTANTES
LOGO COLORES TIPOGRAFÍA
VISUALES

Logo principal y Esquema de color y Fuentes y Fotografías y otros

variaciones complementos tipografía visuales

• memorable • no más de 4 colores • que no pierda • usar constantes

• no basado en una • considerar psicología vigencia gráficas
moda del color • buena combinación • que las imágenes
• ofrece una sensación • paleta de de fuentes tengan el mismo estilo
complementarios • usar máximo 3 y filtro
fuentes • material original
Logo

LOGO COLORES

Logo principal y Esquema de colo

variaciones complementos

• memorable • no más de 4 col

• no basado en una • considerar psico
moda del color
• ofrece una sensación • paleta de
complementario
 Identidad visual
Dentro de la Identidad Visual se hallan los siguientes elementos que, con una gama de términos, definen al
final la representación gráfica de la organización en lo que coloquialmente es llamado logotipo, sin embargo,
a continuación se desglosan los distintos nombres o elementos que, según su composición, pueden tener:

‣ Logotipo: es la representación tipográfica del nombre

de la marca; una marca en la cual la palabra funciona
como Imagen.
Identidad visual

‣ Símbolo: representación perceptible de una

idea con rasgos asociados por una convención
socialmente aceptada.
Identidad visual

‣Logosímbolo: combinación normativa del

logotipo y el símbolo.
Identidad visual

‣ Isotipo: marca donde la Imagen funciona sin

texto.
Identidad visual

‣ Isologo: interacción de logo e isotipo.

Identidad visual

‣ Imagotipo: interacción de imagen y texto.

Identidad visual
 Identidad visual
Un logo debe tener las siguientes características:

1. Legible (hasta el tamaño más pequeño)

2. Escalable (a cualquier tamaño requerido)

3. Reproducible (sin restricciones materiales)

4. Distinguible (tanto en positivo como en negativo)

5. Memorable (que impacte y no se olvide)

Secuencia
Fiboanicci
También se le conoce como la
proporción áurea o proporción
divina.

El primer registro formal de su

estudio fue Euclides (c. 300 - 265
a.C.).
Secuencia Fibonacci
Se encuentra en la naturaleza y se ha usado en el arte
Fibonacci y diseño gráfico
Puede usarse como técnica para la construcción de un logo
 Colores

LOGO COLORES TIPOGRAFÍA

Logo principal y Esquema de color y Fuentes y

variaciones complementos tipografía

• memorable • no más de 4 colores • que no pierda

• no basado en una • considerar psicología vigencia
moda del color • buena combinación
• ofrece una sensación • paleta de de fuentes
complementarios • usar máximo 3
fuentes
Color y
evolución
El color es un elemento clave en el
ambiente para el ser humano y
otras especies y, desde la
perspectiva evolutiva, la habilidad
de discriminar colores y tendencias
para acercarse a alguno o evitar
otros puede ser esencial para la
supervivencia.
Uso del
color

El color es el primer rasgo

detectable en la lectura de un
mensaje corporativo y este
privilegio lo capacita para
satisfacer las necesidades de
reconocimiento veloz.

Crea climas que dan “tono” al

lenguaje institucional: estridencia,
calidez, delicadeza, elegancia,
sutileza, frialdad, dureza, pesadez…
 Uso del color

El significado de un color sólo es unánime cuando su uso lo asocia de un modo

unívoco a un contexto determinado.

El significado de un color no es intrínseco sino determinado por los códigos

operantes en el contexto que aparezca.

Sólo funcionará como identificatorio cuando se haya convencionalizado por su uso

intensivo, infalible y prolongado.

[Link]
guess-the-brand-based-on-three-colors
 Color y Brand Equity
El color puede ser un gran potenciado del Brand Equity en una marca y se considera que
son 4 elementos principales:

1. Identificador de la categoría 3. Generando contraste para hacer

más notable la marca frente a la
competencia

2. Agregando significado a la

4.
marca o reforzándolo con
asociaciones simbólicas Identificador de la marca
 Regla 60-30-10

Algunos diseñadores recomiendan elegir un color principal y usarlo

60%, mientras que tu color secundario tiene presencia en un 30% y
finalmente un color que solo acentúa con un 10%.

(No debe de aplicar precisamente para el logo)

Color como herramienta persuasiva

Etapa 0 Etapa 1 Etapa 2 Etapa 3

Atención en la Atención en la Consieración de la Elección de la
categoría marca marca marca

Color

Metas y expectativas
Contexto competitivo
del consumidor

Identificación de la Identificación de la Novedad y contraste

categoría marca percibidos Comprensión del color Evaluación de la marca

Atención a la cateogría Atención a la marca Consideración de marca Elección de la marca

 Consideraciones de colores
institucionales

‣ Identifica los colores

relacionados con la ‣ Genera una combinación
equilibrada y que no ‣ Experimenta antes de
tomar la decisión final

‣
industria y la competencia supere los 4 tonos

‣ ‣
Selecciona colores que
Considera las Selecciona un color funcionen impresos y en
características principal y a partir de ahí pantallas

‣
psicológicas, pero no deriva el resto de los
Prueba con tu público qué
unívocamente complementarios
emoción transmite el color
Colores y arquetipos
 Sitios de interés
[Link]

[Link]

[Link]

[Link]/colors/color-palettes/

Referencias para construcción de colores

 Tipografía

CONSTANTES
LOGO COLORES TIPOGRAFÍA
VISUALES

Logo principal y Esquema de color y Fuentes y Fotografías y ot

variaciones complementos tipografía visuales

• memorable • no más de 4 colores • que no pierda • usar constantes

• no basado en una • considerar psicología vigencia gráficas
moda del color • buena combinación • que las imágen
• ofrece una sensación • paleta de de fuentes tengan el mismo
complementarios • usar máximo 3 y filtro
fuentes • material origina
 Simbolismo tipográfico

La tipografía no es solo transmisora de un significado lingüístico, sino que también

transporta un significado gráfico. La letra escrita es un signo semiótico cuyo
significante -representación gráfica- puede adoptar muy distintas formas, mientras que
su significado fundamental -significado lingüístico- permanecerá invariable.

La elección de un tipo de letra nunca es arbitraria y requiere un ejercicio de reflexión

que siempre tiene en su punto de mira al lector-receptor y los conceptos e ideas que se le
quieren transmitir.
Clasificación tipográfica
Categorías de tipografías

clásicas, tradicionales, atrevidas, peculiares y

modernas, simples, limpias
confiables seguras de sí mismas

elegantes, únicas informales, artísticas estilziadas, distintas,

dramáticas
Serif
Sin-serif
Slab serif
Script
Handwritten
Decorativas
Cambio de tipografía = cambio de
personalidad
Marcas y sus tipografías
Reglas básicas en elección de
tipografías institucionales

1. Flexibles (asegúrate que puede usarse en diversas plataformas)

2. Diferentes pesos (light, regular, semibold, bold)

3. Legibles (que sean legibles pero sobre todo que comuniquen)

 Legibilidad y
comunicación

“ Don't confuse legibility with communication. Just

because something is legible doesn't mean it
communicates and, more importantly, doesn't mean it

”
communicates the right thing.
- David Carson -
Del documental Helvética
 Sobre tipografías gratuitas

Desafortunadamente muchas de las tipografías gratuitas están mal hechas,

ten cuidado con ellas.

Muchas de las que aparecen como “gratuitas” en realidad no lo son, siempre

verifica el EULA (end user license agreement) cuando uses una tipografía para
un logotipo. Evita sitios como Dafont y 1001 Free Fonts por esta razón.
Sitios de tipografías
gratuitas

[Link]

[Link]

[Link]

Referencias para descargar tipografías sin costo

 Sitios de tipografías
comerciales

[Link]/creativemarket

[Link]

[Link]

Referencias para descargar tipografías con precio

 Consideraciones para elección de
tipografía

‣ Identifica la tipografía que

vaya con la personalidad ‣ Elige dos tipografías que
combinen entre sí y ‣ La tipografía de tu logo no
precisamente es la de tu
de la marca aludan a la personalidad comunicación oficial

‣ ‣
de marca

‣
Relaciona la tipografía con Las tipografías decorativas
las categorías existentes Experimenta con deben de usarse

‣
mayúsculas, grosor, color y preferentemente solo
Conoce el presupuesto y
tamaños como acentos
requerimientos de
licencias para adquirir
tipografías
Uso de tipografías decorativas
De preferencia usa las siguientes tipografías comerciales
 Importante

Aprende a hacer Kerning

[Link]
 Identidad
Visual

CONSTANTES
LOGO COLORES TIPOGRAFÍA
VISUALES

Logo principal y Esquema de color y Fuentes y Fotografías y otros

variaciones complementos tipografía visuales

• memorable • no más de 4 colores • que no pierda • usar constantes

• no basado en una • considerar psicología vigencia gráficas
moda del color • buena combinación • que las imágenes
• ofrece una sensación • paleta de de fuentes tengan el mismo estilo
complementarios • usar máximo 3 y filtro
fuentes • material original
 Constantes visuales

Las constantes visuales son gráficos que son persistentes en la comunicación institucional de las empresas y
que dan solidez y un sentido de seguridad sobre la percepción.

Las constantes deben de ser congruentes con el logotipo y la personalidad de marca.

Ejemplos
Ejemplos
Ejemplos
Ejemplos
Ejemplos
Manual de identidad corporativa
Guías para la elaboración de un manual
 Manual de identidad

Es una herramienta imprescindible para gestionar cómo la marca se expresa a través de los elementos y signos
que permiten a los consumidores reconocerla.

Este tipo de documento, en el que quedan definidas las normas a seguir para lograr una expresión uniforme y
coherente de la identidad corporativa.
 Manual de identidad

Describe el uso del conjunto de elementos de identificación y criterios de estilo que se han definido para la
marca. El objetivo principal de este documento es garantizar la correcta aplicación del logotipo y su
simbología, y la coherencia de su expresión en todo tipo de soportes, tanto gráficos, como físicos, audiovisuales
o interactivos.
¿Qué debe de tener el manual?
1. Definición de la marca y su filosofía. La mayoría de los manuales de identidad
corporativa comienzan con una introducción teórica sobre la marca de que tratan,
y los principales valores de la misma.
 ¿Qué debe de tener el manual?

2. El logotipo. El logotipo es el corazón del manual de identidad corporativa. A partir del logo se
definen todas las ejecuciones gráficas de la marca. En la parte dedicada al logotipo debes
crear, a su vez, distintos apartados:

a. Logotipo: Explicar brevemente lo que significa.

b. Construcción: Representarlo sobre una cuadrícula y detallar proporciones, así como

área de seguridad y aplicaciones (vertical, horizontal, web)

c. Tamaños mínimos de reproducción.

d. Colores

e. Versiones en blanco y negro y cromáticas.

f. Usos no permitidos
¿Qué debe de tener el manual?
¿Qué debe de tener el manual?

3. Tipografía. Se debe representar cada familia tipográfica, definiendo los tamaños

que se utilizarán: si se trata de web, en papelería, otras aplicaciones, etc. Mientras
más detallada sea, más control tendrás sobre sus aplicaciones.
¿Qué debe de tener el manual?

4. Colores. Incluye todos los colores que tu marca aplicará. No solo para el logotipo,
sino también para aplicaciones y material promocional. Incluye siempre CMYK, RGB,
HEX y PANTONE.
¿Qué debe de tener el manual?

5. Elementos gráficos y fotografías. Ejemplos y plantillas de todos los elementos a

emplear en tu identidad.
¿Qué debe de tener el manual?

6. Papelería. La guía de estilo tendrá que reflejar todo lo relacionado con la imagen
para tarjetas corporativas, carpetillas, hojas en distintos tamaños, sobres, facturas,
etc. Toda la parte de papelería debe tener un estilo homogéneo, ir en la misma línea,
aunque quizás lo más importante es la creatividad aplicada a partir del logo. .
 ¿Qué debe de tener el manual?

5. Aplicaciones web. Elementos como

Favicon, apps, banners, publicaciones
en redes sociales, página web.
ARQUITECTURA DE MARCA
Composición de marcas y sub-marcas
Arquitectura de marca
 Análisis de Manual de
Identidad
Descripción Elige el Manual real de una marca y, a partir de lo visto
en clase, analiza el logo, los colores, la tipografía y las
constantes gráficas empleadas.
TAREA

Fecha de entrega 31/01/2020

Formato de entrega PDF subido al portal

Modalidad Individual
Consideraciones Revisa cada uno de los conceptos de esta
extras presentación y escribe un texto en donde analices
cada parte de la marca desde su manual de identidad.
 ‣ Aaker, J. (1997). Dimensions of brand personality. JMR, Journal of Marketing Research, 34(3),
347–356.

REFERENCIAS ‣ Brumberger, E. (2003) The rhetoric of typography: The persona of typeface and text.
Technical Communication, 20 (2), 206-223.

‣ Chávez, N. (s.f.) Artículos sobre Marca Corporativa. Norberto Chávez. Recuperado de https://
[Link]/articulos/listado/marca_corporativa.

‣ Chávez, N. (s.f.) Color e identidad corporativa. Norberto Chávez. Recuerda de https://

[Link]/articulos/texto/color_e_identidad_corporativa

‣ Chávez, N. (2010). La imagen corporativa. Teoría y práctica de la identificación institucional,

México, Editorial Gustavo Gili.

‣ Cook, A. [Link]. (2015) Evolving the Google Identity. Google. Recuperado de https://
[Link]/library/evolving-google-identity/

‣ Cooper, J. (2017) 10 Typograhpy Tips Every Business Should Know. [Link]. Recuperado
de [Link]

‣ Crozier, W. (1999). The meanings of colour: preferences among hues. Pigment & Resin
Technology, 28(1), 6–14.
REFERENCIAS
‣ Farrel, B. [Link]. (2019) 2019 Rebrand: Designing the new identity. BBVA. Recuperado de
[Link]

‣ Forbes Agency Council (2017) 15 Mistakes To Avoid When Naming Your Business: Forbes
Agency Council. Recuperado de [Link]
2017/06/08/15-mistakes-to-avoid-when-naming-your-business/#1fa793132433

‣ Gimenez, G. (2010). Cultura, identidad y proceso de individualización: Conceptos y

fenómenos fundamentales de nuestro tiempo UNAM. Recuperado de http://
[Link]/conceptos_final/[Link]

‣ Pallares Espinosa, J. [Link]. (2014) Precisiones sobre el concepto de Imagen Corporativa.

Revista Humanismo y Sociedad. Volumen (2), 33-41.

‣ Scott, L., & Batra, R. (2003). Persuasive imagery a consumer response perspective . Mahwah,
N.J: Lawrence Erlbaum Associates.
clase

Desarrollo de
Negocios Introducción a
Electrónicos negocios electrónicos
Conceptos básicos sobre empresas con énfasis en las TICs

OmarCamacho
 CONTENIDO
1. Definiciones básicas

2. Transformación digital

3. Nuevos modelos de negocio

DEFINICIONES BÁSICAS
Conceptos fundamentales para comenzar el diálogo
 ¿NEGOCIO DIGITAL O
ELECTRÓNICO?

Es común que se utilicen indistintamente la palabra digital y electrónico, incluso se

llegan a usar como sinónimos.

Definirlos dan claridad permiten un primer acercamiento

 ¿NEGOCIO DIGITAL O
ELECTRÓNICO?

Negocio digital Negocio electrónico

centra su estrategia en el uso de la no implica la modificación de los
tecnología para crear nuevo valor modelos de negocio existentes,
modificando los procesos y los modelos simplemente utiliza la tecnología para
de negocio, las experiencias de cliente y obtener eficiencia o eliminar
las capacidades internas para redundancias.
diferenciarse como empresa y obtener
una ventaja competitiva.
 ¿NEGOCIO DIGITAL O
ELECTRÓNICO?

“ For some executives, it’s about technology. For others, digital is

a new way of engaging with customers. And for others still, it
represents an entirely new way of doing business. None of
these definitions is necessarily incorrect. But such diverse

”
perspectives often trip up leadership teams because they
reflect a lack of alignment and common vision about where the
business needs to go.
TRANSFORAMCIÓN DIGITAL
Hacia un nuevo modelo de negocios
 EMPRESA DIGITAL

‣ Ser digital implica crear valor en nuevas fronteras.

‣ No significa solo trabajar para entregar al consumidor, es sobre implementar un ciclo

dinámico donde los proceso y las capacidades están en constante evolución basados en
los inputs provenientes del consumidor.

‣ Esto requiere de una interconexión en cuatro capacidades centrales:

1. Relevancia en la toma de decisiones

2. Interactividad contextual

3. Automatización en tiempo real

4. Innovación centrada en el costumer

journey
1. Relevancia en la toma de decisiones
2. Interactividad contextual
3. Automatización en tiempo real
4. Innovación centrada en el costumer
journey
CAPACIDADES DIGITALES
FUNDAMENTALES

‣ Mind-sets: Uso de datos para la mejora de decisiones, equipos

más compactos y procesos más efectivos para desarrollarse.:
- Institucionalización de multiplicidad de funciones
- Aplanar las jerarquías
- Generar ambientes que promuevan nuevas ideas

‣ Arquitectura de datos: Construir redes que conecten

dispositivos, objetos y personas.
 ¿CÓMO LOGRAR LA
TRANSFORMACIÓN DIGITAL?

La transformación digital se produce gracias a la nueva tecnología, pero una

transformación exitosa requiere de una reorientación que va más allá de la aplicación
de las nuevas tecnologías para llegar a todas las partes del negocio.
 ¿CÓMO LOGRAR LA
TRANSFORMACIÓN DIGITAL?

“ Strategy, not technology, drives digital

”
transformation.
TRANSFORMACIÓN
DIGITAL

Empresas digitales maduras están

enfocadas en la integración digital
de tecnologías, como redes
sociales, tecnología móvil, analítica
y nube, al servicio de la
transformación del
funcionamiento de la empresa.

Empresas digitales menos

maduras se enfocan en resolver
problemas discretos con
tecnologías digitales individuales.
TRANSFORMACIÓN
DIGITAL

‣ Una estrategia digital lleva a

madurez digital.

‣ El poder de la transformación
digital consiste en el alcance y
los objetivos.

‣ Empresas digitales maduras

construyen habilidades para
alcanzar la estrategia.

‣ Los colaboradores quieren

trabajar con líderes digitales.
TRANSFORMACIÓN DIGITAL

“ "We think, how would Google do

this? How would Amazon do this?
[…] Those are future partners. That's

”
the bar."

- Atif Rafiq-
McDonald's chief digital officer
MODELOS DE NEGOCIO
La era digital y las empresas
¿Qué es un modelo de negocio?

Los modelos son representaciones gráficas, verbales o matemáticas

sobre la realidad, que permiten entender problemas o situaciones
complejas.

El modelo de negocio describe las bases sobre las que una empresa crea,
proporciona y capta valor; y recibe una recompensa por ello. Además de
ser una guía al destino estratégico, es un instrumento que permite
comunicar al equipo de trabajo sobre el camino a seguir.
 Elementos básicos del
modelo de negocio

‣ Elección del cliente objetivo, la gestión de los canales y

puertas de acceso.

‣ Diseño de una propuesta de valor diferenciada.

‣ La configuración de la cadena de valor.

Modelo como creador de valor

Visualizar el modelo de negocio como un modelo creador de valor,

atraer clientes y conseguir beneficios donde la oferta supere a la oferta
de la competencia en una dimensión que suponga una diferencia
sustancial para los clientes. No solo en cuanto a precio y calidad, sino
crear experiencias significativas.

El valor agregado está estrechamente ligado a la cadena de valor.

 La lógica del negocio

Físicos, económicos, humanos e intangibles son los recursos clave para

generar y proporcionar el valor agregado; estos pueden ser adquiridos,
arrendados u obtenidos a través de los aliados.
Modelos de negocio en internet
El beneficio funciona como motivador para que las empresas se
esfuercen por crear y trasladar el valor agregado.

Esquemas para generar ingresos:

‣ Micropagos
‣ Freemium - Premium

‣ Pago por consumo - streaming /

‣ Pro publicidad insertada

‣
Pay Per View
Open Access

‣ Suscripción
‣ P2P - MOOC’s

‣ Membresía
Modelo CANVAS
 Proponer modelo de
negocio
Descripción 1. En equipos, investigar cómo se hace un CANVAS
Business Model y elaborarlo.
2. Leer el texto “Nuevos modelos de negocio en la era
digital” de la página 7 a la 43 y elegir un modelo.
TAREA

Descargar en [Link]
v

Fecha de entrega Viernes 24 de enero de 2020

Formato de entrega Se debe de llevar el CANVAS impreso y lleno, además

de una breve presentación con la descripción del
modelo para generar ingresos (máximo 1 cuartilla).

Modalidad Impreso el CANVAS y un PPT del modelo.

Consideraciones Se va a entregar 1 CANVAS por equipo y un PPT. Tienen
extras que hacerlo entre todos. Si el profesor pregunta a
algún miembro y no conoce el modelo de negocio ni
lo puede explicar, no cuenta como entregado.
 ‣ Décaro, S. [Link]. (2017) Los modelos de negocio y las tecnologías de la información y
comunicación. Tlatemoani, España.
REFERENCIAS
‣ íncipy (s.f.) Transformación e innovación digital: Cómo innovar en nuevos modelos de
negocio y en nuevas experiencias digitales de tus clientes, Recuperado en https://
[Link]/ebooks/[Link].

‣ Liber (2014) Nuevos modelos de negocio en la era digital. [Link].

‣ McKinsey & Company (s.f.) What ‘digital’ really means. Recuperado en https://
[Link]/industries/technology-media-and-telecommunications/our-insights/what-
digital-really-means.

‣ MIT Sloan Managment Review (2015) Strategy, not technology, drives digital transformation.
Recuperado en [Link]

‣ MIT Sloan Management Review (2014) Moving Beyond Marketing: Generating Social
Business Value Across the Enterprise. Recuperado en [Link]
[Link]?cid=1

‣ R. Nieva (2015 )‘Shine Up the Arches:’ McDonald’s and the Quest to Go Digital, Marzo 20,
2015, [Link].
clase

Desarrollo de
Negocios Objetivos y
Electrónicos resultados clave
OKR como modelo estratégico

OmarCamacho
 CONTENIDO
1. Definición de OKR y método

2. Marco de los tres horizontes

Planeación estratégica

“
Estrategia sin táctica es el más lento camino hacia la

”
victoria. Las tácticas sin estrategia son el ruido antes
de la derrota.

- Sun Tzu -
Planeación estratégica

“ La esperanza no es una estrategia

”
- James Cameron -
Definición de OKR y método
Cómo aplicarlo a las empresas
 OKR
Consiste en establecer un objetivo Misión y Visión

general y resultados clave que son

utilizados para que todos los empleados
de una organización, sin importar la
jerarquía, centren las actividades que Meta estratégica Meta estratégica
anual 1 anual 2...
realizan hacia una meta en común y
siempre alineada a la visión de la
compañía.
Objetivo Objetivo
cuatrimestral 1 cuatrimestral 2...
Los objetivos responden al por qué y los
resultados clave el qué y el cómo.

Resultado clave 1 Resultado clave 2...

 OKR

Los objetivos y resultados clave u OKR en inglés, se refiere a una metodología de implementación de procesos
utilizado por grandes empresas como Google, Intel y Netflix.
 Beneficios

Trabajar a través de OKR permite:

‣ Mantener la visión de la compañía

‣ Transparencia completa para todos los miembros de la organización

‣ Seguimiento, sistematización y monitoreo de progreso

‣ Vista del desempeño

 Iniciar con las metas

El punto de partida son las metas de la empresa, que se refieren al resultado

cualitativo del objetivo y deben de ser:

1. Significativas

2. Concretas

3. Orientadas a la acción

4. Aspiracionales
 Iniciar con las metas

Responden a las preguntas ¿a dónde quieres llegar? ¿qué quieres lograr?

 Después se realizan los
resultados clave
Se refieren a cómo se analiza y monitoreas la forma de alcanzar la meta. Estos
deben de ser:

1. Específicos

2. De tiempo limitado

3. Ambiciosos pero realistas

4. Medibles y verificables
Metas y resultados
clave

Se trata de encontrar de una a tres

maneras de explorar cómo se
logrará la meta.

Los resultados clave deben de ser

numéricos y se miden de manera
cuantitativa para determinar su
eficacia.
 Ejemplo de OKR
Análisis: Uno de los KPIs de Google Analytics indican los siguientes datos:

Interpretación del problema: Los usuarios no están regresando a la página

web porque no encuentran información de interés.
 Ejemplo de OKR

La meta hace referencia a un objetivo aspiracional:

Meta: Generar interés del usuario en el contenido de la
“generar interés”.
página web
Puedes ser a largo plazo

Resultado clave 1: Aumentar el número de sesiones

del 70% al 85% para 2021.
Los resultados clave se pueden medir para
Resultado
comprobar si esos resultados clave
se lograron 2: Realizar 1000 encuestas en el sitio
o no
sobre los temas que le interesa conocer al usuario en
Suelen ocurrir en un período específico
el cuarto trimestre
 Claves de resultado

Pueden emplearse dos métodos para medir los resultados:

‣ Resultados numéricos: Del 0 al 10

‣ Resultados binarios: Con un simple 1 o 0

 Claves de resultado

Se recomienda que normalmente se alcance el objetivo entre un 60% y 70%.

Si logras menos, significa que planteaste claves de resultado inalcanzables o

que el equipo no se esforzó lo suficiente.

Si logras más, significa que tus metas no eran tan ambiciosas

 Siguiente paso

Tomando siempre como referencia el propósito de la empresa, los responsables

de cada área pueden crear una lista de entre 1 y 5 prioridades.
Alinear la empresa

METAS
Key Resultados clave
Stakeholders
METAS METAS

Jefes de departamento Resultados clave Resultados clave

METAS METAS

METAS METAS

METAS

Equipos individuales Resultados clave Resultados clave

Resultados
Resultados clave Resultados claveclave
OKR en cualquier etapa de
crecimiento

“ En las startups más pequeñas, donde las personas

necesitan sí o sí ir en la misma dirección, los OKR son
una herramienta de supervivencia.

- John Doerr -
Desarrollador de la metodología OKR
”
 OKR es magia

“ ¿Qué acciones te lleva a tomar tu pasión? Si tu

corazón no está en sintonía con tu cabeza, entonces
tu pasión no significa nada. El marco de trabajo OKRs
cultiva la locura, la química alrededor de ella. Nos da
un entorno para el riesgo, para la confianza, donde el
fracaso no es una ofensa. Cuando tienes ese tipo de
estructura y ambiente, más la gente adecuada, la
magia está a la vuelta de la esquina

- Bono -
Cantante de U2 y filántropo a través de One
”
Marco de los tres horizontes
Cómo priorizar los OKR
Priorizar los
objetivos

Para priorizar los objetivos, se

puede utilizar el modelo de los tres
horizontes de McKensey que
consiste en tres planos temporales.
 ‣
Tres horizontes
Crear modelos comerciales nuevos

‣ Describir a dónde crees que se dirige la industria

Tercer horizonte
Segundo horizonte ‣ Cómo innovar para el futuro y estar un paso adelante

‣ Objetivos operativos ‣ Evitan falla de estrategia a corto y

mediano plazo

‣ Mantener y ampliar el negocio

‣ Puente entre los otros dos

‣
principal

‣
Actividades transformadoras que
Puede innovarse, pero centrado en responden a las limitaciones del
mantener la empresa primero y anticipan posibilidades

‣ Generar ingresos y optimizar del tercero

‣
procesos

Identificar recursos más

‣ Es donde realmente inicia la
transformación e innovaciones
importantes.
10%
20%
70%
Tres horizontes

Tercer
Es importante mantener horizonte
el equilibrio 70/20/10 para garantizar el crecimiento sostenible a largo plazo
Segundo horizonte

10%
20%
70%
 Sitios para trabajar OKR

[Link]
[Link]
 ‣ Bankar, V. (2018). What is OKR - CFR and How it works. Vijay Bankar. Recuperado de https://
[Link]/2018/11/[Link]
REFERENCIAS
‣ Curry, A., & Hodgson, A. (2008). Seeing in multiple horizons: connecting futures to
strategy. Journal of Futures Studies, 13(1), 1-20.

‣ Doerr, J. (2018). Measure what matters: How Google, Bono, and the Gates Foundation rock
the world with OKRs. Penguin.

‣ Doerr, J. (2018). Why the secret to success is setting the right goals. TED Talks. Recuperado
de [Link]
john_doerr_why_the_secret_to_success_is_setting_the_right_goals

‣ McKensey (2009). Enduring Ideas: The three horizons of growth. McKensey & Company.
Recuperado de [Link]
finance/our-insights/enduring-ideas-the-three-horizons-of-growth

‣ Project Admin (2018). ¿Qué es el OKR y por qué lo usan las principales empresas? Project
Admin. Recuperado de [Link]
principales-empresas/
clase

Desarrollo de
Negocios UX Design (I)
Electrónicos Diseño centrado en el usuario

OmarCamacho
 CONTENIDO
1. Principios del diseño

2. Investigación

3. Prototipado rápido

4. Diseño de interacción
PRINCIPIOS DEL DISEÑO
El UX como concepto
 UX Design

“ Design is not a monologue; it’s a conversation.

”
- Whitney Hess -
Coach y consultora en UX Design
UX Design

Un principio fundamental para el

diseño UX es minimizar las cargas
cognitivas y el tiempo de las
decisiones que un usuario tiene
que tomar al interactuar con el
diseño.
 UX (experiencia de usuario)

UX es la experiencia que tiene una persona cuando interactúa con un producto en unas condiciones
particulares.

Es importante tener en cuenta:

1. Factores culturales

2. Factores sociales
Fases de UX Design

FASE 1 FASE 2 FASE 3 FASE 4 FASE 5

Investigación Prototipado Diseño de Diseño de Analítica y

interacción interfaces tests de usuarios
INVESTIGACIÓN
Primera etapa
 UX (experiencia de usuario)

La fase investigación tiene como objetivo añadir contexto y generar un conocimiento

más profundo en el proceso de diseño. Así se obtiene más información de los usuarios
para diseñar productos y servicios, validar hipoótesis y disminuir costes con productos
con mayor probabilidad de éxito.
 Tipos de investigación

Más allá de la separación tradicional de cualitativo y cuantitativo, hay dos formas para acercarse al usuario:

‣ Actitud (¿Qué dicen?): entrevistas a profundidad, Focus Group, encuestas

‣ Comportamiento (¿qué hacen?): Test de usabilidad, eyetracking, A/B testing

 Proceso

1. Elegir. Para realizar una investigación previa al diseño de

experiencia, es necesario primero elegir las herramientas
adecuadas y disponibles, así como determinar los usuarios, sus
características y forma de reclutarlos.

2. Diseñar. Una vez seleccionadas las herramientas, es necesario

estructurarlas, no sin antes tener claro el objetivo y tipo de
resultados esperados.

3. Aplicar. Finalmente, se aplican las herramientas manteniendo

siempre una menta abierta y evitando aplicarlas con ideas
preconcebidas.
Canvas de resultado

Información obtenida Patrones de comportamiento Gains

*Verbatims* Pains
Frases literales / ideas fuerza
Otras herramientas

1. Value Proposition Canvas

2. Buyer Persona

3. Empathy map

4. Costumer journey
PROTOTIPADO RÁPIDO
Sketch de baja fidelidad
 Prototipo rápido o sketching

Antes de gastar tiempo y dinero en desarrollar una idea o construir un producto, debe
asegurarse que funcione según lo previsto. Se deberá probar para asegurarse que sea
fácil de usar y libre de errores, y que ayude al usuario a completar sus acciones
deseadas.
Prototipado
rápido
La creación rápida de prototipos se
refiere al proceso de los
diseñadores que crean diseños y
flujos web de baja fidelidad y
simulan el estado futuro de un sitio
web o sistema de software.
 Prototipado rápido
Pasos para realizar prototipado rápido:

1. Identificar un objetivo que quieres que tu usuario realice.

Por ejemplo: pedir comida en la APP de Comida

2. Realizar un storyboard de máximo 8 pasos desde que la

persona ingresa al sitio, hasta que realiza su objetivo.

Por ejemplo:

I. Carlos Comelón está viendo la tele III. Decide filtrar a comida de la más VI. Sus datos de pago y dirección.
y tiene antojo de comer comida barata a la más cara.
hindú por un bajo precio así que VII. Da seguimiento a pedido hasta
abre la APP de Comida. IV. Carlos se decide por el que llega a su casa.
restaurante.
II. Dentro de las categorías, incluye VIII. Después de comer, evalúa al
“comida hindú”. V. Ingresa sus pedido. restaurante y al repartidor.
Prototipado rápido
Prototipado rápido
 Prototipado rápido
Pasos para realizar prototipado rápido:

3. Convertir los pasos del storyboard en dibujos de la página

web.
 Prototipado rápido
Pasos para realizar prototipado rápido:

4. Digitalizar, sin demasiado detalle, las pantallas.

5. Presentarlo a usuarios para identificar si funciona

adecuadamente.
 Realizar prototipado
rápido
Descripción A partir del trabajo realizado en clase, se debe de
realizar la digitalización del prototipo a través de la App
Pop - prototyping on paper y subir a la tarea de
Blackboard la URL con la propuesta.
TAREA

Fecha de entrega 21/02/2020

Formato de entrega Link en digital

Modalidad Individual (todos deben de subir la liga)

Consideraciones Se debe de subir exclusivamente la URL y esta debe de
extras funcionar bien. Si está mal subida o no lleva a ningún
lado, no cuenta como entregada.
 Descripción Breve explicación de la tarea
TAREA

Fecha de entrega Fecha de entrega

Formato de entrega Formato de entrega

Modalidad Modalidad de entrega

Consideraciones Modalidad de entrega
extras
DISEÑO DE INTERACCIÓN
Breve explicación del subtema
Diseño de
interacción
Es la parte clave del diseño de la
experiencia de usuario UX donde el
proyecto empieza a tomar forma.

Es el esqueleto de la página web.

Diseño de la interacción

arquitectura
de la información

wireframing

flujos de
navegación

arquitectura
de la información
Diseño de la interacción

arquitectura
de la información

Es la información que no se ve, pero que sustenta la organización del producto y

permite al usuario encontrar lo que busca y moverse de manera sencilla e intuitiva.

La arquitectura de un sitio es la primer información que tiene el usuario sobre la

organización, sobre todo si no es conocida.
Componentes de una IA

‣ Cómo nombrar los contenidos

para que sean fácilmente

‣ Cómo encontrar la
información que ya conozco
Labeling
system identificables por los usuarios

Search
system IA Organizational
structure

‣ Cómo organizar los

contenidos para que sean

‣
Navigation accesibles
Cómo proporcionar la system
manera de acceder y
moverse dentro del sitio
Proceso de creación de una IA

Para realizar la arquitectura, hay que considerar los siguientes elementos:

1. Entender a los usuarios, cómo van a acceder y el negocio

2. Considerar el SEO

3. Conocer e inventariar contenido

4. Agrupar y naming

5. Navegación y relaciones
 Arquitectura de sitio
SEO-frendly

“ Make pages primarily for users, not for search engines

”
- Google -
 Arquitectura de sitio SEO-friendly

‣ La navegación debe de ser

intuitiva y debe de reflejar ‣ Tu experiencia y URLs
deben de ser similares a ‣ La URL debe de reflejar la
profundidad de tu página.

‣
el customer journey, tus otros sitios que dominan
Usa una estructura de
páginas más valiosas la industria.

‣
navegación superficial
deben de estar a un clic,
Es fundamental planear la (menos clics posibles).
máximo dos, de tu home.
jerarquía antes de
construir el sitio.
 Contenido

Elabora una lista de toda la información, contenidos y acciones que quieres incluir en tu
página web. Lo puedes hacer en una tabla de excel donde uses palabras claves.

Por ejemplo: reservar, filtros, experiencias, bolsa de trabajo, registro, faq, historia, contacto,
servicios, suscripciones, registrarse, cuenta, transacciones, historial de reservas, eventos,
noticias.
 Agrupa

Una vez identificados todos los elementos, agrupa y nombra considerando tus palabras
clave SEO y desde la lógica de los usuarios.

[Link]
Diseño de la interacción

flujos de
navegación

wireframing

flujos de
navegación

arquitectura
de la información
Diseño de la interacción

flujos de
navegación

La estructura dinámica del sitio y la forma en la que el usuario podrá navegar hasta
cumplir su objetivo.
Flujos de navegación
Existen tres tipos de flujos

1. User flow. Define los pasos que debe de

seguir el usuario hasta cumplir la tarea que
deseamos paso por paso.

2. Site Flow. Definen la estructura de

navegación del sitio. Este paso define la
cantidad de interfaces que tendrá el sitio.

3. Wireflow. Mezcla entre wireframes y

flujos de navegación. Es el flujo de
navegación, pero con componentes de la
interfaz.
 Flujos de navegación
Existen tres tipos de flujos

1. User flow. Define los pasos que debe de

seguir el usuario hasta cumplir la tarea que
deseamos paso por paso.

2. Site Flow. Definen la estructura de

navegación del sitio. Este paso define la
cantidad de interfaces que tendrá el sitio.

3. Wireflow. Mezcla entre wireframes y

flujos de navegación. Es el flujo de
navegación, pero con componentes de la
interfaz.
 Flujos de navegación
Existen tres tipos de flujos

1. User flow. Define los pasos que debe de

seguir el usuario hasta cumplir la tarea que
deseamos paso por paso.

2. Site Flow. Definen la estructura de

navegación del sitio. Este paso define la
cantidad de interfaces que tendrá el sitio.

3. Wireflow. Mezcla entre wireframes y

flujos de navegación. Es el flujo de
navegación, pero con componentes de la
interfaz.
 Flujos de navegación
Existen tres tipos de flujos

1. User flow. Define los pasos que debe de

seguir el usuario hasta cumplir la tarea que
deseamos paso por paso.

2. Site Flow. Definen la estructura de

navegación del sitio. Este paso define la
cantidad de interfaces que tendrá el sitio.

3. Wireflow. Mezcla entre wireframes y

flujos de navegación. Es el flujo de
navegación, pero con componentes de la
interfaz.
Flujos de navegación

Herramienta para crear flujos.

[Link]
 Elabora flujo de
usuario y sitio
Descripción De manera individual, elabora el flujo de usuario de tu
proyecto y posteriormente el mapa de tu sitio. Se debe
de entregar en PDF a través de Blackboard.
TAREA

Fecha de entrega 21/02/2020

Formato de entrega PDF a través de Blackboard

Modalidad Individual
Consideraciones Se recomienda usar el sitio Flowmapp visto en clase
extras para su desarrollo.
Diseño de la interacción

wireframing

wireframing

flujos de
navegación

arquitectura
de la información
Herramientas de prototipado fidelidad

Mockup
Wireframing La piel del diseño
El esqueleto del diseño Estilo + Colores
Estructura + Contenido + Tipografía
+ Componentes VISUAL DESIGN
IA

Prototipo
Sketch funcional
Concepto del diseño
Concepto + Ideas + El todo
Estructura básica Mockup + Interacción
IA VISUAL DESIGN

Herramientas de prototipado
 ‣ De la Riva, M. (2019). What Is Rapid Prototyping In UX? A Step-By-Step Guide. Career
Foundry. Recuperado de [Link]
REFERENCIAS
guide/.

‣ Finelli, F. (2011). 10 reglas heurísticas de usabilidad de Jakob Nielsen. Braintive. Recuperado

de [Link]

‣ Hess, W. (2010). Guiding Principles for UX Designers. UX Magazine. Recuperado de https://

[Link]/articles/guiding-principles-for-ux-designers.

‣ Interaction Design Foundation (s.f.). Design Principles. Recuperado de https://

[Link]/literature/topics/design-principles.

‣ Morovian, L. (2019). UX Storyboard Creation: A Complete Guide For Beginners. Uxstudio.

Recuperado de [Link]

‣ Murphy, C. (2018). Universal Principles Of User’s Experience Design. Smashing Magazine.

Recuperado de [Link]
design/.

‣ Nickerson, S. (2018). How to Create an SEO-Friendly Site Architecture. Vertical Measures.

Recuperado de [Link]
site-architecture/.
clase

Desarrollo de
Negocios UX Design (II)
Electrónicos Wireframing

OmarCamacho
 CONTENIDO
1. Principios

2. Diseño de interacción

2.1. Wireframing
PRINCIPIOS DEL DISEÑO
El UX como concepto
Fases de UX Design

FASE 1 FASE 2 FASE 3 FASE 4 FASE 5

Investigación Prototipado Diseño de Diseño de Analítica y

interacción interfaces tests de usuarios
DISEÑO DE INTERACCIÓN
Breve explicación del subtema
Diseño de la interacción

wireframing

wireframing

flujos de
navegación

arquitectura
de la información
Herramientas de prototipado fidelidad

Mockup
Wireframing La piel del diseño
El esqueleto del diseño Estilo + Colores
Estructura + Contenido + Tipografía
+ Componentes VISUAL DESIGN
IA

Prototipo
Sketch funcional
Concepto del diseño
Concepto + Ideas + El todo
Estructura básica Mockup + Interacción
IA VISUAL DESIGN

Herramientas de prototipado
 Wireframe

Debe de contener

1. La estructura

2. Los componentes de diseño

3. Jerarquías de información

4. Etiquetas funcionales (todo lo que

tiene interacción)

‣ No debe de contener lo relacionado

con lo visual (colores, tipografía,
imágenes)
Wireframe

Se hace en grises para que ningún

elemento visual distraiga.

Deben de emplearse principios del

UX.
 Principios del diseño

Un buen UX debe de seguir Principios Universales del Diseño que ayuden a los
diseñadores a encontrar formas de mejorar la usabilidad, intervenir en la
percepción del usuario, mejorar el equilibrio visual, enseñarle a usuarios y
tomar decisiones efectivas en proyectos de diseño.
 Principios del diseño

Para aplicar los principios del diseño efectivamente se debe de tener una sólida
comprensión de los problemas del usuario y una buena intuición sobre cómo los
usuarios podrían aceptar las soluciones del sitio.

Debes anticipar las necesidades del usuario.

 Principios del diseño

Jerarquía Proximidad Contraste Equilibrio

 Principios del diseño

Los diseñadores utilizan principios como la visibilidad, la capacidad de búsqueda y

la capacidad de aprendizaje para abordar los comportamientos humanos básicos.
Utilizamos algunos principios de diseño para guiar las acciones.

Damos control a los usuarios en experiencias fluidas.

 Principios

‣ 1. No interrumpa ni ofrezca
obstáculos a los usuarios: cree
caminos obvios que ofrezcan
‣ 2. Ofrezca pocas opciones: no
obstaculice a los usuarios con
productos agradables; darles
‣ 3. Reduzca las distracciones:
permita que los usuarios
realicen tareas consecutivas, no
un viaje fácil. las alternativas necesarias en simultáneamente.
su lugar.
 Principios

‣ 4. Agrupe objetos relacionados

juntos. ‣ 5. Tenga una jerarquía visual
fácil de escanear que refleje las
necesidades de los usuarios,
‣ 6. Haz que las cosas sean
fáciles de encontrar.

con elementos de uso común

fácilmente disponibles.
 Principios

‣ 7. Muestre a los usuarios de

‣ 8. Proporcione contexto:
‣ Evite jerga

‣
dónde vienen y hacia dónde muestre cómo todo se
10. Hacer diseños eficientes y
se dirigen con pistas / señales. interconecta.
simplificados.
 Principios

‣ 11. Utilice los valores

predeterminados con
usuarios y a aumentar la
eficiencia. ‣ 13. Concéntrese en la emoción:
el placer de usar es tan vital

‣
prudencia: cuando ofrece como la facilidad de uso;
opciones predeterminadas y 12. No demore a los usuarios: despertar la pasión de los
bien consideradas, ayuda a garantice respuestas rápidas usuarios por aumentar el
minimizar las decisiones de los de la interfaz. compromiso.
 Principios

‣ 14. Use “menos es más”: haga

que todo cuente en el diseño.
Si los elementos funcionales y
experiencia del usuario,
olvídalos. ‣ 15. Sea consistente con los
mecanismos de navegación,
la estructura organizacional,
estéticos no se suman a la etc., para hacer un diseño
estable, confiable y predecible.
 Principios

‣ 16. Crea una buena primera

impresión. ‣ 17. Sea confiable y creíble:
identifíquese a través de su
diseño para asegurar a los
usuarios y eliminar la
incertidumbre.
Diseño UX de grandes empresas

[Link]
[Link]
Heurísticas
de usabilidad
Jakob Nielsen “el gurú de la
usabilidad” es una de las personas
más respetadas en el ámbito
mundial sobre usabilidad en la
web.

Jakob estudió 249 problemas de

usabilidad y a partir de ellos diseñó
lo que denominó las “reglas
generales” para identificar los
posibles problemas de usabilidad.
 Reglas heurísticas de usabilidad

‣ Visibilidad del estado del

sistema. ‣ Consistencia y estándares.
‣ Estética y diseño
minimalista.

‣ Relación entre el sistema y ‣ Prevención de errores.

‣ Ayudar a los usuarios a

el mundo real. reconocer.

‣ Reconocimiento antes

‣ ‣
que recuerdo.
Control y libertad del Ayuda y documentación.
usuario.

‣ Flexibilidad y eficiencia de
uso.
 Algunos Wireframes

[Link]
[Link]
 La ‘U’ del UX

“ All too often I have designed on an island by

making assumptions based on what I think an end
user needs, crafting pixel-perfect mockups based
on my assumptions. I’ve learned that the ‘U’ in UX

”
does not stand for ‘you’! It’s all about the user, so
getting outside of my head and engaging with the
user is an important step in the design process.
- Jeremy Nigh
Diseñador de UX
 Referencias
Investiga qué sitios visita tu usuario para conocer lo que le es conocido.

[Link]
Facebook Audience Insights
[Link]
Google Analytics
SEM Rush
Clarificar
objetivo
Antes de comenzar con el diseño
se debe de tener muy claro cuál es
el objetivo del sitio, es decir,
aquello que se quiere alcanzar.

Si bien el sitio puede tener más de

un objetivo, definir el más
importante es fundamental antes
de iniciar el wireframing.
 Tipos de objetivos

RECONOCIMIENTO CONSIDERACIÓN CONVERSIÓN

Reconocimiento de marca Alcance

 Tipos de objetivos

RECONOCIMIENTO CONSIDERACIÓN CONVERSIÓN

Tráfico Nutrir el lead Descargar contenido

v

Reproducción de video Generación de leads Mensaje / Contacto

 Tipos de objetivos

RECONOCIMIENTO CONSIDERACIÓN CONVERSIÓN

Venta en sitio Visita a tienda física

Estructura

Header

Body
Above the Fold
Hero Section

Footer
 Estructura

Menú / Navegación

Secundario
Primario
 Estructura

Hero Section

Hero Image
 AIDA

Se puede usar AIDA para todo tipo de marketing digital y materiales publicitarios off-
line. Estos incluyen páginas web, correos electrónicos, anuncios pagados, piezas de
correo directo e incluso anuncios de radio y televisión.
Copy en la Hero Section

ATTENTION

Esta etapa de la fórmula, como su nombre lo indica, se trata de crear awarness. Se trata
de descubrir las pasiones y los problemas del usuario.

Si se logra crear contenido que llame la atención y atraiga a la audiencia, generará una
curiosidad que lleve a los usuarios a descubrir qué hace realmente la marca.
Copy en la Hero Section

INTEREST

Atraer la atención es una cosa, mantenerla es otra muy diferente.

Para que el copy logre mantener a los prospectos comprometidos, se les debe dar una razón.

El mensaje debe de hacer que el individuo "sienta" su problema apremiante y lo lleve a buscar
una solución definitiva.

La clave es hacer que el problema sea personal para que solo le hable al cliente potencial y a
nadie más.
Copy en la Hero Section

DESIRE

Es donde se muestra a los usuarios exactamente cómo sus ofertas pueden resolver sus
problemas. Explica las características del producto o servicio y todos los beneficios
relacionados.

Si se hace correctamente, los prospectos en la etapa de Deseo incluso podrían estar listos
para hacer una compra.
Copy en la Hero Section

ACTION

Una vez que haya logrado crear el deseo, el siguiente paso es persuadir a los usuarios de
tomar medidas inmediatas.

Los anunciantes pueden crear un sentido de urgencia al ofrecer el acuerdo por un

tiempo limitado o al incluir un bono especial para aquellos que actúan rápido.

En esta etapa es importante facilitarles la tarea. Eso significa incluir datos de contacto o
un botón de CTA en las páginas de sus productos y en la mitad superior de la página para
que los clientes potenciales puedan hacer clic para comprar sin tener que desplazarse.
Estructura

Value proposition
ATTENTION

INTEREST
DESIRE

ACTION
Hero Section
Hero Section
Hero Section
Hero Section
 Elaboración del copy

Amazon Reviews mining

¿Y below the fold?

Servicios Equipo
¿Y below the fold?

Experiencia Portafolio
¿Y below the fold?

Estadísticas Testimoniales
¿Y below the fold?

Tabla de precios

Contacto
 ‣ Claeys, T. (2018). Website Terminology: Learn How To Speak The Language. Recuperado de
[Link]

REFERENCIAS ‣ Finelli, F. (2011). 10 reglas heurísticas de usabilidad de Jakob Nielsen. Braintive. Recuperado
de [Link]

‣ Hess, W. (2010). Guiding Principles for UX Designers. UX Magazine. Recuperado de https://

[Link]/articles/guiding-principles-for-ux-designers.

‣ Interaction Design Foundation (s.f.). Design Principles. Recuperado de https://

[Link]/literature/topics/design-principles.

‣ Memon, M. (2019). 16 Important UX Design Principles for Newcomers. Springboard.

Recuperado de [Link]

‣ Murphy, C. (2018). Universal Principles Of User’s Experience Design. Smashing Magazine.

Recuperado de [Link]
design/.

‣ Palmer, A. (2018). The UX Design Process. Springboard. Recuperado de https://

[Link]/blog/ux-design-process/.

‣ Wiebe, J. (s.f.) I explain and demonstrate Amazon review mining for copywriting.
Copyhackers. Recuperado de [Link]
clase

Desarrollo de
Negocios Diseño de propuesta
Electrónicos de valor
Buyer Persona y Value Proposition Canvas

OmarCamacho
 CONTENIDO
1. Buyer Persona

2. Value Proposition Canvas

BUYER PERSONA
O Costumer Profile
Segmento
La primera etapa es definir el
segmento, es decir, identificar el
grupo de personas u
organizaciones que compartan
características y a quienes quieres
alcanzar y crearles valor.
 Buyer Persona

Los Buyer Personas son representaciones semificticias generalizadas de los

clientes ideales.

Ayudan a entender mejor a los clientes (y posibles clientes) y facilitan la

personalización del contenido de acuerdo a las necesidades, los
comportamientos y las inquietudes específicos de diferentes grupos.

Los Buyer Personas permiten personalizar y definir los objetivos de marketing

para los diferentes segmentos de audiencia.
 Buyer Persona

DEMOGRÁFICO GEOGRÁFICO COMPORTAMIENTO PSICOGRÁFICO *FIRMOGRAFICO

Edad Ciudad Hobbies Presupuesto *Para B2B

Género Nacionalidad Hábitos Motivaciones

Ingresos Población Estilos de compra Emociones

Estado civil Colonia Uso de RRSS Creencias

Peso Zona Consumo de medios Puntos de dolor

Altura Actitudes

Lengua Roles

Opiniones
 Fuentes de obtención de
información

INFORMACIÓN HISTÓRICA CONJETURAS

ENTREVISTA A CONSUMIDOR
O DISPONIBLE BIEN FUNDAMENTADAS
Ficha del Buyer Persona
VALUE PROPOSITION CANVAS
Pasos para realizarlo en un proyecto real
 ¿Qué es?

Parte del modelo Business CANVAS.

Es una herramienta que ayuda a diseñar, probar y construir una propuesta de valor.
De Buyer Persona a Customer
Profile

De la ficha es necesario extraer en una sola oración el perfil del consumidor.

Por ejemplo:

Universitario foráneo en la CDMX

COSTUMER
PROFILE
 Primer paso
Asegurarte que la propuesta de valor y el segmento del cliente empaten
 Relación entre valor y personas

Value map Costumer profile

Conjunto de beneficios de las Conjunto de características de

propuestas de valor diseñados consumidores asumidos,
para atraer consumidores. observados y verificados en el
mercado.
Relación entre valor y personas
Innovación inspirada en el producto
Innovación inspirada en el consumidor
 Identificar el perfil del consumidor

¿Qué resultado y beneficio espera el

consumidor?

‣ Requeridos ¿Qué es lo que quiere lograr el

‣ Esperados consumidor?

‣
‣ Deseados

‣
Las tareas que quiere realizar

‣ Sorpresa El problema que quiere

resolver

¿Con qué problemas se encuentra al

‣ O la necesidad que quiere
satisfacer

querer realizar las tareas?

‣ Resultados indeseables y que el

consumidor quiere evitar

‣ Puede ser operativo, interfaz,

social, emocional

‣ Obstáculos

‣ Riesgos

‣ Sus peores pesadillas

Priorizar las tareas, ganancias y puntos de dolor

ESENCIALES

IMPORTANTE

SERÍA BUENO TENERLO

EXTREMOS

INSIGNIFICANTE

MODERADOS
 Identificar el valor del producto o servicio
¿Cómo los productos o servicios crean
ganancias?

‣ Producir resultados que beneficie

las expectativas y deseos del
consumidor o sorprenderlo

¿Qué servicios y productos que

estamos ofreciendo alivian el
‣ Concentrarse en las ganancias más
relevantes
problema del consumidor?

‣ Pensar en las tareas que quiere

lograr el consumidor

‣ Considerar tareas funcionales,

sociales y emocionales ¿Cómo los productos o servicios alivian

‣ Pueden ser tangibles y físicos o

específicamente el dolor del
consumidor?

‣
intangibles
Eliminar o reducir algunas de las
cosas que molestan al consumidor
antes, durante o después de hacer
las tareas.

‣ Concentrarse en los dolores

extremos.

‣ No intentar resolver todos

Priorizar los productos y servicios, generadores de alivio y de ganancia
ESENCIALES

ESENCIALES

SERÍA BUENO TENERLO

ESENCIALES

SERÍA BUENO TENERLO

SERÍA BUENO TENERLO

 Confrontar los puntos priorizados ESENCIALES ESENCIALES

SERÍA BUENO TENERLO SERÍA BUENO TENERLO

ESENCIALES
IMPORTANTE

SERÍA BUENO TENERLO

INSIGNIFICANTE

EXTREMOS
ESENCIALES

MODERADOS
SERÍA BUENO TENERLO
Evaluar con el consumidor real los puntos identificados
ESENCIALES

SERÍA BUENO TENERLO

IMPORTANTE

INSIGNIFICANTE

EXTREMOS

MODERADOS
 Repetir el proceso ESENCIALES ESENCIALES

SERÍA BUENO TENERLO SERÍA BUENO TENERLO

ESENCIALES
IMPORTANTE

SERÍA BUENO TENERLO

INSIGNIFICANTE

EXTREMOS
ESENCIALES

MODERADOS
SERÍA BUENO TENERLO
Ad-lib o párrafo de posicionamiento

Nuestro___________________________________
ayuda a____________________________________
COSTUMER
PROFILE

quienes quieren___________________________
para____________ __________________________
VERBO

y __________ ____________________________
VERBO

(a diferencia de ________________)
COMPETENCIA
Ejemplo

Aplicación para smartphone de comida

Nuestra___________________________________ rápida

ayuda jóvenes de la CDMX

a____________________________________
COSTUMER
PROFILE

quienes comprar comida a domicilio

quieren___________________________
para____________
evitar
VERBO
__________________________
salir de la casa

y __________
tener ____________________________
muchas opciones de tipo de comida
VERBO

(a diferencia de ________________)
servicio a domicilio de restaurantes
COMPETENCIA
 Value proposition
Descripción Hacer el Value Proposition Canvas de su proyecto a
partir de la plantilla en PPT descargable en la siguiente
liga:
[Link]
TAREA

Fecha de entrega 14/02/2020 antes de las 8:30 am

Formato de entrega PDF (no PPT) en la tarea correspondiente de

Blackboard

Modalidad Individual
Consideraciones Debe de hacerse de manera individual, aunque el
extras proyecto sea el mismo.
Es importante que cada elemento del lienzo esté
priorizado de mayor a menor importancia.
 ‣ Griffith University (s.f.). Market segmentation. Recuperado de [Link]
griffith-business-school/social-marketing-griffith/segmentation
REFERENCIAS
‣ Osterwalder, A., Pigneur, Y., Bernarda, G., & Smith, A. (2014). Value proposition design: How
to create products and services customers want. John Wiley & Sons.

‣ Varini, Kate & F., Bartoli. (2011). Market Segmentation: Does it work?.
clase

Desarrollo de
Negocios
Electrónicos Evaluación web
Herramientas de integración para generar KPI

OmarCamacho
 CONTENIDO
1. Primer tema
Principios básicos
Análisis de sitios web
Website
Analytics
El análisis web es la recopilación,
informes y análisis de datos del
sitio web. El objetivo es identificar
medidas basadas en sus objetivos
organizacionales y de usuario y
usar los datos del sitio web para
determinar el éxito o el fracaso de
esos objetivos y para impulsar la
estrategia y mejorar la experiencia
del usuario.
 Objetivos claros

Antes de comenzar a recopilar y revisar datos, se deben tener claros los indicadores
clave de rendimiento (KPI). No se debe recolectar información que no encaje con
información potencial para mejorar el sitio web.
 Rendimiento de un sitio

Principales conceptos para evaluar el rendimiento de un sitio realizando cualquiera o

todas estas acciones:

‣ Análisis del tráfico del sitio web

‣ Velocidad del sitio

‣ Análisis de la competencia

‣ Auditoría SEO

‣ Comportamiento del usuario

Tráfico y velocidad en sitio web
Conceptos básicos a analizar en un sitio web
Tráfico del sitio web

Los indicadores más comunes son:

1. Vista de páginas.

2. Tiempo en página.

[Link] únicas y usuarios que regresan.

4. Porcentaje de rebote.

5. Información del visitante.

 Datos sobre velocidad y usuarios

‣ Solo el 15% de los sitios

web operan a una ‣ Un retraso de 1 segundo
resulta en un 7% de caída ‣ La mayoría de los sitios
son más grandes de lo
velocidad aceptable en conversiones que deberían de ser

‣ 37% de los visitantes se

salen del sitio si tarda más ‣ Tres de las cuatro señales
de SEO UX dependen de ‣ Comprimir imágenes
podría reducir tu sitio web
de 5 segundos en cargar la velocidad del sitio: a 1 MB

‣
Tiempo en sitio, páginas
70% de los usuarios dicen
por sesión y porcentaje de
que la velocidad impacta
rebote
su decisión de compra
 Análisis de velocidad

[Link]
[Link]
speed/pagespeed/insights/
Auditoría SEO
Herramientas para saber tu
 ¿Qué es?

Una auditoría SEO es un procedimiento estándar para cualquier sitio web. A diferencia
de una auditoría tradicional, esta se realiza únicamente con fines de marketing.

Una auditoría de SEO realizada correctamente debería dar una mejor visión del sitio
web, páginas individuales y tráfico general. Es una excelente manera de mejorar el
rendimiento que le permite clasificarse mejor en los SERP.
 ¿Qué implica?

Una buen auditoría SEO debe de considerar:

1. Análisis técnico

a. Accesibilidad

b. Indexabilidad

2. Análisis on-page

3. Análisis off-page

4. Palabras clave
 Herramientas

[Link]
[Link]
seo-spider/
Comportamiento del usuario
Herramientas para saber cómo se usa el sitio web
 Comportamiento del usuario

Saber cómo se comporta el usuario dentro del sitio web es muy importante para
identificar si hay errores o si están llegando a los lugares que se desea.
 Comportamiento del usuario
Los usuarios son una fuente de conocimiento: tienen toda la información que necesita sobre lo que
funciona y no en su sitio web. Es responder valiosas preguntas comerciales, como:

‣ ¿En qué parte de la

página la gente se atasca ‣ ¿Cómo interactúan (o no)
las personas con ‣ ¿Qué quieren realmente
del sitio web o producto?
y tiene problemas antes elementos y secciones de
de dejarla? página individuales?

‣ ¿Qué les interesa o

ignoran en el sitio web?
Herramienta de análisis

[Link]
 ‣ Hotjar. (2020). Website analysis: the user-driven approach. Hotjar. Recuperado de https://
[Link]/website-analysis/.
REFERENCIAS
‣ Smith, C. (2019). Page Speed and Decreased Conversion Rates: 2019 Statistics. Trinity.
Recuperado de [Link]
statistics/.

‣ Stoyanov, N. (2016). SEO audit: a complete guide to the basics. Search Engine Watch.
Recuperado de [Link]
guide-to-the-basics/.

‣ Romero, D. (2018). Análisis SEO: Herramientas para hacerlo gratis. InboundCycle.

Recuperado de [Link]
analisis-seo-gratis-con-estas-herramientas.

‣ Apellido, A. A. (Fecha). Título del artículo. Nombre de la revista. Volumen(Número), pp-pp.

‣ Apellido, A. A. (Fecha). Título de la página. Lugar de publicación: Nombre de la página web.

dirección de donde se extrajo el documento (URL).

‣ Apellido autor, Iniciales nombre autor, (Año), Título en cursiva, Ciudad y país, Editorial.
clase

Desarrollo de
Negocios Estrategia SEO (I)
Electrónicos Herramientas de posicionamiento en buscadores web

OmarCamacho
 CONTENIDO
1. Definiciones

2. Keywords

3. Optimización de contenidos para SEO

4. Aspectos técnicos para el SEO

Definiciones
Conceptos básicos
SEO vs SEM

SEO - Search Engine Optimization

SEM - Search Engine Marketing

SEO el posicionamiento es
orgánico. Se requieren
conocimientos técnicos como
HTML, URL, no es solo una
plataforma sino un proceso y lleva
tiempo

Para hacer SEM el centro es la

inversión y es mucho más rápido.
 SEO y SEM

SEO (Search Engine Optimization)

Es la sigla en inglés utilizada para describir el proceso de optimización en sitios web

para lograr tener buenas posiciones en un motor de búsqueda como Google por
ejemplo. Este proceso tiene como objetivo que con una búsqueda determinada, se
pueda ubicar un sitio web en los primeros puestos. Es necesario estar alineado con las
políticas de los buscadores.
 SEO y SEM

SEM (Search Engine Marketing)

El SEM es un proceso en el cual se realizan campañas de marketing en un motor de

búsqueda directamente, un ejemplo claro es Google Adwords, donde se paga por estar
en en las primeras posiciones de una búsqueda. Implica la inversión monetaria directa
en una plataforma.
 SEO y posicionamiento

SEO es todo el proceso técnico para hacer que el sitio cumpla con las características
que Google exige, mientras que el posicionamiento es el ranking.

Primero se hace el SEO, que es la estructuración y la organización del sitio web y

después se hacen las estrategias de posicionamiento.

SEO lo hace más el programador y el posicionamiento tiene que ver más con
contenido.
Composición del SEO

Se constituye por tres partes

1. Estrategia. Las acciones en conjunto que

apuntan a un objetivo específico.

2. Técnica. Las acciones de arquitectura y

código del sitio para cumplir con los
requerimientos de Google.

3. Contenidos. La generación de
información del sitio para hacerlo relevante.
Tres ramas
del SEO
‣ White Hat SEO

‣ Gray Hat SEO

‣ Black Hat SEO

 Estrategias SEO

‣ Grey Hat o el SEO gris como

aquella estrategia de ‣ El Black Hat es cualquier tipo
de práctica de SEO que ‣ White Hat son las técnicas
éticamente correctas que
posicionamiento web basada contradiga las directrices de cumplen las directrices
en el uso de técnicas que Google a la hora de conseguir marcadas por los motores de
aceleren dicho proceso, mejores rankings. búsqueda para posicionar
pero sin incumplir una web.
drásticamente las directrices
de Google.
 SERP

Significa Search Engine Results Page y es la interfaz con la que Google presenta los
resultados dependiendo del tipo de búsqueda.
SERP

‣ Direct Answer Box.

Pequeños pedazos de
información que son del
dominio público y no
requieren de crédito.
 SERP

‣ Featured Snipets. Fragmentos

de contexto agregado que
generalmente acreditan una
fuente y Google considera que
es el resultado más relevante
según el contexto. Los
fragmentos destacados se
sirven en muchos formatos de
visualización según la intención
de la consulta de búsqueda y el
tipo de información que se
presentará. Esos formatos
incluyen: párrafos (“quién es…”),
listas (“los mejores…” “cuántos…”,
“receta”), tablas (“precios”,
“rango”, “datos”, videos YouTube
(“video”).
SERP

‣ Rich Snipets. Líneas de

contexto adicionales más allá de
las pantallas SERP tradicionales.

‣ Rich Card (solo para dispositivos

móviles). Una variación móvil
más limpia y condensada de
Rich Snippets en formato de
tarjeta.
SERP

‣ Knowledge Graph. Aparece a la

derecha o arriba de los
resultados orgánicos,
mostrando imágenes,
información objetiva y más.
Google recopila información de
datos de Google y de fuentes
externas (en este caso,
Wikipedia) para que aparezca
en los Gráficos de conocimiento,
que difiere de los paneles de
conocimiento.
SERP

‣ Local Pack. Una lista de tres

empresas locales como Rich
Snippets debajo de un mapa de
Google con puntos de
ubicación. Los buscadores
tienen una alta intención
comercial, con la ubicación y las
revisiones, desempeñando
papeles clave en la toma de
decisión final de los usuarios.
SERP

‣ Preguntas relacionadas.
Preguntas adicionales que se
muestran de forma nativa en los
resultados que están
estrechamente relacionados
con la consulta original.
SERP

‣ Ligas al sitio. Un paquete

expandido de enlaces
relacionados con un dominio
específico. Esto generalmente
ocurre cuando alguien busca
una organización, lo que
significa la intención de obtener
más información o tal vez hacer
una compra.
SERP

‣ Twitter. Un carrusel de tres

publicaciones de Twitter con
imágenes y enlaces en los que
se puede hacer clic. Desplazarse
hacia la derecha revela tweets
adicionales.
SERP

‣ Cajas de noticias. Tendencias o

noticias de última hora
relacionadas con una consulta
de búsqueda.
Penalizaciones
Google
Todas las acciones que castiga
Google por malas prácticas y
generalmente tienen nombres de
animales (Penguin, Panda,
Hummingbird).

Hay dos tipos de penalizaciones:

‣ Manuales.

‣ Algoritmos
 Penalizaciones
1. Manuales. Una penalización manual ocurre cuando un humano real en el Googleplex mira su sitio y
decide penalizarlo. Por lo general, recibirá una notificación de Herramientas para webmasters de
Google.

2. Algoritmos. Se produce una penalización algorítmica cuando su sitio infringe de alguna manera
las pautas de calidad de Google y pierde el rango. Google utiliza un algoritmo complicado que
determina dónde terminará su sitio cuando los usuarios ingresen consultas. Si tienes malas prácticas (a
los ojos del algoritmo), pierdes tu estado en el tótem de resultados de búsqueda.
 Principios básicos

‣ Crear páginas
principalmente para ‣ Evitar los trucos
destinados a mejorar la ‣ Pensar en lo que hace el
sitio web único, valioso o
usuarios, no para motores clasificación de los atractivo.

‣
de búsqueda. motores de búsqueda. Es

‣
Centrarse en destacar de
útil preguntar: "¿Ayuda
No engañar a los usuarios. los demás en su campo.
esto a mis usuarios?
¿Haría esto si los motores
de búsqueda no
existieran?"
 Lo que hay que evitar

‣ Contenido generado
‣ Texto oculto o enlaces
‣ Crear páginas con

‣
automáticamente comportamiento

‣
Páginas doorway
malicioso, como phishing

‣
Participar en esquemas de
Contenido “raspado” o instalar virus, troyanos u
enlaces

‣
otro software malicioso

‣ Crear páginas con poco o

ningún contenido original
Participando en
programas de afiliación
‣ Abusar del marcado de
datos estructurados

‣
sin agregar suficiente
Encubierto valor
‣ Enviar consultas

‣ Redireccionamientos
furtivos ‣ Cargando páginas con
palabras clave irrelevantes
automatizadas a Google
 Guías de Google

[Link]
35769?hl=en
Keywords
Elección de palabras clave
 Tipos de keywords

1. Genéricas. Tienen un volumen de búsqueda muy alto.

2. Compuestas. Palabras que tienen una composición más amplia.

También se le conocen como long tail.
 ¿Cuáles elegir?

Es recomendable empezar con palabras long tail y después ir por las genéricas.
 Análisis de keywords

Es una tarea constante para crecer en contenidos y estar en mayores consultas.

Consiste en identificar cómo la gente está buscando los productos o servicios que
estamos ofreciendo.

Por ello, para hacerlo de manera correcta es recomendable:

‣ Investigación

‣ Filtro

‣ Decisión
Herramientas de análisis

1. Palabras sugeridas de Google

Herramientas de análisis

2. Google Trends
Herramientas de análisis

3. Über suggest

4. Keywords Everywhere

5. KW Finder
 ‣ Nada, A. (2020). 10 Most Decisive Google (SEO) Ranking Factors in 2020. Uptimser.
Recuperado de [Link]
REFERENCIAS
‣ O’Neil, M. (2019). A guide to every 2020 Google SERP feature. Brafton. Recuperado de
[Link]
google-serp-feature/.

‣ Romero, D. (2016). ¿Qué es el Grey Hat o SEO Gris?. InboundCycle. Recuperado de https://
[Link]/blog-de-inbound-marketing/que-es-el-grey-hat-o-seo-gris.

‣
clase

Desarrollo de
Negocios Estrategia SEO (II)
Electrónicos Herramientas de posicionamiento en buscadores web

OmarCamacho
Aspectos técnicos para el SEO
Optimización técnica del sitio
Indexación

Google envía bots o “arañas”

conocido como “sistema de
crawler” que entra a los sitios,
navega por todos los enlaces y
“regresa” la información que ellos
consideran importante.

El proceso se hace en milésimas de

segundos y muchas veces al día.

Hay sitios con volumen de

indexación rápido y otros más bajo
(depende de la actualización de
cada sitio web).
 Indexación

Si el sitio es lento, los bots simplemente no regresan información.

Si hay enlaces rotos o sin funcionar el bot se pierde.

No identifica colores ni texturas, sino textos y contenido.

 ¿Cómo indexar?

Es necesario contar ya con un dominio y un sitio web publicado

1. Agregar el sitio a Google Search Console

2. Con enlaces hacia tu página

3. Prácticamente Google
automáticamente indexa los sitios
 Elementos HTML para el sitio

HTML es un lenguaje de estructura, de mark up, no de programación. En los segundos

hay una relación más de lógica, (if, por ejemplo).

HTML presenta la estructura y dentro de esa estructura se incluyen otros códigos como
Pyton, PHP.

Es básico saber HTML para ser experto en SEO.

 Aspectos
técnicos SEO Título
HTML Header

<html>
<head>
</head> Body
<body>
</body>
<html>

Footer
HTML

<html>
<head>
<title></title>
<meta name=“description”content=“”/>
</head>
<body>
</body>
<html>
HTML

<html>
<head>
<title></title> ¿Qué es SEO? - ¿Qué significa SEO
<meta name=“description”content=“”/>
</head>
<body>
</body>
<html>
HTML

<html>
<head>
<title> ¿Qué es SEO? - ¿Qué significa SEO </title>
<meta name=“description”content=“SEO (Search Engine
Optimization), también conocido como posicionamiento
en buscadores, consiste en la optimización de una web
para los…”/>
</head>
<body>
</body>
<html>
 Recomendaciones para Título

‣ El título debe de tener una

palabra clave y hasta 60 ‣ Debe de ser digerible para
seres humanos, no bots: ‣ Evitar caracteres
especiales

‣
caracteres (con espacios). Ejemplo:

‣
Se pueden usar emojis
Cómo encontrar nuevos
Esa palabra clave debe de siempre y cuando
departamentos vs
estar preferentemente al expresen la identidad de
Nuevos departamentos
inicio. marca
información

‣ Evitar adjetivos.
‣ Títulos claros e
informativos y menos
‣ Debe de ser una llamada a
la acción: CTA

emocionales (no como

RRSS)
 Aspectos
técnicos SEO Meta description
 Meta description

La meta es la que menos valor tiene dentro del SEO pero sirve para convencer al
usuario de Google de que haga clic en el resultado. Ayuda indirectamente al
posicionamiento de una página o post.

La premisa principal al escribir la meta es que se complemente con el title. No hace

falta que se incluya la keyword; es un espacio para satisfacer única y exclusivamente al
usuario. Se tienen 156 caracteres para ello.
 Aspectos
técnicos SEO Headers
 H1, H2, H3, H4, H5, H6

Son etiquetas que Google utiliza para conocer la jerarquía del contenido.

H1 = Título

H2 = Subtítulo

H3-H6 =Menor importancia

 H1

El titular H1 resume en una frase el contenido de la página actual, no tiene sentido que
en un mismo documento web tengamos varios H1, pues el resumen de tu sitio debe ser
uno.

Google confiere mayor importancia al contenido situado en el primer tramo de un

documento web, y también para el usuario es lógico encontrar el H1 en esa posición.

No debería en principio ir enlazado a otros documentos, pues su contenido debería ser

importante únicamente para el documento que estamos viendo.

Google confiere una mayor importancia a las primeras palabras de la frase que a las
últimas: siempre que sea posible, el H1 debe iniciar por la palabra o palabras claves
principales para ese documento.
 H2

Indica títulos de importancia para subsecciones del documento web actual. Por su
naturaleza, puede haber varios H2 en un sitio, que indiquen los diferentes títulos de
importancia de la página en la que nos encontramos.

Deben aportar al contenido y no ser ligas a otras páginas.

No existe un número determinado de elementos H2 que pueden colocarse en una

página, entre 2 y 8 titulares H2 es lo recomendable.
 H3 - H6

Las etiquetas H3 en adelante nos permiten definir títulos de subapartados de un

bloque encabezado con un H2. Su incidencia en SEO es más limitada, y por ello no es
habitual ni recomendable el trabajar los titulares a partir de H4.

Para saber qué tan bien está estructurado el texto desde los Headers, se recomienda
eliminar todos los textos que no tienen la etiqueta H e identificar si explica claramente
el contenido.
 Diferencia entre Title y H1

Title es el metadato que leen los buscadores mientras que el H1 es la información visible
para los usuarios humanos.

Sin embargo, el Title es el que invita a darle clic al enlace, mientras que el H1 es cuando
ya tu usuario está dentro. Así que es recomendable escribir el H1 pensando en Google.
 Aspectos Imágenes
técnicos SEO optimizadas
 Uso de imágenes
Google no ve imágenes, solo ve el caché que guarda en sus servidores. Para que Google
conozca el contenido de la foto y pueda posicionarse en los buscadores, se debe de
agregar la descripción en la etiqueta “Alt”, aunque no es el único aspecto que considera
Google:

‣ Que no sea muy pesado el archivo

‣ Que el nombre del archivo coincida con el contenido

(puede ser el mismo que "Alt”)
Uso de imágenes

[Link]
ACTIVIDAD Imágenes de uso
libre y reducción de
tamaño
 Mejorar SEO

Probar velocidad. No debe de cargar en más de 2 segundos.

[Link]
 ‣ Clark, B. (2010). Does SEO Copywriting Still Matter? Copyblogger. Recuperado de https://
[Link]/seo-copywriting-matter/.

REFERENCIAS ‣ Lloyd-Martin, H. (2015). 5 Ways to Write Killer Headlines from 5 Experts. SEO Copywritting.
Recuperado de [Link]
in/

‣ Marinar, H. (2012). H1, H2 y H3: Cómo utilizar correctamente las etiquetas de encabezado de
HTML. Héctor Marinar. Recuperado de [Link]
utilizar-correctamente-las-etiquetas-de-encabezado-de-html

‣ Nada, A. (2020). 10 Most Decisive Google (SEO) Ranking Factors in 2020. Uptimser.
Recuperado de [Link]

‣ O’Neil, M. (2019). A guide to every 2020 Google SERP feature. Brafton. Recuperado de
[Link]
google-serp-feature/.

‣ Patel, N. (s.f.) SEO Copywriting: How to Write Content For People and Optimize For Google.
Neil Patel. Recuperado de [Link]
for-people-and-optimize-for-google-2/.

‣ Richards, R. (2019). SEO Copywriting: 15 Killer Techniques. Robbie Richards. Recuperado de

[Link]

Romero, D. (2016). ¿Qué es el Grey Hat o SEO Gris?. InboundCycle. Recuperado de https://
clase

Desarrollo de
Negocios UX Design
Electrónicos (I-III)
Diseño centrado en el usuario

OmarCamacho
 CONTENIDO
1. Principios del diseño

2. Investigación

3. Prototipado rápido

4. Diseño de interacción

5. Diseño de interfaces

6. Analítica y test de usuarios

PRINCIPIOS DEL DISEÑO
El UX como concepto
 UX Design

“ Design is not a monologue; it’s a conversation.

”
- Whitney Hess -
Coach y consultora en UX Design
UX Design

Un principio fundamental para el

diseño UX es minimizar las cargas
cognitivas y el tiempo de las
decisiones que un usuario tiene
que tomar al interactuar con el
diseño.
 UX (experiencia de usuario)

UX es la experiencia que tiene una persona cuando interactúa con un producto en unas condiciones
particulares.

Es importante tener en cuenta:

1. Factores culturales

2. Factores sociales
Fases de UX Design

FASE 1 FASE 2 FASE 3 FASE 4 FASE 5

Investigación Prototipado Diseño de Diseño de Analítica y

interacción interfaces tests de usuarios
INVESTIGACIÓN
Primera etapa
 UX (experiencia de usuario)

La fase investigación tiene como objetivo añadir contexto y generar un conocimiento

más profundo en el proceso de diseño. Así se obtiene más información de los usuarios
para diseñar productos y servicios, validar hipoótesis y disminuir costes con productos
con mayor probabilidad de éxito.
 Tipos de investigación

Más allá de la separación tradicional de cualitativo y cuantitativo, hay dos formas para acercarse al usuario:

‣ Actitud (¿Qué dicen?): entrevistas a profundidad, Focus Group, encuestas

‣ Comportamiento (¿qué hacen?): Test de usabilidad, eyetracking, A/B testing

 Proceso

1. Elegir. Para realizar una investigación previa al diseño de

experiencia, es necesario primero elegir las herramientas
adecuadas y disponibles, así como determinar los usuarios, sus
características y forma de reclutarlos.

2. Diseñar. Una vez seleccionadas las herramientas, es necesario

estructurarlas, no sin antes tener claro el objetivo y tipo de
resultados esperados.

3. Aplicar. Finalmente, se aplican las herramientas manteniendo

siempre una menta abierta y evitando aplicarlas con ideas
preconcebidas.
Canvas de resultado

Información obtenida Patrones de comportamiento Gains

*Verbatims* Pains
Frases literales / ideas fuerza
Otras herramientas

1. Value Proposition Canvas

2. Buyer Persona

3. Empathy map

4. Costumer journey
PROTOTIPADO RÁPIDO
Sketch de baja fidelidad
 Prototipo rápido o sketching

Antes de gastar tiempo y dinero en desarrollar una idea o construir un producto, debe
asegurarse que funcione según lo previsto. Se deberá probar para asegurarse que sea
fácil de usar y libre de errores, y que ayude al usuario a completar sus acciones
deseadas.
Prototipado
rápido
La creación rápida de prototipos se
refiere al proceso de los
diseñadores que crean diseños y
flujos web de baja fidelidad y
simulan el estado futuro de un sitio
web o sistema de software.
 Prototipado rápido
Pasos para realizar prototipado rápido:

1. Identificar un objetivo que quieres que tu usuario realice.

Por ejemplo: pedir comida en la APP de Comida

2. Realizar un storyboard de máximo 8 pasos desde que la

persona ingresa al sitio, hasta que realiza su objetivo.

Por ejemplo:

I. Carlos Comelón está viendo la tele III. Decide filtrar a comida de la más VI. Sus datos de pago y dirección.
y tiene antojo de comer comida barata a la más cara.
hindú por un bajo precio así que VII. Da seguimiento a pedido hasta
abre la APP de Comida. IV. Carlos se decide por el que llega a su casa.
restaurante.
II. Dentro de las categorías, incluye VIII. Después de comer, evalúa al
“comida hindú”. V. Ingresa sus pedido. restaurante y al repartidor.
Prototipado rápido
Prototipado rápido
 Prototipado rápido
Pasos para realizar prototipado rápido:

3. Convertir los pasos del storyboard en dibujos de la página

web.
 Prototipado rápido
Pasos para realizar prototipado rápido:

4. Digitalizar, sin demasiado detalle, las pantallas.

5. Presentarlo a usuarios para identificar si funciona

adecuadamente.
 Realizar prototipado
rápido
Descripción A partir del trabajo realizado en clase, se debe de
realizar la digitalización del prototipo a través de la App
Pop - prototyping on paper y subir a la tarea de
Blackboard la URL con la propuesta.
TAREA

Fecha de entrega 21/02/2020

Formato de entrega Link en digital

Modalidad Individual (todos deben de subir la liga)

Consideraciones Se debe de subir exclusivamente la URL y esta debe de
extras funcionar bien. Si está mal subida o no lleva a ningún
lado, no cuenta como entregada.
 Descripción Breve explicación de la tarea
TAREA

Fecha de entrega Fecha de entrega

Formato de entrega Formato de entrega

Modalidad Modalidad de entrega

Consideraciones Modalidad de entrega
extras
 Descripción Breve explicación de la tarea
TAREA

Fecha de entrega Fecha de entrega

Formato de entrega Formato de entrega

Modalidad Modalidad de entrega

Consideraciones Modalidad de entrega
extras
DISEÑO DE INTERACCIÓN
Breve explicación del subtema
Diseño de
interacción
Es la parte clave del diseño de la
experiencia de usuario UX donde el
proyecto empieza a tomar forma.

Es el esqueleto de la página web.

Diseño de la interacción

arquitectura
de la información

wireframing

flujos de
navegación

arquitectura
de la información
Diseño de la interacción

arquitectura
de la información

Es la información que no se ve, pero que sustenta la organización del producto y

permite al usuario encontrar lo que busca y moverse de manera sencilla e intuitiva.

La arquitectura de un sitio es la primer información que tiene el usuario sobre la

organización, sobre todo si no es conocida.
Componentes de una IA

‣ Cómo nombrar los contenidos

para que sean fácilmente

‣ Cómo encontrar la
información que ya conozco
Labeling
system identificables por los usuarios

Search
system IA Organizational
structure

‣ Cómo organizar los

contenidos para que sean

‣
Navigation accesibles
Cómo proporcionar la system
manera de acceder y
moverse dentro del sitio
Proceso de creación de una IA

Para realizar la arquitectura, hay que considerar los siguientes elementos:

1. Entender a los usuarios, cómo van a acceder y el negocio

2. Considerar el SEO

3. Conocer e inventariar contenido

4. Agrupar y naming

5. Navegación y relaciones
 Arquitectura de sitio
SEO-frendly

“ Make pages primarily for users, not for search engines

”
- Google -
 Arquitectura de sitio SEO-friendly

‣ La navegación debe de ser

intuitiva y debe de reflejar ‣ Tu experiencia y URLs
deben de ser similares a ‣ La URL debe de reflejar la
profundidad de tu página.

‣
el customer journey, tus otros sitios que dominan
Usa una estructura de
páginas más valiosas la industria.

‣
navegación superficial
deben de estar a un clic,
Es fundamental planear la (menos clics posibles).
máximo dos, de tu home.
jerarquía antes de
construir el sitio.
 Contenido

Elabora una lista de toda la información, contenidos y acciones que quieres incluir en tu
página web. Lo puedes hacer en una tabla de excel donde uses palabras claves.

Por ejemplo: reservar, filtros, experiencias, bolsa de trabajo, registro, faq, historia, contacto,
servicios, suscripciones, registrarse, cuenta, transacciones, historial de reservas, eventos,
noticias.
 Agrupa

Una vez identificados todos los elementos, agrupa y nombra considerando tus palabras
clave SEO y desde la lógica de los usuarios.

[Link]
Diseño de la interacción

flujos de
navegación

wireframing

flujos de
navegación

arquitectura
de la información
Diseño de la interacción

flujos de
navegación

La estructura dinámica del sitio y la forma en la que el usuario podrá navegar hasta
cumplir su objetivo.
 Flujos de navegación
Existen tres tipos de flujos

1. User flow. Define los pasos que debe de

seguir el usuario hasta cumplir la tarea que
deseamos paso por paso.

2. Site Flow. Definen la estructura de

navegación del sitio. Este paso define la
cantidad de interfaces que tendrá el sitio.

3. Wireflow. Mezcla entre wireframes y

flujos de navegación. Es el flujo de
navegación, pero con componentes de la
interfaz.
Flujos de navegación

Herramienta para crear flujos.

[Link]
 Elabora flujo de
usuario y sitio
Descripción De manera individual, elabora el flujo de usuario de tu
proyecto y posteriormente el mapa de tu sitio. Se debe
de entregar en PDF a través de Blackboard.
TAREA

Fecha de entrega 21/02/2020

Formato de entrega PDF a través de Blackboard

Modalidad Individual
Consideraciones Se recomienda usar el sitio Flowmapp visto en clase
extras para su desarrollo.
Diseño de la interacción

wireframing

wireframing

flujos de
navegación

arquitectura
de la información
Herramientas de prototipado fidelidad

Mockup
Wireframing La piel del diseño
El esqueleto del diseño Estilo + Colores
Estructura + Contenido + Tipografía
+ Componentes VISUAL DESIGN
IA

Prototipo
Sketch funcional
Concepto del diseño
Concepto + Ideas + El todo
Estructura básica Mockup + Interacción
IA VISUAL DESIGN

Herramientas de prototipado
 Wireframe

Debe de contener

1. La estructura

2. Los componentes de diseño

3. Jerarquías de información

4. Etiquetas funcionales (todo lo que

tiene interacción)

‣ No debe de contener lo relacionado

con lo visual (colores, tipografía,
imágenes)
Wireframe

Se hace en grises para que ningún

elemento visual distraiga.

Deben de emplearse principios del

UX.
 Principios del diseño

Un buen UX debe de seguir Principios Universales del Diseño que ayuden a los
diseñadores a encontrar formas de mejorar la usabilidad, intervenir en la
percepción del usuario, mejorar el equilibrio visual, enseñarle a usuarios y
tomar decisiones efectivas en proyectos de diseño.
 Principios del diseño

Para aplicar los principios del diseño efectivamente se debe de tener una sólida
comprensión de los problemas del usuario y una buena intuición sobre cómo los
usuarios podrían aceptar las soluciones del sitio.

Debes anticipar las necesidades del usuario.

 Principios del diseño

Jerarquía Proximidad Contraste Equilibrio

 Principios del diseño

Los diseñadores utilizan principios como la visibilidad, la capacidad de búsqueda y

la capacidad de aprendizaje para abordar los comportamientos humanos básicos.
Utilizamos algunos principios de diseño para guiar las acciones.

Damos control a los usuarios en experiencias fluidas.

 Principios

‣ 1. No interrumpa ni ofrezca
obstáculos a los usuarios: cree ‣ 2. Ofrezca pocas opciones: no
obstaculice a los usuarios con ‣ 3. Reduzca las distracciones:
permita que los usuarios
caminos obvios que ofrezcan productos agradables; darles realicen tareas consecutivas, no
un viaje fácil. las alternativas necesarias en simultáneamente.
su lugar.
 Principios

‣ 4. Agrupe objetos relacionados

juntos. ‣ 5. Tenga una jerarquía visual
fácil de escanear que refleje las ‣ 6. Haz que las cosas sean
fáciles de encontrar.
necesidades de los usuarios,
con elementos de uso común
fácilmente disponibles.
 Principios

‣ 7. Muestre a los usuarios de

‣ 8. Proporcione contexto:
‣ Evite jerga

‣
dónde vienen y hacia dónde muestre cómo todo se
10. Hacer diseños eficientes y
se dirigen con pistas / señales. interconecta.
simplificados.
 Principios

‣ 11. Utilice los valores

predeterminados con
usuarios y a aumentar la
eficiencia. ‣ 13. Concéntrese en la emoción:
el placer de usar es tan vital

‣
prudencia: cuando ofrece como la facilidad de uso;
12. No demore a los usuarios:
opciones predeterminadas y despertar la pasión de los
garantice respuestas rápidas
bien consideradas, ayuda a usuarios por aumentar el
de la interfaz.
minimizar las decisiones de los compromiso.
 Principios

‣ 14. Use “menos es más”: haga

que todo cuente en el diseño.
experiencia del usuario,
olvídalos. ‣ 15. Sea consistente con los
mecanismos de navegación,
Si los elementos funcionales y la estructura organizacional,
estéticos no se suman a la etc., para hacer un diseño
estable, confiable y predecible.
 Principios

‣ 16. Crea una buena primera

impresión. ‣ 17. Sea confiable y creíble:
identifíquese a través de su
usuarios y eliminar la
incertidumbre.
diseño para asegurar a los
Diseño UX de grandes empresas

[Link]
[Link]
Heurísticas
de usabilidad
Jakob Nielsen “el gurú de la
usabilidad” es una de las personas
más respetadas en el ámbito
mundial sobre usabilidad en la
web.

Jakob estudió 249 problemas de

usabilidad y a partir de ellos diseñó
lo que denominó las “reglas
generales” para identificar los
posibles problemas de usabilidad.
 Reglas heurísticas de usabilidad

‣ Visibilidad del estado del

sistema. ‣ Consistencia y estándares.
‣ Estética y diseño
minimalista.

‣ Relación entre el sistema y ‣ Prevención de errores.

‣ Ayudar a los usuarios a

el mundo real. reconocer.

‣ Reconocimiento antes

‣ ‣
que recuerdo.
Control y libertad del Ayuda y documentación.
usuario.

‣ Flexibilidad y eficiencia de
uso.
 Algunos Wireframes

[Link]
[Link]
 La ‘U’ del UX

“ All too often I have designed on an island by

making assumptions based on what I think an end
user needs, crafting pixel-perfect mockups based
on my assumptions. I’ve learned that the ‘U’ in UX

”
does not stand for ‘you’! It’s all about the user, so
getting outside of my head and engaging with the
user is an important step in the design process.
- Jeremy Nigh
Diseñador de UX
 Referencias
Investiga qué sitios visita tu usuario para conocer lo que le es conocido.

[Link]
Facebook Audience Insights
[Link]
Google Analytics
SEM Rush
Clarificar
objetivo
Antes de comenzar con el diseño
se debe de tener muy claro cuál es
el objetivo del sitio, es decir,
aquello que se quiere alcanzar.

Si bien el sitio puede tener más de

un objetivo, definir el más
importante es fundamental antes
de iniciar el wireframing.
 Tipos de objetivos

RECONOCIMIENTO CONSIDERACIÓN CONVERSIÓN

Reconocimiento de marca Alcance

 Tipos de objetivos

RECONOCIMIENTO CONSIDERACIÓN CONVERSIÓN

Tráfico Nutrir el lead Descargar contenido

v

Reproducción de video Generación de leads Mensaje / Contacto

 Tipos de objetivos

RECONOCIMIENTO CONSIDERACIÓN CONVERSIÓN

Venta en sitio Visita a tienda física

Estructura

Header

Body
Above the Fold
Hero Section

Footer
 Estructura

Menú / Navegación

Secundario
Primario
 Estructura

Hero Section

Hero Image
 AIDA

Se puede usar AIDA para todo tipo de marketing digital y materiales publicitarios off-
line. Estos incluyen páginas web, correos electrónicos, anuncios pagados, piezas de
correo directo e incluso anuncios de radio y televisión.
Copy en la Hero Section

ATTENTION

Esta etapa de la fórmula, como su nombre lo indica, se trata de crear awarness. Se trata
de descubrir las pasiones y los problemas del usuario.

Si se logra crear contenido que llame la atención y atraiga a la audiencia, generará una
curiosidad que lleve a los usuarios a descubrir qué hace realmente la marca.
Copy en la Hero Section

INTEREST

Atraer la atención es una cosa, mantenerla es otra muy diferente.

Para que el copy logre mantener a los prospectos comprometidos, se les debe dar una razón.

El mensaje debe de hacer que el individuo "sienta" su problema apremiante y lo lleve a buscar
una solución definitiva.

La clave es hacer que el problema sea personal para que solo le hable al cliente potencial y a
nadie más.
Copy en la Hero Section

DESIRE

Es donde se muestra a los usuarios exactamente cómo sus ofertas pueden resolver sus
problemas. Explica las características del producto o servicio y todos los beneficios
relacionados.

Si se hace correctamente, los prospectos en la etapa de Deseo incluso podrían estar listos
para hacer una compra.
Copy en la Hero Section

ACTION

Una vez que haya logrado crear el deseo, el siguiente paso es persuadir a los usuarios de
tomar medidas inmediatas.

Los anunciantes pueden crear un sentido de urgencia al ofrecer el acuerdo por un

tiempo limitado o al incluir un bono especial para aquellos que actúan rápido.

En esta etapa es importante facilitarles la tarea. Eso significa incluir datos de contacto o
un botón de CTA en las páginas de sus productos y en la mitad superior de la página para
que los clientes potenciales puedan hacer clic para comprar sin tener que desplazarse.
Estructura

Value proposition
ATTENTION

INTEREST
DESIRE

ACTION
Hero Section
Hero Section
Hero Section
Hero Section
 Elaboración del copy

Amazon Reviews mining

¿Y below the fold?

Servicios Equipo
¿Y below the fold?

Experiencia Portafolio
¿Y below the fold?

Estadísticas Testimoniales
¿Y below the fold?

Tabla de precios

Contacto
Diseño de interfaces
Ponerle la piel a la estructura
 Interfaz

“ Lugar de intercambio, donde hay una transferencia de

”
información y acciones y forman parte de un sistema.

- Carlos Scolari -
Autor de Las leyes de la interfaz
 ¿Qué es una interfaz?

Cuando se habla de Sitios Web, se denomina interfaz al conjunto de elementos de la

pantalla que permiten al usuario realizar acciones sobre el Sitio Web que está
visitando. Por lo mismo, se considera parte de la interfaz a sus elementos de
identificación, de navegación, de contenidos y de acción.
UI

El diseño de interfaz significa un

lenguaje común con el usuario
que nos va a permitir
comunicarnos con ellos.

Un buen diseño implica identificar:

Soporte Elementos
 Herramientas de soporte

[Link]
[Link]
 Elementos

‣ Colores: Paletas
‣ Botones
‣ Animaciones

‣ Tipografías
‣ Formularios
‣ Transiciones

‣ Imágenes
‣ Modales

‣ Iconos
‣ Tooltips
Color

El color es uno de los elementos

más importantes a definir antes de
empezar así como la tipografía.
Call to
Action
Un botón de llamado a la acción
(CTA) es un elemento de interfaz de
usuario interactivo tanto web como
móvil.

Su objetivo principal es inducir a

las personas a tomar ciertas
acciones que presenten una
conversión para una página o
pantalla en particular, por ejemplo,
comprar, contactar, suscribirse, etc.
 ‣ Claeys, T. (2018). Website Terminology: Learn How To Speak The Language. Recuperado de
[Link]
REFERENCIAS
‣ De la Riva, M. (2019). What Is Rapid Prototyping In UX? A Step-By-Step Guide. Career
Foundry. Recuperado de [Link]
guide/.

‣ Finelli, F. (2011). 10 reglas heurísticas de usabilidad de Jakob Nielsen. Braintive. Recuperado

de [Link]

‣ Hess, W. (2010). Guiding Principles for UX Designers. UX Magazine. Recuperado de https://

[Link]/articles/guiding-principles-for-ux-designers.

‣ Interaction Design Foundation (s.f.). Design Principles. Recuperado de https://

[Link]/literature/topics/design-principles.

‣ Memon, M. (2019). 16 Important UX Design Principles for Newcomers. Springboard.

Recuperado de [Link]

‣ Morovian, L. (2019). UX Storyboard Creation: A Complete Guide For Beginners. Uxstudio.

Recuperado de [Link]
 ‣ Murphy, C. (2018). Universal Principles Of User’s Experience Design. Smashing Magazine.
Recuperado de [Link]
REFERENCIAS design/.

‣ Nickerson, S. (2018). How to Create an SEO-Friendly Site Architecture. Vertical Measures.

Recuperado de [Link]
site-architecture/.

‣ Palmer, A. (2018). The UX Design Process. Springboard. Recuperado de https://

[Link]/blog/ux-design-process/.

‣ Wiebe, J. (s.f.) I explain and demonstrate Amazon review mining for copywriting.
Copyhackers. Recuperado de [Link]