Diseño final

El botón de "Blog" enlazaría a un blog personal, mientras que los botones "Stories" y "Visual" abriría en forma de ventana emergente una galería de imágenes y/o vídeos, que aparecerían de uno en uno con la opción de darle a un botón hacia delante, hacia atrás o simplemente cerrar la ventana y volver a la página principal. Lo que veríamos a simple vista sería la fotografía cuadrada, pero nos podríamos deslizar hacia abajo y encontrar el espacio de "Contacto", donde el usuario podría enviar un email directamente a mi cuenta asociada simplemente rellenando los cuadros.

Boceto nº 6 (2o intento)

Utilizando una mezcla de fotografías y texturas, ésta es la segunda propuesta para el boceto nº6, donde el carácter estético es lo que debe prevalecer:

Boceto nº 6

L'objectiu d'aquesta proposta és fer el disseny més "bonic" possible per a la meva web personal però provant una forma de crear visualment diferent. Per fer-ho, he d'utilitzar la tècnica del collage, amb fotografies i il·lustracions. En aquest cas, tot els recursos que he emprat són d'elaboració pròpia. 
He optat per donar-li la major importància a la fotografia central. Els objectes d'esquerra i/o dreta apareixerien mitjançant l'animació; i el menú de sota, juntament amb el meu logo, sempre apareixerien a pantalla per molt que es desplacés el cursor. Al clicar sobre d'ells, l'espai en blanc entre fotografies s'allargaria i apareixeria el text.
La idea és que en el collage hi apareguin fins tres tipus d'objectes, principalment: una foto desaturada excepte en un tros, un CD a la dreta i un dibuix a l'esquerra. Al clicar a l'objecte saturat de la fotografia, al CD o al dibuix la imatge central es canviarà per un altra que tingui relació amb l'objecte clicat. És a dir, si es clica un dibuix sortiran més dibuixos o making off dels dibuixos o l'animació d'aquests; si es clica un CD es veuran frames del video o del making off del video; i si es clica la fotografia, aquesta cobrarà el seu color original i permetrà fer passar fotos de la sèrie.

Currículum Vítae

En esta entrada colgaré mi nuevo CV. He buscado en artículos de blogs como éste diferentes CV creativos. A mi, personalmente, hay muchos que no me convencen porque creo que sobrepasan la idea estética con la funcional, con lo cual opino que no son buenos diseños para un currículum. Lo opino porque muchos me han resultado muy incómodos de leer y no creo que eso sea de agradecer para la empresa que vaya a leer el documento. Con lo cual mi diseño de CV puede parecer muy simple, pero al menos es de fácil lectura. A pesar de esto, veréis que hay una frase en vertical que rompe con esta idea, pero es que tiene una intención estética y además quiero que se resalte. Además es una frase que indica que soy adaptable, lo cual liga con la adaptabilidad en vertical de la frase.
Hay cuatro colores que aparecen en el documento, no quería añadir más para no sobrecargar la imagen e ir en la línea de una cómoda lectura. Dos colores corresponden al nuevo logotipo, un color nuevo destaca la abreviación CV y el último color es el de la mayor parte del texto. Y es que a partir de ahora me gustaría corresponder mis bocetos y marca con la siguiente paleta de colores que encontré en pinterest:

No sé en qué sitio web apareció o quién la realizó, porque he curioseado en sitios como {desing seeds} o kuler y sé que la paleta no corresponde al formato de estas webs. Pero en todo caso, me enamoraron estos colores y la foto, y me dió la vibración y armonía suficiente como para querer apostar por estos colores en adelante. 

En todo caso, adjunto lo importante, el CV que he creado:

P.D.: acabo de encontrar aquí un modelo de CV que me atrae más. Será que me gusta verlo todo bien reticulado...

Boceto nº5

Este boceto está basado en una imitación de una película cinematográfica. La figura de la cinta sirve para organizar las imágenes que se pueden encontrar en cada apartado de la web. La idea es que al colocar el ratón encima de cada apartado valla deslizándose la película con imágenes de los proyectos que se encuentran clasificados en esa sección. Al clicar sobre una imagen, aparecerá debajo un comentario sobre la misma, además de una animación de unas palomitas y una invitación a ver el proyecto en su canal correspondiente (podría ser una página web de opinión, un canal de vimeo, etc.).

Boceto nº4

Partiendo de las 10 leyes de la simplicidad de John Maeda se nos ha propuesto diseñar una web que explique una historia inventada. La que he escrito es la siguiente:

Esto me ocurrió un día que no daba pie con bola. Que si empecé a volcar el café en el culo de la taza, que si le puse la pasta de dientes al lado chato del cepillo... Que si me dió por colocar en el estante los libros dejando el lomo oculto frente a la pared, que si no acertaba a la hora de enchufar en la corriente el enchufe...  La escoba y la pala, parecían pelearse en el aire, mientras yo en el suelo intentaba barrer con un par de palos... El agua de un vaso volcado empezó a extenderse por la mesa mientras yo intentaba absorverla con el canto de un trapo. Y la cesta de la compra parecía un pedestal al meterle la ropa encima y no dentro. Así con todo. Hasta que llegué a un punto en el que me di cuenta que las cosas dejaban de ser esas cosas que yo creía que eran y empezaban a ser otras cosas. Todo porque yo no usaba dichas cosas tal y como un supuesto manual hubiera indicado. 

Ése era el texto, la propuesta de diseño es la siguiente:

Como apunte para entender la propuesta de diseño tengo que añadir que al clicar sobre las pestañas de arriba a la derecha nos desplazaríamos a la respectiva sección. Y en las imágenes de la retícula "cosas" veríamos imágenes de la taza de café, las escobas, la cesta de la ropa, etc. en pleno uso correcto de sus funciones; sin embargo en "otras cosas" veríamos estos objetos siendo utilizados tal y como se describe en el texto. Y al clicar sobre cada imagen veríamos ésta en grande.

Se aprecian leyes como la de REDUCIR en el simple hecho que no vemos en ningún momento el texto. También la de CONFIANZA se intensifica al añadir el lema "a ti también te ha pasado", que por cierto, se repite al final junto al logo, recordando la insistencia de Maeda en el concepto de REPETIR. La EMOCIÓN está presente por ejemplo en el uso de signos exclamativos. El concepto de APRENDER se hace notar cuando vemos el apartado de "moraleja". Luego recordamos la décima ley, la ÚNICA, al ver un apartado dedicado a la "esencia", además de incluir cerca el nombre de la web imaginaria "www.nodarpieconbola.com". La DIFERENCIACIÓN y la ORGANIZACIÓN se aprecia en el cuadro de imágenes que encontramos en el apartado de "qué ocurrió", donde se entiende que al clicar encima de "cosas" vemos una retícula rosa; mientras que en apretar el ratón sobre "otras cosas", la retícula será azul. Estos son los ejemplos más destacados, pero sin embargo todos implican un resultado de conjunto, que supongo que debe ser de lo más difícil conseguir a la hora de elaborar un diseño de cualquier tipo.

Boceto nº3

El color

Los siguientes serán unos cuantos bocetos, no solo uno. La idea es que en la siguiente propuesta el color sea la clave. A partir de una misma estructura, he diseñado dos modelos distintos: uno en blanco y negro y el otro de cualquier otro color (pero que éste sea la clave). Veamos la primera propuesta, en blanco y negro:

Es un modelo de página más largo que los anteriores. La intención es que a simple vista se vea simplemente el logo y el círculo de ABOUT. Ambos son botones que, al clicar, te desplazan más abajo de la página. ABOUT te conduce abajo del todo, donde el texto. Debajo volvemos a ver un botón-logo, que conducirá arriba, y un botón-email, que abrirá una ventana donde enviar un email. El botón logo de arriba conducirá a los tres cuadros, cada uno de los cuales al clicar te abrirá una nueva página tipo la siguiente:

Aquí el botón-logo y el botón-about volverán a cumplir la misma función que antes. Como vemos aquí hay más color a parte del blanco y negro. Es el que corresponde a mis trabajos. Quizás utilizando como colores de fondo el blanco y negro mis piezas resalten más. Pero igualmente me da la impresión de que en la página inicial falta color, queda demasiado seria y no se capta de qué van mis trabajos.

Veamos ahora la propuesta en color con la misma estructura:

Bueno esto es otra cosa, mucho más alegre y además puede servir para conducir la mirada. Aunque tampoco sé decir si es un mejor modelo. ¿Qué ocurrirá ahora cuando le añada color a la página de STORY &...?

Pues es posible que no quede tan mal. Al fin y al cabo aquí la información se divide en dos columnas y el color puede ayudar a marcar los puntos de interés de cada una. De todas formas el peligro de caer en la sobrecarga de color siempre estará ahí en estos casos. Así que tendrá una una que ir con cuidado...

Boceto nº 2

Diseñar por retículas

El siguiente boceto se basa en la distribución de las pestañas e imágenes siguiendo un orden reticular. En este modelo volvería a colocar mi logotipo seguido de mi nombre y profesión en la esquina superior izquierda. Debajo aparecería una imagen que variaría al colocar el puntero del ratón encima. Al clicar al lado, en el cuadro ABOUT ME, la imagen dicha se cambiaría y pasaríamos a apreciar la descripción de mi currículo.

En la parte inferior vemos cuatro imágenes acompañadas debajo de la pestaña a la cual harán referencia. Al pasar el puntero del ratón encima las imágenes cambiarán, excepto en la imagen que acompaña la pestaña CONTACT (que sería el icono de un sobre o algo relacionado con la mensajería), y al clicar cualquiera de las cuatro pestañas se abriría una nueva ventana. 

Boceto nº 1

Éste es el primer boceto de página principal del que será  mi sitio web. A partir de los temas o topics que estudié en la anterior entrada he tenido que dividir en apartados mi sitio, dependiendo de lo que quiero mostrar de mis intereses. Me he encontrado con un problema: tengo varios ámbitos de interés, ya que me interesa la creación de historias, de imágenes y también la opinión crítica. Quizás me equivoque y éstos no sean ámbitos tan difíciles de unificar en una página principal sin destacar uno más que otro. O tal vez debería preguntarme a cuál le quiero dar más importancia. En este primer boceto he optado por la sección de creación narrativa, y he introducido el dibujo que realicé para el personaje de una historia que aún no sé qué formato adoptará (¿corto de animación, serie, libro ilustrado?). Para paliar la ambigüedad de mis intereses he optado por definirme en la cabecera como comunicadora audiovisual, término igualmente ambiguo pero al menos aceptado para darle nombre a la carrera que estudio. También he aprovechado y he colocado mi logotipo personal, que diseñé en la asignatura de diseño. Es una manera de comprobar hasta qué punto combina mi marca personal con la estética del sitio, y observar si me convence tanto el logo como la web.
Las pestañas que he creado son 5, y darán lugar a ventanas emergente que incluyan:
- Story & audiovisual projects: será donde se podrán ver los proyectos que he realizado o estoy realizando. Se llama así porque no quería englobar únicamente proyectos audiovisuales sino que también quería incluir historietas ilustradas o cómic.
- Opinion blog: aquí explicaré los blogs en los que de alguna manera participo e incluiré el enlace de los mismos.
- More visual items: incluiría fotografía, diseño gráfico, etc. Me interesa dar más énfasis a mi capacidad como narrradora visual, pero igualmente considero oportuno demostrar cómo compongo visualmente.
- About me: incluriría mi currículum.
- Contact: adjuntaría el email.

Elegir los temas de interés

Uno de los ejemplos más míticos de diseño, especialmente de la señalética, nos puede ayudar a iniciar el proceso de selección de los topics  o temas a los que les damos importancia en nuestro día a día. Se trata del metro de Londres, que fue diseñado por el ingeniero Henry Charles Beck en 1932. Este paso es importante, ya que es una reflexión sobre nuestros intereses y, por ende, sobre lo que querremos darle importancia en nuestro sitio web.
El siguiente es un "mapa de topics" creado en clase, cada línea corresponde a los intereses de un alumno. Está inspirado en el diseño del mapa de metro de Moscú, aunque las diferencias son notables.

Y ésta es mi línea de temas personal, llamada aquí L0: