La maquetación se refiere al diseño editorial que organiza el contenido escrito, visual y en algunos casos audiovisual en medios impresos y electrónicos. Incluye la distribución de elementos en la página y el proceso completo de diseño gráfico, desde el proyecto hasta la impresión y acabados. Una buena maquetación requiere considerar la arquitectura de la información, los flujos de navegación, los insumos gráficos aprobados y los elementos reusables para crear una interfaz coherente en diferentes disposit

1. MAQUETACIÓN
D I S E Ñ O G R A F I C O

2. CONCEPTO
Se conoce como maquetación al oficio de diseño editorial
que se encarga de organizar en un espacio, escrito, visual y
en algunos casos contenido audiovisual en medios
impresos y electrónicos, como libros, periódicos y revistas.
Estrictamente hablando, el acto de maquetación solo se
relaciona con la distribución de los elementos en
un espacio específico de la página, mientras que el diseño
editorial incluye fases más amplias del proceso, desde el
proyecto gráfico hasta los procesos de producción llamados
pre-impresión (preparación para imprimir), prensa
(impresión) y post-prensa (acabados). Sin embargo,
generalmente todo el aspecto gráfico de la actividad
editorial y periodística se conoce con el término de
maquetación.

3. PASOS PARA HACER MAQUETACIÓN
1.Arquitectura de la información definida
Tener clara la arquitectura de la información te ayudará a
estructurar las páginas y los componentes de tu proyecto,
además de las etiquetas semánticas <h1>, <h2>, <h3>, <p>,
<section>, etc.También tendrás claras las URLs de las páginas
del proyecto para cuando debas hacer la lógica del
enrutamiento más adelante.
2. Flujos de navegación claros
Esto te ayudará a maquetar los componentes en el contexto de
la aplicación y te guiará en la toma de decisiones de la
estructura de páginas, del código y de las carpetas donde
ubicarás los diferentes componentes del proyecto.

4. 3. Insumos gráficos aprobados y optimizados
Asegúrate de tener todo lo necesario para empezar a
maquetar. El punto de partida es tener acceso a la última
versión del diseño aprobada por el Product Owner en
herramientas gráficas como Adobe XD, acompañado de
las imágenes optimizadas para medios digitales, paleta de
colores, tipografías, microinteracciones, etc. La
comunicación con el equipo de diseño gráfico es vital
para que tu tiempo como maquetador sea el más
efectivo posible.
4. ¿Qué elementos son reusables en la interfaz?
Botones, inputs, íconos, templates (estructuras de páginas),
entre otros; son los elementos que pueden identificarse en el
escaneo visual inicial del diseño de la UI. Estos elementos
pueden ser los primeros que se maquetan, para que sean
reusados más adelante en los otros componentes.

5. 5. ¿En qué navegadores y dispositivos se soportará la
aplicación?
Esta información será vital para que sepas qué propiedades
podrás usar en CSS o los insumos gráficos que necesitarás
para asegurar la misma experiencia de usuario en los
diferentes navegadores y dispositivos.
6. De lo general a lo específico
Teniendo en cuenta que la información del sitio debe adaptarse
a diferentes dispositivos, piensa la UI como cajas móviles o
estáticas que contienen otras cajas móviles o estáticas a través
de las distintas resoluciones. Las etiquetas semánticas en HTML,
el modelo de caja, las posiciones y los sistemas de rejilla en CSS
te guiarán en la construcción de los contenedores principales
de la UI, para llegar luego a los detalles del diseño.

6. 8. Trabaja en equipo, aprende a preguntar rápido y sé
recursivo
Solos vamos más rápido, pero acompañados llegamos más
lejos. Los retos compartidos abren paso a soluciones más
creativas, eficientes y efectivas. Seguramente alguien más
tuvo un problema como el que tienes, y ahorrarás tiempo de
desarrollo si absorbes ideas rápidas que te lleven a la solución.
9. Todo puede cambiar
Las necesidades del entorno pueden ser muy
variables y el desarrollo debe estar pensado para
eso. Si algún componente cambia, y ya estabas
preparado, ahorrarás tiempo y te tomará menos
esfuerzo hacer el cambio.
10. Atención a los detalles
“Los detalles no son solo detalles, ellos hace el diseño”
(Charles Eames). Como maquetadores se vuelve crucial
desarrollar el “ojo de pixel”, con el fin de ejecutar
interfaces con detalles enfocados a la experiencia final de
los usuarios. Un buen “ojo de pixel” puede ayudarte a
predecir y corregir errores de interfaz a tiempo y a
perfeccionar tus habilidades gráficas.

7. ELEMENTOS BÁSICOS
TEXTO
El llamado "cuerpo de texto" es el tipo en que será impreso el contenido principal del impreso ya sea libro o publicación
periódica (artículos, columnas, crónicas, editoriales, cartas etc.). La masa de texto acostumbra llenar más de la mitad de
toda la mancha gráfica del periódico y debe ser delimitada por los otros elementos. Un formato común para el cuerpo de
texto en periódicos es el tipo serifado, con cuerpo (tamaño) 12 puntos.
TÍTULOS OTITULARES
Desde el titular de la primera página, hasta los titulares menores de artículos. Son subdivididos en:
o subtítulos o subtitulares – colocados abajo de la titular principal, complementan la información e incitan a leer el
texto.
o antetítulos o ante titulares – colocados arriba de la titular principal, complementan la información e incitan a leer
el texto.
o intertítulos, intertitulares o quiebras – colocados en el medio del texto, para seccionarlo y facilitar la comprensión.
o destacados u ojos – colocados en el medio de la masa de texto, entre columnas, para resaltar trechos y sustituir
quiebres; son muy utilizados en entrevistas.
ENCABEZADOY PIE
Marcan la cumbre y la base de la página, respectivamente, incluyendo marcas básicas como nombre del
periódico, editorial, fecha, número de la edición y número de la página; cuando es usado en la primera
página, la cabecera incluye aún la marca del diario, precio y algunos nombres del equipo periodístico
(presidente, director, editor-jefe).

8. FOTOS
Fotografías, que en los diarios y revistas siempre vienen acompañadas por pie de fotos descriptivos y
el crédito del fotógrafo.
ARTE
Lo que se llama arte en diagramación son imágenes producidas para ilustrar o complementar visualmente la
información del texto. Pueden ser:
o Infografías – que incluyen mapas, gráficos estadísticos, secuenciales y esquemas visuales;
o Caricaturas – dibujos generalmente satíricos con personajes del noticiero;
o Ilustraciones – todo tipo de dibujo ilustrativo para el texto periodístico.
VIÑETAS
Mini-titulares que marcan un tema o asunto recurrente o destacado; pueden incluir mini-ilustraciones y
generalmente vienen arriba de la titular del artículo o en el alto de la página.
BOXES O CAJA
Un box es un espacio gráficamente delimitado que usualmente incluye un texto explicativo o sobre el asunto
relacionado al artículo principal.
HILOS
Existen para separar elementos que, por algún motivo, pueden ser confundidos.
ESPACIOS PARA PUBLICIDAD
Único elemento de contenido no-editorial de la diagramación, producido por el equipo comercial

9. IMPORTANCIA DE LAS RETICULAS
La Retícula es una estructura a base de líneas, generalmente verticales y horizontales, las cuales nos
ayuda a ordenar coherentemente todos los elementos de la composición como son: titulo, subtitulo,
cuerpo del texto, fotografías, pie y crédito de foto, slogan, ideas resaltadas y numeración. Cada línea
sirve de guía para colocar márgenes y medianiles (espacio entre columnas).
En diseño se considera de ayuda, utilizar una retícula, dado que auxilian a organizar la información y
actuar como marco en la composición para crear orden y estética. Se puede decir que es una
herramienta para la maquetación.

10. CLASES DE RETICULAS
Retícula de una columna:
Esta estructura presenta una única hilera de información, esto
para dar una continuidad y aprovechar al máximo el espacio en
textos largos y persistentes. Posee márgenes amplios y evita
que se pierda el punto de lectura, transmite calma y
tranquilidad. Los libros o informes utilizan este tipo de retícula.
Retícula a dos columnas:
Este tipo organiza la información en dos columnas, esto
usualmente es con el objetivo de presentar datos subsecuentes
enfrentados o textos con la información separada. La
dimensiones pueden ser del mismo tamaño o si se necesita ser
de diferente tamaño, se debe procurar que una sea el doble de
ancho que la otra. Se usa frecuentemente en diccionarios o
textos con definiciones.

11. Retícula de múltiples columnas:
Este sistema es uno de las más utilizados, ofrece una flexibilidad
y versatilidad amplia, puesto que se puede combinar e intercalar
texto con imágenes u otros cuerpos, el número de columnas
puede variar dependiendo, pero usualmente se mantiene en tres
o cuatro, las cuales deben ser proporcionales. Si se tiene una
gran cantidad de información se puede optar por un mayor
número de columnas (los periódicos tienen hasta seis). Es fácil
encontrarlas en revistas o folletos informativos.
Retícula Modular:
Esta estructura muestra módulos del mismo tamaño abarcados
en todo el espacio, es más compleja pero gracias a su menor
división del espacio permite dar más flexibilidad, movilidad y
creatividad a los contenidos. Se puede ver en los diseños de
anuncios, carteles o folletos cortos.

12. Sistema Jerárquico:
Como su nombre lo dice, tiene la finalidad de mostrar los contenidos de acuerdo a su importancia y
relevancia, por ello es muy utilizado en sitios web o información digital, en lo que primero que se
observa es lo que captará la atención.

13. http://alavistademimundo.blogspot.com/2013/07/elementos-
dentro-de-la-maquetacion.html
https://www.pragma.com.co/academia/lecciones/10-pasos-para-
una-maquetacion-eficiente-con-html-y-css
https://conceptodefinicion.de/maquetacion/
https://groppeimprenta.com/noticias/39-informacion-
tecnica/172-reticulas-diseno-
editorial.html#:~:text=La%20Ret%C3%ADcula%20es%20una%2
0estructura,slogan%2C%20ideas%20resaltadas%20y%20numera
ci%C3%B3n.
BIBLIOGRAFIA