Embed Size (px)
Citation preview
V E S T I G I O S F O T O G R Á F I C O S
M A N U A L
D E E S T I L O S W E B
M A N U A L
D E E S T I L O S W E B
V E S T I G I O S F O T O G R Á F I C O S
A partir de la necesidad de construir un espacio de encuentro
en donde todo el trabajo fotográfico de Rolando Rojas pueda
resposar se diseña un sitio web y se determina que su principal
objetivo sea la difusión de su trabajo de carácter patrimonial.
Se definen dos tipos de contenido; por una lado uno de carácter
fotográfico, en su totalidad en blanco y negro capturado en su
mayoría durante los años 50 y 60 del siglo pasado. Por otro lado
se presenta un contenido de registro e informativo de Rolan-
do: biografía, exposiciones -tanto próximas como ya realizada,
entre otras cosas. En cuanto al diseño del sitio web, este se en-
cuentra en su estado de interfaz terminada con sus contenidos
reales.
Bajo este contexto , el presente manual corresponde a una guía
de estilos gráficos y desarrollo web del sitio de “Rolando Rojas:
Vestigios Fotográficos”, en donde puede encontrar todo tipo de
información entorno al sitio, tanto de organización de conteni-
do como de diseño. El manual presenta el contenido a través de
dos voces; una que explica de manera técnica todas las deci-
siones tomadas y otra que comunica las intenciones detrás de
éstas a partir de un lenguaje que evoca a la sensibilidad propia
del diseño.
I N T R O D U C C I Ó N
1. NAVEGACIÓN
Arquitectura de la Información
Partituras de Interacción
Mapa de Clases
2. ESTILO VISUAL
Paleta de Colores
Uso Tipografía
Tamaño de Fotografías
Juego de Íconos
3. ESTRUCTURA DEL SITIO
Grilla
Estructura de Header
Estructura de Footer
Diseño de Home
Diseño Páginas Tipo
4. ELEMENTOS DE NAVEGACIÓN
Interacción de Links
Transición de Fotografías
Scroll y Sidebar Página de Registro
Uso de Galería de Imágenes
11
12
14
18
21
22
24
26
30
33
34
36
40
42
44
65
66
70
72
74
Í N D I C E
11
N AV E G AC I Ó N1
12
ROLANDO VESTIGIOS FOTOGRÁFICOS
RO L A N D O
biografía
Entendiendo que la arquitectura de la información (AI) corres-
ponde a la estructura en donde descansa el contenido de un sitio
específico, la cual debe organizar la información y definir el ac-
ceso a este mismo, se propone que para el sitio de Rolando Rojas
esta se construya en base a palabras claves los cuales permitan
al usuario entender de manera rápida a qué tipo de contenido
será dirigido una vez que decida qué camino tomar.
El primer contenido dispuesto (Rolando) corresponde a infor-
mación de registro relacionado con el fotógrafo y el despliegue
de su oficio.
A R Q U I T E C T U R A
D E L A I N F O R M A C I Ó N
cronografía
exposiciones
libros y prensa
R E T R ATO S
novias8 FOTOGRAFÍAS
experimentales84 FOTOGRAFÍAS
de estudio27 FOTOGRAFÍAS
P E R S O N A J E S
pablo neruda40 FOTOGRAFÍAS
otros24 FOTOGRAFÍAS
13
Como se explicó anteriormente, el sitio de Rolando alber-
ga todos los vestigios fotográficos de su trabajo, por lo tanto
el contenido principal del sitio se centra en fotografías, para
esto se proponen 3 grandes agrupaciones: Retrato, Destacados
y Lugares. Cada una de estas secciones funcionan como filtro
del carácter propio de cada álbum fotográfico y alberga subsec-
ciones de contenido. Finalmente se presenta puntos de infor-
mación más específica sobre el trabajo de rolando: Contacto y
Colofón del sitio.
A pesar de que “Retratos”, “Destacados” y “Lugares” corresponden
al registro de la obra fotográfica de Rolando y podría estar al mismo
nivel jerárquico que la sección “Rolando”, se dispone este contenido
en secciones por dos razones: otorgar más protagonismo al material
fotográfico (fin principal del sitio) y a su vez ser amigable con el usu-
ario a través de una navegación facilitada por las galerías fotográficas.
L U G A R E S
borde costero60 FOTOGRAFÍAS
chiloé47 FOTOGRAFÍAS
horcón8 FOTOGRAFÍAS
c o n t a c t o c o l o f ó n M e n ú d e N ave g a c i ó n S e c u n d a r i o
M e n ú d e N ave g a c i ó n P r i n c i p a l :
- C o n t e n e n i d o d e R e g r i s t r o
- Fo t o g ra f í a s ( 2 8 6 )
A r q u i t e c t u ra d e l a I n f o r m a c i ó n
S i t i o R o l a n d o R o j a s
14
person
dialogue
system
intrigado
home click en
menú
opciones
de contenido
feliz
click en
una sub-serie
carga
contenido
intrigado
pantalla en negro aparece la imagen
lentamente
intrigado
carga
contenido
aparece la imagen
sorprendido
P A R T I T U R A S
D E I N T E R A C C I Ó N
En cuanto a la navegación del sitio se vuelve necesario describir
tres situaciones específicas:
ACCESO Y TRANSICIÓN ENTRE FOTOGRAFÍAS
El acceso al contenido fotográfico es más bien rápido (directo
desde el menú de navegación), una vez que el usuario selecciona
un tipo de fotografía, esta se presenta en su modo de particu-
lar (no accede a la galería), a través de una transición en donde
la fotografía va ganando transparencia, desde un 0% hasta el
100%. Una vez que esto ocurre, la transición entre fotografías
15
click en
siguiente
carga
contenido
intrigado
pantalla en negro aparece la imagen
lentamente
intrigado
carga
contenido
aparece la imagen
sorprendido
click en
siguiente
pantalla en negro
tranquilo
carga
contenido
aparece la imagen
lentamente
carga
contenido
aparece la imagen
feliz
El presentar la fotografía en un primer momento desde su sentido
particular por sobre el total (galería), se propone a partir de privile-
giar y generar en el usuario un estado de reposo en el sitio web. Por
otra parte se propone una transición lenta entre las fotografías en
la búsqueda de evocar el revelado de fotografías análogas, en donde
este se lleva a cabo con tiempo y aparece paulatinamente.
Pa r t i t u ra d e I n t e ra c c i ó n :
N ave g a c i ó n p o r f o t o g ra f í a s
también es pausada, en donde al seleccionar “siguiente”, la ac-
tual desaparece disminuyendo su transparencia hasta llegar a 0
-se difumina en el fondo negro-, mismo valor con el que comien-
za a aparecer la siguiente.
16
person
dialogue
system
intrigado
home click en
menú
opciones
de contenido
feliz
click en
biografía
carga
contenido
página en
blancoscroll el contenido se
difumina
intrigado
ACCESO A GALERÍA FOTOGRÁFICA
Una vez que se selecciona una categoría de fotografía en
el menú de navegación, esta se presenta de su modo partic-
ular, en donde el acceso a la galería es más bien secundario
jerárquicamente. Una vez que se accede a una de ellas, el
usuario se encuentra con galerías agrupadas según su cate-
goría mayor. Por ejemplo. al acceder a galería de Novias,
también se podrán observar las galerías de “Experimentales”
y “De Estudio”, ya que todas ellas corresponde a “Retratos”.
person
dialogue
system
intrigado
home click en
menú
opciones
de contenido
feliz
click en
una serie
carga
contenido
intrigado
pantalla en negro
aparece la imagen
lentamente
intrigado
carga
contenido
aparece la
imagen
sorprendido
aparece el
contenido
felizintrigado
17
más aparece
más contenido
carga
contenido
sorprendido
scroll el contenido
se difumina
tranquilo
más aparece
más contenido
carga
contenido
feliz
click en
galería
se revela la galería
de la sub.serie
feliz
carga
contenido
se revela la
galería de la serie
sorprendido
click en foto
de otra serie
filtra
intrigado
pantalla en
negro
carga
contenido
aparece la
imagen lentamente
carga
contenido
aparece la
imagen
feliz
ACCESO A CONTENIDO DE REGISTRO
Este tipo de página, al disponer otro tipo de contenido, posee
una estructura distinta (más convencional) en donde el scroll
forma parte de la navegación. Una vez que el usuario accede
a este contenido, se encuentra con una página en blanco, cuyo
contenido “se revela” a través de una transparencia que va ga-
nando opacidad. Algo similar ocurre al hacer scroll, el nuevo
contenido que va apareciendo desde abajo lo haciendo a medida
que gana opacidad.
Como se mencionó anteriormente el hecho que el contenido y. so-
bretodo, las fotografías vayan apareciendo a través de una trans-
parencias es un recurso que busca evocar el revelado análogo de las
fotografías, como también el presentar el sitio web como un lugar en
donde el usuario reposa y realiza las acciones de manera pausada.
Aclarar que esto es un recurso que se utiliza en el contenido del sitio,
ya que el acceso a través del menú de navegación es rápido.
Pa r t i t u ra d e I n t e ra c c i ó n
A c c e s o a C o n t e n i d o d e R e g i s t r o ( a r r i b a )
A c c e s o a G a l e r í a ( a b a j o)
scroll
18
Rolando Rojas:vestigios fotográficos
Header
Header
Botón de Menú
Biografía
Cronografía
Exposiciones
Rolando
En Libros y Prensa
Novias
De Estudio
Experimentales
Personajes
Retratos
Borde Coster
Chiloé
Borde Costero
Chiloé
Horcón
Lugares
Contacto
Colofón
M A P A
D E C L A S E
C o n t e n i d o f i j o .
Imagen de Fondo
Firma - Logo
Bajada de título
Botón de Menú
Contacto
Colofón
Título
Texto
Subtítulo
Links a Wiki e[ad]
Título
Texto
Subtítulo
Submit box
Datos de Contacto
19
Cabe mencionar cuatros puntos importantes, los cuales dan
cuenta a grandes rasgos de la intención y propuesta de sitio:
MENÚ DE NAVEGACIÓN OCULTO Y COMPLETO
Una vez que se hace click sobre el ícono con la forma de la firma
de Rolando se despliega el menú de manera completa mostran-
do así todas las opciones, esto con la intención de dar cuenta
de todo el material dispuesto en el sitio y así generar un acceso
rápido a este.
Biografíay Cronografía
Exposiciones
En Libros y Prensa
Encabezado
Contenido Orgánico
Footer
Sección exposiciones
Serie Fotográficas
Footer con elementosde navegación
Contenido orgánico:Libros y Prensa
CANTILIDAD LIMITADA DE ELEMENTOS DE NAVEGACIÓN
Se disponen sólo dos opciones de navegación: ver en pantalla
completa y ver en galería. Esto con la intención de no distraer al
usuario y generar un reposo en el material fotográfico.
GALERÍAS FOTOGRÁFICAS CONSTRUÍDAS SEGÚN SU TIPOLOGÍA
Las galerías fotográficas se construyen en base a su catalogación
principal. Esto se propone desde la necesidad de relacionar con-
tenido y de dar punto del total de material dispuesto.
M a p a d e C l a s e S i t i o R o l a n d o R o j a s
Encabezado
Sección Exposiciones
Footer
Sidebar (fixed)
Encabezado
Footer
Subtítulo
Contenido Orgánico:
Libros y Prensa
Fotografía
Título
Encabezado
Contenido Orgánico
Footer
Sidebar:
contenido de “Rolando”
Imagen
Título
Lugar
Fecha
íconos
Texto
Subtítulo
Imágenes
Link a contenido
relacionado
íconos
Link a
Galeríaas Fotográficas
Imagen
Título
Editorial o Diario
Fecha
Elementos de navegación:
cambio de fotografía
Footer con elementos
de navegación
Títulos de Serie
Fotografía Inicial
Pantalla Completa
Botón: Ir a Galería
Numeración
Código
Texto:Derechos de autor
E S T I LO V I S UA L2
22
Considerando que todo el material seleccionado para ser pre-
sentado en el sitio de Rolando Rojas corresponde a fotografía en
blanco y negro, y que se propone que el color del fondo del sitio
es cambiante (entre estos mismo dos valores) se decide utilizar
una escala de grises para definir los colores del sitio.
El uso de los colores blanco y negro varía según el fondo del
sitio: cuando este es de color negro los títulos se dis- ponen en
color blanco (#FFFFFF), mientras que cuando el fondo es blanco,
se utiliza el color negro para textos y títulos. El cambio drástico
de estos valores se piensa y propone para generar una mejor
# 000000
R: 0 G: 0 B: 0
C:0 M:0 Y:0 K:100
Títulos y textos en fondo negro. Link
activado en fondo blanco
# 999999
R:153 G:153 B:153
C:43 M:35 Y:35 K:1
Información de segunda
categoría en fondo negro.
# FFFFFF
R: 255 G: 255 B: 255
C:0 M:0 Y:0 K:0
Títulos y textos en fondo blanco. Link
activado en fondo negro
# 555555
R:85 G:85 B:85
C:64 M:56 Y:5 K:31
Hover en link en fondo negro y
blanco.
P A L E T A
D E C O L O R E S
legibilidad del contenido, como se señaló anteriormente en fon-
do negro sólo existen títulos, por lo tanto la lectura no es de
gran extensión. Por
otro lado el uso del negro o blanco, según el fondo, también se
utiliza para indicar si algún botón se encuentra en estado de ac-
tivado.
Se propone la utilización de un color gris claro (#999999) para
todos el material “cliqueable”: los links en estado de desactiva-
do, sin importar el fondo. A su vez un gris oscuro (#555555)
para el hover en cada uno de los links, sin importar extensión
Pa l e t a d e c o l o r e s u s a d a e n s i t i o
R o l a n d o R o j a s : Ve s t i g i o s Fo t o g rá f i c o s
23
ni tamaño. En cuanto si este valor varía según el fondo, se man-
tiene la decisión anterior. Este mismo gris se utiliza para toda
aquella información de segunda categoría dispuesta en fondo
negro (fotografías específicamente).
Fondo Black Paper
Uso en páginas de fotografías y galerías
Fondo White Wall 3
Uso en páginas de registro e informativas
Como ya se señaló con anterioridad la paleta de colores que
se utiliza en el sitio corresponde a una escala de grises, esta
decisión se propone a partir del tipo de material con el que se
trabaja y para evocar la sensibilidad lumínica que este material
presenta.
Se utiliza un de fondo negro texturado en la sección de fo-
tografías, esto para resaltar su luminosidad y la construcción
de esta. Mientras que en las páginas de contenido de registro
se utiliza un fondo blanco para una mejor legibilidad.
Tex t u ra s d e f o n d o a u s a r e n e l s i t i o
a m b a s s o n p o s i b l e s d e e n c o n t ra r e n s u b t l e p a t t e r n s . c o m
24
Se propone utilizar la familia tipográfica “Lato”. Esta tipografía
es posible de encontrar en Google Fonts, y se utiliza en sus varia-
bles light, regular y bold.
Se definen 6 estilos de título (h), los cuales varían en tamaño y
estilo según su jerarquía en el sitio. Algunos títulos poseen uso
exclusivo como es el caso del Título uno (h1) el cual se utiliza
solamente en los encabezados de las páginas.
El uso de cada estilo de título se explica con mayor detención en
la sección “Páginas Tipos” del capitulo 3: Estructura del Sitio.
T í t u l o u n o35 px, regular, 200 pts de tracking
T í t u l o d o s28 px, bold, 150 pts de tracking.
T í t u l o t r e s21 px, regular, 150 pts de tracking.
T í t u l o c u a t r o18 px, regular, 150 pts de tracking.
Título cinco14 px, bold, 70 pts de tracking.
Título seis
12 px, regular, 70 pts de tracking.
U S O
T I P O G R Á F I C O
25
T í t u l o u n o30 px, regular, 200 pts de tracking
T í t u l o u n o24 px, regular, 200 pts de tracking
En caso de que la tipografía “Lato” no se encuentre disponible,
se utilizará la familia “Roboto” en las mismas variables descritas
anteriormente.
T í t u l o d o s26 px, bold, 150 pts de tracking.
T í t u l o t r e s21 px, regular, 150 pts de tracking.
T í t u l o c u a t r o18 px, regular, 150 pts de tracking.
Título cinco14 px, bold, 70 pts de tracking.
Título seis
12 px, regular, 70 pts de tracking.
T í t u l o d o s21 px, bold, 150 pts de tracking.
T í t u l o t r e s18 px, regular, 150 pts de tracking.
T í t u l o c u a t r o15 px, regular, 150 pts de tracking.
Título cinco14 px, bold, 70 pts de tracking.
Título seis
12 px, regular, 70 pts de tracking.
Se decide el uso de esta tipografía principalmente por dos razones:
no posee serif (mejor uso en web) y por su gran versatilidad en cuanto
a su forma, ya que en grandes tamaños esta se muestra más cuadrada,
contrario a lo ocurrido en tamaños más reducidos, en donde se obser-
va mayor redondez en sus terminaciones
E s t i l o s d e t í t u l o
(d e d e r e c h a a i z q u i e ra ) d e s k t o p , t a b l e t y s m a r t p h o n e
26
Desktop 1280 px
80
0 p
x
Tablet 1024 px
76
8 p
x
Smartphone 480 px
32
0 p
x
T A M A Ñ O
D E L A S F O T O G R A F Í A S
Ta m a ñ o d e f o t o g ra f í a 1 : Pa n t a l l a c o m p l e t a
y s u s a m b i o s d e t a m a ñ o e n l o s d i f e r e n t e s s o p o r t e w e b
27
Dentro del sitio se utilizan 5 tamaños de fotografías -sin conside-
rar el material propio del fotógrafo, el uso y tamaño de aquellas
se explicarán más adelante-.
El mayor tamaño de fotografía corresponde a pantalla completa,
su uso se limita exclusivamente en la home del sitio, sólo 5 fo-
tografías dentro del sitio poseen este tamaño.
Un segundo tamaño de fotografía corresponde a la dispuesta en
los encabezados de las páginas de material de registro, esta po-
see ancho máximo de la pantalla, su alto en desktop y tablet ver-
tical se mantiene -este valor varía en versión tablet horizontal y
smartphone en ambas inclinaciones.
1280 px
49
3 p
x
768 px
49
3 p
x
320 px
23
2 p
x
Ta m a ñ o d e f o t o g ra f í a 2 : A n c h o d e Pa n t a l l a ( a r r i b a )
y s u s c a m b i o s d e t a m a ñ o e n l o s d i f e r e n t e s s o p o r t e w e b
28
720 px3
97
px
278 px
15
3 p
x
29
El tercer tamaño de fotografías corresponde a una cuyo ancho
es igual al ancho de columna, su valor es el mismo en desktop y
tablet, sólo disminuye en dispositivo smartphone.
Un cuarto tamaño de imagen corresponde a la utilizadas espe-
cíficamente en la página de exposiciones y en la sección de “Li-
bros y Prensa”, este tamaño tanto en desktop como tablet es el
mismo, mientras que en smartphone disminuye.
El quinto y último tamaño de fotografía corresponde a la uti-
lizada en la galería fotográfica, cuyo valor aumenta en el paso
de desktop a tablet (ya que el ancho de columna es mayor). En
cuanto a smartphone este disminuye.
379 px
23
4 p
x
300 px
16
8 p
x
162 px
16
2 p
x
229 px
22
9 p
x
148 px
14
8 p
xTa m a ñ o d e f o t o g ra f í a 3 : A n c h o d e C o l u m n a ( i z q u e r d a )
Ta m a ñ o d e f o t o g ra f í a 4 : E x p o s i c i o n e s (c e n t r o)
Ta m a ñ o d e f o t o g ra f í a 5 : G a l e r í a d e I m á g e n e s (d e r e c h a )
y s u s c a m b i o s d e t a m a ñ o e n l o s d i f e r e n t e s s o p o r t e w e b
30
Dentro del sitio de Rolando Rojas se utilizan solamente 6 íco-
nos, cuyo juego limita su usos en pares:
- Navegación de fotografías: ver en galería y ver en pantalla
completa.
- Exposiciones: Fecha y Lugar de Exposiciones
- Menú de Navegación: estado activado o desactivado.
Menú de Navegación desactivado
Menú de Navegación activado
ver en galería ven en pantalla completa
Fecha de Exposición
Lugar de Exposición
Í C O N O S
El poco uso de íconos se decide a partir de la propuesta de sitio
web cuyo estilo gráfico es más bien tipográfico. El uso de estos
se limita a explicitar y/o diferenciar tipos de contenido o datos.
J u e g o d e í c o n o s a u t i l i z a r e n S i t i o d e R o l a n d o R o j a s
E S T RU C T U R A
D E L S I T I O3
34
Considerando la importancia del responsive design el sitio
estructuralmente se construye en base a una grilla que vería
según el dispositivo en el cual este se proyecta; En Desktop
(1280 x 800) la grilla se compone por 9 columnas de 85 px cada
una con 10 px de separación, en tablet (1024 x 780) las colum-
nas de la grilla miden 125 px cada una con 5 px de separación,
mientras que en smartphone (480 x 320 px) la grilla se conforma
solamente por dos columnas de 145 px con 5 px de separación.
Una de las principales características de la grilla diseñada es
que permite que el contenido dispuesto en desktop se acomode
en tablet sin sufrir grandes cambios en cuanto al tamaño de sus
elementos, principalmente imágenes.
Grilla Desktop / 85 px por columna
Grilla Tablet / 127 px por columna
Grilla Smartphone / 145 px por columna
D I S E Ñ O
D E G R I L L A
C o m p a ra c i ó n d e g r i l l a e n d i f e r e s t e s s o p o r t e s w e b
35
C o m p a ra c i ó n u s o d e g r i l l a e n d i f e r e s t e s s o p o r t e s w e b
Desktop Tablet Smartphone
36
C o n ta C to C o l o f ó n
Desketop 1280 px
10
0 p
x
Tablet 768 px
E S T R U C T U R A
D E L H E A D E R
E s p e c i f i c a c i ó n h e a d e r ( a r r i b a )
C o m p a ra c i ó n d e t a m a ñ o s d e l H e a d e r e n d i f e r e n t e s s o p o r t e s w e b
10
0 p
x5
0 p
x
Smartphone 320 px
37
En la búsqueda de generar protagonismo en el material que pre-
senta el sitio web el header que forma parte de este está siem-
pre presente con una opacidad al 10%, valor que aumenta a 70%
una vez que se hacer hover sobre el.
Al hacer click sobre “R” se despliega el menú de navegación, y
el resto del sitio web se oscurece y gana una capa de color ne-
gra con un 65% de opacidad, realzando así el aparecer del menú
de navegación. Este menú, una vez desplegado, presenta todo el
contenido dispuesto en el sitio web.
El hecho de oscurecer el sitio web una vez que el menú de navegación
se despliega permite que este gane protagonismo, y que el usuario
se concentre en el contenido que este presenta más que en el resto
del sitio.
Como se dijo anteriormente, la arquitectura de la información del
sitio no posee gran extensión por lo cual se propone presentarla
de manera completa al desplegar el menú de navegación, principal-
mente para permitir al usuario tener una visión gene-ral del sitio y no
demorarlo en encontrar el contenido buscado.
H e d e r e n d e s k t o p d e s p l e g a d o ( a r r i b a )
C o m p a ra c i ó n d e h e a d e r n o d e s p l e g a d o y d e s p l e g a d o e n h o m e ( a b a j o)
38
39
Al igual que en desktop, el despliegue del menú de navegación
en tablet se mantiene, este gana protagonismo mediante la
opacidad del resto del sitio. Por razones de tamaño y grilla este
se compacta sin perder el diseño propuesto para desktop. Los
valores de opacidad se mantienen.
En cuanto al despliegue en smartphone el menú de navega-
ción se ve alterado por motivos de espacio y tamaño del dedo
promedio. Se propone que el menú de navegación se dispon-
ga de manera vertical, incluyendo las opciones de “Contacto”
y “Colofón”, los cuales en desktop y tablet se presentan como
un menú de navegación secundario. Se presentan las grandes
categorías, las cuales una vez hecho click despliegan las sub-
categorías que albergan.
D e s p l i e g u e d e l h e a d e r e n h o m e
e n t a b l e t ( i z q u i e r d a ) y e n s m a r t p h o n e (d e r e c h a )
40
E S T R U C T U R A
D E L F O O T E R
Fo o t e r p á g i n a d e f o t o g ra f í a (c o l o r n e g r o)
y f o o t e r p á g i n a s d e r e g i s t r o ( g r i s t ex t u ra d o)
Desktop
Tablet
41
Dentro del sitio se dispone un footer no convencional, este varía
según la página en que el usuario se encuentra y se presentan a
través de dos diseños:
FOOTER EN PÁGINA DE FOTOGRAFÍA
Posee dos de las opciones de navegación de fotografías: “Ver en
Pantalla Completa” y “Ver en Galería”, ambos links centrados en
la página y, considerando que son links, en color #99999. A la
derecha se dispone información de las fotografías: su número
dentro de la serie y el código correspondiente.
FOOTER EN PÁGINA DE REGISTRO
Posee links para navegar otras partes del sitio: “Contenido Re-
lacionado” y “Algunas Galerías Fotográficas”, todo listados. En el
primer caso posibilita al usuario a navegar por contenido de la
misma categoría de la página en la que actualmente se encuen-
tra, al tratarse de 4 categorías pertenecientes a “Rolando” se
disponen las otras 3 que no son la página actual.
En cuanto al listado de galerías fotográficas estas se presenta
una de cada catalogación mayor.
Fo o t e r p á g i n a d e f o t o g ra f í a (d e r e c h a )
y f o o t e r p á g i n a s d e r e g i s t r o ( i z q u i e r d a )
Smartphone
42
D I S E Ñ O
D E H O M E
Tra n s i c i ó n d e f o t o g ra f í a s e n h o m e
S i t i o R o l a n d o R o j a s
Momento 1: Autorretrato Momento 2: Novias
Momento 3: De Estudio Momento 4: Pablo Neruda
Momento 5: Personajes Destacados
43
La “Home” del sitio se construye en base a 4 elementos
elementos: Header, cuya navegación y despliegue se explicó an-
teriormente, una firma a modo de logo ubicado en la parte cen-
tral de la pantalla, el cual se acompaña por una bajada: Vestigios
Fotográficos; 5 imágenes de fondo, la cuales se presentan una a
una en una transición que dura 5 segundos por imagen; y en la
parte baja, 5 botones de navegación que dan cuenta de la tran-
sición de imágenes que se presentan (ubicación).
La selección de 5 imágenes que se deciden presentar en la home del
sitio corresponden a las categorías que albergan el contenido con
más peso dentro del sitio de Rolando: un autorretrato, retrato de
novias, de estudio, una fotografía de Pablo Neruda y otra de Lorem
Ipsum, amigo y personaje destacado.
H o m e S i t i o d e R o l a n d o R o j a s
Desktop Tablet Smartphone
44
D I S E Ñ O
D E P Á G I N A S T I P O
BODY
Título en H1
Ícono de Flechas de Navegación a
ambos lados
Tamaño máximo de fotografías
dentro de 632x632 px
En caso de fotografía horizontal se
permite un ancho máximo de 906px
con un alto máximo dee 564px.
FOOTER
HEADER
Existen 5 páginas tipo, las cuales se presentarán una a una con
información relacionada al tamaño de los elementos y el uso
tipográfico.
PÁGINA TIPO DE FOTOGRAFÍA
En esta página es donde se presentan las fotografías en su sen-
tido particular (una a una), en ella se dispone el título de su cat-
alogación (Novias, De Estudio, Horcón, etc.), la fotografía alcen-
tro de la página y a sus costados elementos de navegación que
permiten la transición hacia una siguiente o anterior fotografía.
45
En la parte superior se mantiene el header como en la inferior
el footer, en donde, como se señaló anteriormente, se presen-
tan los elementos de navegación de las fotografías: Ver Pantalla
Completa y Ver en Galería.
Al tratarse, en su mayoría, de fotografías verticales, estas se di-
sponen a tope entre el header y el footer con un alto máximo de
632 px (igual que su ancho). En caso de una fotografía horizontal
este alto disminuye a 564px pero su ancho máximo aumenta a
906 px. Todas las fotografías se disponen centradas.
El uso de un fondo negro texturado se limita a las páginas de fo-
tografías, esto para destacar la construcción de la la luminosidad del
material fotográfico.
En la búsqueda de generar protagonismo en la fotografía se propone
de no disponer de un gran número de elementos que compitan con
estas, para que así el usuario no se distraiga.
Pá g i n a t i p o S e c c i ó n f o t o g ra f í a s (d e r e c h a )
U s o d e g r i l l a e n p á g i n a d e f o f o g ra f í a ( i z q u i e r d a )
46
47
Al visualizar la página de fotografías en tablet y smartphone
esta no sufre mayores cambios. Los contenido se reordenan y
se ajustan a su nuevo tamaño de pantalla. En tablet se mantiene
el orden y posición de los elementos presentado en desktop, a
excepción de los datos de número de fotografía en su serie y
código, los cuales pasan a la parte inferior de los elementos de
navegación.
Por su parte en smartphone, como ya se presentó anterior-
mente, el header pierde elementos y los reúne todos dentro de
un botón que despliega el menú de navegación, mientras que
el footer sólo mantiene los links de navegación, perdiendo así
código de fotografía y su número dentro de la serie.
U s o d e g r i l l a e n a á g i n a d e f o t o g ra f í a
t a b l e t (d e r e c h a ) y s m a r t p h o n e ( i z q u i e r d a )
48
BODY
HEADER
Subtítulos en H3
Fotografía tamaño 5: Galería
Código de catalogación de cada fotografía
en 12 px (esto únicamente en desktop)
49
PÁGINA TIPO DE GALERÍA
Este tipo de página presenta en su totalidad la cantidad de fo-
tografías correspondientes a una categoría mayor (este punto
ya se explicó anteriormente). Dentro de ella se presentan las
fotografías ordenadas por su categoría específica (subtítulo) a
tamaño de fotografía 5 (tamaño galería) todas dispuestas en
6 columnas. Debajo de cada fotografía se dispone el código de
cada una en color #555555, ya que es información de segunda
categoría.
El diseño de 6 fotografías por fila se propone a partir del propio
diseño y organización de las tiras de prueba utilizadas en el revelado
de fotografías análogas, en ella el espacio entre filas es casi tres ma-
yor al espacio entre columnas.
Pá g i n a T i p o d e “G a l e r í a d e I m á g e n e s (d e r e c h a )
S e c c i ó n S u p e r i o r Pá g i n a d e “G a l e r í a d e i m á g e n e s ” c o n y s i n g r i l l a ( i z q u i e r d a )
50
U s o d e g r i l a l e n p á g i n a d e “G a l e r í a d e I m á g e n e s ” e n t a b l e t .
51
Los principales cambios que sufre la página de galería al ser
visualizada en pantallas de distintos dispositivos es la orga-
nización y tamaño de las fotografías. En tablet las fotografías
se reordenan en tres columnas, en donde cada fotografía mide
229x229 px. Mientras que en smartphone se organizan en dos
columnas con un tamaño de 148x148 px.
Si se observa el cambio de tamaño de las fotografías en galería des-
de desktop a tablet es posible notar un aumento del tamaño, esto
se propone principalmente por dos razones: respetar el ancho de las
columnas de la grilla y para privilegiar un tamaño que permita una
correcta visualización de las fotografías.
U s o d e g r i l a l e n p á g i n a d e “G a l e r í a d e I m á g e n e s ” e n s m a r t p h o n e
52
BODY
FOOTER
HEADER
Título en H1
Fotografía tamaño 2: Portada
Caja de 721x248 px
Título de próximo evento en H2
Subtítulo de sección en H3
Fotografía tamaño 4: Exposiciones
Texto p en 16 pts (utilizado en
Biografía y Cronografía).
Sidebar 12 px en altas.
Caja de 348x271 px
Título de próximo evento en H2
Título de Eventos pasados en H5
Fotografía tamaño 5: eventos pasados
53
PÁGINA TIPO DE CONTENIDO DE REGISTRO
Las páginas de contenido de registro (todas aquellas albergadas
dentro de la sección “Rolando”) poseen una estructura distinta a
la página de fotografía, al tratarse de un contenido ligado más a
la lectura se dispone en un fondo blanco texturado en donde el
texto se presenta en color negro.
Para mejor la navegación entre contenido similar se dispone un
sidebar al lado izquierdo cuyo efectos de navegación se explican
más adelante. De las 12 columnas disponibles; 2 se dejan libre
(costados), en 2 se dispone el sidebar mientras que las 8 restan-
tes se destina al contenido orgánico. En el se dispone principal-
mente contenido de tipo texto, imágenes, notas. A diferencia de
las páginas de fotografías en estas está presente el scroll.
Pá g i n a T i p o d e “ R e g i s t r o (d e r e c h a )
U s o d e g r i l l a e n Pá g i n a “G a l e r í a d e i m á g e n e s ” ( i z q u i e r d a )
54
55
En cuanto a la página de registro en tablet esta mantiene su
estructura de desktop eliminando únicamente el sidebar, los
tamaños de los elementos y uso tipográfico se mantiene. Mien-
tras que en smartphone el contenido se reorganiza según la
jerarquía del contenido. Específicamente en la página de “Ex-
posiciones” se pierde el detalle correspondiente a Lugar y Fecha
de los eventos pasados.
U s o d e g r i l l a e n p á g i n a d e “ R e g i s t r o”
t a b l e t (d e r e c h a ) y s m a r t p h o n e ( i z q u i e r d a )
56
BODY
FOOTER
HEADER
Título en H1
Subtítulo de sección en H3
Fotografía tamaño 4: Exposiciones
Texto p en 16 pts
Bajada de título en 16 pts italic
Nota de fotografía y/o video en 12 px
Fotografía y/o videos en tamaño 4: ancho de
columna
Título de Exposición en H1
Lugar y Fecha en H5
Fotografía de tamaño 4: Ancho de Columna
Título de Links en H6
Listado de lunks en 12px light
57
PÁGINA TIPO DE CONTENIDO INTERIOR
Se diseña una página tipo para todo el contenido interior que sea
redirigido desde las páginas de registro, específicamente desde
“Exposiciones”. Estas mantienen en su parte superior el Título
H1 de la página que alberga este nuevo contenido, en este caso
Exposiciones (ver ejemplo superior). Este tipo de página tam-
bién posee un sidebar fixed en la parte derecha de la pantalla,
el cual linkea a contenido similar (mismo orden jerárquico). El
contenido orgánico (texto) además de poseer subtítulo también
posee una bajada de título, el cual se dispone en 16px italic.
En cuanto a su estructura el contenido también se dispone en 8
columnas, todas ubicadas en la parte izquierda del sitio, mien-
tras que el sidebar a la derecha.
Pá g i n a T i p o d e C o t e n i d o I n t e r i o r (d e r e c h a )
U s o d e g r i l l a e n Pa g i n a d e C o n t e n i d o i n t e r i o r ( i z q u i e r d a )
58
59
La página tipo de contenido interior al visualizarlo en tablet
mantiene la estructura y tamaño utilizados en desktop, elimi-
nando únicamente el sidebar derecho. En cuanto a su versión
smartphone el texto se adecua a las columnas dispuestas (2) y
continúa su curso natural.
U s o d e g r i l l a e n p á g i n a d e C o n t e n i d o I n t e r i o r
t a b l e t (d e r e c h a ) y s m a r t p h o n e ( i z q u i e r d a )
60
BODY
HEADER
Título en H1
Contenido orgánico 16 px
light con 167 px de interlinado
y 75px de tracking
Subtítulo en 10px altas y bold
En “Contacto” cada caja del
submit box mide 721x74,
menos la de Mensaje cuyas
medidas son 721x588px
Medidas del botón “Enviar”:
721x73px
Subtítulo en 10px altas y bold
Contenido orgánico 12 px
61
PÁGINA TIPO DE CONTENIDO INFORMATIVO
“Contacto” y “Colofón” corresponden a un tipo de contenido más
bien informativo, distinto a las páginas de contenido (registro) o
a las de fotografías, para esto se diseña una página la cual man-
tiene su título h1 en la parte superior bajo el header en donde
su contenido orgánico también se dispone en 8 columnas, esta
vez centrado.
Al tratarse de contenido informativo (lectura) este se dispone
en fondo blanco texturado con letras en color negro.
Pá g i n a T i p o d e C o t e n i d o I n f o r m a t i vo (d e r e c h a )
U s o d e g r i l l a e n Pa g i n a d e C o n t e n i d o i n n f o r m a t i vo ( i z q u i e r d a )
62
63
Las páginas de contenido informativo en tablet y smartphone
se acomodan al espacio centrando todo su contenido. Mientras
que en tablet de 8 columnas pasa a 4 (dejando 2 liberadas), en
smartphone pasa a estructurarse en 2 columnas.
U s o d e g r i l l a e n p á g i n a d e “C o n t e n i d o I n f o r m a t i vo” t a b l e t (d e r e c h a )
y s m a r t p h o n e ( i z q u i e r d a )
65
E L E M E N TO S
D E N AV E G AC I Ó N4
66
L I N K S
D E N A V E G A C I Ó N
Momento 1: Menú de Navegación desplegado
Momento 2: Hover en unas de las opciones de navegación
Momento 3: Menú de navegación desplegado con una opción seleccionada
67
Se definen 3 estados de links que permiten navegar por el sitio:
estado inactivo, hover y estado activo. Estos valores se definen
y se construyen a partir de la paleta gráfica que anteriormente
se presentó.
El contenido en el header del sitio las opciones de navegación
se presentan con un color gris #999999, al hacer hover sobre
uno de ellos este adquiere un color blanco #FFFFFF, una vez que
este botón está activo, mantiene su color blanco y adquiere un
“slash” lado a su lado izquierdo.
El uso de una paleta limitada, la cual se construye y se usa aludieno
a la sensibilidad del usuario se propone a partir del mismo trabajo
fotográfico de Rolando y el cuidado de la luz que presentaba.
Cabe mencionar que el menú de navegación al ser negro es el único
elemento del sitio que ocupa sólo dos colores para los estados de
navegación de los links con los cuales se construye.
I n t e ra c c i ó n d e l o s l i n k s e n e l h e a d e r ( i z q u i e r d a )
I n t e ra c c i ó n d e L i n k s e n e l f o o t e r (d e r e c h a )
Momento 1: Sidebar con un link
seleccionado en color #FFFFFF.
Momento 2: Hover en una de las opciones,
Esta pasa de color #999999 a #555555
Momento 3: Nueva opción
seleccionada, adquiere color #FFFFFF
68
Momento 1: Menú sin interacción Momento 2: Hover en una de las opciones, El botón pasa
de color #999999 a #555555
69
En su mayoría el uso de links se limita en las páginas de registro
del sitio de Rolando Rojas por lo cual cada uno de los estados
anteriormente descrito posee un color asignado:
Estado desactivo: #999999
Hover: #555555
Estado Activo: #000000, o bien color negro.
El contenido dispuesto en los bloques de eventos en la pagina de
exposiciones se presenta escrito en color negro, a pesar de ser un
elemeto “cliqueable”, esto ya que es promordial la legibilidad del con-
tenido que presenta. A pesar de esto al hacer hover sobre uno de los
bloques éste aumenta la opacidad del blanco de fondo a un 70% y las
letras adquieren el color gris #555555, ya se le está haciendo hover.
I n t e ra c c i ó n d e l i n k s e n s i d e b a r ( i z q u i e r d a )
I n t e ra c c i ó n d e l i n k s e n p á g i n a d e E x p o s i c i ó n (d
Momento 1: Exposición sin interacción. Texto e ícnos en color
#FFFFFF inscrto en una caja color #000000 al 35% de opacidad
Momento 2: Hover en una xposición Texto e ícnos adquieren el
color #999999, la caja aumenta su opacidad a un 70%.
70
T R A N S I C I Ó N
D E F O T O G R A F Í A S
Como se explicó con anterioridad, una vez que se selecciona una
categoría de fotografía en el menú de navegación, estas se pre-
sentan en una primera instancia en su sentido particular (una a
una), esto a través de una transición que dura 3 segundos y que
el mismo usuario controla.
El usuario al seleccionar una categoría en el menú de naveg-
ación es dirigido a una página con fondo negro, en la cual dentro
de un lapso de 3 segundos aparece la primera fotografía. Este
aparecer se genera paulatinamente a través del aumento de la
opacidad de la fotografía -desde 0% al 100%, y se mantiene en
Momento 1: Selección de una categoría Momento 2: Se ingresa, fondo negro
Momento 5: Al selecionar siguiente, la
fotografía desparecer perdiendo opacidad
Momento 6: La fotografía desparece por
completo
71
El avance paulatino por las fotografías se propone entiendo que un
sitio de fotógrafo es un espacio de reposo y observación del usuario.
A través de una luz que aparece con demora se busca presentar la
fotografía al usuario a través de la luminosidad que esta posea, ya
que al ir aumentando la opacidad las sombras que componen cada una
de las fotografías irán definiendo los espacios luminosos, razón por
la cual también se propone un fondo negro en esta sección del sitio.
ese estado hasta que el usuario decida pasar a la siguiente fo-
tografía. Una vez hecho esto la fotografía va perdiendo opaci-
dad hasta llegar a 0% nuevamente, en donde luego comienza a
aparecer la siguiente fotografía de la misma manera que la ante-
rior, aumentando su opacidad de 0% hasta el 100%. Este efecto
de transición también dura 3 segundos, y se mantiene en todas
las categorías de fotografías.
M o m e n t o s d e t ra n s i c i ó n d e f o t o g ra f í a s
Momento 3: Comienza a aparecer la fotografía Momento 4: Aparece la fotografía completa
Momento 7: La siguiente fotografía comien-
za a aparecer
Momento 8: Aparece la siguiente fotografía
por completo
72
S C R O L L
E N P Á G I N A D E R E G I S T R O
Durante la presentación del sitio a través de las partituras de in-
teracción se explicó a grandes rasgos el modo de operar el scroll
en las páginas de registro, situación que ahora se explicará con
mayor detalle.
En un primer momento aparece el encabezado de la pagina (fo-
tografía y título), una parte del sibebar característico de este
tipo de pagina, y una parte del contenido de dicha pagina (en
este caso “Cronografía”). Este contenido se muestra de manera
difuminada en parte inferior.
Momento 1: Ingeso a alguna página de “Registro” Momento 2: Al hacer scroll el contenido que sube se va difuminando,
mientras que el nuevo a medida que se hace scroll aparece mediante el
mismo efecto.
73
Al proponer el efecto de revelado con el que aparece el contenido del
material de registro se busca mantener lo propuesto con el aparecer
de las fotografía que componen el sitio web, desde un mismo punto de
vista: hacer referencia al revelado de una fotografía análoga y gene-
rar cierto reposo en el usuario.
A medida que se va haciendo scroll en este tipo de pagina, el
contenido va avanzando, y tanto en la parte inferior como supe-
rior del sitio, el texto en este caso, se muestra difuminado.
Una vez que se llega a la parte final del sitio (footer), este efecto
sólo se mantiene en la parte superior de la pantalla.
I n t e ra c c i ó n e n s c r o l l e n Pá g i n a d e R e g i s t r o
Momento 3 Al seguir haciendo scroll el modo de aparecer y desapare-
cer del contenido se mantiene. El sidebar queda fixedMomento 4: Al llegar al footer del sitio este aparece por completo,
sólo el contenido superior se ve difuminado
74
N A V E G A C I Ó N
P O R G A L E R Í A S
El acceso a una galería de imágenes dentro del sitio posee un
carácter secundario, ya que para realizar esta acción se debe
estar primeramente visualizando una fotografía en su sentido
particular.
El “Ver en Galería” es un botón que se ubica en la parte inferior
de las fotografías, junto con “Ver en Pantalla Completa”. Una vez
que esta primera opción se cliquea, el footer se desplaza hacia
la parte superior de la pantalla, mostrando así la galería de imá-
genes seleccionada.
El contenido que compone una galería de imágenes se organiza
a través de la catalogación mayor de la fotografía específica que
se puede estar visualizando. Por ejemplo; si un usuario está ob-
servando fotografías de “Novias” y selecciona “Ver en Galería”
podrá observar también contenido de “Experimentales” y “De
estudio”, ya que todas estas fotografías están albergadas en una
misma categoría mayor: “Retratos”.
Cabe mencionar que si un usuario está visualizando una fo-
tografía de “Experimentales” y selecciona la opción para visu-
Momento 1: Se seleciona la opción “Ver en Galería” Momento 2: El footer sube dejando ver la galería
75
El generar un momento de encuentro de todo el material fotográfico
correspondiente a una misma categoría se propone desde la necesi-
dad de poder generar relaciones entre el contenido que se observa
y así potenciar la navegación por el sitio, Por otro lado se busca dar
cuenta de la cantidad de fotografías que alberga el sitio. No existe un
momento en donde se presente el total de las fotografías en conjunto
para no afectar el tiempo de carga de la página.
alizar el contenido en galería, al momento en que el footer se
eleva, la primera fila de fotografías que se muestran correspon-
den a “Experimental”, si se hace scroll hacia arriba se podran
observar fotografías de “Novias”, mientras que si se hace scroll
hacia abajo, el usuario verá contenido correspondiente a “De
Estudio”. El “Ver en Galería” sitúa en la sección de las galería
relacionado al tipología de fotografía que se está observando.
Tra n s i c i ó n y a c c e s o a g a l e r í a Pá g i n a d e Fo t o g ra f r í a
Momento 3: El footer se une a la parte inferior del header
Galería de imágenes vista completa
Esta edición corresponde al Manual de estilos web del sitio “Ro-
lando Rojas: Vestigios Fotográficos”. Fue llevado a cabo por José
Miguel Ortega, alumno de Diseño Gráfico de la Escuela de Ar-
quitectura y Diseño de la Pontificia Universidad Católica de Val-
paraíso. Y Se realizó durante el tercer trimestre del año 2014,
instancia en que el alumno cursó su taller de titulación II.
La edición posee un formato de 23x23 centímetros y en su diseño
se utilizó la familia tipográfica lato en sus variables regular, light
y bold.
Para su impresión se utilizó papel NóricoTradition Blanco de 90
gramos, mientras que para su portada Opalina lisa blanca de 200
gramos.
Se terminó de imprimir el día 12 de diciembre del año 2014 en
impresora láser a color Xerox 7500.
C O L O F Ó N
