Composición y Tipografía

Begoña Yáñez

Tema 12: Medios digitales

Índice del tema

Tema 12. Medios digitales

► 12.1. ¿Cómo estudiar este tema?
► 12.2. Tipografía y composición en la era de Internet
► 12.3. Desde maqueta tradicional a web
► 12.4. Retículas para apps y webs

Composición y Tipografía - Begoña Yáñez 2

 ¿Qué vamos a estudiar?

• Tipografía y Composición en la era de Internet

• Diseño digital e interactivo
• Retículas para aplicaciones y web

Composición y Tipografía - Begoña Yáñez 3

Tipografía y composición en Internet
Digitalización de libros y maquetación digital
• Años 70 origen del Proyecto Gutenberg.
• En 1989 décimo título, y en 1997 32 títulos más…
• En 2009 contaba con treinta mil libros.

Composición y Tipografía - Begoña Yáñez 4

Tipografía y composición en Internet

Con la aparición de los

ebook se pensó que la venta
de libros en papel (medios
impresos en general) iba a
descender drásticamente.
Es posible que esto suceda
en un futuro, pero por el
momento el papel mantienen
una posición muy respetable
en las ventas.

Composición y Tipografía - Begoña Yáñez 5

Tipografía y composición en Internet
• Papel y digital equilibrio entre soportes. Convivencia total.

Composición y Tipografía - Begoña Yáñez 6

 Tipografía y composición en Internet

http://zonaereader.com/sites/default/files/libros2017.jpg?1379189534

Composición y Tipografía - Begoña Yáñez 7

 Tipografía y composición en Internet

https://ssociologos.com/wp-content/uploads/2016/06/ebook-libro-fisico-paises.jpg

Composición y Tipografía - Begoña Yáñez 8

Fuente

Composición y Tipografía - Begoña Yáñez 9

Formatos para pantalla
• Cuando componemos para pantalla no tenemos el control sobre el
tamaño de la pantalla de la persona que verá nuestros diseños.
• Una web responsive es la solución a este problema.
• ¿Qué ocurre cuando el diseño es más importante o igual que la
información? ¿Cuándo necesitamos una estructura fija para enlazar
texto e imagen?

Composición y Tipografía - Begoña Yáñez 10

Tipografía y composición en Internet
EPUB
• El más popular
entre los ebook.
• Cambios de tipo y
tamaño de letra.
• No hay problemas
con libros con
pocas
ilustraciones.
• Problemas para
otro tipo de
publicaciones.

Composición y Tipografía - Begoña Yáñez 11

Tipografía y composición en Internet
EPUB2 o FixLayout. Documento electrónico que perdurara
con su diseño.

Composición y Tipografía - Begoña Yáñez 12

 Tipografía y composición en Internet
EPUB3
• Respuesta en código
abierto al fixlayout.
Ventajas:
• Maquetación fija.
• Multimedia.
• Compatible con la
mayoría de
dispositivos.

http://media.148apps.com/screenshots/524939666/us-ipad-1-gitden-reader-epub-3-reflow-and-fixed-layout-viewer.jpeg

Composición y Tipografía - Begoña Yáñez 13

 Tipografía y composición en Internet
AZW
• Formato de Kindle.
• Solución: conversor de formatos.

https://www.todoereaders.com/wp-content/uploads/2014/03/Kindle-Paperwhite-3.jpg

Composición y Tipografía - Begoña Yáñez 14

 Tipografía y composición en Internet
PDF
• Estandarizado y renovado.
• Permite interactividad, animaciones,
html, etc. Compatible con el resto de
programas de Adobe.

http://www.graphicmarkt.com/wp-content/uploads/2015/10/INTERACTIVE-PDF.png
https://indesignsecrets.com/wp-content/uploads/2010/08/exportpdfinteractive.png

Composición y Tipografía - Begoña Yáñez 15

Tipografía y composición en Internet
• Las tipografías digitales

Composición y Tipografía - Begoña Yáñez 16

Tipografía y composición en Internet

Selección y colección
• Podemos crear una para
cada proyecto.
• Copiamos el código a
nuestra CSS.
• Idealmente diseñadas
para web.

Composición y Tipografía - Begoña Yáñez 17

 Diseño digital e interactivo

De la maqueta tradicional a web

• Pensar en el destino del diseño.
• Indesign ofrece las mejores
herramientas para maquetar y
componer textos e imágenes.
• Pensado para impresión, pero
se adapta a los medios
digitales…

https://www.creativosonline.org/blog/wp-content/uploads/2016/06/49-plantilla-indesign-830x600.jpg

Composición y Tipografía - Begoña Yáñez 18

PDF y PDF escape
• La primera acción fue tratar de dotar a los PDF de interactividad.
• No es un formato responsive.

Composición y Tipografía - Begoña Yáñez 19

Digital Publishing Suite

Maquetación de InDesign para un iPad

Composición y Tipografía - Begoña Yáñez 20
 Digital Publishing Suite

• Pluging para crear, importar y

subir a los puntos de venta todo
tipo de publicaciones. Compatible
tanto con Apple Store y con
Google Play.
• Folio builder y folio overlays.
• En 2016 pasa a ser Adobe
Experience Manage.

https://digitalpublishing.acrobat.com/images/landing-image.jpg

Composición y Tipografía - Begoña Yáñez 21

Digital Publishing Suite

https://www.video2brain.com/es/cursos/publicaciones-digitales-digital-publishing-suite

Composición y Tipografía - Begoña Yáñez 22

 Diseño digital

Optimizar apps para

todos los dispositivos
Para que una simple App
pueda estar disponible
para todos los tipos de
smartphone y tablets de
iOS y Android, tiene que
diseñarse para iPhone,
iPhone con pantalla
retina, Android ldpi,
Android mdpi, Android
hdpi, Android xhdpi, iPad
2, iPad 3,…
http://www.untipodigital.com/diseno-de-moviles-
tablets-las-diferentes-densidades/

Composición y Tipografía - Begoña Yáñez 23

Composición y Tipografía - Begoña Yáñez 24
Composición y Tipografía - Begoña Yáñez 25
Composición y Tipografía - Begoña Yáñez 26
Composición y Tipografía - Begoña Yáñez 27
Diseño digital e interactivo- Guía de estilo Apple

https://developer.apple.com/ios/human-interface-guidelines/overview/themes/

Composición y Tipografía - Begoña Yáñez 28

Diseño digital e interactivo- Guía de estilo Android

https://developer.android.com/design/style/index.html

Composición y Tipografía - Begoña Yáñez 29

Mag+

https://www.video2brain.com/es/cursos/publicaciones-digitales-mag

Composición y Tipografía - Begoña Yáñez 30

 Mag+
Ventajas:
• Es un plugin que lleva desde 2010 desarrollándose, con más de 6
años en el mercado.
• Es una empresa estable que nunca ha fallado.
• Tiene una amplia cartera de clientes, lo que implica actualizaciones
y las mejoras.
• Proporciona gran experiencia de usuario para nuestros lectores.
• Es un firme competidor de Adobe DPS.

En el blog de Mag+ podemos leer: 10 razones por las que mag + es

la mejor alternativa a Adobe DPS

http://emmallensa.com/17-mejores-herramientas-hacer-revistas-digitales/

Composición y Tipografía - Begoña Yáñez 31

Mag+

Composición y Tipografía - Begoña Yáñez 32

Mag+
• Algunas revistas diseñadas con Mag+: Scrawl Magazine, British
Journal of Photography (aumentó sus suscriptores gracias a
Mag+), Relevant Magazine…

https://www.youtube.com/watch?v=72V52xOrdpQ

Composición y Tipografía - Begoña Yáñez 33

Mag+

Composición y Tipografía - Begoña Yáñez 34

Mag+

Composición y Tipografía - Begoña Yáñez 35

 Bütton es una herramienta de creación de
Bütton Publish publicaciones digitales creada por la agencia
de diseño Cero Design de Barcelona.

Composición y Tipografía - Begoña Yáñez 36

Bütton Publish
• Bütton publish, Revista 40One

https://www.youtube.com/watch?v=neyXEyiMRgE&t=2s

Más info: https://graffica.info/button-herramienta-revistas-interactivas/

Composición y Tipografía - Begoña Yáñez 37

Bütton Publish
• Revistas creadas con Bütton
• Metal Magazine, Muster Magazine, Esade, Educación 3.0.

Ventajas
• Su precio Single es muy atractivo.
Desventajas
• El resto de precios ya no son atractivos.
• La comunicad y la información online son más escasas que en otros
recursos, pero va creciendo.

Composición y Tipografía - Begoña Yáñez 38

Bütton Publish

Composición y Tipografía - Begoña Yáñez 39

480 interactive

https://www.video2brain.com/es/cursos/publicaciones-digitales-480interactive

Composición y Tipografía - Begoña Yáñez 40

480 Interactive
• Cuatroochenta Interactive es el programa de una empresa
española.
• Es un plugin de InDesign con el que podemos crear publicaciones
digitales.
• Es interesante por sus precios.
• Revistas diseñadas con 480interactive: Global Asia Magazine,
Sport Magazine y Naos Magazine.
• Cuenta con un historial de versiones en el que podemos ver la
evolución y solución de los problemas que van surgiendo en el
desarrollo del uso de 480 Interactive.

Ejemplo de plantilla para revista:

http://com.cuatroochenta.testbucket.s3.amazonaws.com/480Interactive/interno/plantillas_
web/2017/revistas/indesign/4jmagazine/mockup.html

Composición y Tipografía - Begoña Yáñez 41

480 Interactive
• 480 interactive

https://www.youtube.com/watch?v=cEnov0YrLNo

Composición y Tipografía - Begoña Yáñez 42

480 Interactive

Composición y Tipografía - Begoña Yáñez 43

Retículas para aplicaciones y web
• Las retículas son incluso más importantes en el diseño para
pantalla.
• Especialmente en los diseños responsive.
• Los lugares importantes son otros y ampliamos los parámetros a
tener en cuenta:
– Tamaño de pantalla.
– Usabilidad.
– Uso del ratón.
– Pantalla táctil.
– Tamaño del dispositivo.
– …

Composición y Tipografía - Begoña Yáñez 44

https://i1.wp.com/tympanus.net/codrops/wp-content/uploads/2012/07/evb.jpg

Composición y Tipografía - Begoña Yáñez 45

Retículas para aplicaciones y web
• De acuerdo a la forma de sostener el móvil, el pulgar tiene mayor o
menor dificultad en acceder a ciertas zonas.

Composición y Tipografía - Begoña Yáñez 46

Retículas para aplicaciones y web
Existen varios tipos de retículas web, pero todas se basan en la
variación de estos 3 elementos:
• Columnas: como en las retículas para impresión estas columnas
dividen el espacio de forma vertical. Se suelen usar 12, ya que es
mucho más fácil hacer divisiones y agrupaciones con este número.
• Padding: es el espacio que queda entre el borde de la columna y el
contenido. Con más padding el diseño respira más.
• Gutterwidth: el espacio que queda entre las columnas. Si vamos a
agrupar estas columnas para hacer módulos podremos dejar poco
espacio. Si es para texto, tendremos que dejar más valor en
gutterwidth.

Composición y Tipografía - Begoña Yáñez 47

 Retículas para aplicaciones y web

Gutter

Columna Padding

http://socialdriver.com/wp-content/uploads/2012/10/gridpak.png

Composición y Tipografía - Begoña Yáñez 48

 Columna

https://www.ronline.com/blog/wp-content/uploads/2014/04/CaradigmTheGrid.jpg

Composición y Tipografía - Begoña Yáñez 49

 Retículas para aplicaciones y web

http://s3.amazonaws.com/blog.invisionapp.com/uploads/2015/08/bootstrap-grid.png

Composición y Tipografía - Begoña Yáñez 50

Retículas para aplicaciones y web

Padding

Composición y Tipografía - Begoña Yáñez 51

 Retículas para aplicaciones y web

https://codepen.io/ncerminara/pen/hfvix/image/large.png

Composición y Tipografía - Begoña Yáñez 52

Grid Designer

http://grid.mindplay.dk/
Composición y Tipografía - Begoña Yáñez 53
Grid Designer
Grid Designer es un completo generador online que permite
crear una grid o rejilla según la necesidad del diseño y también
definir e incluir las tipografías.
Este generador permite también incluir automáticamente en la CSS,
los estilos para reset y especificar si se trata de una grid escalable. Al
final se obtiene la CSS y el template HTML con la rejilla.
Grid Designer posee un interfaz muy simple, intuitiva y funcional.

https://pixelcoblog.com/grid-designer-completo-generador-online-de-grid-y-css/

Composición y Tipografía - Begoña Yáñez 54

Retículas para aplicaciones y web
• Retícula jerárquica

Composición y Tipografía - Begoña Yáñez 55

 Finalizando el curso

https://pbs.twimg.com/media/BAPN1i9CEAAVBnN.png

Composición y Tipografía - Begoña Yáñez 56

www.unir.net