Visualización de medios digitales y estilos para un medio impreso

Visualización de medios digitales y
estilos para un medio impreso
Francisca Wevar Orellana
LC2 . e. [ad]
2012
Visualización Sitio Web
para Revista MásDeco
Resolución: 1024 px de ancho
Nota: El sitio posee la característica de infinite scrolling como
forma de navegar a través de los contenidos.
Además, tanto header como footer se deslizan con la pantalla
mientras se “baja” por el contenido.
HOME (Destacados)
Sección DecoDatos > Buscador
DOR
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras
at dapibus magna ...Más
Link a HOME
ARQ
ARTE
Titulo del destacado
Titulo del desta
Lorem ipsum dolor sit am
dapibus magna ... Más
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras at
dapibus magna ... Más
El titulo en el header es donde reside el link a la HOME.
MOUSE OVER: Comportamiento del título cuando se posa el cursor
sobre él.
Menú
DISEÑO Titulo del destacado
REPORTAJE
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras at
dapibus magna ... Más
DISEÑO
Titulo del destacado
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras at
dapibus magna... Más
DISEÑO
Titulo del destaca
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cra
dapibus magna ... Más
El menú se despliega cuando se hace click en el nombre de la sección.
Este no se despliega como pop up sino que se desliza mostrando
las opciones y luego, al retirar el mouse, colapsa.
Estilos de HOME
HEADER
1. Titulo destacado <h1>
4. Cuerpo del destacado <p>
Font Family: Verdana, San Serif;
Font Size: 12 px;
Font Style: Regular ;
Font Weight: Normal ;
Text Align: Centrado (center) ;
Ancho caja de texto: 90 px;
Font Family: Garamond, Serif ;
Font Size: 20 px ;
Font Style: Italic ;
Font Weight: Bold ;
Text Align: A la izquierda (left)
Font Family: Verdana , Sans Serif ;
Font Size: 9px ;
Font Style: Regular ;
Font Weight: Normal ;
Text Align: A la izquierda (left) ;
Line height: 11 px ;
Anchos de párrafo: 175 px ; 300 px.
2. Titulo sección <h2>
FOOTER
Font Family: Verdana, San Serif ;
Font Size: 10 px ;
Font Style: Regular ;
Font Weight: Normal ;
Text Align: Centrado (center) ;
Ancho caja de texto: Al ancho de la página
Font Family: Verdana, Sans Serif ;
Font Size: 20 px ;
Font Style: Regular ;
Font Weight: Normal ;
Text Align: A la izquierda (left) ;
Márgenes
Márgenes caja de contenido: 62 px
Márgenes Verticales entre imágenes: 2 px
Márgenes Horizontales entre imágenes: 10 px
Título del destacado
DECO
3. Subtitulo de sección
Lorem <h3>
ipsum dolor sit amet, consectetur adipiscing elit. Cras at
dapibus
magna ... Más
1
4
DATOS
Font Family: Verdana, Sans
Serif ;
2
ARQ
REPORTAJE
Font Size: 10 px ;
Font Style: Regular ;
Font Weight: Normal ;
Text Align: A la izquierda (left)
Título del destacado
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras at
dapibus magna ... Más
Estilos de “Buscador”
Titulo de notas
Font Family: Garamond, Serif;
Font Size: 20 px;
Font Style: Italic;
Font Weight: Bold;
Text Align: A la izquierda (left) ;
DISEÑO
Cuerpo de la nota
Font Family: Verdana, Sans Serif;
Font Size: 11 px;
Font Style: Regular;
Font Weight: Normal;
Text Align: A la izquierda (left) ;
Line height: 14 px:
Anchos de parrafo: 280 px;
ARQ
ESPACIO
Titulo del destacado
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at
dapibus magna ... Más
Titulo del destacado
Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Cras at
dapibus magna
... Más
Somos|
Somos
|Terminos
Terminos
y condiciones de
de uso
uso
y condiciones
||
Politíca
PolitícadedePrivacidad
Privacidad|
| Contacto
Contact
Visualización dispositivo tablet
para Revista MásDeco
Resolución: 768 x 1024 px
Nota: Cada vez que aparecen flechas en los extremos
derecho e inferior de la pantalla, significará que existen -aúncontenidos por ser visualizados y/o leídos.
Además, tanto header como footer se deslizan con la pantalla
mientras se “baja” por el contenido.
HOME (Destacados)
Sección DecoDatos > Buscador
Transición entre destacados
“HORIZONTAL
SWIPE”
Estilos de HOME
HEADER
Titulo sección <h2>
Font Family: Verdana, San Serif ;
Font Size: 10 px ;
Font Style: Regular ;
Font Weight: Normal ;
Text Align: Centrado (center) ;
Ancho caja de texto: 90 px
Font Family: Verdana, Sans Serif ;
Font Size: 38 px ;
Font Style: Regular ;
Font Weight: Normal ;
Text Align: A la izquierda (left)
FOOTER
Cuerpo del destacado <p>
Font Family: Verdana, San Serif ;
Font Size: 9 px ;
Font Style: Regular ;
Font Weight: Normal ;
Text Align: Centrado (center) ;
Ancho caja de texto: Al ancho de la página
Font Family: Verdana, Sans Serif ;
Font Size: 12 px ;
Font Style: Regular ;
Font Weight: Normal ;
Text Align: A la izquierda (left) ;
Line height: 14 px ;
Ancho de párrafo: 500 px
Titulo destacado <h1>
Font Family: Garamond, Serif ;
Font Size: 40 px ;
Font Style: Italic ;
Font Weight: Bold ;
Text Align: A la izquierda (left)
Estilos de “Buscador”
Titulo de notas
Font Family: Garamond, Serif ;
Font Size: 20 px ;
Font Style: Italic ;
Font Weight: Bold ;
Text Align: A la izquierda (left) ;
Cuerpo de la nota
Font Family: Verdana , Sans Serif ;
Font Size: 11 px ;
Font Style: Regular ;
Font Weight: Normal ;
Text Align: A la izquierda (left) ;
Line height: 15 px ;
Ancho de párrafo: 350 px
“VERTICAL
SWIPE”
Visualización de medios digitales y
estilos para un medio impreso
Francisca Wevar Orellana
LC2 . e. [ad]
2012