Tesis de Grado Francis Decena y Paula Gutierrez 2021-2022

REPÚBLICA BOLIVARIANA DE VENEZUELA
UNIVERSIDAD DEL ZULIA

FACULTAD DE ARQUITECTURA Y DISEÑO
PROGRAMA DE DISEÑO GRÁFICO
“PROPUESTA DE DISEÑO DE GUÍA INSTRUCTIVA IMPRESA E INTERFAZ

GRÁFICA DE UNA APLICACIÓN MÓVIL SOBRE LOS TRASTORNOS DEL
SUEÑO MÁS COMUNES”
Presentado por:
Decena Francis Gutiérrez Paula
C.I. 25.721.127 C.I. 24.256.065
Tutor académico: Luisenia Fernández
Maracaibo, 11 de marzo de 2022

“PROPUESTA DE DISEÑO DE GUÍA INSTRUCTIVA IMPRESA E INTERFAZ
GRÁFICA DE UNA APLICACIÓN MÓVIL SOBRE LOS TRASTORNOS DEL
SUEÑO MÁS COMUNES”
DEDICATORIA
Dedicamos esta tesis a Dios, al forjador de nuestro camino, el que nos dio la
vida y la salud para permitirnos avanzar con el desarrollo del proyecto; guiando
cada uno de nuestros pasos, iluminando nuestros pensamientos para así tomar las
mejores decisiones en el proceso. A ti nuestro Dios que has estado siempre para
levantarnos de nuestros tropiezos, esto te lo dedicamos a ti padre creador.
A nuestros padres, que han sido siempre el pilar fundamental y apoyo en

nuestra formación académica, llenándonos en nuestra crianza con valores y reglas
que nos han permitido progresar en nuestras vidas como estudiantes y futuros
profesionales, sin ustedes no lo habríamos logrado. Su bendición a diario a lo largo
de nuestra vida, ha sido la protección que nos ha conducido a este camino, por
esto y mucho más les dedicamos nuestra tesis, por su amor, por su paciencia he
incansable lucha.
A nuestra familia y amigos, por el apoyo incondicional, por cada momento,

cada risa y lágrima compartida que de una u otra forma lograron ayudarnos en el
desarrollo de este trabajo.
Finalmente dedicamos esta tesis a nosotras, porque lo merecemos, por nuestra

dedicación y el trabajo duro que hemos puesto durante toda la carrera. Han sido
muchos días y noches sin dormir, esforzándonos para trabajar de hombro a
hombro para luchar contra cada adversidad presentada en nuestro camino,
logrando complementarnos perfectamente una a la otra para alcanzar este éxito,
que, aunque nos sacó lágrimas y frustraciones, hoy valió la pena y nos unió más
que nunca.
AGRADECIMIENTO
Agradecemos a Dios, primeramente, por permitir que nos conociéramos y

formáramos como profesionales en nuestra Universidad, (La Universidad del Zulia-
Facultad de Arquitectura y Diseño), gracias por no solo permitirnos ser compañeras
de clases, sino por crear en nosotras un laso de amistad y de hermandad, que nos
ha traído hasta lo que hoy somos y la realización de este proyecto, que no ha sido
fácil.
Mil gracias a nuestros padres por estar allí en cada momento que los
necesitamos, por recibirnos con los brazos abiertos y sin importar la distancia, u
ocupaciones que tuvieran, su apoyo se podía sentir. Gracias por no permitirnos
abandonar cuando muchas veces, sentíamos que no podíamos más; gracias
familia y amigos, por ser parte de este logro y estar presentes de una manera u
otra.
Gracias a todas las personas participes de este proceso, por apoyarnos,

orientarnos y tenernos la paciencia que muchas veces nosotras mismas no
teníamos, gracias por decirnos, que “si podíamos”, y como la vida es como un viaje
en tren, muchos suben y otros bajan, hoy en día muchas personas ya no se
encuentran a nuestro lado, pero sin embargo fueron parte de nuestro aprendizaje
empírico, hemos llegado hasta aquí y ha sido con su ayuda, queridos profesores y
orientadores, muchas gracias.
Y por último gracias a nosotras, por el esfuerzo brindado, las noches sin dormir
y el apoyo que una le ha brindado a la otra en cada momento para seguir juntas
hasta el final con este proyecto, que hoy, es nuestra tesis; el requisito para optar al
título de Licenciadas en Diseño Gráfico, en la Universidad del Zulia, para así
graduarnos juntas como lo hemos soñado desde el día uno que nos conocimos.
ÍNDICE DE CONTENIDO
DEDICATORIA ............................................................................................................... III

AGRADECIMIENTO ...................................................................................................... IV
RESUMEN ..................................................................................................................... 10
ABSTRACT.................................................................................................................... 11
INTRODUCCIÓN ........................................................................................................... 12
CAPÍTULO I: ASPECTOS METODOLÓGICOS ............................................................ 15
SITUACIÓN OBJETO DE ESTUDIO .............................................................................. 15
OBJETIVO GENERAL ................................................................................................... 18
OBJETIVOS ESPECÍFICOS .......................................................................................... 18
JUSTIFICACIÓN ............................................................................................................ 19
DELIMITACIÓN .............................................................................................................. 20
LIMITANTES DE LA INVESTIGACIÓN .......................................................................... 21
MÉTODOS DE DISEÑO ................................................................................................ 21
METODO 1. García (2019) (Para guía instructiva impresa) ........................................... 22
METODO 2. Fiori (2014) (Para guía instructiva impresa) ............................................... 23
METODO 3. METODO PROPIO (Para guía instructiva impresa) .................................. 24
METODO 4. Yeeply (2018) (Para interfaz gráfica de una aplicación móvil) ................... 25
METODO 5. GASCA, M, CAMARGO, L Y MEDINA. B (2013) (Para interfaz gráfica
de una aplicación móvil) ................................................................................................. 26
METODO 6. METODO PROPIO (Para interfaz gráfica de una aplicación móvil) ........... 27
CUADRO COMPARTIVO: METODOS DE DISEÑO PROPIOS .................................... 28
CAPÍTULO II: ASPECTOS TEÓRICOS ........................................................................ 31
ANTECEDENTES GENERALES ................................................................................... 31
Origen del Diseño Editorial ............................................................................................. 31
Inicio y evolución de la interfaz gráfica ........................................................................... 32
Inicio de los dispositivos móviles .................................................................................... 35
Evolución de los sistemas operativos de dispositivos móviles ....................................... 36
Tendencias en el diseño en aplicaciones móviles .......................................................... 36
ANTECEDENTES ESPECÍFICOS ................................................................................. 40
MARCO REFERENCIAL ................................................................................................ 41
5
1. Diseño editorial ........................................................................................................... 41
2. Diseño de folletos ....................................................................................................... 44
3. Diseño gráfico digital .................................................................................................. 47
4. Aplicaciones móviles .................................................................................................. 48
5. Trastornos del Sueño .............................................................................................. 60
CASOS DE ESTUDIO .................................................................................................... 66
CUADRO COMPARATIVO DE LOS CASOS DE ESTUDIO .......................................... 70
DETERMINANTES DE DISEÑO .................................................................................... 71
Producto editorial ........................................................................................................... 71
Imagen ........................................................................................................................... 71
Formato .......................................................................................................................... 71
Color ............................................................................................................................... 72
Diseño gráfico digital ...................................................................................................... 72
Interfaz gráfica de usuario .............................................................................................. 72
Color ............................................................................................................................... 73
CRITERIOS DE DISEÑO ............................................................................................... 74
Usuarios ......................................................................................................................... 74
Composición y diagramación ......................................................................................... 74
Retícula .......................................................................................................................... 75
Imagen ........................................................................................................................... 75
Tipografía ....................................................................................................................... 75
Color ............................................................................................................................... 75
Botones .......................................................................................................................... 75
Contenido y funcionalidad .............................................................................................. 76
CAPÍTULO III: ASPECTOS DE DISEÑO....................................................................... 78
REFERENTES DE DISEÑO........................................................................................... 78
CONCEPTO GENERADOR ........................................................................................... 81
Identidad ........................................................................................................................ 81
Estructura ....................................................................................................................... 83
PROCESO CREATIVO .................................................................................................. 85
Contenido de la guía instructiva impresa ....................................................................... 86
Planeación de la forma, pliegues y dobleces ................................................................. 86
6
Distribución de textos ..................................................................................................... 87
Maquetación de la guía impresa .................................................................................... 89
Diseño de la Interfaz Gráfica de la aplicación móvil ....................................................... 90
Mapa de Navegación ..................................................................................................... 90
Desarrollo estructural ..................................................................................................... 91
Pantallas ........................................................................................................................ 92
Iconos ............................................................................................................................. 98
PRODUCTO FINAL ........................................................................................................ 98
Maquetación final de la guía impresa ............................................................................. 98
Maquetación final de la interfaz gráfica ........................................................................ 105
CONCLUSIÓN ............................................................................................................. 110
RECOMENDACIONES ................................................................................................ 112
ANEXOS ...................................................................................................................... 114
REFERENCIAS BIBLIOGRÁFICAS ............................................................................ 122
7
ÍNDICE DE GRÁFICOS
Gráfico Nº 1. Método de Diseño Nº 1 ..................................................................... 23
Gráfico Nº 3. Método de diseño propio para la guía instructiva impresa. ............... 25
Gráfico Nº 6. Método de diseño propio para la interfaz gráfica .............................. 28
Gráfico Nº 7. Imágenes vectoriales de nubes o siluetas curvas ............................. 78
Gráfico Nº 8. Paleta de colores con su código HTML ............................................ 79
Gráfico Nº 9. Tipografías seleccionas para los productos e identificador. .............. 79
Gráfico Nº 10. Imágenes seleccionas para los productos ...................................... 80
Gráfico Nº 11. Segundas imágenes seleccionas para los productos ..................... 81
Gráfico Nº 12. Bocetos de logotipo ........................................................................ 81
Gráfico Nº 13. Diseño de logotipo .......................................................................... 82
Gráfico Nº 14. Construcción gráfica del identificador ............................................. 82
Gráfico Nº 15. Método de diseño propio de la guía instructiva, planteado en el

Capítulo I. ................................................................................................................ 85
Gráfico Nº 16. Método de diseño propio de la interfaz gráfica, planteado en el

Capítulo I. ................................................................................................................ 85
Gráfico Nº 17. Prueba de los dobleces y pliegues para la guía. ............................. 86
Gráfico Nº 18. Muestra de corte diagonal y forma hexagonal abierta de la guía .... 87
Gráfico Nº 19. Muestra distribución de los textos parte delantera. ......................... 88
Gráfico Nº 20. Muestra distribución de los textos parte trasera al revés. ............... 88
Gráfico Nº 21. Muestra parte delantera de la maquetación final. ........................... 89
8
Gráfico Nº 22. Muestra parte trasera de la maquetación final. ............................... 90
Gráfico Nº 23. Esquema de mapa de navegación de la interfaz gráfica................. 91
Gráfico Nº 24. Pantalla de splash, registro y principal ............................................ 92
Gráfico Nº 25. Pantalla de sueño, alarma y monitoreo. .......................................... 93
Gráfico Nº 26. Pantalla de los trastornos................................................................ 94
Gráfico Nº 27. Pantalla de música y reproductor .................................................... 95
Gráfico Nº 28. Ejemplo de la pantalla de ejercicios ................................................ 96
Gráfico Nº 29. Ejemplo de las pantallas de comida y hábitos ................................ 97
Gráfico Nº 30. Mockup de la guía parte de arriba y abajo cerrada…….. .............. 100
Gráfico Nº 31. Mockup de la guía parte delantera ................................................ 101
Gráfico Nº 32. Mockup de la guía parte trasera ................................................... 102
Gráfico Nº 33. Mockup de la guía cerrada trasera ............................................... 103
Gráfico Nº 34. Mockup de la guía cerrada diagonal ............................................. 104
Gráfico Nº 35. Mockup de pantallas principales de Interfaz gráfica de una App .. 106
Gráfico Nº 36. Mockup de pantallas Sueño .......................................................... 107
Gráfico Nº 37. Mockup de pantallas Sueño. ......................................................... 107
Gráfico Nº 38. Mockup de pantallas Música Relajante. ........................................ 108
Gráfico Nº 39. Mockup de pantallas Ejercicio ....................................................... 108
Gráfico Nº 40. Mockup de pantallas Hábitos y comidas. ...................................... 109
9
Decena González. Francis Betania del Valle; Gutiérrez Sulbaran, Paula
Andreina “PROPUESTA DE DISEÑO DE GUÍA INSTRUCTIVA IMPRESA E
INTERFAZ GRÁFICA DE UNA APLICACIÓN MÓVIL SOBRE LOS
TRASTORNOS DEL SUEÑO MÁS COMUNES”. Universidad del Zulia. Trabajo
Especial de Grado como requisito para optar al título de Licenciadas en Diseño
Gráfico., Facultad de Arquitectura y Diseño. Programa: Diseño Gráfico. Maracaibo,
Venezuela, 2021, 81P
RESUMEN
La presente investigación tiene como objetivo diseñar una guía instructiva

impresa e interfaz gráfica de una aplicación móvil que contribuya al mejoramiento
de la calidad de vida de las personas con trastornos del sueño más comunes, se
busca que la guía instructiva impresa sirva de material de apoyo para las clínicas u
hospitales y la interfaz gráfica de una aplicación móvil como interacción práctica,
para que de esta manera se pueda lograr transmitir la información a través de
elementos visuales, capaces de colaborar con el mejoramiento de la calidad del
sueño. Para realizar el proyecto se analizarán una serie de métodos de diseño de
García (2019), GASCA, M, CAMARGO, L Y MEDINA. B (2013), Yeeply (2018),
Fiori (2014), que ayudaran con su desarrollo, y también de casos de estudios
referentes al tema y los productos. Finalmente se justifica el diseño de una guía
instructiva impresa e interfaz gráfica de una aplicación móvil con el fin de orientar y
atacar la problemática de los trastornos de sueño en las personas a nivel
internacional entre 20 a 40 años de edad, que sepan leer y escribir, con acceso a
teléfonos inteligentes y que visiten al médico cada bimestre.
Palabras claves: Diseño editorial, guía impresa, interfaz gráfica, aplicación móvil,
diseño digital, aplicación móvil, guía instructiva.
Correos electrónicos: betaniadecena@hotgmail.com, paugut96@gmail.com
10
Decena González. Francis Betania del Valle; Gutiérrez Sulbaran, Paula
Andreina "PROPOSAL FOR THE DESIGN OF A PRINTED INSTRUCTIONAL
GUIDE AND GRAPHIC INTERFACE OF A MOBILE APPLICATION ON THE
MOST COMMON SLEEP DISORDERS". Universidad del Zulia. Special Degree
Work as a requirement to qualify for the Bachelor's degree in Graphic Design.,
Faculty of Architecture and Design. Program: Graphic Design. Maracaibo,
Venezuela, 2021, 81P
ABSTRACT
The present research aims to design a printed instructional guide and

graphical interface of a mobile application that contributes to the improvement of the
quality of life of people with common sleep disorders, it is intended that the printed
instructional guide serves as support material for clinics or hospitals and the graphic
interface of a mobile application as a practical interaction, so that in this way
information can be transmitted through visual elements, capable of collaborating
with the improvement of the quality of sleep. will analyze a series of design methods
from Garcia (2019), GASCA, M, CAMARGO, LY MEDINA. B (2013), Yeeply (2018),
Fiori (2014), who will help with its development, and also case studies related to the
subject and products. Finally, the design of a printed instructional guide and graphic
interface of a mobile application is justified in order to guide and attack the problem
of sleep disorders in people internationally between 20 to 40 years of age, who
know how to read and write, with access to smartphones and that they visit the
doctor every two months.
Keywords: Editorial design, printed guide, graphic interface, mobile application,

digital design, mobile application, instructional guide.
Emails: betaniadecena@hotgmail.com, paugut96@gmail.com.
11
INTRODUCCIÓN
Los trastornos del sueño son afecciones que provocan cambios en la forma
de dormir del ser humano, un trastorno del sueño puede afectar la salud, seguridad
y calidad de vida en general de un individuo, ya que el sueño es una función
fisiológica esencial para la salud física y mental de las personas, su horario,
duración y calidad constituyen aspectos críticos para mantenerse física y
mentalmente saludables.
Para la creación del diseño de una guía instructiva impresa y de una interfaz
gráfica de una aplicación móvil, es necesario tomar en cuenta aspectos técnicos,
estéticos, funcionales y de elementos gráficos que son esenciales en ambos
productos. Así el usuario tendrá el equilibrio necesario de aprender con
modalidades que son más intuitivas y accesibles para difundir un mensaje visual
preciso, en otras palabras, lo cual brindara una mejor expansión sobre el tema
desde un nivel gráfico.
Para el análisis de lo antes mencionado el proyecto se desarrolla en tres

capítulos que permitirán enlazar la información necesaria para el desarrollo del
mismo. El primer capítulo hace referencia a la necesidad que se tiene el diseño de
una guía instructiva impresa e interfaz gráfica de una aplicación móvil sobre los
trastornos del sueño más comunes para personas a nivel internacional entre 20 a
40 años de edad, que sepan leer y escribir, con acceso a teléfonos inteligentes y
que visiten al médico cada bimestre.
Exponiendo que el ser humano ha tenido que adaptarse a los nuevos

horarios, ya sean de actividades nocturnas (diferentes turnos laborales) o de
actividades académicas, alterando y afectando los procesos naturales, y al mismo
tiempo la calidad de vida, todo esto genera que las personas hoy en día duerman
menos horas de lo recomendado, aumentando la probabilidad de que aparezca
algún trastorno del sueño; lo cual impacta de manera directa en el cuerpo y
conlleva cambios psicológicos. Este conjunto de inconvenientes se expone como la
12
problemática destacando los objetivos tanto generales como específicos del
proyecto y su justificación.
En el capítulo uno también se determina las metodologías seleccionadas,

para ser aplicadas en el desarrollo del proyecto, como etapas necesarias,
propuestas por autores para cada uno de los productos, que en este caso son la
guía instructiva impresa e interfaz gráfica de una aplicación móvil.
Por otra parte, en el capítulo dos lo constituyen los aspectos teóricos que
sirven de base para el desarrollo del proyecto, ya que esta permitirá establecer los
criterios y puntos de referencia con el mismo.
Seguidamente, el capítulo tres representa el aspecto de diseño para la guía

instructiva impresa e interfaz gráfica de una aplicación móvil, juntos a la
justificación de las etapas para el desarrollo de las metodologías seleccionadas y
elaboración de cada producto.
13
Capítulo I
Aspectos Metodológicos
14
CAPÍTULO I: ASPECTOS METODOLÓGICOS
SITUACIÓN OBJETO DE ESTUDIO
El sueño ocupa una tercera parte de la vida del ser humano, siendo una de
las funciones más importantes, por lo tanto, el ser humano ha intentado entenderlo
y documentarlo a lo largo de toda su historia. Según la Fundación Vivo Sano
(2017), “no solamente importa la cantidad de tiempo que se pasa durmiendo,
también es importante la calidad del sueño. Cuando el sueño es interrumpido o
acortado, puede que no hayan pasado suficiente tiempo en determinadas etapas
del sueño.” En otras palabras, lo bien que hayas descansado y lo bien que
funciones al día siguiente dependerá del tiempo total que hayas dormido y cuanto
de las diferentes etapas del sueño has tenido.
Ya que el sueño es una función fisiológica esencial para la salud física y

mental del individuo, su horario, duración y calidad constituyen aspectos críticos
para mantenerse física y mentalmente saludables (Colten y Altevogt, citado por:
Jerez, 2016). Según investigaciones realizadas por la Sociedad de Neurología, el
73.0% de la población mundial, no tienen una buena calidad de sueño.
Del mismo modo, el sueño es un proceso rítmico, y un patrón diario que

gobierna la regularidad y la intensidad del sueño y la vigilia; está gobernado por
uno o más relojes biológicos internos, estímulos ambientales de una amplia gama
de procesos que promueven o inhiben el despertar (Convertini, Krupitzky, Tripod,
Carusso, 2003)
El ciclo del sueño-vigilia se ha visto afectado debido a cambios en el

desarrollo social, por problemas familiares o de pareja, entre otras causas. Un
factor que ha roto con la sincronía natural de los ritmos biológicos ha sido la
creación de la luz eléctrica, lo cual ha generado que el día se extienda. Este
cambio ha condicionado y regulado todas las actividades humanas, imponiendo
15
ritmos no naturales, justificados en el mundo laboral y sus actividades productivas.
El ser humano ha tenido que adaptarse a los nuevos horarios, ya sean de
actividades nocturnas (diferentes turnos laborales) o de actividades académicas,
alterando y afectando los procesos naturales, y al mismo tiempo la calidad de vida
(Carskadon y Marín et al, citado por: Marín, Franco, Alpi, Tobón, Sandín, 2008).
En consecuencia, todo esto genera que las personas hoy en día duerman
menos horas de lo recomendado, aumentando la probabilidad de que aparezca
algún trastorno del sueño; lo cual impacta de manera directa en el cuerpo y
conlleva cambios psicológicos, como irritabilidad, estrés, ansiedad, impaciencia y
depresión (aspectos emocionales) y, por otro lado, enlentecimiento en el tiempo de
reacción, dificultades de memoria, menor capacidad de adaptación a situaciones
nuevas, déficit de atención y concentración en tareas concretas (aspectos
cognitivos) afectando también así la salud física (Marín, Franco, Alpi, Tobón,
Sandín, 2008).
Cabe agregar que, según el Centro para el Control y la Prevención de

Enfermedades (2012), las personas que no duermen lo necesario también son más
propensas a padecer enfermedades crónicas como hipertensión, diabetes, y
obesidad; así como también cáncer, mayor mortalidad y menor calidad de vida
productiva. Los trastornos del sueño son problemas relacionados con el acto de
dormir, que incluyen: dificultades para conciliar el sueño o permanecer dormido,
quedarse dormido en momentos inadecuados, dormir demasiado o conductas
anormales durante el sueño (MedlinePlus, 2020).
Según Eunice Kennedy Shriver National Institute of Child Health and Human
Development (2018), se pueden mencionar cinco tipos principales de trastornos del
sueño que afectan el sueño normal: insomnio, apnea del sueño, narcolepsia,
trastornos de conducta asociados al sueño REM y el sonambulismo.
El padecimiento de alguno de estos trastornos del sueño constituye un

problema frecuente en la población adulta, cuya incidencia, aunque sigue siendo
16
subestimada, va creciendo en la medida que la edad se incrementa (Simon y
VonKorff, citado por: Jerez, 2016). Según datos de la Organización Mundial de la
Salud, el 30-40% de la población general puede padecer algún tipo de trastorno del
sueño, hechas las consideraciones anteriores la propuesta de diseño será dirigida
a hombres y mujeres con esta patología, entre 20 a 35 años de edad, que sepan
leer y escribir, con acceso a teléfonos inteligentes.
Según reportes provenientes de países desarrollados para advertir la

magnitud de este problema y su implicancia para la salud pública, en EEUU se
estima que existen aproximadamente 40 millones de personas afectadas por
diferentes trastornos del sueño y del despertar (Abad y Guilleminault, citado por:
Jerez, 2016).
El insomnio afecta a un 25% de la población, la apnea del sueño que afecta a

un 25% de la población que suele ser varón con sobrepeso, roncador y mayor de
65 años, pero también afecta a las mujeres especialmente a partir de la
menopausia, la narcolepsia tiene una incidencia en ambos sexos de 25 y 50 por
cada 100.000 habitantes; mientras que los trastornos de conducta asociados al
sueño REM afectan a un 18% de la población, y el sonambulismo tiene una
prevalencia en los residentes de un 15% haciendo que en adultos mayores, pueda
ser un síntoma de un problema médico que hace que las funciones mentales
disminuyan.
Del mismo modo, la disponibilidad de medios de comunicación, como son los

dispositivos móviles, tiende a retardar las horas de sueño porque se usan cada vez
con mayor frecuencia por el público en general, en diversas actividades. Por otra
parte, gracias a estos avances en las tecnologías, se puede convertir algo negativo
en positivo, por lo cual, el presente trabajo propone el diseño de una interfaz gráfica
para una aplicación y una guía instructiva impresa, por ser medios más intuitivos,
eficaces y accesibles hacia las personas; y que a su vez sirven para orientar y
atacar la problemática de los trastornos de sueño en las personas a nivel
internacional.
17
OBJETIVO GENERAL
Diseñar una guía instructiva impresa e interfaz gráfica de una aplicación móvil
que contribuya al mejoramiento de la calidad de vida de hombres y mujeres con
trastornos del sueño más comunes entre 20 a 35 años de edad, que sepan leer y
escribir, con acceso a teléfonos inteligentes.
OBJETIVOS ESPECÍFICOS
 Investigar sobre pautas para contribuir al mejoramiento de los trastornos del

sueño más comunes, con el fin de aplicar la información en el diseño de una
guía instructiva impresa e interfaz gráfica de una aplicación móvil.
 Evaluar las metodologías más adecuadas para el desarrollo de la guía

impresa e interfaz gráfica para la aplicación móvil, con el propósito de pautar
las fases necesarias para el diseño del proyecto.
 Identificar criterios de diseño como pautas para lograr uniformidad grafica

entre la guía impresa y la interfaz gráfica de una aplicación móvil
 Elaborar propuestas de diseño para la guía impresa e interfaz gráfica de una

aplicación móvil acordes al público al que va dirigido.
18
JUSTIFICACIÓN
Primeramente, a pesar de existir un alto índice de acceso a la información

sobre los diferentes trastornos del sueño, muchas personas hoy en día no saben
que tal vez padezcan de alguno de estos trastornos; por esta razón, y debido a la
falta de productos que pueden trasmitir eficazmente la información, es que se
propone el estudio.
Desde el ámbito práctico, se plantea el diseño de una guía instructiva impresa

que servirá de material de apoyo para las clínicas u hospitales, y una interfaz
gráfica de una aplicación móvil como interacción práctica, de esta manera lograr
transmitir a través de elementos visuales capaces de colaborar con el
mejoramiento de la calidad del sueño en las personas para un mayor desempeño
diario, considerando que, estas modalidades son más intuitivas y accesibles para
difundir un mensaje visual preciso; en otras palabras lo cual brindara una mejor
expansión sobre el tema desde un nivel gráfico.
En cuanto a lo teórico, se justifica ya que brindara suficiente material

informativo tanto en la guía impresa instructiva como en la aplicación móvil, dicha
información será suministrada por expertos y autores en el área de psiquiatría y
neurología, buscando cubrir las necesidades que existan en los individuos que
tendrán acceso a ellos, aprovechándolos en todas sus dimensiones y
potencialidad.
Con referencia a lo anterior el contenido de la guía instructiva impresa estará

determinado por definiciones, imágenes retocadas o iconos vectoriales con
funciones esenciales de las diferentes herramientas. De esta manera, el lector
tendrá el equilibrio necesario de aprender y aplicar la metodología que se
transmite. De forma semejante se manejará la información brindada en la interfaz
gráfica de la aplicación móvil con componentes para el usuario, incluyendo iconos,
ventanas y menús que permitan a los beneficiarios adquirir experiencia y
conocimiento mientras interactúan con la misma.
19
Con respecto al aspecto metodológico, proporcionará apoyo a trabajos de
investigación facilitando el proceso de recopilación de información útil para el
desarrollo de dichos proyectos, así como de antecedente para estudios similares.
De igual forma, será de utilidad para todos aquellos profesionales que se
especialicen en esta patología, y en efecto a los pacientes que buscan el
mejoramiento de su calidad de descanso y, por ende, el de su vida.
Finalmente, desde el aspecto social, mediante la guía instructiva impresa e

interfaz gráfica de la aplicación móvil se facilitará de una manera más accesible y a
una mayor cantidad de personas la información sobre los trastornos del sueño más
comunes, así como también la manera de cómo mejorar la calidad de dormir por
medio de prácticas y buenos hábitos, logrando conseguir un control voluntario de la
activación fisiológica, aprendiendo a relajar el cuerpo y la mente siempre que se
necesite.
DELIMITACIÓN
La investigación se llevó a cabo entre febrero-diciembre del 2021 y enero-

marzo 2022, en el Programa de Diseño Gráfico, de la Facultad de Arquitectura y
Diseño de la Universidad del Zulia.
Contempla la propuesta del diseño de una guía instructiva impresa y una

interfaz gráfica de una aplicación móvil sobre los trastornos del sueño más
comunes, mejorando la calidad del buen dormir a nivel internacional. Sera dirigido a
hombres y mujeres con esta patología, entre 20 a 35 años de edad, que sepan leer
y escribir, con acceso a teléfonos inteligentes y que visiten al médico cada
bimestre.
20
LIMITANTES DE LA INVESTIGACIÓN
Un factor limitante es la base de datos incompletos y no actualizados sobre el

tema, la falta de material a utilizar como contenido gráfico para la interfaz de la
aplicación, y en el caso de la guía impresa, la producción de imágenes fotográficas
o videos referentes sobre estudios realizados en pacientes con trastornos del
sueño.
La falta de cooperación de los especialistas y tutores para el desarrollo del

estudio, afecta de forma directa el desenvolvimiento de la investigación, al tratarse
de un tema médico.
Mientras que en el año 2020 – 2022 limita de forma directa la rápida

expansión de la COVID-19 que es un virus que ha obligado a los gobiernos a tomar
medidas drásticas para asegurar el distanciamiento social, reprogramando las
actividades educativas con una precaria conectividad o una escasa disponibilidad
de equipos, una cobertura de señal limitada y un servicio eléctrico inestable;
condicionando a los estudiantes sólo en zonas en las que todos estos factores
funcionen correctamente (la educación online puede ser una opción viable) o en ser
impartida la información cuando cese la pandemia.
Esta situación restringe el funcionamiento normal de las entidades que pueden

suministrar información relevante sobre los trastornos del sueño, debido al índice
elevado de personas contagiadas, que, entre ellas, son los mismo especialistas,
profesores y alumnos.
MÉTODOS DE DISEÑO
El diseñador para iniciar un proceso creativo, pasa por varias etapas hasta
convertirse en un producto finalizado. Estas etapas son el método, que está
21
constituido por un conjunto de pasos a través del cual se logra obtener la creación
que se necesita en la investigación, no obstante, el método seleccionado no es
absoluto, ya que puede variar por las necesidades o problemas en el proceso, dado
esto se puede desarrollar un nuevo método o modificarlo para adquirir mejores
resultados.
METODO 1. García (2019) (Para guía instructiva impresa)
El proceso de diseño consta de 6 pasos fundamentales:
 Definir el objetivo: Este paso es fundamental porque aquí se precisará el

proyecto, su visión, qué estilo tendrá, que se requiere, etc. Para ello se
necesita, platicar sobre lo solicitado, investigar, negociar, etc.
 Estrategia: Consiste en la planeación previa, durante y después del trabajo.

Se establece cómo se realizará, que directrices tendrá, las herramientas que
se utilizarán, etc.
 Generar ideas: Es momento de desarrollar el producto gráfico, se deben

tener varias ideas o propuestas que se pueden realizar. Para ello existen
técnicas como la lluvia de ideas, el método morfológico, mapas mentales, lista
de atributos y muchas más.
 Bocetos: Una vez que se tiene la idea más formada, es posible crear bocetos
preliminares que permitan hacer tangibles las propuestas anteriores y así
eliminar elementos que no funcionen o incluso encontrar áreas de oportunidad
que no se habían notado.
 Arte final: Esta etapa consiste en la realización del proyecto como tal,
construyendo un producto final con los materiales adecuados, la idea
perfeccionada y el desarrollo necesario.
22
 Revisión con el cliente: Aunque este paso puede ser complicado es vital
que se realice para que el cliente esté completamente satisfecho con el
producto.
Gráfico Nº 1. Método de Diseño Nº 1. Elaborado por: Gutiérrez P / Decena F (2022).
METODO 2. Fiori (2014) (Para guía instructiva impresa)
Los diseños editoriales deben pasar por varias etapas hasta convertirse en un
producto finalizado. Podemos simplificar esas etapas en cuatro: creación, edición,
diseño y producción.
 Creación: Es la etapa en la que se define el tema en base a la información o

al mensaje que se quiere comunicar al lector a través del diseño, por lo que
es fundamental que este paso sea lo más ajustado a la realidad posible, para
que así lo sea también el producto final. Por tanto, se deben evaluar aspectos
como el mensaje, el contenido, si es o no una publicación especializada,
quién será el lector final o el segmento al que va dirigido.
 Edición: Comprende los distintos elementos gráficos que se incluirán en la

publicación. En esta fase se dará forma al tipo de tipografía que se va a usar,
23
el tipo de papel, el formato o la retícula, entre otros. Es la etapa más larga y
trabajosa, pero es en la que se dará forma a la idea de la fase anterior.
 Diseño: Es la fase en la que todos los elementos anteriores toman forma y se

pulen para conseguir el producto final antes de la producción.
 Producción: Es la última fase del diseño editorial. Es la parte en la que se

realiza la publicación, por lo que el producto puede pasar por imprenta o
publicarse directamente en digital.
METODO 3. METODO PROPIO (Para guía instructiva impresa)
Por lo que se refiere a los autores mencionados anteriormente la posibilidad

de diseñar un proyecto parte de una metodología, la cual se basa en las fases
fundamentales que en este caso es para el diseño de una pieza editorial, que
expone varios elementos tipográficos, técnicos y compositivos cuya finalidad es
cubrir las necesidades de un grupo de usuario, con la intención de comunicar y
trasmitir un mensaje hacia el lector lo más entendible posible.
24
Gráfico Nº 3. Método de diseño propio para la guía instructiva impresa.
Elaborado por: Gutiérrez P / Decena F (2022).
METODO 4. Yeeply (2018) (Para interfaz gráfica de una aplicación móvil)
El método de diseño para la elaboración de un multimedia se puede resumir

en 6 pasos:
 Concepción de la idea: Saber de qué tipo y que es lo que se quiere ofrecer

con la interfaz (publicidad, promoción, entretenimiento, etc.)
 Prototipo: Dejar plasmado en el papel que es lo que hará la interfaz en los

diferentes casos.
 Mockup: Plasmar donde estarán los diferentes aspectos que tendrá la

interfaz, como: el título, menú, contenido, etc.
 Diseño: Determinar el estilo de letra, colores y tipos de imágenes más

acordes para el sitio.
25
 Testing: Ver que todo esté en su sitio y sobre todo que sea funcional.
 Análisis: Reparar todos los problemas que se hayan tenido en el paso

anterior y optimizar todos los aspectos.
METODO 5. GASCA, M, CAMARGO, L Y MEDINA. B (2013) (Para interfaz

gráfica de una aplicación móvil)
“Metodología para el desarrollo de aplicaciones móviles”
El método se basa en la conceptualización de las tecnologías y las

metodologías ágiles para el desarrollo de software, y su objetivo principal es
facilitar la creación de nuevas aplicaciones. El método se desarrolla en cinco
etapas:
 Etapa de análisis: Se obtienen y clasifican los requerimientos y se

personaliza el servicio.
 Etapa de diseño: Momento en el que se define el escenario tecnológico y se

estructura la solución por medio de algún diagrama o esquema, integrando
tiempos y recursos.
26
 Etapa de desarrollo: Cuando se implementa el diseño en un producto de
software.
 Etapa de prueba de funcionamiento: Donde se emula y simula el producto

ajustando detalles, se instala en equipos reales y se evalúa el rendimiento, y
posteriormente se evalúa el potencial de éxito.
 Etapa de entrega: Se define el canal de distribución de la aplicación, con el

propósito de adecuar la aplicación al mismo.
METODO 6. METODO PROPIO (Para interfaz gráfica de una aplicación

móvil)
Lo expuesto por los autores previamente, se observa claramente que, para

diseñar una interfaz gráfica, se necesita de una metodología, un conjunto de etapas
que permitan realizar el proyecto cubriendo las necesidades de un grupo de
usuarios que comparten ciertas características, lo que se relaciona directamente
con el problema a resolver, a través del diseño de una interfaz gráfica de una
aplicación móvil.
27
Gráfico Nº 6. Método de diseño propio para la interfaz gráfica.
CUADRO COMPARTIVO: METODOS DE DISEÑO PROPIOS PARA GUÍA

INSTRUCTIVA IMPRESA E INTERFAZ GRÁFICA DE UNA APLICACIÓN MÓVIL
28
Cuadro Nº 1. Métodos de diseño propio. Elaborado por: Gutiérrez P / Decena F (2022).
29
Capítulo II
Aspectos Teóricos
30
CAPÍTULO II: ASPECTOS TEÓRICOS
ANTECEDENTES GENERALES
Origen del Diseño Editorial
Se remonta al año 960 en China, donde se usaron tipos móviles de madera.

En Europa se trabajaba una técnica para la producción de libros a partir de un
molde con letras sueltas para evitar el estamparlo en bloques de madera grabada.
Los naipes e imágenes de santos fueron las primeras obras que se realizaron.
Durante ese mismo tiempo, se comenzaron a grabar planchas con textos en letras
góticas (imitando los famosos códices de la época), pero debido a la lentitud y
trabajoso del proceso fue necesario buscar una técnica más rápida (Zanón, 2008).
A Johannes Gutenberg es al que se le atribuye la verdadera invención de la

tipografía y de la imprenta primitiva en 1440, por fundir letras sueltas y adaptar una
prensa de uvas para la impresión de pliegos de papel. Desarrollo los moldes en
madera de cada letra del alfabeto y los relleno con hierro, creando así los primeros
tipos móviles. Tuvo el acierto de unirse a impresores como Schöffer, quien
concibió los punzones para hacer las matrices y fundirlas en serie; y a Johan Fust,
que aporto el capital para llevar a buen término la empresa (Zanón, 2008).
Hasta Gutenberg, los libros se hacían a mano y muchos de los aspectos que
tienen hoy, provienen de la elaboración manuscrita. Se hacían en los monasterios
por monjes dedicados a la réplica de ejemplares por encargo del propio clero o de
reyes. La Biblia de Gutenberg, además de ser el primer libro impreso, fue el más
perfecto debido a que su imagen no se diferencia en absoluto de un manuscrito. En
1885, Mergenthaler inventa la linotipia, perfeccionándose el proceso y mejorando
la técnica (Zanón, 2008).
31
Actualmente, la evolución del arte tipográfico en un hecho, gracias a los
ordenadores, este proceso se simplifica, aunque también es cierto que se está
perdiendo. Las nuevas tecnologías nos ayudan a comunicarnos de manera más
rápida y responden a la demanda de información actual, permitiendo que la
revolución audiovisual conviva con los diseños impresos favoreciendo el desarrollo
de proyectos más ambiciosos con métodos más fáciles, como dice Zanón (2008)
en su libro: “lo nuevo nunca hace desaparecer lo anterior, simplemente lo
transforma”.
Inicio y evolución de la interfaz gráfica
El primer periodo nace en el año 1973, en el Xerox Palo Alto Research Center
(PARC), con el objetivo de crear un sistema pequeño y transportable de interacción
definitivo y óptimo para compartir información: Xerox Alto. En 1981, se crea la
Xerox Star 8010, denominada como “la oficina del futuro”, y entre los principales
objetivos del proyecto, se encontraba el de copiar e implementar el concepto de
oficina virtual (Marrero, 2006). Las innovaciones en este aspecto fueron:
 Una interfaz gráfica rudimentaria en blanco y negro.
 Botones presentados de formas textuales.
 Se podía interactuar mediante un ratón y teclado.
 No tenía iconos, ni pestañas, ni barras de desplazamiento en la navegación

de la información.
 Metáfora de organización de escritorio.
 Estandarizó las funciones generales para facilitar la interacción y mejorar la

usabilidad del sistema (mover, copiar, abrir, borrar).
32
En un segundo periodo, según Marrero (2006), la interfaz gráfica de usuario
pasa por un proceso de madurez donde se definen sus elementos básicos (sistema
de publicación digital, orientación gráfica, integración de sistemas de impresión y
software orientado a la edición), además de su implementación definitiva en los
hogares y oficinas de trabajo. Contaba con:
 Iconos para identificar aplicaciones en el escritorio.
 Sistema de ventanas con posibilidad de solapamiento, botón de cierre en la

esquina superior izquierda.
 Simplicidad (clara y concisa).
 Uso de ratón-teclado.
 Concepto de WYSIWYG (What you see is what you get, „lo que ves es lo que
obtienes) como prioridad en el diseño.
 Escritorio de aspecto rudimentario. Menú básico o flotante.
 Comienza a utilizarse el adm. de archivos, calculadora, calendario, reloj, block

de notas.
 Sroll básico e introducción del Dock (barra que muéstralos programas más
usados).
En un tercer periodo, las interfaces se centran más en un consumo estético e

interactivo, es decir, se transforma en un objeto inteligente abierto a los procesos
de customización por parte del usuario. En esta época se perciben grandes
avances tecnológicos, es por esto que aparece Windows 95 (primera interfaz
gráfica de usuario nativa), Mac OS X y Windows XP (Marrero 2006):
33
 Software de Internet Explorer integrado.
 Posibilidad de personalizar el escritorio, la apariencia del sistema operativo e

incluir nombres largos en los archivos.
 Interfaz orientada a objetos.
 Manipulación del sistema (configuración de redes, administración del equipo).

Adaptada por el usuario a diferentes estilos.
 El asistente (ayudando al usuario), mantiene accesos directos a las

aplicaciones y documentos más usadas.
 Controles de ventanas en la parte superior de izquierda.
 Interfaz con transparencias y formas redondeadas en las ventanas, iconos

con formas sinuosas y degradadas.
En 2012 sale al mercado Windows 8. En esta versión se elimina el botón de

inicio, trata de igualar a las interfaces de dispositivos móviles en cuanto a función y
apariencia. Simplifica los elementos gráficos (iconos) estableciendo un diseño
plano o Flat Design (Marrero 2006).
Actualmente no sólo se ven interfaces gráficas para PC sino también para

tablets, celulares y otros dispositivos móviles; ellas están abiertas a los procesos de
customización, permitiendo que el usuario modifique aspectos visuales de la
interfaz de modo que la pueda adaptar a sus gustos. Este proceso convierte a la
interfaz de algún modo en un objeto con identidad propia, maleable y dispuesto
para el consumo estético. Estas propiedades acercan la interfaz a objetos
interactivos inteligentes, con los que podemos interaccionar y a través de los que
poder acceder a ciertas informaciones (Marrero 2006).
34
Inicio de los dispositivos móviles
Al observar el desarrollo tecnológico que ha experimentado la Humanidad

desde mediados del siglo XX hasta hoy, no cabe duda que se ha producido una
verdadera revolución. El descubrimiento de la informática, su aplicación paulatina
en todo tipo de áreas de conocimiento y de producción, así como también, la
creación del computador y aparición del internet, cambiaron la sociedad y
economía. Aparecen a finales de los años 70s nuevas tecnologías desarrolladas,
como lo fue la telefonía celular, revolucionando enormemente las actividades
diarias (Aranaz, 2009).
Cabe agregar, que la reducción del tamaño de los componentes y el aumento

de sus prestaciones permitió acercar ambos mundos, constituyendo cada vez más
una realidad que ofrece al usuario funciones de comunicación y procesamiento de
datos que van más allá de las simples llamadas telefónicas o la ejecución de
aplicaciones básicas; se han convertido en una herramienta primordial para la
gente común y de negocios, haciéndolas sentir más segura y productivas (Aranaz,
Martínez, 2009-20001).
Con respecto a lo antes mencionado, Martin Cooper fue el pionero en esta

tecnología, considerándole "el padre de la telefonía celular", al introducir el primer
radioteléfono en 1973 en los Estados Unidos; pero no fue hasta 1979 que aparece
el primer sistema comercial en Tokio, por la compañía NTT (Nippon Telegraph &
Telephone Corp.). En 1981 en los países Nórdicos se introduce un sistema celular
similar a AMPS (Advanced MobilePhone System). Por otro lado, en los Estados
Unidos, en octubre de 1983 se pone en operación el primer sistema comercial en la
ciudad de Chicago (Martínez, 2001).
35
Evolución de los sistemas operativos de dispositivos móviles
La telefonía ha seguido un proceso hacia la miniaturización y la portabilidad,

con dispositivos más capaces y pequeños, muy diferentes a los que se veían hace
años (Arroyo, 2013). Con la aparición de la nueva generación de teléfonos
inteligentes o Smartphones respaldada por la evolución tecnológica del hardware,
sistemas como Android e iOS (multiplataforma eficientes y estables) conforman lo
que se intentó lograr con Symbian en los años 90s y comienzos del 2000 con su
destacada presencia en la industria (Serna, 2016).
Según menciona Sebastián Serna en su libro (2016, Diseño de interfaces en

aplicaciones móviles), un sistema operativo móvil es similar a los ya conocidos Mac
OS, Windows o Linux, pero con funciones más simplificadas. A partir de la última
década, su masiva adopción ha transformado la dinámica, permitiendo la creación
de aplicaciones y ecosistemas de servicios que han ayudado a que las
interacciones móviles dejaran de ser como en los teléfonos convencionales y han
abierto posibilidades infinitas para el consumo de contenido. Este consumo ha sido
promovido por tiendas o mercados de aplicaciones donde se encuentran e instalan
paquetes de software disponibles a través de una comunidad.
Si tomamos en cuanta todo su impacto actual, los sistemas operativos para

teléfonos móviles han comenzado a volverse una necesidad para los usuarios
quienes utilizan cada vez más estas plataformas (Serna, 2016), pues “la tecnología
avanza y en materia de comunicaciones aún más; con una sociedad cada vez más
intuitiva y visualmente exigente”, es importante diseñar sistemas que soporten las
aplicaciones y necesidades que se demandan (Pedrozo, 2012).
Tendencias en el diseño en aplicaciones móviles
Según ABAMobile (2020), el sector de las aplicaciones móviles continua en

pleno auge y han constituido un ecosistema propio y un potente motor de
36
innovación. Cambios en los hábitos de consumo de los usuarios, como por ejemplo
la necesidad de satisfacer sus necesidades rápidamente, ha favorecido el aumento
en el desarrollo de apps. “La interacción con el sistema se realiza por medio de
pantallas táctiles y teclados físicos incorporados, permitiendo mejorar y
personalizar un dispositivo” (Serna, 2016).
Para el usuario final, el diseño es un elemento determinante que puede

generar un impacto en su percepción general. Desde los años 80 se han utilizado
lenguajes de diseño en la industria informática, los cuales ofrecen un marco de
referencia para definir un vocabulario visual, unificando principios que sugieren una
dirección estética y conceptual para el diseño de aplicaciones atractivas y
consistentes (Serna, 2016)
En cierto modo, estas innovaciones en el diseño de interfaces para

aplicaciones móviles se han realizado desde el concepto Mobile First, como un
enfoque que propone diseñar primero la interfaz en su versión móvil y luego
adaptarla a los demás soportes, para abordar el proceso de diseño desde las
funcionalidades esenciales. Actualmente, según G-Tech Design Services (2020),
las tendencias en diseño de aplicaciones emergentes, son más vibrantes, más
pulidas, más envolventes. Es posible resumir las características de la siguiente
manera:
 Ilustraciones grandes, al frente y al centro. No solo gráficos sino verdaderas

ilustraciones planas y semi-planas en paletas contrastantes y llamativas.
 Las fuentes sans serif no van a ninguna parte, pero se degradan para admitir
roles y otorgan a las fuentes serif la mejor facturación. El uso de dos tipos de
fuentes juntas crea una jerarquía visual, separando instantáneamente los
titulares del texto de soporte.
37
 Colores maximizados, algunos en particular (púrpura, azul, rosa y otros
colores de neón) por ser colores futuristas y que realmente resaltan sobre
fondos oscuros, dándoles una sensación brillante, incluso ciberpunk.
 Los degradados, las superposiciones y los estallidos de color serán

transparentes y semitransparentes en su pantalla.
 Evolución hacia las formas orgánicas redondeadas, permitiendo que estas

formas imperfectas y suaves ganen tracción porque hacen que los entornos
tecnológicos estereotípicamente fríos y estériles sean más fáciles de
interactuar.
 Utilización del modo oscuro. El texto claro (pero no blanco), neones y

gradientes brillantes se contrastan para hacer que los elementos resalten
contra fondos oscuros. La visualización de aplicaciones en modo oscuro no
solo protege los ojos de la fatiga visual, sino que es menos exigente con la
batería de su teléfono.
 Los elementos 3D convertidos en los puntos focales de los diseños;

generando que una imagen tridimensional se represente perfectamente en la
pantalla de un teléfono plano, convirtiendo la aplicación en un espacio físico
en el que el usuario siente que puede entrar.
 Tendencia hacia el estilo retro. Diseños que recuerdan los videojuegos y las
pantallas de computadora de finales de los 80 y principios de los 90 con texto
pixelado, gráficos simples y en bloque.
El estudio de proyectos anteriores permite determinar criterios de diseño,

bases teóricas, algún enfoque metodológico, esquemas de planificación, entre
otros; para la elaboración del producto final. Con referencia a lo anterior, se
38
presenta un cuadro comparativo de investigaciones realizadas por otros autores
concernientes al diseño editorial y digital.
39
ANTECEDENTES ESPECÍFICOS
Cuadro Nº 2.Antecedetes específicos. Elaborado por: Gutiérrez P / Decena F (2022).
40
MARCO REFERENCIAL
1. Diseño editorial
1.1) Definición
Ante todo, se puede definir como pieza editorial “a toda aquella publicación
que comunique ideas o conceptos dirigida a un público específico” (Spina, 2005).
Puede estar volcada en diferentes soportes, por ejemplo, el papel, la web o un CD;
por lo tanto, es un medio, nunca un fin en sí misma. El diseño editorial es uno de
los escaparates más competitivos en el ámbito del diseño gráfico, su originalidad
posiciona a las revistas, libros, guías, periódicos, catálogos, folletos, entre otros;
como unos soportes que impulsan con precisión la información (Zanón, 2008).
Por otra parte, según Cadwell y Zappaterra (2008), una manera sencilla de
definir el diseño editorial “es considerarlo una forma de periodismo visual, puede
entretener, informar, instruir, comunicar, educar o desarrollar una combinación de
todas estas acciones”, es decir, se le comunica al lector un contenido visual
mediante un diseño y con herramientas acordes al tipo de publicación.
Finalmente, podemos decir que es el área del diseño gráfico especializada en

la maquetación y composición de ideas a través de tipografías, colores,
ilustraciones, imágenes, y formas que muestran un equilibrio estético y funcional
entre el contenido escrito, visual y los espacios (Zanón, 2008). Incluye la
realización de la parte grafica tanto interior como exterior, para conseguir una pieza
comunicacional que transmita un mensaje (Almazán, 2015).
1.2) Clasificación
41
Dentro del sector editorial el principal producto es el libro, y según Tena
Parera, citado por: Almazán, en su libro Definición y diseño de productos editoriales
(2015), lo considera referente para clasificar el resto de los productos gráficos:
 Productos editoriales: Incluye trabajos de edición y de las editoriales. El

principal es el libro, aunque hay de otros tipos: volumen suelto, tomo, folleto,
enciclopedia o colección.
 Productos Para editoriales: Se refiere a las ediciones periódicas. Tienen

muchos aspectos comunes con los libros: periódicos, revistas, boletines, entre
otros.
 Productos Extra editoriales: Es todo impreso de hoja sencilla con uno o más
dobleces que no forma parte de los trabajos de edición. Son diversos y
difíciles de clasificar: posters, trípticos, octavillas, tarjetas, guías, entre otros.
Según lo que menciona Zanón (2008) en su libro, dependiendo del número de

hojas, los impresos editoriales se dividen en:
 Hojas sueltas: Entre una y cuatro páginas.
 Folleto: Si tiene 5 y 48 paginas.
 Libro: Si tiene más de 49 páginas.
1.3) Consideraciones en el diseño editorial
Existen una serie de características que deben tenerse en cuenta a la hora de

realizar un proyecto editorial con el objetivo de destacar y conseguir que el usuario
se sienta atraído por la información, Fiori (2014) las define así:
42
 Legibilidad: La elección de la tipografía es esencial, ya que de esto
dependerá que el texto sea agradable y fácil de leer antes los ojos del lector;
logrando así una comunicación efectiva. Esto también va a depender del
carácter que se le quiera dar al proyecto, sin embargo, es importante poder
encontrar la información principal de manera clara.
 Tipografía limitada: Se recomienda no utilizar muchas ya que esto genera

confusión, agotamiento visual y un resultado menos homogéneo. Que sea
una tipografía sencilla, sin serif y en caso de querer utilizar una tipografía
decorativa, usarla lo menos posible.
 Color y cuerpo: Es fundamental en todo diseño y también un problema

frecuente. Es importante apoyar la legibilidad de los textos, con el color y el
fondo, de manera que el contenido se vea armónico y el fondo no le quite
visibilidad.
 Interlineado: Se recomienda se un 20% mayor que el cuerpo utilizado (por

ejemplo: 10/12, es decir, cuerpo 10, interlineado 12), ya que tiene que facilitar
el pasaje de una línea a otra. Las líneas demasiadas juntas dificultan la lectura
porque se mezclan, y demasiado separadas dificultan la unión entre ellas.
 Interletraje: Es el espacio entre las letras, que determinará la densidad

visual. Si se aumenta se puede obtener un texto más ligero y elegante, pero si
es demasiado amplio, puede dificultar la lectura fluida. Si se reduce,
manteniendo la legibilidad, se puede crear un texto con mayor continuidad.
1.4) Determinantes del diseño editorial
Para proyectar un buen diseño editorial es muy importante conocer cuatro

criterios que van a condicionar el diseño del producto editorial, según Almazán
(2015):
43
 El producto: Se refiere al tipo de contenido con el que se va a trabajar, es
decir, el tipo de publicación.
 El público: La composición de la pieza de diseño va a depender mucho del

tipo de mercado meta al que se dirija.
 El medio: Es importante saber cómo estructurar y organizar la información,

considerando que, cada medio, tiene sus propias características en cuanto a
formato, composición, contenido y jerarquía de la información.
 La competencia: Conocer algunos aspectos importantes de la competencia o

sobre el tema puede ser útil a la hora de desarrollar.
2. Diseño de folletos
2.1) Definición
Los folletos, también llamados brochure, son un impreso con un número

reducido de hojas, que sirve como instrumento divulgativo o publicitario. Por su
tamaño y composición, puede adoptar varias formas (García, 2015). Dicho de otro
modo, constituye un medio eficaz de publicitar o representar las características de
un producto, compañía o tema específico, manejando diferentes criterios para cada
uno de los tipos (Navarro, 2007).
En resumidas cuentas, el folleto “es un ejemplo de documento de un tamaño

especifico con el que se debe trabajar. Su texto e imágenes deben caber dentro de
un espacio preciso, o de lo contrario no se doblará correctamente” (García, 2015).
2.2) Finalidad del folleto
44
El folleto, según Navarro (2007), puede desempeñar tres funciones:
informativa, publicitaria e identificadora, siendo la más utilizada, por lo general, la
función publicitaria. Su eficacia reside en la inmediatez y la materialidad:
 Inmediatez: Se presenta de manera repentina ante los ojos de las personas y

produce un efecto de reconocimiento inmediato. Los colores, la diagramación,
la tipografía, entre otras cosas, ayudan a sumergir al público en la
información.
 Materialidad: como soporte gráfico, se puede distribuir por correo, entregar

en mano o exponer para que las personas los tomen. Así, permanece en
manos del público y con ello se garantiza una mayor persistencia del
mensaje.
Se usa para difundir información no muy extensa, evitando por lo general, un

nivel muy académico (salvo en casos específicos), con el objetivo de captar la
atención de las personas y propagar los temas específicos que tratan (Ordoñez,
2017).
2.3) Clasificación
Según Navarro (2007), los formatos y denominaciones más comunes del

folleto son:
 Díptico tamaño carta o A4.
 Volante tamaño carta o A3.
 Díptico tamaño A3.
45
 Tríptico tamaño A4 (plegado para carta).
 Carpeta con pestaña para encartes.
Según Ordoñez (2017), una estrategia para manejar la encuadernación del

folleto de mejor manera es según el número de hojas que generara el contenido.
Por lo tanto, pueden ser:
 Plegables: Se caracterizan por tener apariencia desplegable, puede ser

impreso por uno o ambos lados. Su información es descriptiva y con poca
cantidad de texto, envía un mensaje en un formato particular que genera
atracción inmediata.
 Amplios, tipo libros: Este tipo de folleto contiene una mayor cantidad de
contenido, en un formato un poco más formal. Suelen ser a menudo con
materiales de alta calidad como: portada rígida, encuadernados a la
americana, cosido a caballete, etc.
 Trípticos o dípticos: Se reconocen por su tamaño doblado rectangular

dividido en tres secciones, sumando un conjunto de 6 hojas. Su tamaño suele
ser de cuatro, media o una hoja entera.
2.4) Criterios y condicionantes del diseño de folletos
La mayoría de los folletos posibilitan la incorporación de una importante

presencia de texto, ya que los paneles o pliegues ofrecen un espacio suficiente
para presentar una explicación y descripción del producto, servicio o tema que se
plantee (Navarro, 2007).
También es importante determinar un estilo grafico que sea coherente con la

información, ya que todo el folleto debe constituir una unidad significativa. Las
46
imágenes o fotografías han de adecuarse a los espacios para que la lectura
acompañe a los contenidos escritos o para que ilustre sin palabras algunos
conceptos expuestos. Por supuesto, una buena elección en la iconografía
(fotografías contrastantes, dibujos precisos, entre otros) mejorara la composición e
imagen general del producto (Navarro, 2007).
3. Diseño gráfico digital
3.1) Definición
En lo que respecta al diseño digital, es necesario aclarar que existen

cuestiones propias del mismo, una de ellas, es ser una disciplina que está en
constante fase evolutiva muy fuerte, al igual que la tecnología; es más profundo, a
las propias raíces del mismo. Por tanto, se encuentra orientado a posicionar y darle
visibilidad a la identidad de empresas, servicios y relevancia de productos para
posicionarse así en los mercados digitales que se basan en búsquedas en internet
y la construcción de contenidos (Royo,2004).
Dentro de este orden de ideas, el diseño gráfico digital “es la disciplina que
posibilita comunicar informaciones, hechos, ideas y valores útiles al hombre
mediante una actividad en la cual se procesan factores sociales, culturales,
perceptivos, estéticos, tecnológicos y ambientales para obtener formas visuales
auténticamente comunicantes” según la Universidad Regiomontana, citado por:
Chávez, C. y Quintero, G. en el trabajo de grado titulado Diseño de posters
infográficos del casto central histórico de Maracaibo dirigido a mayores de 18 años
(2012).
Por otra parte, según Alberich (2007) es el tratamiento grafico del espacio en
los entornos digitales frente a los límites preestablecidos y la estabilidad en los
espacios de representación gráfica.
47
3.2) Dispositivos móviles
Existen 2 rasgos que definen a los dispositivos móviles, la posibilidad de

movilidad de quien lo emplea por ser pequeños y la conexión a internet. Se pueden
definir entonces, como unos aparatos de tamaño pequeño que cuentan con
capacidad de procesamiento, conexión permanente o intermitente a la red, una
memoria limitada, diseñado para una función principal, pero con versatilidad para
desarrollar otras. Su operación es de uso individual, y puede configurarse al gusto
de la persona (Guevara, 2010).
4. Aplicaciones móviles
4.1) Definición
Para empezar, las aplicaciones son también llamadas apps, y están presentes
en los teléfonos desde hace tiempo. En esencia, “no deja de ser un software, pero
las apps son para los móviles lo que los programas son para los ordenadores de
escritorio”. En el 2021 se pueden encontrar aplicaciones de todo tipo, forma y color;
pero en los primeros teléfonos, estaban enfocadas era a mejorar la productividad
personal, como: alarmas, calendarios, calculadoras. (Cuello y Vittone, 2013).
Dicho de otro modo, es un programa que se puede descargar fácilmente y al

que se accede directamente desde un teléfono o desde algún otro aparato móvil,
sin previa instalación. Ellas nacen de la idea de facilitar o permitir ciertas tareas
donde se haya detectado una necesidad insatisfecha, el mejoramiento de las
soluciones existentes, o simplemente una oportunidad comercial (Santa María,
2013).
48
“Pueden ser desde pequeñísimos programas de apenas unas líneas de
código, hasta grandes obras de ingeniería informática con miles de horas de
trabajo detrás” (Santa María, 2013).
4.2) Tipos de aplicaciones móviles según las necesidades
De acuerdo a lo que Cuello y Vittone nos plantean en su libro, “las

aplicaciones en esta categoría van en base al tipo de contenido que se ofrece al
usuario, lo cual condicionara el diseño y el nivel de detalle con el que contara la
interfaz”. A pesar de todo, las apps pueden pertenecer a más de una categoría,
pero siendo rigurosos, Cuello y Vittone (2013), las dividen de la siguiente manera:
 Entretenimiento: En esta categoría se encuentran los juegos y todas las

aplicaciones relacionas con la diversión del usuario. Sus elementos
principales son los gráficos, animaciones y efectos de sonido.
 Sociales: Se orientan principalmente a la comunicación e interacción entre

los usuarios, son todas las redes sociales.
 Utilitarias y productividad: Estas aplicaciones están más asociadas con el

sector empresarial. Proporcionan herramientas para solucionar problemas
específicos de los consumidores y ejecutar tareas concretas, cortas y rápidas.
 Educativas e informativas: Son aquellas aplicaciones que ofrecen un aporte

en relación al conocimiento de diversos temas y noticias. En ellas es esencial
el acceso al contenido, por tal motivo, la legibilidad, facilidad de navegación y
herramientas de búsquedas son importantes.
 Creación: Son las que ponen en manifiesto la creatividad del usuario y

ofrecen herramientas para potenciarla, como, por ejemplo: edición de videos,
49
retoques de fotografías, creación de ilustraciones, producir sonidos o escribir,
entre otras.
4.3) Interfaz
4.3.1) Definición
La palabra Interfaz, según Marrero (2006), proviene del latín inter: “entre” o
“en medio”, y facies: “superficie, vista o lado de una cosa”; por lo tanto, es:
“superficie, vista o lado mediador”.
En el proceso de comunicación existe cierta interacción entre un sujeto y un

artefacto (computador, tv, radio) o entre varios sujetos. Y en la interacción es
necesaria la comunicación o transmisión de información desde un sujeto a otro, o
desde un sujeto y un artefacto o viceversa. Podemos decir que una interfaz, “es el
espacio que media la relación de un sujeto y un ordenador o sistema interactivo.
Posibilita a la persona interactuar con él.” (Marrero, 2006)
Si hablamos de interactuar, según el diccionario de la Real Academia de la

Lengua Española (2020), se puede definir a la interacción como: “la acción que se
ejerce recíprocamente entre dos o más objetos, agentes, fuerzas, funciones, etc.”
Según Mercovich, citado por: Lacalle, (2001), cuando utilizas un programa

informático, suele haber «algo» entre tú y él. Ese algo, que es a la vez un límite y
un espacio común entre ambas partes, es la interfaz
Dicho de otra forma, la interfaz es el entorno de interacción persona-

ordenador según la Universitat Oberta de Catalunya (2020), ya que permite:
 Que la persona pueda controlar efectivamente las acciones de la máquina.
50
 Que la persona reciba respuestas de la máquina que le permitan saber si la
interacción es correcta y cómo seguir actuando.
4.3.2) Características
Según Hunhan (2018), el desarrollo de una buena interfaz debe tener ciertas
características básicas, estas se pueden sintetizar en:
 Fácil uso, comprensión y aprendizaje para el usuario.
 El tema principal debe ser fácil de identificar.
 Su diseño debe contener menús de búsqueda, desplazamiento e iconos de

fácil acceso.
 Debe contener herramientas de ayuda y consulta para el usuario.
 La tipografía y el tratamiento de color son fundamentales para una buena

interfaz por lo que se debe prestar importancia al diseño de las formas y la
coherencia interna entre ellas.
4.3.3) Clasificación
Desde que se inventaron los ordenadores, cada vez se han desarrollado

métodos más avanzados de interacción persona-ordenador (IPO), según Digital
Guide IONOS (2017), hoy en día existen numerosas interfaces indiferentes. Entre
las más comunes se encuentran:
 Interfaz de línea de comandos (Command Line Interfaces - CLI): Es un

método que permite a los usuarios teclear unos comandos específicos a un
51
programa informático, y el ordenador mostraba el resultado en formato de
texto.
 Interfaz de usuario de texto (Text User Interface - TUI): Son algo más
cómodas y, en ellas, la interacción con el ordenador también tiene lugar por
medio del teclado. Las TUI marcan el paso de las meras interfaces de líneas
de comando a interfaces gráficas de usuario. La diferencia con las CLI
consiste en que la interfaz utiliza la pantalla como una superficie plana y no
orientada a las líneas.
 Interfaz gráfica de usuario (Graphical User Interfaces - GUI): Son en la

actualidad, el estándar más establecido. Este software se aplica utilizando un
conjunto de imágenes y objetos gráficos para representar la información y
acciones disponibles en la interfaz. Toman como referencia de forma creativa
a objetos del “mundo real” para proporcionar un entorno visual sencillo que
permita la comunicación con el sistema operativo de una máquina o
computador.
 Interfaz de voz (Voice User Interface - VUI): Se trata de programas capaces

de permitir la interacción con los ordenadores por medio del control por voz.
Una ventaja de esta interfaz es que el control por voz garantiza una mayor
accesibilidad.
 Interfaz natural de usuario (Natural User Interface - NUI): La comunicación

con el ordenador o dispositivo se establece de un modo especialmente
intuitivo que puede ser contemplada como una evolución de la interfaz gráfica
de usuario y de la Voice User Interface. En este sentido, la interfaz de usuario
interactiva reacciona tanto a los gestos como a los movimientos y al lenguaje.
Asimismo, también es capaz de reconocer rostros y objetos.
4.3.4) Elementos compositivos
52
En un software bien diseñado, los elementos que componen la interfaz, son
funcionalmente independientes. Según Guía Digital (2020), los elementos que las
interfaces deben tener son los siguientes:
a) Sistema de navegación: Conjunto de elementos presente en cada una de

las pantallas, que permite a un usuario moverse por las diferentes secciones
de un sitio y retornar hasta la portada, sin sentir la sensación de haberse
perdido en ese camino. Este sistema de navegación debe contar a su vez
con:
 Menú de secciones: Es una zona de la interfaz en la que se detallan las

secciones o categorías en las que está dividida la información contenida
en el sitio. Normalmente se ubica en la parte superior de cada página o
bien en la zona superior derecha o izquierda, aunque según estudios
basados en "eyetracking", parece indicado ubicarlos en la zona superior
o en la zona superior izquierda.
 Menú de rastros: Es el menú que indica mediante los nombres de cada

sección o categoría del menú, la distancia que separa a la página actual
de la portada. Por ejemplo: si el usuario está revisando la página del
"Programa A", el menú correspondiente debe indicar Portada >
Programas > "Programa A".
 Identificación de secciones: Debe estar en la zona superior de la

página. Puede ser gráfico y por lo mismo tener alguna imagen alusiva a
la sección o categoría o bien ser una solución que incorpore sólo texto y
color.
 Botones de acción: Son aquellos elementos que permiten realizar

acciones directas relativas a la navegación y que se muestran como
53
parte de ésta (regreso a la Portada, contacto, envío de mail al sitio y
mapa del sitio).
 Pie de páginas: Se entiende que la zona inferior de cada pantalla

cumple el relevante papel de completar la información que se ofrece en
las zonas superiores de navegación.
b) Áreas de contenido: Son las zonas en la que se entrega la información en

cada página web, sin importar el formato o los medios que ésta utilice. Dentro
de la zona de contenido se debe distinguir las zonas de título, resumen e
información propiamente tal.
c) Áreas de interacción: Son las zonas en la que se ofrece realización de

acciones por parte de los usuarios, a través de las cuales pueden utilizar los
servicios que pone en marcha el espacio digital. Uno de los elementos que se
debe tener en cuenta en este aspecto es que el usuario normalmente
entiende que las zonas de interacción son las que muestran botones y en
ellas no se lee, sino que se ingresa información y se desarrolla la actividad
que el sitio ofrece.
Por lo mismo, es necesario que en las zonas de interacción haya la mínima

información posible y que siempre sea la necesaria para llevar a cabo en forma
adecuada la acción a que se refiere la interfaz.
4.4) Interfaz gráfica de usuario
4.4.1) Definición
En informática, la interfaz gráfica de usuario (GUI) se puede definir como un

conjunto de formas y métodos que posibilitan a los usuarios la interacción con un
sistema, empleando para esto gráficos e imágenes. La GUI es algo que está
54
totalmente presente en nuestro día a día, ya sea en una página web, en un
programa del ordenador o en una app, estamos interactuando constantemente con
ellas.
La interfaz gráfica de usuario (Graphical User Interfaces, también conocido

con su acrónimo GUI), según Marrero (2006), “es una cara o superficie mediadora
que usa metáforas visuales y signos gráficos como paradigma interactivo entre la
persona y el ordenador”. Esta superficie mediadora puede ser la propia del sistema
operativo o bien la particular de la aplicación que se está utilizando.
Del mismo modo, otra definición es la de Neo Wiki (2019), que dice que, “es
un programa que hace las veces de intermediario entre usuario y máquina. Un
software que muestra de forma visual todas las acciones posibles en una
plataforma, así como la información disponible, para que los usuarios puedan
interactuar con mayor facilidad y sin necesidad de disponer de profundos
conocimientos de informática.”
Igualmente, según Haro y Quevedo (2011) que la definen como “tipo de

visualización que permite al usuario elegir comandos, iniciar programas y ver listas
de archivos y otras opciones utilizando las representaciones visuales (iconos) y las
listas de elementos del menú. Las selecciones pueden activarse bien a través del
teclado con el ratón.”
4.4.2) Características
Las características que debe poseer toda gran interfaz gráfica de usuario,
según el Instituto Internet (2019), pueden resumirse en:
 Simpleza: La simplicidad de la interfaz permite que el usuario pueda usarla

de forma fluida, por lo cual no se debe saturar visualmente la pantalla. El
diseño ha de comunicar de forma efectiva, para así facilitar la comunicación y
55
el fácil aprendizaje, independientemente de la experiencia, conocimiento y
capacidades del usuario.
 Claridad: Se deben nombrar apropiadamente los elementos del menú y

cualquier otro contenido textual que posea la interfaz. Los mensajes deben
ser concisos, ya que el usuario espera poder navegar rápidamente la página.
Si los mensajes no son concisos, los usuarios no los leerán y afectará de
forma negativa la experiencia de usuario.
 Coherencia: Estructurar las pantallas de manera clara y concisa. Cada

elemento en pantalla debe ser consistente en su posición, función y
significado. Consistencia se va a traducir en facilidad de uso. Algunos factores
que permiten la coherencia en una interfaz son: el tratamiento de las
imágenes, las fuentes, el lenguaje y tono de comunicación, el uso de los
colores, el uso de retículas, la ubicación del menú y el logo.
 Estética: La interfaz debe ser visualmente atractiva, con una propuesta

innovadora que deleite los sentidos. Es preciso proporcionar un entorno
agradable que contribuya al entendimiento por parte del usuario de la
información presentada.
 Familiaridad: Para tener una interfaz que se sienta familiar se deben emplear
iconos universales o metáforas visuales, por ser más fáciles de comprender
que cualquier representación verbal (reconocimiento intuitivo). También
mantener ciertos elementos en sitios específicos.
4.4.3) Principales elementos de diseño
El reto para los diseñadores de las GUI es poder presentar grandes

cantidades de información y funciones sobre un elemento de tipo visual de una
manera clara y eficiente. Los sistemas de ventanas tradicionales dividen la pantalla
56
en áreas funcionales donde se pueden interaccionar con diferentes elementos y
gráficos (Monjo, Mora & Garreta, 2019).
La apariencia y el comportamiento de este sistema viene determinado por un

conjunto de elementos comunes del sistema de ventanas, si bien las interfaces
graficas hacen uso de ellos, su nomenclatura puede variar en cada caso (Monjo,
Mora & Garreta, 2019). Algunos de los principales elementos de diseño de una GUI
son, según Marrero (2016):
 Dispositivos de interfaz humana: Elementos como son el teclado, el mouse,

el cursor táctil, la tableta digitalizadora, el joystick, entre otros, que permiten
introducir de manera directa y en tiempo real información a la computadora o
teléfono móvil, sincronizado simultáneamente con el empleo de una interfaz
gráfica.
 Ventanas: Recursos interactivos utilizados para la navegación, visualización y

jerarquización de la información dispuesta en la interfaz gráfica, normalmente
usadas por los gestores de archivos en el sistema para visualizar
documentos, aplicaciones e iconos sobre los cuales realizar diversas
acciones.
 Menús: Listas de comandos, gráficos o textuales, agrupados de una forma

estructurada y jerárquica, normalmente inscritos dentro de un área específica
en la interfaz, los cuales posibilitan la ejecución de los elementos que
contienen, obteniendo una respuesta inmediata al respecto.
 Controles: Elementos que, empleando la metáfora visual y funcional de los

botones incluidos en los dispositivos tecnológicos, posibilita introducir datos
de confirmación al sistema.
 Iconos: Signos resultantes de la representación metafórica, que suponen

algún archivo, carpeta, aplicación o dispositivos de un sistema informático.
57
 Campos de texto: Elementos con una gramática visual propia, delimitado en
un área específica en dónde existe la posibilidad de introducir un texto.
 Elementos de información de salida: Elementos tales como: la barra de

progreso, los cuadros de consejo, la barra de estado, entre otros;
configurados para dar información al usuario del estado del sistema en un
momento determinado.
4.4.4) Consideraciones de diseño
Existen muchas soluciones automatizadas para crear diseños GUI más

simples y rápidos, sin embargo, el diseñador debe entender las reglas básicas
sobre cómo diseñar una interfaz gráfica de usuario. Principalmente, las
necesidades del usuario deben impulsar todas las decisiones del diseño, dado que
el enfoque está centrado en usuarios potenciales (Buitrón, 2011).
Los criterios necesarios y/o recomendables respecto a la sintaxis del campo

compositivo según Buitrón (2011) son:
 Crear composiciones organizadas y consistentes a través del uso de retículas

compositivas.
 Disponer los elementos compositivos de acuerdo a estructuras que permitan

el equilibro de pesos visuales.
 Establecer un equilibrio visual entre los elementos compositivos.
 Establecer jerarquías visuales para no generar composiciones monótonas.
58
 Utilizar los elementos compositivos (tipografía, imagen y color) para generar
composiciones armónicas, equilibradas y consistentes.
Se presenta a continuación, según Buitrón (2011), los criterios necesarios y/o

recomendables respecto a los elementos compositivos:
Tipografía:
 Utilizar adecuadamente, según sea el caso, las justificaciones tipográficas

para no generar problemas de legibilidad como son ríos, saltos de línea, entre
otras.
 Utilizar las variantes tipográficas como elementos de énfasis de manera

moderada y coherente para no generar problemas de lectura.
 Utilizar fuentes creadas para visualizarse en pantalla o, en su caso, de

sistema para mejorar la legibilidad y evitar los problemas técnicos de
variabilidad entre plataformas, respectivamente.
Imagen:
 Considerar las características de tamaño, resolución, modo de color y formato

que definen a las imágenes para pantalla.
 Utilizar las imágenes como elementos de énfasis.
 Utilizar adecuadamente los recursos gráficos de manera que no den por

resultado composiciones ambiguas.
Color:
 Utilizar el color como elemento de énfasis.
59
 Utilizar códigos de color redundantes que proporcionen unidad y consistencia.
 Evitar las connotaciones sociales y culturales que puedan generar los colores.
 Cuidar las mezclas y yuxtaposiciones cromáticas para evitar problemas de

legibilidad.
5. Trastornos del Sueño
5.1) Definición
Los trastornos del sueño son problemas relacionados con el acto de dormir,
que incluyen: dificultades para conciliar el sueño o permanecer dormido (insomnio,
el problema más prevalente); quedarse dormido en momentos inadecuados
(problemas con el ritmo del sueño); dormir demasiado (hipersomnia), y conductas
anormales durante el sueño (parasomnias) (Alonso, 2019).
5.2) Clasificación
La clasificación Internacional de los trastornos del sueño (International

Classification of Sleep Disorders o ICSD) ha subdividido los trastornos del sueño en
tres grandes grupos de enfermedades del sueño.
5.2.1) Disomnias
Trastornos intrínsecos del sueño:
 Insomnio psicofisiológico.
60
 Insomnio Idiopático.
 Narcolepsia.
 Hipersomnia postraumática.
 Síndrome de apnea del sueño.
 Trastorno de los movimientos periódicos de las piernas.
 Síndrome de las piernas inquietas.
Trastornos Extrínsecos del sueño:
 Higiene del sueño inadecuada.
 Trastorno ambiental del sueño.
 Insomnio de altitud.
 Trastornos del sueño por falta de adaptación.
 Trastorno de asociación en la instauración del sueño.
 Insomnio por alergia alimentaria.
 Síndrome de la ingestión nocturna de comida o bebida.
 Trastornos del sueño secundarios a la ingestión de alcohol, fármacos o

drogas.
61
Trastornos del ritmo circadiano del sueño:
 Síndrome del cambio rápido de zona horaria (síndrome transoceánico).
 Trastorno del sueño en el trabajador nocturno.
 Síndrome de la fase del sueño retrasada.
 Síndrome de adelanto de la fase del sueño.
 Trastorno por ciclo sueño-vigilia diferente de 24 horas.
5.2.2) Parasomnias
Trastornos del despertar:
 Despertar confusional.
 Sonambulismo.
 Terrores nocturnos.
Trastornos de la transición sueño-vigilia:
 Trastornos de los movimientos rítmicos.
 Trastornos del hablar nocturno.
62
 Calambres nocturnos en las piernas.
Parasomnias asociadas habitualmente con el sueño REM:
 Pesadillas.
 Parálisis del sueño.
 Arritmias cardiacas relacionadas con el sueño REM.
 Trastornos de la conducta del sueño REM.
Otras parasomnias:
 Bruxismo nocturno.
 Enuresis nocturna.
 Distonía paroxística nocturna.
5.2.3) Trastornos del sueño asociados con procesos médicos, psicológicos y

psiquiátricos:
Asociados con trastornos mentales:
 Depresión.
Asociados con trastornos neurológicos:
63
 Trastornos degenerativos cerebrales.
 Enfermedad de Parkinson.
 Insomnio familiar mortal.
 Epilepsia relacionada con el sueño.
 Cefaleas relacionadas con el sueño.
Asociados con otros procesos médicos:
 Enfermedad del sueño, tripanosomiasis africana.
 Isquemia cardíaca nocturna.
 Neumopatía obstructiva crónica.
 Asma relacionada con el sueño.
 Reflujo gastroesofágico relacionado con el sueño.
 Enfermedad ulcerosa péptica.
 Síndrome de fibrositis.
5.3) Trastornos del sueño más comunes
64
Según el Instituto Nacional de Enfermedades Neurológica (NINDS 2007) los
trastornos del sueño más comunes en el 2020-2021 son:
 Insomnio: Es el más frecuente de todos los trastornos del sueño en la

población general. Por insomnio se entiende la presencia de forma persistente
de dificultad para la conciliación o el mantenimiento del sueño, despertar
precoz, o un sueño poco reparador a pesar de disponer de condiciones
adecuadas para el sueño (ICSD 2005).
 Apnea del sueño: Es un trastorno de etiología desconocida, que se

caracteriza por episodios recurrentes de cese de la respiración durante el
sueño, sin que se asocie a la apnea ningún movimiento ni esfuerzo
respiratorio (ICSD 2005).
 Narcolepsia: Se Caracteriza por una excesiva somnolencia diurna y

cataplejía. Muchos de sus síntomas se deben a una inusual propensión para
pasar, y de forma muy rápida, del estado de alerta a la fase de sueño REM, y
para experimentar eventos del sueño REM disociados (ICSD 2005).
 Sonambulismo: Este trastorno consiste en el desarrollo, durante las fases de

sueño profundo o delta (generalmente en la primera mitad del tiempo de
sueño), de una secuencia de comportamientos complejos que habitualmente
incluyen caminar (ICSD 2005).
 Trastornos del sueño REM: Se conoce por la aparición de conductas

anómalas durante el sueño REM. En lugar de presentar una perdida completa
del tono muscular propia de la fase REM del sueño, los sujetos con este
trastorno suelen realizar movimientos, habitualmente violentos como
puñetazos o patadas, que se corresponden con la actividad motora propia de
la ensoñación en curso (ICSD 2005).
65
CASOS DE ESTUDIO
Para la guía impresa, se tomo en cuenta una serie de productos editoriales

para representar los casos de estudio, que serán analizados para tener los
fundamentos necesarios de cómo han sido resueltas diversas necesidades para el
lector, y la manera en cómo se aplican los formatos, materiales, color, tipografía,
imagen y retícula para poder ser aplicados luego, en consideración del desarrollo
del producto.
Caso de Estudio #1. Elaborado por: Gutiérrez P / Decena F (2022).
66
67
El análisis de diversas aplicaciones permitirá tener noción de la interfaz y
cómo han sido resueltas ciertas necesidades para el usuario, de manera que el
proyecto cumpla con su objetivo práctico e informativo de interacción con el
usuario, que es la forma como el humano se comunica con el sistema. Podremos
evaluar las características de dos grupos de aplicaciones móviles; aplicaciones de
deporte o actividad física y aplicaciones para el monitoreo del sueño. Los casos de
estudios a analizar son los siguientes:
Aplicaciones de deporte Aplicaciones para monitoreo del sueño
Fitness Femenino Sleep Monitor

Sleep Theory
68
69
CUADRO COMPARATIVO DE LOS CASOS DE ESTUDIO
Cuadro Nº 3. Comparación casos de Estudio. Elaborado por: Gutiérrez P / Decena F (2022).
70
DETERMINANTES DE DISEÑO
Producto editorial
 Según Almazán (2015) a la hora de diseñar una pieza editorial se deben

tomar en cuenta, desde el tipo de público meta al que será dirigido, hasta su
composición, formato y jerarquía de la información.
 Al realizar un proyecto editorial según Fiori (2014), se deben elegir pocas

tipografías y que estas sean sin serif; la legibilidad del texto debe apoyarse
con el color de fondo y con un interlineado 20% mayor que el cuerpo.
 Por otro lado, según los casos de estudio es importante utilizar tipografías que
hagan contraste con los fondos, además de una retícula preferiblemente de 1
a 2 columnas para estructura la información.
Imagen
 Es recomendable recurrir a imágenes ilustradas o intervenidas

fotográficamente que guarden similitud con el tema, según proponen los
diseñadores en los casos de estudio.
Formato
 Según los diferentes casos de estudio, los formatos adecuados para piezas
editoriales son A4 y A5.
71
Color
 Podemos señalar en su mayoría el uso de colores fríos con alguno que otro
color cálido para generar contraste o luminosidad al producto, según muestra
los diseñadores en los casos de estudio.
Diseño gráfico digital
 Según la Universidad Regiomontana, citado por: Chávez, C. y Quintero, G. Se

deben procesar factores sociales, culturales, perceptivos, estéticos,
tecnológicos y ambientales para obtener formas visuales auténticamente
comunicantes.
 Por otro lado, Alberich (2007) habla que es importante realizar un tratamiento
grafico del espacio en los entornos digitales frente a los limites
preestablecidos, para la representación de los espacios
Aplicaciones móviles
 Para las aplicaciones móviles según Cuello y Vittone (2013), se debe tomar el
tipo de contenido que se ofrece al usuario, lo cual condicionara el diseño y el
nivel de detalle de la interfaz.
 Según lo planteado por Hunhan (2018), es importancia la forma y la

coherencia interna de la interfaz, que sea de fácil uso y comprensión para el
usuario, con desplazamientos y herramientas de ayuda.
Interfaz gráfica de usuario
72
 Utilizar los elementos compositivos (tipografía, imagen y color) para generar
composiciones armónicas, equilibradas y consistentes, por medio de retículas
y equilibrio de pesos visuales, según Buitrón (2011).
Tipografía
 Para Buitrón (2011) se usan las variantes tipográficas como elementos de

énfasis de manera moderada y coherente.
 Tomar fuentes creadas para visualizarse en pantalla (tipografías palo seco)

según Buitrón (2011).
Imagen
 Según Buitrón (2011) se debe considerar las características de tamaño,

resolución, modo de color y formato que definen a las imágenes para pantalla.
 Utilizar las imágenes como elementos de énfasis, cuidando de no generar

composiciones ambiguas, según Buitrón (2011).
 Por otro lado, según se muestra en los casos de estudios, las imágenes
pueden ser ilustradas o fotográficas compuestas, generando un interés en el
usuario.
 El uso de animaciones por transición, videos y sonidos también es

recomendable, según los casos de estudios.
Color
73
 El mismo Buitrón (2011) apunta evitar las connotaciones sociales y culturales
que puedan generar los colores.
 Buitrón (2011) recomienda utilizar códigos de colores redundantes que

proporcionen unidad y consistencia, pero cuidando las mezclas cromáticas
para evitar problemas de legibilidad.
 Según los casos de estudios, es recomendable el uso de fondos oscuros con

letras clara para no generar agotamiento en la vista.
CRITERIOS DE DISEÑO
Tomando en cuenta las determinantes expuestas anteriormente, se

decidieron una serie de criterios de diseño y elementos compositivos que pueden
ser implementados en el diseño de la guía instructiva impresa e interfaz gráfica de
una aplicación móvil sobre los trastornos del sueño más comunes.
Usuarios
Se establecieron como usuarios hombres y mujeres con patología en

trastornos del sueño, entre 20 a 35 años de edad, que sepan leer y escribir, con
acceso a teléfonos inteligentes y que visiten al médico cada bimestre.
Composición y diagramación
Será compuesto por una diagramación de bloques horizontales, lo cual

permita al consumidor, poder tener mejor desenvolvimiento tanto en la guía
impresa como en la interfaz.
74
Retícula
Se implementará retícula de columna ya que ofrece mejor manejo de los

espacios en ambos productos.
Imagen
Se aplicarán imágenes retocadas e iconos vectoriales, para el soporte del

proyecto, ya que será difícil trabajar con fotografías reales sobre el tema, sin
embargo, podría aplicarse en casos particulares.
Tipografía
Se utilizará una combinación entre sans serif y serif, para lograr un contraste
entre títulos e información según sea necesario en ambos productos, sin alterar la
legibilidad de la información ni su armonía.
Color
Implementación de colores fríos en ambos productos, ya que dependiendo de

su tonalidad pueden transmitir la sensación de calidez, cercanía, vitalidad,
entusiasmo y dinamismo. Pero para el fondo de la interfaz gráfica, es mejor trabajar
con colores oscuros ya que esto también ayudara a no perturbar los hábitos del
sueño para el usuario.
Botones
75
Se usarán iconos referentes al tema y rectángulos de esquinas redondeadas.
Contenido y funcionalidad
El contenido impartido será informativo y práctico, para ambos productos,

según los elementos gráficos o aspectos técnicos necesarios para cada uno.
76
Capítulo III
Aspectos de Diseño
77
CAPÍTULO III: ASPECTOS DE DISEÑO
Se procede al inicio de la creación de los productos tomando en cuenta los

métodos de diseños propuestos, redactando de igual manera cada uno de los
pasos del desarrollo.
REFERENTES DE DISEÑO
Los referentes de diseño se encargan de dictar las pautas gráficas aplicadas

tanto en la identidad de la marca, ya sea en el desarrollo de la guía instructiva o la
interfaz gráfica de una aplicación móvil; dichos referentes funcionan como
inspiración para realizar las diversas partes que componen el diseño de los
productos.
Tomando en cuenta la necesidad de transmitir, confort, alivio (relax al

consumidor) además de una información útil, se implementaron elementos gráficos,
como fotografías, para ambientar la Interfaz; además de recursos vectoriales
simples, como las nubes, o siluetas curvas, que reflejen fluidez en cada uno de los
productos. La variación de la forma en las líneas curvas puede contribuir a la
emoción asociada con ellas, por ello cada uno de los recursos fueron basados en
este tipo de líneas.
Gráfico Nº 7. Imágenes vectoriales de nubes o siluetas curvas. Fuente: freepik.es
En cuanto a los colores, se utilizaron tonalidades frías ya que estos pueden

relacionarse con la serenidad, la calma y la paz; sentimientos y emociones que
78
necesitamos que los productos denoten al momento que el cliente los visualice. Los
colores utilizados fueron: Pantone black 6 C, Pantone 2765 C, Pantone 2627 C,
Pantone 257 C, Pantone 435 C, Pantone 725 C y Pantone 656 C.
Gráfico Nº 8. Paleta de colores con su código HTML. Fuente: paletasdecolores.com
Para las tipografías se utilizaron de dos tipos: Caviar Dreams (palo seco), para
los cuerpos de textos ya que generan mejor fluidez en la lectura, y Billy Ohio
(caligráfica), para los botones, títulos y subtítulos, para así crear contraste y
elegancia en la composición general de los productos.
Gráfico Nº 9. Tipografías seleccionas para los productos e identificador.

Fuente: google.com
Finalmente, las imágenes para ambientar la interfaz gráfica y la guía instructiva,

son recursos que fueron tomados de internet. Por un lado, se utilizaron imágenes
de paisajes, con colores fríos, y tonos que se utilizaran en ambos productos, para
las diferentes pantallas o secciones, buscando que reflejen calmar la mente, el
cuerpo o ambos, para que el usuario se identifique y pueda sentirse tranquilo y
calmado; ya que cuando se relaja, el cuerpo también reacciona. Por ejemplo, es
79
posible que los músculos estén menos tensos y más flexibles según explica el
personal de Healthwise (16 junio, 2021).
Gráfico Nº 10. Imágenes seleccionas para los productos. Fuente: google.com.
Al mismo tiempo, se usaron también imágenes referenciales de personas

descansando, en estado de relajación o con problemas para dormir, para respirar
(pantalla de trastornos del sueño, ejercicios, comida y hábitos), como complemento
a la información descrita en las pantallas correspondientes.
80
Gráfico Nº 11. Segundas imágenes seleccionas para los productos. Fuente: freepik.com.
CONCEPTO GENERADOR
Tanto la interfaz gráfica de la aplicación móvil como la guía impresa, consta de

elementos gráficos minimalistas, curvos y dinámicos, que reflejan como
característica principal la simplicidad y tranquilidad, lo que se puede notar en el
identificador, gráficos, iconos, entre otros. La representación gráfica, funciones y
secciones (de ambos productos de diseño) son obtenidas tomando como referencia
las necesidades y exigencias del público objetivo, donde predomina el concepto de
confort y descanso, como criterio básico.
Identidad
Para identificar la guía y la aplicación móvil, fue necesario darle un nombre al

proyecto que representara directamente la función de ayudar a mejorar la calidad
del sueño en las personas, que fuese en ingles debido a su delimitación
internacional y que, a su vez, se pueda conseguir fácilmente, por lo cual se
denominó “Rest Quality” o (Calidad de Descanso).
Gráfico Nº 12. Bocetos de logotipo. Elaborado por: Gutiérrez P / Decena F (2022).
81
Gráfico Nº 13. Diseño de logotipo. Elaborado por: Gutiérrez P / Decena F (2022).
Tipografías:
Rest: Billy Ohio
Quality: Caviar Dreams
Se elaboró un identificador que fuese pregnante y asociativo a la vista del

espectador. El diseño del isotipo se construyó en base a elementos curvos como la
silueta de una nube, para crear una composición gráfica de carácter icónico a
través de su tratamiento formal, y de esta manera se pueda reconocer rápida y
directamente.
Gráfico Nº 14. Construcción gráfica del identificador. Elaborado por: Gutiérrez P / Decena F (2022).
82
Estructura
Guía Instructiva: Para el producto impreso se tomaron 3 secciones de la

Interfaz gráfica, diferenciadas por color, con el fin de desarrollar una información
más breve de los trastornos del sueño, y como ciertos hábitos pueden ayudar a
mejorarlos:
 Ejercicios relajantes: Esta sección consta de 3 ejercicios, de respiración y

de micromovimientos, los cuales están divididos por etapas donde se
explica mediante imágenes y textos cada uno de los pasos que deben
realizarse (ver Anexo 2).
 Trastornos del sueño: En esta última sección se explican los trastornos

del sueño más comunes, sus características y de qué manera se pueden
tratar o mejorar (ver Anexo 4).
 Comidas y hábitos: Esta sección presenta dos items muy importantes,

empezando con las rutinas diarias que son recomendables que el usuario
siga para mejorar su sueño y así su calidad de vida, además de las
comidas o alimentos que no deben consumirse antes de ir a dormir (ver
Anexo 3).
Aplicación móvil: Su estructura estaría compuesta por 4 secciones:
 Música (Playlist relajantes): Donde el usuario puede escoger entre una

lista de 18 melodías, aquellas que lo ayuden a conseguir el sueño; las
mismas causan un efecto directo en el sistema nervioso parasimpático (ver
Anexo 1).
 Ejercicios relajantes: En esta pantalla se pueden encontrar una variedad

de ejercicios tanto de respiración y micromovimientos, que ayudaran a
83
reducir la estimulación y potenciar la inhibición mejorando los problemas de
insomnio y sueño; algunas de estas prácticas pueden ser más relajantes
que otras para que el usuario tenga una diversidad de rutinas según sus
gustos (ver Anexo 2).
 Comidas y hábitos: En esta pantalla se desarrollan dos items muy

importantes, ya que son los influyentes principales para el buen dormir,
expresando principalmente los tipos de alimentos que deben ser
consumidos y cuáles no, como también las rutinas diarias que el usuario
debe seguir para mejor su sueño y así su calidad de vida, estás rutinas van
desde, hacer ejercicio, no consumir bebidas alcohólicas entre otros (ver
Anexo 3).
 Sueño (monitoreo, alarma y trastornos del sueño): En esta sección o

pantalla, se desarrollara el monitoreo del sueño donde se utilizara sensores
de micrófono y acelerador para medir los movimientos corporales y los
cambios de ruido ambiental, de esta manera ayudamos al usuario a
reconocer sus etapas del sueño, ya que estas son divididas en 4 etapas No
REM1 (entre la vigilia y el sueño) No REM2 (sueño ligero), No REM 3
(sueño profundo) y REM (Movimiento ocular rápido, cuando la mayoría de
los sueños ocurren) (SM Health Team 2019).
También constara de una alarma, que trata de un reloj inteligente, con la

función de un despertador o recordatorio para dormir temprano y de esta
manera crear hábitos adecuados a la hora de descansar.
 Otro de los ítems de esta pantalla, son los “trastornos del sueño” aquí se
explicara de manera informativa los principales trastornos del sueño más
comunes, según Eunice Kennedy Shriver National Institute of Child Health
and Human Development (2018), se pueden mencionar cinco tipos
principales de trastornos del sueño que afectan el sueño normal: insomnio,
apnea del sueño, narcolepsia, trastornos de conducta asociados al sueño
84
REM y el sonambulismo; además de mencionar sus características y
diferentes formas para ayudar a mejorar la calidad del sueño (ver Anexo 4).
PROCESO CREATIVO
El proceso creativo que se desarrollará a continuación, cuenta con las etapas de

los métodos de diseño anteriormente planteados en el capítulo I. Dicho proceso
contendrá la explicación paso a paso de cómo se realizaron los diseños de la guía
instructiva e interfaz gráfica de una aplicación móvil, de acuerdo con las etapas
establecidas en el método.
Gráfico Nº 15. Método de diseño propio de la guía instructiva, planteado en el Capítulo I.

Gráfico Nº 16. Método de diseño propio de la interfaz gráfica, planteado en el Capítulo I.

85
Contenido de la guía instructiva impresa
Una vez realizada la investigación y recaudación de información sobre los datos

más importantes sobre los trastornos del sueño más comunes y recomendaciones
para ayudar a mejorar la calidad del sueño, se clasificó el texto por secciones, para
posteriormente pasar a organizarlo, donde cada una tiene un color para
diferenciarlas, dedicando tiempo a la redacción y revisión gramatical y ortográfica,
para así asegurar que la información llegara de forma adecuada al público objetivo
(ver Anexos).
Planeación de la forma, pliegues y dobleces
Después que el contenido de la guía estuvo redactado y organizado, se procedió

a crear ideas para los dobleces, y posterior despliegue de las secciones de la guía,
haciendo un proceso de descarte con pruebas en formatos reales para comprobar
su factibilidad, funcionamiento y dar con la más eficaz e interactiva.
Gráfico Nº 17. Prueba de los dobleces y pliegues para la guía.

86
De igual manera, con la planificación de los dobleces y pliegues hecha (4 en
total), se comenzó a diseñar la forma de la guía con base en su despliegue, en este
caso, se optó por usar un corte en diagonal tanto en la parte superior como inferior,
generando una forma de 2 hexágonos al estar abierto.
Gráfico Nº 18. Muestra de corte diagonal y forma hexagonal abierta de la guía.

Distribución de textos
Con el conocimiento de la forma, los dobleces y pliegues ya definido, se

continuó con la distribución de los textos dentro de las 3 secciones que contiene la
guía impresa, antes mencionadas en el Concepto Generador. Tomando en cuenta
la forma en que se despliega, se decidió que el modo de lectura de la parte de
adentro o trasera (dependiendo del doblez donde se encuentre) sea al revés, es
decir, el usuario debe en cierto punto voltear la guía para continuar leyendo.
87
Gráfico Nº 19. Muestra distribución de los textos parte delantera.
Gráfico Nº 20. Muestra distribución de los textos parte trasera al revés.

88
Maquetación de la guía impresa
Cómo último paso, ya con los textos distribuidos, se procedió a unificar todo en
la guía instructiva, siguiendo los lineamientos anteriormente mencionadas para
completar la maquetación, como el uso de la paleta de colores, tipografía, las
imágenes de paisajes, así como una retícula a 4 columnas seleccionada por su
facilidad y simpleza a la hora de distribuir los bloques de textos, haciendo amena la
lectura de los mismos.
Gráfico Nº 21. Muestra parte delantera de la maquetación final.

89
Gráfico Nº 22. Muestra parte trasera de la maquetación final.
Diseño de la Interfaz Gráfica de la aplicación móvil
La representación gráfica de la idea, su nivel de detalle y funciones nacen de la

necesidad de los usuarios, de adquirir buenas prácticas de descanso, y como
ayudar a la calidad del sueño, por lo tanto, se consideró de tipo práctica educativa.
Se tomó de referencia la información y los elementos gráficos utilizados
previamente en la guía impresa, de manera que la composición en la interfaz
gráfica de la aplicación móvil sea capaz de transmitir la misma armonía y
concordancia (ver Anexos).
Mapa de Navegación
Al referirnos a navegación se consideró de tipo jerárquica y lineal lo que se trata

de una navegación compuesta, donde los usuarios ingresan y viajan de lo general
90
a lo más específico. Las páginas y subpáginas se organizan de forma jerárquica
pero también es posible navegar de forma lineal por las páginas de un mismo nivel;
es decir, con una estructura muy simple similar a las páginas de un libro. Debido a
esa distribución se facilita el desplazamiento dentro de la aplicación al momento de
conocer sus funciones.
Gráfico Nº 23. Esquema de mapa de navegación de la interfaz gráfica

La pantalla del sueño tiene una navegación compuesta, donde están los
botones de la pantalla de alarma, monitoreo, trastornos del sueño y el botón de
comenzar a dormir; donde cada uno tiene una función específica.
Desarrollo estructural
El diseño para cada pantalla se inició de manera muy general, organizando la

distribución de cada elemento. El prototipo inicial, junto a la identidad, fueron
evolucionando a medida que se reorganizaron y optimizaron las funciones y
elementos para que resultara más fácil la navegación evitando contenido
innecesario que interfiriera en el desempeño de los usuarios dentro de la app.
91
Es por ello, que todos los elementos como conjunto en cada pantalla forman
una composición dinámica y minimalista, en su mayoría con recursos gráficos y
vectoriales, pero sin caer en el desorden visual.
Pantallas
Dentro de este orden de ideas, la aplicación cuenta con una pantalla inicial,
conocida como splash, es la primera a ser vista por el usuario mientras se realiza la
carga inicial, en ella se refleja la identidad de la marca (identificador y nombre)
junto a un fondo de nubes. Posteriormente, pasa a una pantalla de ingreso donde
el usuario puede registrarse con su correo y contraseña, seguido de la pantalla
principal donde aparece el menú con todas las secciones y funciones.
Gráfico Nº 24. Pantalla de splash, registro y principal. Elaborado por: Gutiérrez P / Decena F (2022).
A continuación, se muestra la pantalla de sueño la cual está compuesta por la

alarma, el monitoreo y los trastornos del sueño. En la pantalla de alarma, hay un
reloj inteligente, con la función de un despertador o como recordatorio para dormir
temprano.
92
Gráfico Nº 25. Pantalla de sueño, alarma y monitoreo.
Asimismo, la pantalla de trastornos contiene la información, un poco más

detallada, de los trastornos del sueño más comunes que aparece en la guía
instructiva impresa (ver Anexo 4), complementándose con las imágenes
referenciales de fondo (mencionadas en los Referentes de Diseño); para
visualizar cada uno de los trastornos, el usuario debe deslizar la pantalla hacia la
izquierda.
93
Gráfico Nº 26. Pantalla de los trastornos. Elaborado por: Gutiérrez P / Decena F (2022).
94
En el Menú de la aplicación móvil también se reflejan las secciones de música,
ejercicios, comida y hábitos. La pantalla de música presenta una lista de 18
melodías, que se puede ir notando mientras que se desliza hacia arriba la pantalla,
cada una de las melodías está divida en secciones con diferentes nombres
dependiendo del tipo de melodía (calma instrumental, descanso, meditación,
antiestrés, sueño reparador, vive y descansa). Al seleccionar alguna sección se
despliega una pantalla aparte que es el reproductor con todas sus funciones de
volumen, pausa, siguiente, aleatorio; para una navegación lineal; este sonido de
ambiente se escucha cuando comenzamos el conteo para dormir, logrando de esta
manera darle al cuerpo y a la mente una sensación de relajación, y asi poder lograr
dormir mejor.
Gráfico Nº 27. Pantalla de música y reproductor. Elaborado por: Gutiérrez P / Decena F (2022).
La pantalla de ejercicios se encuentra divida en 3 secciones, cada sección está

representada con imágenes referenciales dependiendo del tipo de ejercicio a
95
realizar (sobre los muslos, dedos y palmas, relajación), donde al pulsar dichas
imágenes, aparece otra pantalla explicando paso a paso cada uno de los
movimientos que componen al ejercicio completo (para ver cada paso deben
deslizar a la izquierda). Son 3 ejercicios en total, pero solo se muestran como
ejemplo 2 de ellos.
Gráfico Nº 28. Ejemplo de la pantalla de ejercicios. Elaborado por: Gutiérrez P / Decena F (2022).
96
Por último, la sección de comida y hábitos, al darle click al icono se despliega
una pantalla principal con barra de desplazamiento de 4 botones interactivos sobre
los diferentes hábitos y comidas, donde al presionar alguno de ellos sale otra
pantalla con la información correspondiente a cada uno. Son 4 pantallas en total,
pero sólo se tomaron 2 pantallas como ejemplos. (Ver información completa en el
anexo)
Gráfico Nº 29. Ejemplo de las pantallas de comida y hábitos.

97
Iconos
Los iconos que representan las funciones dentro de la aplicación son gráficos
simples con líneas sinuosas y acabado curvo en sus bordes para generar una
apariencia orgánica y fluida. En cuanto al color, se utilizó el blanco para hacerlos
notorios sobre el fondo oscuro.
PRODUCTO FINAL
La elaboración de los productos finales de la guía instructiva impresa e interfaz

gráfica para una aplicación móvil fue basada en las investigaciones sociales y
gráficas que se realizaron a lo largo de este proyecto, creando un análisis
especializado de ambos productos orientado hacia resolver la problemática de los
trastornos causados por tener un mal descanso o no dormir lo suficiente.
Maquetación final de la guía impresa
Luego de una extensa comparación entre varios referentes y los casos de

estudio, se eligió el formato A4 como tamaño ideal para la guía, dando este tamaño
de pliego al estar abierto, permitiendo tener un mayor espacio para los textos y
recursos vectoriales. Esto da como resultado un desplegable de 7 centímetros de
ancho por 11 centímetros de largo al estar doblado. Dentro de la maquetación se
escogió una tendencia simétrica para la distribución de los elementos, equilibrando
correctamente los pesos visuales.
Las fuentes utilizadas fueron: Billy Ohio, en estilo bold para algunos títulos y
Caviar Dreams para los cuerpos de texto y algunos subtítulos, en estilo regular y
bold. En cuanto al tamaño, estaba condicionado a los espacios y retícula, los títulos
iban desde 42 puntos hasta 21 puntos para los subtítulos y 8 puntos para los
98
bloques de texto. El tipo de soporte elegido para guía instructiva impresa fue glasé
300 por su resistencia y a la vez fácil manejo a la hora de realizar los dobles
respectivos.
99
Gráfico Nº 30. Mockup de la guía parte de arriba y abajo cerrada.
100
Gráfico Nº 31. Mockup de la guía parte delantera. Elaborado por: Gutiérrez P / Decena F (2022).
101
Gráfico Nº 32. Mockup de la guía parte trasera. Elaborado por: Gutiérrez P / Decena F (2022).
102
Gráfico Nº 33. Mockup de la guía cerrada trasera. Elaborado por: Gutiérrez P / Decena F (2022).
103
Gráfico Nº 34. Mockup de la guía cerrada diagonal. Elaborado por: Gutiérrez P / Decena F (2022).
104
Maquetación final de la interfaz grafica
En esta imagen se muestran las pantallas principales de la interfaz gráfica de una

aplicación móvil, denotando también su forma de navegación.
105
Gráfico Nº 35. Mockup de pantallas principales de Interfaz gráfica de una App
Sueño
Las pantallas de sueño se dividen, en 4 principales; Monitoreó es una pantalla

que comienza a funcionar, en cuanto se presiona el botón de comenzar a dormir,
después de terminar tu jornada del sueño la pantalla de monitoreo, muestra la
evolución del descanso señalando (un camino de sueño) con datos en porcentajes
del tiempo en (Despierto, Sueño Ligero, Profundo y REM). Además de hacer un
resumen de datos, con las hora de acostarse, de despertar, tiempo REAL de
sueño, tiempo en el que se tardó en volver a dormir después de interrumpir el
sueño y claramente el tiempo de música seleccionada para ayudar a conciliar mejor
el sueño.
Algo muy importante es que esta pantalla también refleja cuando el teléfono
grava por micrófono la respiración del usuario obteniendo datos de ruidos que
describen cada una de las etapas ya mencionadas, y esta grabación se puede
escuchar en la misma pantalla, para saber que ocurrió en ese momento que hizo
despertar.
-Alarma: La alarma es una función de esta pantalla ya que permite organizar el

descanso a través del tiempo, (creando un hábito ideal para poder descansar
mejor) esta pantalla, conjunta al monitoreo, crean un resumen semanal, de horas
en las que se ha dormido satisfactoriamente, y también ayuda a despertar al
usuario cuando lo desea para comenzar su día.
-Trastornos de sueño muestra detalladamente la información de cada uno de los

trastornos de sueño más comunes, clasificados en 5 pantallas.
106
Gráfico Nº 36. Mockup de pantallas Sueño. Elaborado por: Gutiérrez P / Decena F (2022).
Gráfico Nº 37. Mockup de pantallas Sueño. Elaborado por: Gutiérrez P / Decena F (2022).
107
Gráfico Nº 38. Mockup de pantallas Música Relajante.
Gráfico Nº 39. Mockup de pantallas Ejercicio. Elaborado por: Gutiérrez P / Decena F (2022).
108
Gráfico Nº 40. Mockup de pantallas Hábitos y comidas.
109
CONCLUSIÓN
Tras haber realizado la investigación se pudo identificar que es numerosa la

falta de información e importancia que las personas le dan a los trastornos del
sueño, muchos sólo lo ven con la exclamación “dormí pero no descanse, o no
dormí bien anoche”, pero la verdad es que es un tema de interés; ya que si no se
logra descansar como es debido, la calidad de vida es afectada notoriamente. De
esta manera se logró contribuir al mejoramiento de los trastornos del sueño más
comunes, implementando la información recaudada en el diseño de una guía
instructiva impresa e interfaz gráfica de una aplicación móvil.
Se lograron evaluar las metodologías más adecuadas para así obtener el

desarrollo de la guía impresa e interfaz gráfica para la aplicación móvil. Se tuvo
como propósito pautar las fases necesarias para el diseño del proyecto, las cuales
consistieron: para la guía, la definición de objetivos donde se plantearon las etapas
de investigación, de concretar el tema y mensaje a comunicar, la estrategia, y las
directrices y herramientas a utilizar (en este caso fueron photoshop e illustrator). De
modo tal, se generó la idea de desarrollo de varios diseños determinando la
retícula, los dobles, la armonía de la tipografía y los colores apropiados para ambos
proyectos, y por último, el pulido de la idea del producto para finalizar con una
revisión.
En cuanto a la interfaz gráfica de una aplicación móvil, se realizó un análisis

previo de los requerimientos de los usuarios para personalizar los servicios, ya que
los trastornos del sueño son un tema muy común pero poco conocido. De esta
manera se realizó la concepción de la idea, identificando el tipo de interfaz a
utilizar, la cual fue de forma jerárquica y lineal, lo que trata de una navegación
compuesta donde el usuario ingresa y viaja de lo general a lo más específico. Se
procedió a realizar un diseño y mockup de las pantallas ya analizadas según el
mapa de navegación, determinando el estilo visual del proyecto construido con
imágenes, colores y tipografía iguales a la de la guía impresa. En cuanto al
desarrollo, se implementó un software para realizar la simulación del producto y de
110
esa manera obtener el resultado de cómo se vería si fuese programado he
instalado en equipos reales.
Tanto la guía como la interfaz tienen un diseño armónico, donde estando

separadas o juntas es fácil identificar que se refieren al mismo tema, siendo
complementarias.
Dormir es un proceso fisiológico altamente organizado. Se puede definir como

un proceso rítmico, activo, asociado al ritmo circadiano, siendo éste el patrón diario
que gobierna la regularidad y la intensidad del sueño y la vigilia 2001, Carskadon;
2005, Marín et al). Por esto se creó una guía que brinde información de ejercicios,
hábitos, comidas y trastornos del sueño comunes, así el usuario no solo podrá
tener una idea de si sufre algún trastorno, sino que también tendrá una serie de
recursos que lo ayudaran en su buen dormir.
Lo mismo ocurre con la interfaz gráfica de una aplicación móvil, solo que ésta
es más interactiva, y cuenta con una pantalla de monitoreo, donde podrán ver su
evolución de descanso, creando hábitos, registrando su sueño diario, y teniendo
una serie de herramientas que ayudaran a que el usuario pueda dormir mejor,
música relajante y alarma, y grabador de sonidos, para determinar los momentos
de vigilia.
Se logró proponer una solución factible al problema, enfocando el diseño de

ambos productos a un público específico, ya que este según los estudios es unos
de los más afectados con los trastornos del sueño más comunes, y por falta de
información no lo notan. Sera dirigido a hombres y mujeres con esta patología,
entre 20 a 35 años de edad, que sepan leer y escribir, con acceso a teléfonos
inteligentes y que visiten al médico cada bimestre.
111
RECOMENDACIONES
En base a la experiencia adquirida del análisis de información y realización de

ambos productos se determinaron las siguientes recomendaciones.
o Como punto de partida, se recomienda que al momento de realizar la

investigación no solo se acuda a recursos digitales de la web sino que
también se realicen entrevistas con profesionales en el tema de
investigación, en este caso trastornos del sueño, los cuales son psiquiatras y
psicólogos calificados en el área.
o Otra cosa a tomar en cuenta al momento de realizar ambos productos es

determinar con anticipación la información que será dirigida en cada uno. Ya
que la guía es un producto estático y la aplicación móvil un producto más
dinámico; aunque ambos puedan tener la misma información, la misma debe
estar plasmada de diferente manera, ya que a la guía no se le puede
agregar audios o animación.
o Ahora bien, en cuanto al diseño de la guía instructiva impresa es muy

importante determinar los cortes y dobleces que tendrá, para que el usuario
pueda leerla de manera adecuada y a la vez está tenga un diseño diferente.
o Al momento de realizar la aplicación móvil es muy importante determinar el

mapa de navegación de la misma ya que esto ayudara al usuario a
interactuar de manera idónea con la información.
o Partiendo de lo anterior, se debe tomar en cuenta el establecer un concepto

gráfico, mediante el manejo de elementos compositivos y principios de
diseño para aplicarlo en cualquiera de los dos productos aquí descritos.
o En cuanto a colores y tipografía se debe destacar qué para una aplicación

es importante tener fondos oscuros con contrastes claros y con la guía lo
112
contrario, fondos claros con textos oscuros para que al momento de leerla
sea mucho más fácil y comprensible.
o Como sugerencia final, se debe determinar cuál es el público objetivo puesto

que el diseño de ambos productos dependerá del público al que va dirigido,
no es lo mismo diseñar para personas mayores de 40 años que diseñar para
niños o para personas de 20 a 35 años.
113
ANEXOS
Contenido de la guía instructiva impresa e interfaz gráfica
A continuación, se detalla la información contenida tanto en la guía instructiva

impresa como en la interfaz gráfica para la aplicación móvil:
 Música (Playlist relajantes) (Anexo 1)
Calma instrumental:
– Calm Spa - Calm Water Maestro.
– Instrumental Meditation Songs - Maria Piano.
– Land of the Medicine Buddha (Instrumental Meditation With Bamboo Flute,

Singing Bowls and Nature Sounds).
Descanso:
– Chinese Bamboo Flute Music (Reiki Healing) - Chinese Bamboo.
– Music for Relaxation - Soothing Music.
– Nho Em Nhieu Hon - Suta Zither.
Meditación:
– Meditacion Zen – Descansa.
– Om Meditation - Дэва Премал.
114
– Sleep Meditation - relaxing music, deep sleep relaxation.
Anti estrés:
– You Need to Calm Down - Calm Road.
– Storms in Africa - Enya.
– Música Anti estrés - Música Relajante.
Sueño reparador:
– Angel Wings - Herb Ernst Unita Belk.
– Road to Calm – Musicoterapia Team.
– Watermark – Enya.
Vive y Descansa:
– Trigger Protection Mantra - Jhené Aiko.
– Voyage into Silence - Herb Ernst.
– The sound of silence – Wuauquikuna.
115
 Ejercicios relajantes (Anexo 2)
Ejercicio 1: Sobre los muslos:
– Sentado, con las palmas de las manos sobre los muslos, ejerce una micro
presión al inspirar y suelta al espirar.
– Espera a que venga naturalmente el aire y repite 4-5 veces.
Ejercicio 2: Dedos y palmas
– Sentado, con las manos en el regazo sobre un cojín que descanse en los
muslos, coloca la yema del pulgar de la mano derecha sobre el centro de la
palma de la mano izquierda.
– Ejerce una micro presión al inspirar y suelta al espirar.
Ejercicios 3: Relajación
– Tumbado en la cama, dobla las rodillas y separa los pies entre 20 y 30

centímetros.
– Coloca una de tus manos sobre el abdomen y la otra sobre la parte

superior del tronco, entre el pecho y el cuello.
– Con los ojos cerrados, inspira profunda y lentamente, imaginando el

recorrido del aire a través de tu cuerpo, pero sin mover el tórax. Trata de
aguantar la respiración 3 o 4 segundos.
– Espira expulsando el aire despacio, mientras cuentas de cinco a cero.

Repite estos mismos pasos unas 4-5 veces, concentrándote en cada uno de
los movimientos.
116
 Comidas y hábitos (Anexo 3)
El sueño saludable es un tema a menudo abandonado, aunque desempeña un

papel importante, porque afecta de diferentes formas a nuestra calidad de vida, ya
sea en relación con nuestra eficiencia laboral, la resistencia en el desarrollo de
nuestras tareas diarias, la prevención de enfermedades o el cuidado de nuestra
salud mental, entre otros.
A continuación, mencionamos algunos hábitos fundamentales para ayudarte a

alcanzar un sueño reparador:
– Dormir en habitaciones bien ventiladas y airear la casa regularmente.

En el mercado hay muchos aparatos para controlar la calidad del aire en
interiores. Estos pueden emplearse para medir la cantidad de CO2 en
dormitorios y oficinas.
– Controlar la temperatura del ambiente, la humedad y la contaminación. Las

mantas demasiado cálidas pueden dificultar el sueño durante el verano y los
pies fríos, durante el invierno. Si duerme en un entorno cálido y muy húmedo,
aumenta el número de veces que se despierta, mientras que una humedad
escasa seca e inflama las vías respiratorias. Lo ideal es que la habitación este
entre 40 y el 60%.
Para aumentar la humedad, puede emplear un vaporizador o un humidificador

o, simplemente, colocar un cuenco con agua cerca de los radiadores. Entre los
métodos más comunes para reducir la humedad tenemos aumentar las
corrientes de aire (ventilación) y utilizar un deshumidificador o un aire
acondicionado.
– Evitar los ruidos fuertes (aunque no le moleste) y todas las fuentes de luz.
117
– Incluir deportes en la rutina diaria: por las mañanas o durante el día.
– Crear una rutina nocturna saludable y liberar la mente.
Igualmente, podemos usar la dieta a nuestro favor evitando ciertos alimentos

que solo nos harían más difícil el poder dormir bien:
– Evite el alcohol. Aunque induce el sueño, afecta a la calidad del mismo. Evite
bebidas azucaradas, frutas y aperitivos antes de irse a dormir. Estos aumentan
la cantidad de energía y hacen más difícil conciliar el sueño.
– Asegúrese de que su cena incluye alimentos como: nueces, calabaza,

alubias, lentejas, espirulina, espinaca, brócoli y soja. Estos aminoácidos
aumentan la producción de melatonina y serotonina que ayudan a dormir.
– Evitar platos picantes, pesados y grasosos, embutidos y aperitivos antes de

irse a dormir.
– Intente que la última comida del día sea como a las 6pm, si es antes mejor.
– Evitar cenar carnes rojas y carnes procesadas, especialmente las más

grasas. Opta por proteínas magras de calidad, como carne de ave natural,
huevo o pescado.
 Trastornos del sueño (Anexo 4)
Insomnio: Presencia persistente de dificultad para la conciliación o

mantenimiento del sueño, despertar precoz, o un sueño poco reparador (ICSD,
2005). Hay medidas generales que se pueden aplicar a todos los pacientes con
insomnio, según el Hospital Alemán Asociación Civil (2022):
118
– Evitar las siestas, comida abundante por las noches, el tabaco, el alcohol y el
café.
– Evitar los ejercicios intensos o actividad intelectual cerca de la hora de

acostarse.
– La terapia cognitiva conductual puede servir para aliviar la ansiedad que se

asocia con el insomnio crónico (insomnio constante). La ansiedad tiende a
prolongar el insomnio.
Apnea del sueño: Se caracteriza por episodios recurrentes de cese de la

respiración durante el sueño, sin que se asocie ningún movimiento ni esfuerzo
respiratorio (ICSD, 2005). Según el Dr. Pablo Saz, Médico naturista e Investigador
en la Universidad de Zaragoza (2019), para ayudar a mejorar las apneas del sueño
debemos:
– Así como en el insomnio, es recomendable evitar el alcohol, el tabaco u

aspirar el humo de otros.
– Evitar medicamentos que relajen el sistema nervioso, como los sedantes. Y

llevar una dieta sana sin sal, grasas, ni azucares refinados.
Tratamientos posibles para la apnea
Existe el uso de una máscara que emite un chorro de aire a presión, que reabre
las paredes de la vía aérea y evita su colapso. Es lo que se denomina "presión
positiva continua en la vía aérea" o CPAP. Lo cierto es que se trata de un
tratamiento muy efectivo, pero suele resultar incómodo para el paciente.
Sonambulismo: Este trastorno consiste en el desarrollo, durante las fases de

sueño profundo o delta (generalmente en la primera mitad del tiempo de sueño), de
119
una secuencia de comportamientos complejos que habitualmente incluyen caminar
(ICSD, 2005). Para intentar reducir el sonambulismo, según Martínez M. (2017), se
debe:
– Determinar si el sonambulismo es causado por una condición médica como,

por ejemplo: la apnea del sueño, el síndrome de piernas inquietas o el reflujo
gastroesofágico.
– Así como con el insomnio y apnea del sueño, es recomendable evitar la

cafeína y el consumo de grandes proporciones de comida.
– Mantener un ambiente seguro donde dormir, limitando el uso de estímulos,

tales como: los ruidos fuertes, la pantalla de televisión o una pantalla de
ordenador.
– Reducir el estrés y la ansiedad con el ejercicio diario, una dieta adecuada,

prácticas de meditación.
Trastornos del sueño REM: Es la aparición de conductas anómalas durante el

sueño REM. En lugar de presentar una perdida completa del tono muscular propia
de la fase REM del sueño, los sujetos con este trastorno suelen realizar
movimientos, habitualmente violentos como puñetazos o patadas, que se
corresponden con la actividad motora propia de la ensoñación en curso.
Según explica Juan Antonio Pareja Grande, responsable de la Unidad del

Sueño del Hospital Universitario Quirónsalud Madrid (2018), este trastorno no tiene
una curación definitiva, pero existen fármacos que mejoran el sueño de los
pacientes eliminando estas alteraciones de la conducta y normalizando los
ensueños.
“El clonazepam es el tratamiento de elección. Otros tratamientos menos

eficaces incluyen la carbamazepina y la melatonina”, afirma Pareja (2018).
120
Narcolepsia: Es una excesiva somnolencia diurna y cataplejía. Muchos de sus
síntomas se deben a una inusual propensión para pasar, y de forma muy rápida,
del estado de alerta a la fase de sueño REM, y para experimentar eventos del
sueño REM disociados (ICSD, 2005).
Es una afección crónica de por vida. El tratamiento está orientado a controlar los
síntomas que condicionan la vida del paciente en el ámbito laboral y social. Hay
muchas cosas que se puedes hacer para mejorar los síntomas de la narcolepsia,
mediante la realización de hábitos de sueño saludables y cambios en la dieta
(Herbosa & Gutiérrez, 2010).
El tratamiento debe ser individualizado, ya que existen grandes variaciones en

el desarrollo, la gravedad y el orden de aparición de los síntomas (Herbosa &
Gutiérrez, 2010).
121
REFERENCIAS BIBLIOGRÁFICAS
Aranaz, J. (2009) “Desarrollo de aplicaciones para dispositivos móviles sobre la

plataforma Android de Google” proyecto de investigación de la Universidad Carlos
III de Madrid. Disponible en:
https://e-
archivo.uc3m.es/bitstream/handle/10016/6506/PFC_Jaime_Aranaz_Tudela_20101
16132629.pdf?sequence=1&isAllowed=y
Apnea del sueño: https://www.tucanaldesalud.es/es/canalciencia/articulos/apnea-

sueno-problema-consecuencias-graves
Arroyo, N. (2013) “Información en el móvil”. Disponible en:

https://books.google.co.ve/books?id=KtAtAwAAQBAJ&printsec=frontcover&dq=sist
emas+operativos+para+moviles+y+su+evoluci%C3%B3n&hl=es&sa=X&ved=2ahU
KEwiA0pDz4IXvAhVHmVkKHeIPAlU4KBDoATAEegQIBhAC#v=onepage&q&f=fals
e
ABAMobile, (2020) “El futuro de las aplicaciones móviles. Evolución y tendencias”.

Disponible en:
https://abamobile.com/web/evolucion-y-tendencias-de-las-aplicaciones-moviles/
Almazán, L. (2015) “Definición y diseño de productos editoriales”. Disponible en:

https://books.google.co.ve/books?id=R7VWDwAAQBAJ&pg=PA16&dq=dise%C3%
B1o+editorial&hl=es&sa=X&ved=2ahUKEwjC4oe62IzvAhVWSTABHYe_Ah8Q6AE
wCXoECAMQAg#v=onepage&q=dise%C3%B1o%20editorial&f=false
Alberich, J. (2007) “Grafismo multimedia: Comunicación, diseño, estética”.

Disponible en:
https://books.google.es/books?hl=es&lr=&id=hQ_g9u4SbQsC&oi=fnd&pg=PA7&dq
=dise%C3%B1o+digital+multimedia&ots=B4_-LMJQwy&sig=xltJBx1nw0gIXfOj-
oI8Jhx9Bp8#v=onepage&q=dise%C3%B1o%20digital%20multimedia&f=false
122
Blog ViveLibro, (2018) “El diseño editorial: qué es, elementos y etapas”. Disponible
en:
https://www.vivelibro.com/blog/2018/11/27/el-diseno-editorial-que-es-elementos-y-
etapas/
Buitrón, M. (2011) “MODELO DIDÁCTICO PARA LA CREACIÓN DE AMBIENTES

VIRTUALES DE APRENDIZAJE. ESTRATEGIA DIDÁCTICA Y DE DISEÑO DE
INTERFAZ PARA LA CONSTRUCCIÓN DE UN AULA VIRTUAL”, tesis para optar
por la Especialización, Maestría y Doctorado en Diseño, de la Universidad
Autónoma Metropolitana Azcapotzalco, México DF. Disponible en:
https://core.ac.uk/download/pdf/128738641.pdf
Behance: Diseño gráfico on Behance. Disponible en:

https://www.behance.net/?tracking_source=typeahead_search_direct&search=Beh
ance%3A%20Dise%C3%B1o%20gr%C3%A1fico%20on%20Behance
Colten y Altevogt, citado por: Jerez, A. (2016) “Definición de trastornos del sueño”,
Guías Regionales de Trastornos del Sueño, Guatemala. Disponible en:
https://www.researchgate.net/publication/296699613_Definicion_de_trastornos_del
_sueno
Convertini, G; Krupitzky, S; Tripod, M; Carusso, L. (2003) “Trastornos del sueño en

niños sanos”, articulo, Ciudad de Buenos Aires. Disponible en:
https://www.sap.org.ar/docs/publicaciones/archivosarg/2003/99.pdf
Carskadon y Marín et al, citado por: Marín, H; Franco, A; Alpi, S; Tobón, S; Sandín,
B. (2008) “Trastornos del sueño, salud y calidad de vida: una perspectiva desde la
medicina comportamental del sueño”, articulo de Suma Psicológica, vol. 15, núm. 1.
Disponible en: https://www.redalyc.org/pdf/1342/134212604009.pdf
123
Centro para el Control y la Prevención de Enfermedades, (2012) “No dormir lo
necesario: epidemia de la salud pública”. Disponible en:
https://www.cdc.gov/spanish/datos/faltasueno/
CADWELL, C.; ZAPPATERRA, Y. (2008) “Diseño editorial, periódicos y revistas”.

Disponible en: https://dialnet.unirioja.es/servlet/libro?codigo=299428
Chávez, C. y Quintero, G. (2012) “Diseño de posters infográficos del casto central

histórico de Maracaibo dirigido a mayores de 18 años”, trabajo final de grado de la
Universidad Rafael Belloso Chacín. Disponible en:
http://virtual.urbe.edu/tesispub/0094865/cap02.pdf
Cuello y Vittone (2013) “Diseñando apps para móviles”. Disponible en:

https://books.google.es/books?hl=es&lr=&id=ATiqsjH1rvwC&oi=fnd&pg=PA7&dq=di
se%C3%B1ando+apps+para+m%C3%B3viles&ots=a47p5X_tar&sig=0ZMNrLj-
ZHL9E1qvxn2lXBRWvQI#v=onepage&q=dise%C3%B1ando%20apps%20para%20
m%C3%B3viles&f=false
Creativos Online. “Diseño editorial: Tipos de sistemas reticulares”. Disponible en:

https://www.creativosonline.org/diseno-editorial-tipos-de-sistemas-reticulares.html
Digital Guide IONOS, (2017) “UI: qué define a una buena interfaz gráfica de
usuario”. Disponible en: https://www.ionos.es/digitalguide/paginas-web/diseno-
web/ui-que-es-una-interfaz-de-usuario/
Eunice Kennedy Shriver National Institute of Child Health and Human Development,
(2018) “¿Cuáles son algunos trastornos del sueño comunes?”. Disponible en:
https://espanol.nichd.nih.gov/salud/temas/sleep/informacion/trastornos
Fundación Vivo Sano, (2017) “Persona sana”. Disponible en:

https://www.vivosano.org/porque-dormir-bueno-
124
salud/#:~:text=No%20solamente%20importa%20la%20cantidad,en%20determinad
as%20etapas%20del%20sue%C3%B1o.
Fiori, S. (2014) “Diseño Editorial – Definición Y Etapas”. Blog disponible en:

https://www.staffcreativa.pe/blog/diseno-editorial-definicion/
Fiori, S. (2014) “5 Puntos A Tener En Cuenta En Un Diseño Editorial”. Blog

disponible en: https://www.staffcreativa.pe/blog/5-puntos-diseno-editorial/
García, M. (2019) “Las 7 fases básicas del diseño gráfico”. Disponible en:
https://www.paredro.com/7-etapas-del-diseno-grafico-que-hay-que-seguir-en-un-
proyecto/
G-Tech Design, (2020) “Principales tendencias en diseño de aplicaciones 2020”.

Disponible en: https://gtechdesign.net/es/blog/tendencias-en-diseno-de-
aplicaciones-2020
García, J. (2015) “Técnicas de diseño gráfico corporativo. Manual teórico”.

Disponible en:
https://books.google.co.ve/books?id=rupCDwAAQBAJ&pg=PA96&dq=folletos+dise
%C3%B1o+editorial&hl=es&sa=X&ved=2ahUKEwiF_d-
2rrPvAhWGK80KHVAgBc4Q6AEwBnoECAYQAg#v=onepage&q=folletos%20dise
%C3%B1o%20editorial&f=false
Guevara, A. (2010) “Revista .Seguridad: Dispositivos móviles”, publicación número

7. Disponible en:
http://www.ru.tic.unam.mx/bitstream/handle/123456789/1731/36.pdf?sequence=1&i
sAllowed=y
https://revista.seguridad.unam.mx/numero-07/dispositivos-
moviles#:~:text=%C2%BFQu%C3%A9%20es%20un%20dispositivo%20m%C3%B3
vil%3F&text=Una%20caracter%C3%ADstica%20importante%20es%20el,para%20
actualizar%20aplicaciones%20y%20datos.
125
Guía Digital, (2020).
Disponible en: http://www.guiadigital.gob.cl/articulo/elementos-del-diseno-de-
interfaces-e-interaccion.html
Guerrero, L. (2016) “El Diseño Editorial. Guía para la realización de libros y

revistas”, trabajo fin de Máster de la Universidad Complutense Madrid. Disponible
en: https://eprints.ucm.es/id/eprint/39751/
Hunhan, (2018) “La clasificación de interfaces gráficas y sus directrices para

mejorar sus diseños gráficos”. Disponible en:
https://hunhan5220399.wordpress.com/2018/02/13/la-clasificacion-de-interfaces-
graficas-y-sus-directrices-para-mejorar-sus-disenos-graficos/
Haro, S. y Quevedo, E. (2001) “Diseño y diagramación de un diccionario

especializado, para la carrera de diseño gráfico de la universidad técnica de
Cotopaxi, empleando el diseño editorial y multimedia”, tesis de grado de la
Universidad Técnica de Cotopaxi, Latacunga - Ecuador. Disponible en:
http://repositorio.utc.edu.ec/handle/27000/1119
Instituto Internet (2019) “Cinco características de una buena interfaz de usuario”.

Disponible en: https://www.institutointernet.com/blog/cinco-caracteristicas-de-una-
buena-interfaz-de-usuario/
Insomnio: ¿Cómo se trata? https://www.sleepfoundation.org/articles/insomnia
MedlinePlus, (2020) “Trastornos del sueño” Biblioteca Nacional de Medicina de los

EE. UU/ Institutos Nacionales de la Salud. Disponible en:
https://medlineplus.gov/spanish/ency/article/000800.htm
Marrero, C. (2006) “Interfaz gráfica de usuario: Aproximación semiótica y cognitiva”.

Documento PDF disponible en:
126
http://www.old.chr5.com/investigacion/investiga_igu/igu_aproximacion_semio-
cognitiva_by_chr5.pdf
Martínez, E. (2001) “La Evolución de la Telefonía Móvil: La guerra de los celulares”.

Disponible en:
https://www.academia.edu/6042142/LECTURAS_La_evoluci%C3%B3n_de_la_telef
on%C3%ADa_m%C3%B3vil_La_guerra_de_los_celulares
Monjo, Mora & Garreta (2019) “Interface Toolkit”, Universitat Oberta de Catalunya,
España. Disponible en: http://disseny.recursos.uoc.edu/materials/interface-
toolkit/es/graphical-user-interface/
Mayo Clinic, (2019) “Trastornos del sueño - Síntomas y causas”. Disponible en:
https://www.mayoclinic.org/es-es/diseases-conditions/sleep-disorders/symptoms-
causes/syc-
20354018#:~:text=Advertisement&text=Algunos%20de%20los%20signos%20y,dific
ultad%20para%20conciliar%20el%20sue%C3%B1o.
Navarro, J. (2007) “Fundamentos del diseño”. Disponible en:

https://books.google.co.ve/books?id=hUyeuVdFgk8C&pg=PA91&dq=folletos+dise%
C3%B1o+editorial&hl=es&sa=X&ved=2ahUKEwiF_d-
2rrPvAhWGK80KHVAgBc4Q6AEwA3oECAEQAg#v=onepage&q=folletos%20dise
%C3%B1o%20editorial&f=false
Neo Wiki, (2019) “Interfaz gráfica de usuario”. Disponible en:

https://neoattack.com/neowiki/interfaz-grafica-de-usuario/
NHLBI Health Information Center, (2013) “Su guía para un Sueño Saludable”.
Documento PDF disponible en:
https://www.nhlbi.nih.gov/files/docs/public/sleep/In_Brief_YG_to_Sleep_Spanish_Fi
nal.pdf
127
Lacalle, A. (2001) “Importancia de una buena interfaz”. Disponible en:
http://albertolacalle.com/hci/interfaz.htm
Ordoñez, C. (2017) ““Diseño editorial de un folleto ilustrado de medicina ancestral

Kichwa de la Amazonía”, trabajo final de grado de la Universidad de Cuenca,
Ecuador. Documento PDF disponible en:
http://dspace.ucuenca.edu.ec/bitstream/123456789/26478/1/tesis.pdf
Pedrozo, G. (2012) “Sistemas operativos en dispositivos móviles”, licenciatura en

sistemas de información, Universidad Nacional del Nordeste. Documento PDF
disponible en:
http://exa.unne.edu.ar/informatica/SO/Sistemas_Operativos_en_Dispositivos_Movil
es.pdf
Play store. “Búsqueda de modelos de aplicaciones” (para análisis de casos de

estudio). Disponible en: https://play.google.com/store?hl=es&gl=US
Peñas, I. (2020) “Diseño de un Producto Editorial: Guía de la ciudad de Sevilla a

través de los ojos de un local”, trabajo final de Master de la Universitat Politècnica
de València. Documente PDF disponible en:
https://riunet.upv.es/bitstream/handle/10251/153193/Pe%c3%b1as%20-
%20Dise%c3%b1o%20de%20un%20Producto%20Editorial%3a%20Gu%c3%ada%
20de%20la%20ciudad%20de%20Sevilla%20a%20trav%c3%a9s%20de%20los%20
ojos%20de%20un%20....pdf? sequence=1&isAllowed=y
Royo, J. (2004) “Diseño digital”. Disponible en:

https://books.google.co.ve/books?id=GYdy1eLS-
i4C&printsec=frontcover&hl=es#v=onepage&q&f=false
Real Academia de la Lengua Española (2020). Disponible en:

https://dle.rae.es/interacci%C3%B3n?m=form
128
Serna, S. (2016) “Diseño de interfaces en aplicaciones móviles”. Disponible en:
https://books.google.co.ve/books?id=SI-
fDwAAQBAJ&pg=PA4&dq=evoluci%C3%B3n+de+los+sistemas+operativos+para+
moviles&hl=es&sa=X&ved=2ahUKEwiyj-
ycvoXvAhVmu1kKHYPEAXkQ6AEwAnoECAUQAg#v=onepage&q&f=false
Spina, M. (2005) “Pequeño manual práctico del diseño editorial”. Disponible en:
https://books.google.co.ve/books?id=yZ0vntnUlCMC&pg=PA11&dq=dise%C3%B1o
+editorial&hl=es&sa=X&ved=2ahUKEwjC4oe62IzvAhVWSTABHYe_Ah8Q6AEwBH
oECAcQAg#v=onepage&q=dise%C3%B1o%20editorial&f=false
Santa María, L. (2013) “El mundo de las aplicaciones móviles”. Disponible en:
https://www.staffcreativa.pe/blog/mundo-aplicaciones-moviles/
Universitat Oberta de Catalunya, España (2020) "Diseño de interfaces”, grado y

master de multimedia. Disponible en: http://multimedia.uoc.edu/blogs/dii/es/que-es-
una-interficie/
Veiga, E, citado por: Pérez, L. (2015) “EntrePicos, guía para educar al montañero
amateur”. No me toques las helvéticas, blog sobre diseño gráfico y publicidad (para
análisis de los casos de estudios). Disponible en:
http://www.nometoqueslashelveticas.com/2015/06/entrepicos-guia-para-educar-
al.html
Zanón, D. (2008) “Introducción al diseño editorial”. Disponible en:

https://books.google.co.ve/books?id=-UKgj-
nolasC&printsec=frontcover&dq=dise%C3%B1o+editorial&hl=es&sa=X&ved=2ahU
KEwjC4oe62IzvAhVWSTABHYe_Ah8Q6AEwAHoECAUQAg#v=onepage&q=dise%
C3%B1o%20editorial&f=false
129
Hospital Alemán Asociación Civil, (2022) “Insomnio: causas y tratamiento”.
Disponible en: https://www.hospitalaleman.org.ar/mujeres/insomnio-causas-y-
tratamiento/
Dr. Pablo Saz, (2019) “Tratamiento natural de la apnea del sueño”, Médico
naturista e Investigador en la Universidad de Zaragoza, artículo de CuerpoMente.
Disponible en: https://www.cuerpomente.com/salud-natural/tratamientos/como-
tratar-forma-natural-apnea-sueno_4519
Martínez, M. (2017) “Cómo reducir el sonambulismo”, artículo en Uncomo Salud.

Disponible en: https://www.mundodeportivo.com/uncomo/salud/articulo/como-
reducir-el-sonambulismo-1201.html
Pareja, J. (2018) “Trastorno de conducta del sueño en fase REM”, responsable de

la Unidad del Sueño del Hospital Universitario Quirónsalud Madrid, artículo de
Cuidate Plus. Disponible en:
https://cuidateplus.marca.com/enfermedades/psiquiatricas/trastorno-conducta-fase-
rem.html
Herbosa & Gutiérrez, (2010) “Narcolepsia. Clínica, diagnóstico y tratamiento”,

artículo de la Revista Offarm. Disponible en: https://www.elsevier.es/es-revista-
offarm-4-articulo-narcolepsia-clinica-diagnostico-tratamiento-X0212047X10489700
130

Tesis de Grado Francis Decena y Paula Gutierrez 2021-2022

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tesis de Grado Francis Decena y Paula Gutierrez 2021-2022

Cargado por

Copyright:

Formatos disponibles

REPÚBLICA BOLIVARIANA DE VENEZUELA

UNIVERSIDAD DEL ZULIA

“PROPUESTA DE DISEÑO DE GUÍA INSTRUCTIVA IMPRESA E INTERFAZ

Tutor académico: Luisenia Fernández

Maracaibo, 11 de marzo de 2022

A nuestros padres, que han sido siempre el pilar fundamental y apoyo en

A nuestra familia y amigos, por el apoyo incondicional, por cada momento,

Finalmente dedicamos esta tesis a nosotras, porque lo merecemos, por nuestra

Agradecemos a Dios, primeramente, por permitir que nos conociéramos y

Gracias a todas las personas participes de este proceso, por apoyarnos,

DEDICATORIA ............................................................................................................... III

Gráfico Nº 1. Método de Diseño Nº 1 ..................................................................... 23

Gráfico Nº 2. Método de Diseño Nº 2 ..................................................................... 24

Gráfico Nº 3. Método de diseño propio para la guía instructiva impresa. ............... 25

Gráfico Nº 4. Método de Diseño Nº 4 ..................................................................... 26

Gráfico Nº 5. Método de Diseño Nº 5 ..................................................................... 27

Gráfico Nº 6. Método de diseño propio para la interfaz gráfica .............................. 28

Gráfico Nº 7. Imágenes vectoriales de nubes o siluetas curvas ............................. 78

Gráfico Nº 8. Paleta de colores con su código HTML ............................................ 79

Gráfico Nº 9. Tipografías seleccionas para los productos e identificador. .............. 79

Gráfico Nº 10. Imágenes seleccionas para los productos ...................................... 80

Gráfico Nº 11. Segundas imágenes seleccionas para los productos ..................... 81

Gráfico Nº 12. Bocetos de logotipo ........................................................................ 81

Gráfico Nº 13. Diseño de logotipo .......................................................................... 82

Gráfico Nº 14. Construcción gráfica del identificador ............................................. 82

Gráfico Nº 15. Método de diseño propio de la guía instructiva, planteado en el

Gráfico Nº 16. Método de diseño propio de la interfaz gráfica, planteado en el

Gráfico Nº 17. Prueba de los dobleces y pliegues para la guía. ............................. 86

Gráfico Nº 19. Muestra distribución de los textos parte delantera. ......................... 88

Gráfico Nº 21. Muestra parte delantera de la maquetación final. ........................... 89

Gráfico Nº 23. Esquema de mapa de navegación de la interfaz gráfica................. 91

Gráfico Nº 24. Pantalla de splash, registro y principal ............................................ 92

Gráfico Nº 25. Pantalla de sueño, alarma y monitoreo. .......................................... 93

Gráfico Nº 26. Pantalla de los trastornos................................................................ 94

Gráfico Nº 27. Pantalla de música y reproductor .................................................... 95

Gráfico Nº 28. Ejemplo de la pantalla de ejercicios ................................................ 96

Gráfico Nº 29. Ejemplo de las pantallas de comida y hábitos ................................ 97

Gráfico Nº 31. Mockup de la guía parte delantera ................................................ 101

Gráfico Nº 32. Mockup de la guía parte trasera ................................................... 102

Gráfico Nº 33. Mockup de la guía cerrada trasera ............................................... 103

Gráfico Nº 34. Mockup de la guía cerrada diagonal ............................................. 104

Gráfico Nº 36. Mockup de pantallas Sueño .......................................................... 107

Gráfico Nº 37. Mockup de pantallas Sueño. ......................................................... 107

Gráfico Nº 38. Mockup de pantallas Música Relajante. ........................................ 108

Gráfico Nº 39. Mockup de pantallas Ejercicio ....................................................... 108

Gráfico Nº 40. Mockup de pantallas Hábitos y comidas. ...................................... 109

La presente investigación tiene como objetivo diseñar una guía instructiva

The present research aims to design a printed instructional guide and

Keywords: Editorial design, printed guide, graphic interface, mobile application,

Para el análisis de lo antes mencionado el proyecto se desarrolla en tres

Exponiendo que el ser humano ha tenido que adaptarse a los nuevos

En el capítulo uno también se determina las metodologías seleccionadas,

Seguidamente, el capítulo tres representa el aspecto de diseño para la guía

SITUACIÓN OBJETO DE ESTUDIO

Ya que el sueño es una función fisiológica esencial para la salud física y

Del mismo modo, el sueño es un proceso rítmico, y un patrón diario que

El ciclo del sueño-vigilia se ha visto afectado debido a cambios en el

Cabe agregar que, según el Centro para el Control y la Prevención de

El padecimiento de alguno de estos trastornos del sueño constituye un

Según reportes provenientes de países desarrollados para advertir la

El insomnio afecta a un 25% de la población, la apnea del sueño que afecta a

Del mismo modo, la disponibilidad de medios de comunicación, como son los

 Investigar sobre pautas para contribuir al mejoramiento de los trastornos del