U2. Tarea 2

Datos del Alumno Fecha
Nombre completo Matrícula

15/11/2022
Frederick Guzmán Salas 20307015
Universidad Tecnológica de la Costa Grande de Guerrero
Ingenieria en Desarollo y Gestión de Software
Tarea 2 Unidad 2
Alumno: Frederick Guzmán Salas
Profesor: Mtro. José Denys Hernández Espinoza
15 de noviembre del 2022

Asignatura Carrera
Experiencia de Ingeniería en Desarrollo y Gestión de Software
Usuario Actividades de Investigacion y Tareas Digitales en Canvas
15/11/2022
Índice
Modelos de Navegación Web ...........................................................................................4
Navegación estructural ..............................................................................................4
Navegación asociativa .............................................................................................. 7
Navegacion mobile ......................................................................................................... 11
Breadcrumbs ........................................................................................................... 11
Hamburger button ................................................................................................... 16
Qué es el Branding .........................................................................................................17
Elementos visuales de la marca ..............................................................................18
¿Qué tipos de Branding existen? ............................................................................ 19
Guía de Estilo Web en UI/UX ......................................................................................... 19
Consistencia visual ..................................................................................................20
Contexto .................................................................................................................. 20
Colaboración ........................................................................................................... 20
El vocabulario singular ............................................................................................ 20
Estandarización de código ...................................................................................... 21
Consolidación ..........................................................................................................21
Orientación para nuevos miembros del equipo ....................................................... 21
Ayuda con las decisiones de diseño ....................................................................... 21
Las Guías de Estilo también pueden tener inconvenientes .................................... 21
Asignatura Carrera
15/11/2022
Ejemplos de Guías de Estilo Web para UI/UX. ....................................................... 22
¿Por qué es importante la implementación de una Guía de Estilo para el desarrollo de

un sitio web? .................................................................................................................. 28
Normativa de diseño de Material Design ........................................................................29
¿De donde salió? .................................................................................................... 29
¿En qué se basa Material Design? ......................................................................... 29
Normativa de diseño de Cupertino. ................................................................................ 30
Referencias .................................................................................................................... 31
Asignatura Carrera
15/11/2022
Modelos de Navegación Web
Navegación estructural
Este tipo de navegación se basa en la estructura jerárquica de los contenidos del sitio.
Permite por tanto moverse hacia arriba y hacia abajo en el árbol de contenidos
Se subdivide en dos tipos: navegación principal y navegación local.
NAVEGACIÓN PRINCIPAL
Representa las categorías de nivel superior o aquellas más valiosas para los usuarios o
el negocio.
Tiene un papel crucial:
 Da una impresión global de la estructura, define de un vistazo de que va el sitio y

para que puede ser útil
 Ayuda en la navegación ofreciendo un mecanismo persistente, esto es

especialmente importante en sitios muy grandes
 Permite cambiar de sección rápidamente o resetear una búsqueda
 Define la forma del sitio, sus límites

Asignatura Carrera
15/11/2022
Suele incluirse en la parte superior de la página así permite focalizar el resto de la

página en el contenido.
También puede situarse verticalmente cuando: existen demasiados ítems en el

menú, los ítems puede traducirse a varios idiomas, las etiquetas son muy largas o si
los ítems pueden cambiar mucho en el futuro.
NAVEGACIÓN LOCAL
Se emplea para acceder a niveles inferiores de la estructura. Ofrece navegación a

opciones que están en el mismo nivel de la jerarquía.
Este tipo de navegación puede ayudar a los usuarios en una doble vía.
En primer lugar ayuda a los usuarios involucrados en tareas exploradoras (cuando

saben que necesitan algo pero no saben el que) dado que al clicar en la navegación
global llegan a la local donde pueden encontrar información más específica.
En segundo lugar ayuda a los usuarios que no saben lo que necesitan saber,
ofreciéndoles una serie de enlaces relacionados.
Suele presentarse en uno de los siguientes formatos:
L invertida
Asignatura Carrera
15/11/2022
Combinando una navegación horizontal y vertical se obtiene este tipo de patrón. La

navegación horizontal se corresponde con la global y aparecerá en todas las páginas, la
vertical con la local y aparecerá sólo en las secciones del sitio.
Esta estructura es especialmente buena en sitios grandes.
Horizontal
Como una fila secundaria debajo de la horizontal, con las consiguientes limitaciones de
espacio.
Embebida en al vertical
Asignatura Carrera
15/11/2022
Embebida en Filmaffinity
Cuando la principal es vertical se presenta anidada a esta.
Navegación asociativa
La navegación asociativa consiste en asociar el contenido que estamos viendo con

cualquier otro tipo de contenido. Pueden establecerse varios tipos de asociaciones:
fecha, categoría, interés, autor, comunidad…
Existen tres tipos comunes de navegación asociativa: contextual, enlaces rápidos y

navegación al pie.
CONTEXTUAL
Como su nombre indica la navegación contextual puede variar: es situacional. Aunque

puede apuntar a diferentes páginas en el mismo nivel también puede apuntar a
diferentes zonas del sitio o incluso a otros sitios. Generalmente este tipo de navegación
se sitúa en el contendido de la página.
Existen dos tipos de navegación contextual:
Navegación embebida
Asignatura Carrera
15/11/2022
Cuando se incluye en el texto como enlaces de texto.
Enlaces relacionados
Que es navegación contextual que puede aparecer al final del texto, en un lateral o en
un menú contextual.
ADAPTATIVA
Es un tipo muy especial de navegación

contextual. Este tipo de enlaces se generan mediante
un proceso de colaboración o de filtrado
social. Refleja generalmente algún tipo de ranquin
elaborado por los usuarios.
Asignatura Carrera
15/11/2022
Este tipo de navegación es muy frecuente como recomendaciones de usuarios en sitios

de comercio electrónico.
ENLACES RÁPIDOS
Este tipo de enlaces proveen acceso a contenido importante que no está representado
en la navegación global.
Aunque es similar a la navegación contextual, la diferencia es que estos enlaces son

contextuales no solo para una pagina sino para el sitio entero. Suelen emplearse para
destacar contenido.
Este tipo de enlaces generalmente aparecen en la parte superior o en los laterales de

las páginas. En el resto de páginas suelen relegarse a un menú dinámico o drop –
down.
En la home suelen ocupar un lugar más prominente.
NAVEGACIÓN EN EL PIE
Se localiza en el pie de la página en formato de enlaces de texto. Muchas veces dan

acceso a páginas sencillas (sin información jerárquica por debajo de estas).
Asignatura Carrera
15/11/2022
Tradicionalmente además es una zona reservada al copyright a los términos y

condiciones y a los créditos del sitio.
En algunas ocasiones también se emplea para incluir los elementos más destacados
del sitemap.
También es una zona susceptible de incluir enlaces relacionados así como para sugerir
al usuario posibles nuevos pasos.
Otros elementos que pueden aparecer en esta área son: la opción de imprimir o enviar
a un amigo, la ayuda, los comentarios, y los page ratings.
Asignatura Carrera
15/11/2022
Navegacion mobile
Breadcrumbs
Las breadcrumbs (también conocidas como migas de pan) son un elemento clave en la
navegación web porque señalan en todo momento en qué lugar de la web está el
usuario dentro de la jerarquía del sitio, de forma que facilitan que este no se pierda.
Las migas de pan tienen un doble objetivo:
 Mejorar la navegación del usuario, permitiendo que este se mueva entre páginas
y categorías con facilidad, porque sabe en todo momento dónde está.
 Marcar una jerarquía y ruta de navegación más clara, que los motores de
búsqueda entienden y agradecen, lo cual repercute positivamente en temas de
posicionamiento SEO.
El término proviene del clásico cuento de los Hermanos Grimm en el que los niños
esparcían migas de pan en el bosque para encontrar el camino de regreso a casa.
En un sitio web, las breadcrumbs tienen el mismo propósito: ayudan a los usuarios a
comprender dónde están y, si es necesario, los ayudan a volver a la sección anterior.
Normalmente, te encontrarás con las breadcrumbs y su ruta de navegación en la parte

superior de la página, justo debajo del menú del encabezado, como veremos a
continuación.
Tipos y estructura de las breadcrumbs
Las migas de pan se componen de varios elementos, cada uno de los cuales enlaza a
una categoría del sitio web o a la página de inicio. Dependiendo de los elementos
incluidos en dicha ruta, podemos distinguir varios tipos de breadcrumbs SEO.
Asignatura Carrera
15/11/2022
Las migas de pan basadas en la jerarquía
Son las más comunes. Muestran a los usuarios el camino hasta la página de inicio, lo
que les permite navegar fácilmente hacia las páginas de categoría uno o varios niveles
en la jerarquía del sitio web.
La ruta de las breadcrumbs generalmente se verá así: Página de inicio> Categoría>

Subcategoría> Página.
Sin embargo, las breadcrumbs en eCommerce normalmente no tienen el elemento de la

página de inicio y, como resultado, comienzan con la categoría por la que el usuario
está navegando. Estas breadcrumbs se ven más ordenadas, pero los usuarios se ven
obligados a usar la navegación o menú principal para ir hacia otras categorías del sitio.
Ambos ejemplos son variaciones de breadcrumbs basadas en la jerarquía, ya que la

ruta siempre comienza con la categoría de nivel superior y guía a los usuarios por la
estructura del sitio web. Son estáticas, lo que significa que las breadcrumbs tienen el
Asignatura Carrera
15/11/2022
mismo aspecto para todos los usuarios, sin importar cómo lleguen a una determinada
página. Pero esta no es la única opción posible.
Las breadcrumbs dinámicas o basadas en los atributos
Se forman dinámicamente en función de la ruta que ha seguido el usuario. Pueden

mostrar el lugar de la página dentro de la estructura del sitio web o mostrar los atributos
del producto.
En el siguiente ejemplo, si los usuarios acceden a la página del producto desde la

categoría de running, verán este tipo de breadcrumbs.
Mientras tanto, si los usuarios comenzaron la búsqueda desde la categoría de marca

Nike, la ruta de las breadcrumbs se verá totalmente diferente.
Asignatura Carrera
15/11/2022
Al igual que las breadcrumbs basadas en la jerarquía, las migas de pan dinámicas
también pueden tener diferentes variaciones. La ruta puede comenzar en la página de
inicio o en una categoría, se pueden agregar elementos adicionales a la ruta o incluso
se pueden omitir algunos elementos sobrantes. Todo depende de la ruta que tome el
usuario para llegar a una página determinada.
Breadcrumbs en un menú desplegable
Si el sitio web es realmente grande y quieres añadir elementos adicionales a la ruta, el

menú desplegable de navegación será tu mejor opción. Funciona tanto para
breadcrumbs basadas en la jerarquía como para migas de pan dinámicas. Pero
tomemos las dinámicas como ejemplo.
En el sitio web de TripAdvisor, los usuarios pueden ver la lista completa de artículos
que pertenecen a la categoría Girona, así como todas las páginas relacionadas gracias
al menú desplegable de navegación.
Asignatura Carrera
15/11/2022
Si eliges la categoría Alquiler Vacacional en Girona de la lista desplegable, la ruta de

las breadcrumbs se transformará y comenzará con la categoría Alquiler Vacacional,
mientras que el elemento «Girona» desaparecerá.
Asignatura Carrera
15/11/2022
Las breadcrumbs basadas en el historial
Finalmente, el último tipo de migas de pan son las que están basadas en el historial.
Esto sucede cuando la ruta consiste en las páginas actuales que visitó un usuario, por
lo que la ruta se ve algo así: Inicio> Página anterior> Página anterior> Página
actual. Estas breadcrumbs rara vez se usan, ya que el botón Atrás del navegador hace
el mismo trabajo. Además, no son de utilidad para los visitantes que vinieron de Google
u otras fuentes externas.
Al mismo tiempo, las breadcrumbs basadas en el historial a menudo se combinan con

otros tipos de migas de pan para permitir a los usuarios volver fácilmente a la página
anterior.
Así que, como ves, las breadcrumbs son de todas las formas y tamaños para satisfacer
las necesidades de cada sitio web.
Hamburger button
Un menú de hamburguesas es un ícono que se usa en un sitio web y en aplicaciones

que, cuando se hace clic o se toca, abre un menú lateral o un cajón de navegación. Se
Asignatura Carrera
15/11/2022
llama “menú de hamburguesas” porque toma la forma del famoso bocadillo. Este ícono
fue creado por el diseñador Norm Cox para la interfaz gráfica de usuario de la estación
de trabajo Xerox Star en 1981. El objetivo de Cox era crear un ícono que comunicara a
los usuarios que detrás de él se ocultaba una lista de elementos.
Después de Xerox Star, el menú de hamburguesas se convirtió en un patrón de

navegación impopular y permaneció así durante casi tres décadas. Pero la situación
cambió en 2009 cuando los teléfonos inteligentes comenzaron a ganar terreno. El
espacio de la pantalla era un bien preciado en los dispositivos móviles y los
diseñadores necesitaban incluir una gran cantidad de información en pantallas de
bolsillo. El menú de hamburguesas parecía una buena solución para este problema y el
ícono comenzó a aparecer en muchas aplicaciones móviles populares como Facebook.
Poco después, comenzó a extenderse por Internet y muchos sitios web y aplicaciones
móviles adoptaron este patrón. Hoy en día, muchos kits de interfaz de usuario (UI)
populares que sirven como referencia para los creadores de productos están diseñados
con un menú de hamburguesas.
Qué es el Branding
El Branding es el proceso de definición y construcción de una marca mediante la

gestión planificada de todos los procesos gráficos, comunicacionales y de
posicionamiento que se llevan a cabo.
Es la gestión global de todos los elementos tangibles e intangibles que rodean a la

marca con el fin de construir y transmitir una promesa que será clave.
Entre éstos se incluyen la imagen corporativa, los colores empresariales, la identidad

corporativa y las normas de estilo empleadas en la comunicación general de la empresa.
Todas estas acciones influyen y determinan el Valor de Marca, logrando su carácter
distintivo, relevante y sostenible en el tiempo. El objetivo de desarrollar un branding
Asignatura Carrera
15/11/2022
acertado será extender la marca en el mercado, posicionarla como un referente y

ubicarla en la mente de los consumidores de forma directa o indirecta.
El branding está compuesto por cinco elementos:
 Naming, o creación de un nombre
 Identidad corporativa
 Posicionamiento
 Lealtad de marca
 Arquitectura de marca
Elementos visuales de la marca
Son las representaciones gráficas de una empresa, que se proyectan al público a través
de un símbolo o un diseño tipográfico especial.
 El logotipo es el nombre de la empresa y debe de encajar con el espíritu de esta.

Nuestra marca debe de transmitir lo que la empresa es y sin una buena marca,
el branding que se realice no dará resultado. Ambos factores deben de encajar para
conseguir el objetivo propuesto.
 El logotipo y el símbolo constituyen la identidad de la empresa y, entre los dos,

conforman su personalidad física.
La tipografía, es un elemento de identificación visual, que distinguirá a la empresa del

mercado.
El nombre comunicativo es la denominación por la que la empresa es reconocida, suele

ser diferente del nombre jurídico y se suele iniciar con la creación del logotipo.
Asignatura Carrera
15/11/2022
El color permite distinguir el producto. Se debe de tener en cuenta la categoría de

producto que producimos. Una buena elección del color nos permite atraer la atención
del consumidor, dar personalidad, diferenciación y lograr posicionar nuestro producto.
¿Qué tipos de Branding existen?
 Personal branding o branding personal. Consiste en trabajar la propia marca

personal de cada individuo y en nuestros días ha cogido bastante fuerza.
 Branding Corporativo. Este es el branding del que hemos hablado en el artículo y

corresponde al branding enfocado a marcas, es decir, a las empresas.
 Employer branding. En un nuevo concepto y se refiere a cómo trabajar la marca

del empleado.
Guía de Estilo Web en UI/UX
Una guía de estilo es un “documento vivo” completo que realiza un seguimiento de

todos los elementos repetitivos de un proyecto de interfaz gráfica, tanto para
aplicaciones de escritorio o dispositivos móviles, como para sitios web complejos. En
este documento se abarcan desde las reglas de marca hasta la cantidad de biselado
para botones de llamada a la acción, es decir, todos los detalles gráficos a tener en
cuenta en el diseño de una interfaz. Las guías de estilo también deben impartir reglas y
prácticas sugeridas, incluyendo lo que se debe y no se debe hacer. En un nivel más
holístico, son un gran lugar para definir la filosofía de diseño de una empresa.
Es cierto que las guías de estilo requieren de un trabajo adicional para crearlas,
especialmente al principio del desarrollo del proyecto, cuando el equipo de diseño ya
está lo suficientemente ocupado en el desarrollo de la interfaz. Pero a la larga, ese
trabajo extra temprano, ahorra tiempo más tarde: hace que las referencias sean mucho
Asignatura Carrera
15/11/2022
más fluidas y evita la confusión y la incomprensión entre los equipos. Cuando se usan
correctamente, las guías de estilo son herramientas de colaboración que complementan
aspectos del diseño y añaden múltiples ventajas.
Consistencia visual
Las buenas prácticas de diseño de la interfaz de usuario web, aconsejan que las guías
de estilo nos ayudan a crear un diseño coherente que refleje un lenguaje visual común.
Elementos como las paletas de colores, los tipos de letra, las animaciones y los menús
de navegación contribuyen a una experiencia de usuario unificada.
Contexto
Las guías de estilo explican el razonamiento detrás de las decisiones de diseño. Por
ejemplo, además de explicar los detalles técnicos de las páginas con navegación por
desplazamiento y las que tienen navegación con pestañas, también debe explicar que
el desplazamiento se usa para contar historias, mientras que las pestañas se usan para
mostrar los productos.
Colaboración
Tener un manual de referencia establecido para cada miembro del equipo asegurará
que todos trabajen con consistencia en el mismo proyecto. La colaboración es más
sencilla, con menos preguntas repetidas y correos electrónicos de ida y vuelta, con
aclaración de cuestiones.
El vocabulario singular
Otro rasgo colaborativo es la racionalización de la comunicación a través de un

vocabulario singular (es decir, definir qué podría ser un “widget” o un “módulo”). Limitar
Asignatura Carrera
15/11/2022
las convenciones de nomenclatura adecuadas puede evitar muchas incomunicaciones

innecesarias.
Estandarización de código
Las guías de estilo de front-end ayudan a estandarizar el HTML, CSS o JavaScript,

para que los diseñadores y desarrolladores puedan ver si un nuevo diseño se desvía de
los estándares establecidos. También lo ayudan a descubrir si el marcado existente se
expande fácilmente.
Consolidación
Los diseñadores solo necesitan buscar un lugar para hacer referencia a todos los
componentes, en lugar de perder tiempo revisando diferentes notas y cuestionando qué
documentos dicen qué.
Orientación para nuevos miembros del equipo
En lugar de enseñar repetidamente los nuevos estándares a los nuevos miembros de

un equipo, puede enviársele una guía de estilo a medida que aumentan. Con la guía de
estilo como documento de anclaje, las conversaciones de seguimiento serán más
significativas.
Ayuda con las decisiones de diseño
No olvidemos que el proceso de creación de la guía de estilo puede llamar su atención

sobre algunas decisiones de diseño cruciales que de otro modo podríamos haber
olvidado.
Las Guías de Estilo también pueden tener inconvenientes
Entre los inconvenientes de las Guías de Estilo nos encontramos con los siguientes:
Asignatura Carrera
15/11/2022
Costo: Una guía de estilo bien documentada puede ser una inversión costosa por
adelantado y, si bien muchos argumentarían que los beneficios son importantes, es
posible que no sean fáciles de demostrar. Es por ello que tenemos que considerar el
costo de mantener nuestras guías de estilo. A medida que se realicen las mejoras por
los aprendizajes de los test A/B, casi seguramente necesitaremos actualizar las guías
de nuestro proyecto con mejoras basadas en los resultados obtenidos en la etapa de
Testeo.
Son conjunto inicial de suposiciones: Si bien una guía de estilo de alta calidad
puede basarse en las buenas prácticas o la investigación del usuario, a menos que
haya sido completamente probada en Testeo A/B, tiene inherentemente una gran
cantidad de suposiciones. Un botón debería verse así, con un bise4l como ese y
usando esta paleta de colores. Útil como punto de partida, pero ¿y si en un contexto
específico no es lo suficientemente grande o el color no destaca? Parte de las tareas de
Optimización de la Tasa de Conversión (CRO) es identificar y desafiar las suposiciones
para impulsar una experiencia óptima.
Son restrictivas: Si se aplican demasiado estrictamente, pueden restringir su alcance

para la experimentación. Seguir una guía de estilos al pie de la letra, puede cerrar las
mentes a soluciones más innovadoras o creativas. Un cierto grado de flexibilidad y
autonomía es importante para permitirle al equipo desarrollar, mejores soluciones para
los problemas de diseño.
Ejemplos de Guías de Estilo Web para UI/UX.
1. Airbnb
Las herramientas UI de Airbnb (te dije que existían muchos nombres), brindan una clara
idea de cuán diferente deben verse los campos, ingresos, menús, anuncios y barra de
Asignatura Carrera
15/11/2022
herramientas. Es particularmente interesante cómo incluyeron una armonía de colores

de muestras como Rausch, Tirol, Foggy y Hof.
Lo que podemos aprender de Airbnb:
El diseño de páginas web incluye diferentes niveles de jerarquía, profundidad y

contraste. Si deseas limitar los colores primarios de tu marca a tres o cuatro, considera
añadir un espectro amplio de matices secundarios que puedan ayudar a los
diseñadores y otros usuarios a formar tu presencia en línea.
2. Mozilla
Mozilla, el talentoso equipo detrás del navegador Firefox, ha hecho completamente

pública su guía de estilo de diseño web. Para unificar toda su presencia en línea,
crearon un marco de trabajo llamado Sandstone. Esta guía integral define el estilo y la
forma para todas sus propiedades web, abordando todo desde su botón más pequeño
hasta la cuadrícula en general.
Asignatura Carrera
15/11/2022
El hecho que Mozilla escoja un concepto unificador para guiar su diseño web no quiere
decir que todo se vea igual. Para probarlo, su guía de estilo de diseño web también
incluye ejemplos de su concepto en uso cuando es claro que estos bloques de
construcción pueden ser usados para crear buena diversidad:
Asignatura Carrera
15/11/2022
Lo que podemos aprender de Mozilla:
Cuando piensas en tu guía de estilo de diseño web, idear un concepto dominante

como Sandstone te ayudará a mantener la consistencia. Sin importar el elemento que
desees incorporar en tu guía en el futuro, siempre existirá la idea central que dictamina
una apariencia y sensación general para la página web.
3. DISQUIS
Para abordar las necesidades de diseño impreso y web, el equipo de Disquis dividió su
guía de estilo en dos secciones: Marca & Estilos y Componentes. Incluyen recursos
específicos para íconos, tipografía y botones. En este caso, la guía de estilo de diseño
web fue creada para formar el trabajo de diseño interno y los componentes creados por
terceras partes (usando su interfaz API).
El diseñador Joshua Sortino, quien estuvo involucrado en el proyecto, subió

una imagen aminada que muestra su impecable guía de estilo.
Lo que podemos aprender de Disquis:

Asignatura Carrera
15/11/2022
A veces estás creando un producto que es un bloque de construcción para algo más.
Este es el caso de Disquis, que tiene un interfaz API que expone su marca a miles
de desarrolladores web alrededor del mundo. Si este es tu caso, asegúrate de
mostrar tu guía de estilo de diseño web públicamente y una ubicación muy visible.
4. MEDIUM
Esta guía UI muestra los elementos más importantes que caracterizan la

identidad online de Medium: botones, fondos de pantalla, menús despegables, íconos,
sugerencias, ventanas emergentes, entre otros. Teehan+Lax, la agencia que ayudó a
formar esta identidad (y lo ha venido haciendo desde que se unió a Facebook), dijo que
existieron muchos cambios en la fase de desarrollo de producto. Este es el caso para
muchos productos nuevos. En lugar de frustrarte, estos cambios visuales deben
animarte a actualizar constantemente la guía de estilo de tu página web.
Lo que podemos aprender de Medium:
Existe una gran oportunidad de llevar tu identidad de marca hacia componentes UI

pequeños como cargadores, ventanas emergentes, cargadores de imágenes y barras
de progreso. Incluso si algunos marcos de trabajo de desarrollo web brindan
Asignatura Carrera
15/11/2022
apariencias singulares para ítemes como estos, intenta personalizarlos para tener un
sentido de autenticidad.
5. UBER
La guía de estilo de diseño web de Uber presta atención especial a la tipografía y

jerarquía. Tienen normas específicas para la cantidad de pesos que uno puede
combinar en una sola pieza de diseño.
También es fascinante cómo han logrado contar con componentes como mapas en su
identidad de marca. Debido a que es una empresa concentrada en la transportación, el
uso de mapas es una parte crucial de tu interfaz de usuario. Con esto en mente, el
equipo de diseño estableció un conjunto de normas generales para trabajar con
diferentes tipos de mapas.
Asignatura Carrera
15/11/2022
Lo que podemos aprender de Uber:
Si tu marca tiene un producto o servicio emblemático (como los mapas de Uber), piensa
cómo puedes mostrar tu identidad a través de él. Uber no solo tiene una imagen
marcada para componentes como mapas, sino también una representada identidad de
marca a través de las líneas que conectan dos ubicaciones en sus mapas. Al crear tu
guía de estilo de diseño web, piensa cómo puedes llevar tu marca a elementos tan
pequeños como puntos y tan grandes como en banners.
¿Por qué es importante la implementación de una Guía de

Estilo para el desarrollo de un sitio web?
Aunque es básico durante todo el proceso, este documento es vital a la hora

de plantear un sitio web. Cuando tenemos el código en blanco es fácil irse por las
ramas. La guía nos permitirá adecuarnos a la esencia de la empresa, y a cómo
queremos que los visitantes la perciban.
Cuando se siguen las pautas señaladas en la guía de estilo, los visitantes reconocerán
de manera rápida la marca. Otra de las ventajas que te ofrece su uso, es que
transmite profesionalidad y seriedad, dos valores que los consumidores valoran a la
hora de elegir entre una empresa u otra.
Asignatura Carrera
15/11/2022
Normativa de diseño de Material Design
Material design es una normativa de diseño enfocado en la visualización del sistema

operativo Android, además en la web y en cualquier plataforma. Desarrollado
por Google y anunciado en la conferencia Google I/O en junio de 2014.
¿De donde salió?
Google previamente realizó diseños para cambiar las interfaces de sus aplicaciones
para móviles. El proyecto fue llamado ‘Hera’
Más adelante fue renombrado como ‘Quantum Paper’. Para el diseño los
desarrolladores se inspiraron en la tinta y el papel para crear este lenguaje de diseño.
Material se trata de un diseño más limpio, en el que predominan animaciones y
transiciones de respuesta, el relleno y los efectos de profundidad tales como la
iluminación y las sombras.
“A diferencia del papel, el diseño Material se puede ampliar y redimensionar de manera

inteligente. Material Design tiene superficies físicas y bordes’’ – El vicepresidente de
diseño de Google, Matías Duarte.
¿En qué se basa Material Design?
El nombre viene porque está basado en objetos materiales. Piezas colocadas en un

lugar y con un movimiento determinado.
Se construye un lenguaje visual donde se recogen los principios básicos del ‘buen
diseño’ contando con las nuevas tecnologías.
Se trata de un diseño con la profundidad, superficies,bordes, sombras y colores tienen
un papel primordial.
Google Material Design tiene como objetivo guiarse por las leyes de la física. Donde las
animaciones son lógicas, los objetos puedan superponerse pero nunca atravesarse..
Asignatura Carrera
15/11/2022
etc
Normativa de diseño de Cupertino.
Junto con el estilo de Google, Material Design, que se aplica a la plataforma Android,
Flutter incluye widgets de iPhone que coinciden con el estilo que se encuentra en iOS.
Se trata de los widgets de Cupertino (nombre dado en referencia a la ciudad donde se
encuentra la sede de Apple). En esta parte, no se verán todos los widgets de Cupertino.
Algunos elementos más específicos, como los botones, se tratarán un poco más
adelante.
Asignatura Carrera
15/11/2022
Referencias
Adobe. (2021, 22 julio). What Is a Hamburger Menu? 5 Website Examples | Adobe XD.
Ideas. https://xd.adobe.com/ideas/principles/web-design/what-is-a-hamburger-
menu/
Citysem. (2022, 25 enero). Qué es el Branding, en qué consiste y cómo potenciarlo -
CitySEM. https://citysem.es/que-es/branding/
Conecta Software. (2022, 12 septiembre). Google Material Design. Conecta Magazine.
https://conectasoftware.com/magazine/diseno-web/google-material-design/
Flutter - Desarrolle sus aplicaciones móviles multiplataforma con Dart - Cupertino (Style
iOS) | Editiones ENI. (s. f.). https://www.ediciones-
eni.com/open/mediabook.aspx?idR=df728a29f0c8e6a807941921716e7727
Koller, S. (2021, 4 septiembre). ¿Qué son las breadcrumbs o migas de pan y para qué
sirven? En el blog de SE Ranking hablamos sobre SEO y el Marketing Digital:
tutórales, casos prácticos y tendencias. https://seranking.com/es/blog/guia-sobre-
breadcrumbs/
Maria, L. S. (2020, 15 junio). Veamos las guías de estilo para diseño de páginas web de
diez marcas que amamos. Staff Creativa. https://www.staffcreativa.pe/blog/guias-
de-estilo-diseno-de-paginas-web-diez-marcas-que-amamos/
Modelos de navegación. (2015, 21 julio). UX Lumen. http://www.uxlumen.com/modelos-
de-navegacion/
Asignatura Carrera
15/11/2022
Moreno, P. (2020, 17 agosto). La guías de estilo en el diseño web (UI/UX). fmkr - Fco.
Moreno - Diseño Gráfico y Multimedia. https://www.fcomoreno.net/la-guias-de-
estilo-en-el-diseno-web-ui-ux/
Online, R. D. (2019, 7 octubre). Qué es la guía de estilo y por qué es imprescindible en
el diseño web. Dlega Online, Marketing Online. https://dlegaonline.es/que-es-la-
guia-de-estilo-y-por-que-es-imprescindible-en-el-diseno-web/
Asignatura Carrera

U2. Tarea 2

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

U2. Tarea 2

Cargado por

Copyright:

Formatos disponibles

Datos del Alumno Fecha

Nombre completo Matrícula

Universidad Tecnológica de la Costa Grande de Guerrero

Ingenieria en Desarollo y Gestión de Software

Alumno: Frederick Guzmán Salas

Profesor: Mtro. José Denys Hernández Espinoza

15 de noviembre del 2022

Modelos de Navegación Web ...........................................................................................4

Navegación estructural ..............................................................................................4

Navegación asociativa .............................................................................................. 7

Navegacion mobile ......................................................................................................... 11

Hamburger button ................................................................................................... 16

Qué es el Branding .........................................................................................................17

Elementos visuales de la marca ..............................................................................18

¿Qué tipos de Branding existen? ............................................................................ 19

Guía de Estilo Web en UI/UX ......................................................................................... 19

Consistencia visual ..................................................................................................20

El vocabulario singular ............................................................................................ 20

Estandarización de código ...................................................................................... 21

Orientación para nuevos miembros del equipo ....................................................... 21

Ayuda con las decisiones de diseño ....................................................................... 21

Las Guías de Estilo también pueden tener inconvenientes .................................... 21

Ejemplos de Guías de Estilo Web para UI/UX. ....................................................... 22

¿Por qué es importante la implementación de una Guía de Estilo para el desarrollo de

Normativa de diseño de Material Design ........................................................................29

¿De donde salió? .................................................................................................... 29

¿En qué se basa Material Design? ......................................................................... 29

Normativa de diseño de Cupertino. ................................................................................ 30

Modelos de Navegación Web

Se subdivide en dos tipos: navegación principal y navegación local.

Tiene un papel crucial:

 Da una impresión global de la estructura, define de un vistazo de que va el sitio y

 Ayuda en la navegación ofreciendo un mecanismo persistente, esto es

 Permite cambiar de sección rápidamente o resetear una búsqueda

 Define la forma del sitio, sus límites

Suele incluirse en la parte superior de la página así permite focalizar el resto de la

También puede situarse verticalmente cuando: existen demasiados ítems en el

Se emplea para acceder a niveles inferiores de la estructura. Ofrece navegación a

En primer lugar ayuda a los usuarios involucrados en tareas exploradoras (cuando

Suele presentarse en uno de los siguientes formatos:

Combinando una navegación horizontal y vertical se obtiene este tipo de patrón. La

Esta estructura es especialmente buena en sitios grandes.

Cuando la principal es vertical se presenta anidada a esta.

La navegación asociativa consiste en asociar el contenido que estamos viendo con

Existen tres tipos comunes de navegación asociativa: contextual, enlaces rápidos y

Como su nombre indica la navegación contextual puede variar: es situacional. Aunque

Existen dos tipos de navegación contextual:

Cuando se incluye en el texto como enlaces de texto.

Es un tipo muy especial de navegación

Este tipo de navegación es muy frecuente como recomendaciones de usuarios en sitios

Aunque es similar a la navegación contextual, la diferencia es que estos enlaces son

Este tipo de enlaces generalmente aparecen en la parte superior o en los laterales de

En la home suelen ocupar un lugar más prominente.

Se localiza en el pie de la página en formato de enlaces de texto. Muchas veces dan

Tradicionalmente además es una zona reservada al copyright a los términos y

Las migas de pan tienen un doble objetivo:

Normalmente, te encontrarás con las breadcrumbs y su ruta de navegación en la parte

Tipos y estructura de las breadcrumbs

Las migas de pan basadas en la jerarquía

La ruta de las breadcrumbs generalmente se verá así: Página de inicio> Categoría>

Sin embargo, las breadcrumbs en eCommerce normalmente no tienen el elemento de la

Ambos ejemplos son variaciones de breadcrumbs basadas en la jerarquía, ya que la

Las breadcrumbs dinámicas o basadas en los atributos

Se forman dinámicamente en función de la ruta que ha seguido el usuario. Pueden