Development idea document for the web redesigning of digitaldixit.com

1. Previsualización y desarrollo del rediseño web
digitaldixit.com

2. dixitaldixit.com | Introducción
E
n este documento se podrá encontrar una sencilla exposición de
la propuesta de rediseño para la web citada, que se expondrá en
forma de imágenes comparativas primero, y con una explicación en
texto después.
En la parte superior de cada diapositiva está indicado el nombre
correspondiente con la imagen que se está analizando. Es recomendable
seguir la explicación a través de éstas y no a tracés de la reducción que
se presenta en el documento. Esta última no permite apreciar los detalles
con tanta calidad.
Las explicaciones de las imágenes se limitan a una descripción de los
cambios gráficos concretos que se proponen. Hay otro tipo de anotaciones
y explicaciones, como las opciones que se han descartado o las reflexiones
sobre la existencia de una fase dos para la web, que no están incluídas.
Los cambios propuestos han sido elegidos en base a que requieran el
menor tiempo y trabajo posible, pero que den, dentro de esto, los mejores
resultados. Es decir: se han barajado qué cambios se pueden realizar sin
que ello conlleve un replanteamiento del contenido o de la estructura ya
establecida.
Estos cambios aún no han sido revisados por programación, por lo que
podrían verse afectados si es que estos no pudieran realizarse.

3. Home | propuesta_diseno_01_home.jpg
C
omo premisa básica para el rediseño de la Home y, como veremos
más adelante, del resto de páginas, se ha tomado el espacio libre.
Se han separado las secciones y se han eliminado elementos que
daban peso visual pero que no aportaban nada a la composición. De esta
manera ya conseguimos, en general, un aspecto de la web más limpio y
más ligero.
Comenzamos con el menú superior, que cambia el fondo lila por dos
sutiles líneas grises que lo delimitan y encuadran su contenido. Los títulos
del menú han aumentado de nivel jerárquico con el uso de las mayúsculas,
y se ha destacado, en lugar de mediante el fondo de color, mediante la
separación entre los propios títulos y con respecto al resto de elementos
circundantes (banner, logos, etc). Además se propone eliminar el link de
“Inicio” de este menú y subirlo al superior, diferenciando así lo que son
secciones de funcionalidad básica de cualquier web (quiénes somos,
contacto, blog...) de lo que son propias de éstas, que se centran más en el
contenido.
El banner, slide o simplemente imagen de cabecera debe ser un punto
clave en cuanto a la gráfica dado que es practicamente lo primero que el
usuario ve cuando entra en la web, por lo que el mensaje que incluyamos
en éste, debe ser claro y debe llegar de inmediato. El desglose del diseño
de banner se incluye más adelante.
Se han diferenciado e indicado las diferentes secciones que se presentan
en la web: servicios, blog, anuncio y contenidos. Es importante poner
información pero también que el usuario sepa de qué se le habla.

4. Home | propuesta_diseno_01_home.jpg
Los servicios toman importancia gracias, una vez más, a la aplicación de
separaciones que por sí solas nos encuadren y ordenen visualmente los
elementos, que ahora mantienen un orden de lectura coherente: icono
descriptivo, título, descipción.
El blog se mantiene en el lado izquierdo, pero se propone una estructura
que da más importancia a la imagen de cada post. Tenemos menos texto
de introducción y éste se presenta en líneas más cortas, facilitando la
lectura. El acceso al post se indica igualmente con un botón pero este
tiene un mayor tamaño y está colocado de manera que sea más sencillo
clickar en él.
A la derecha se han colocado dos módulos: un espacio para banner y otro
para un carrousel de testimonios. El banner promocional, al igual que la
imagen de cabecera o portada, se desarrollará en la sección pertinente.
El carrousel de testimonios consiste en un módulo que presente los
testimonios uno por uno, con una longitud determinada del texto y con
un botón que nos permita acceder a los testimonios completos. De esta
manera expondremos al usuario que existe este tipo de contenido pero no
abarrotaremos la home con más texto del necesario. Un sistema similar al
que usamos para los últimos posts del blog.
El footer es la parte más rediseñada. Al ser una página que no permite un
footer extensivo a lo largo de toda la pantalla, sino que está enmarcado,
es más aconsejable eliminar los fondos de color. Utilizamos de nuevo el
recurso de la línea fina gris, que encuadra el contenido de manera sutil y lo
separa del resto, de la misma manera que en el menú superior. Integramos
una estructura de cuatro columnas y utilizamos un elemento corporativo,
integrando así la identidad y evitando que se limite sólo a los colores.
Cada columna tiene un tipo de información: descripción, dirección postal,
modo de contacto y links de información.

5. Redacció de continguts web | propuesta_diseno_02A_redaccio.jpg

6. Estratègia de xarxes socials | propuesta_diseno_02B_estrategia.jpg

7. Creació de pàgines web | propuesta_diseno_02C_creacio.jpg

8. Redacció de continguts web | propuesta_diseno_02A_redaccio.jpg
P
ara el rediseño de todas las secciones de contenido e información de
servicios, se ha seguido un mismo patrón jerárquico. Se presenta la
página que contiene más elementos de las tres, pero los parámetros
son aplicables a todas.
Abrimos la sección con un destacado que introduce al contenido. Son
tres preguntas que tienen un nivel jerárquico superior, además de llevar
destacas las palabras clave.
Se ha determinado un nivel jerárquico homogéneo para todos los títulos
de página, que se ven también en la Home.
La columna de texto se ha reducido para que las líneas tengan una longitud
menor y, además de permitir una lectura más fácil, dejen espacios en
blanco para que respiren los elementos.
En general, se han introducido elementos corporativos como apoyo para
los textos de manera que estos resulten un poco más visuales y también
se corporativice todo un poco más.
En cuanto a la columna de la derecha, recibe un tratamiento similar
a la que veíamos en la Home: banner promocional y sección con otras
informaciones. En este caso se ha visto conveniente dejar la estructura
de acordeón pensando en el contenido futuro que se puede añadir y que
podría quedar demasiado largo si no ocultamos aquel que el usuario no
necesite ver.

9. Qui som? | propuesta_diseno_03_quisom.jpg

10. Qui som? | propuesta_diseno_03_quisom.jpg
L
a propuesta de rediseño para esta página es un poco más estructural
que en las demás. El problema principal que hay es que es un
contenido que está demasiado expandido a lo ancho y no facilita en
absoluto la lectura. No existe la lectura en diagonal y no llega de manera
rápida la idea de lo que nos encontramos en esta sección.
Para solucionar estos problemas, se ha decidido, por un lado pasar los dos
primeros puntos a dos columnas contiguas. Ambos tienen poco contenido
que debemos leer de manera ágil. De esta forma se reduce la longitud de
las líneas y además aprovechamos el orden de lectura, que nos lleva de un
punto a otro de una manera natural, sin vacíos blancos que hagan perder
el hilo, Además, textos y títulos, se han homogeneizado con el resto de
usos que ya hemos visto.
Para la parte de presentación del equipo, nos encontrábamos el mismo
problema: dispersión visual. Como en este caso se trata de un equipo fijo
y de pocas personas, se propone esta estructura un poco más laboriosa
pero que visualmente nos permite hacernos rápidamente la idea de cada
persona. Es un sistema como de “ficha” o “cromo”, con una imagen de un
tamaño un poco más reducido y con la información más compactada. Con
los rectángulos grises conseguimos encuadrar todos los elementos y que
no queden sueltos por la página. Ambas “fichas” con la misma estructura
nos permiten encontrar fácilmente la información homóloga en ambas
personas.

11. Clients | propuesta_diseno_04_clients.jpg

12. Clients | propuesta_diseno_04_clients.jpg
L
a página de clientes y testimonios es una página que, en cualquier
caso, el usuario tendrá que hacer scroll en ella. Es una página que irá
creciendo y que cada vez el scroll, inevitablemente, será mayor. Por
eso la propuesta de rediseño para ella es que, nada más abrir la sección,
se vea desde el principio que existen dos partes. En una estructura de
tres columnas, los clientes ocupan dos, pudiendo presentar sus logos
e información de una manera cómoda y sin que se amontonen; los
testimonios ocupan la columna de la derecha, en una estructura similar a
la que ya hemos visto en la Home o en las preguntas frecuentes del Blog.
Las imágenes de los clientes deberán ser tratadas antes se subirlas, es
decir: se determinará un tamaño y dentro de este entrará cada logo. Para
que quede una rejilla uniforme de imágenes, deberemos compensar las
partes que no cubre el logo con espacio en blanco. Tan sencillo como
abrir en Photoshop un archivo con la medida determinada, con el fondo
transparente preferiblemente y colocar el logo de la manera más amplia
y centrada. De esta manera, todas las imágenes quedarán centradas y
proporcionadas.

13. Contacte | propuesta_diseno_05_contacte.jpg

14. Contacte | propuesta_diseno_05_contacte.jpg
P
ara el contacto no ha sido necesario mucho cambio. Tan sólo un
poco más de espacio entre las columnas y la unificación de títulos
y textos con respecto a otras partes de la web. Lo mismo con el
botón de envío.

15. Bloc | propuesta_diseno_06A_contacte.jpg

16. Bloc | propuesta_diseno_06A_bloc.jpg
T
ambién esta página requiere de un cambio un poco mayor.
La visualización de los post en el diseño actual es demasiado
apelmazada, no se distingue bien y el texto tiene demasiado
protagonismo sin que la lectura sea demasiado ágil. En la propuesta de
rediseño se ha dado más protagonismo a la imagen destacada, que ocupa
toda la columna y se han añadido estilos que ya hemos visto en el resto de
la web, líneas de separación, jerarquización de los textos, rediseño en el
botón de “Leer más” y, sobretodo, los espacios en blanco entre elementos.
Esta es una estructura más común en este tipo de páginas y ayudan a una
lectura más en diagonal y a encontrar los elementos rápidamente. Con
una mirada rápida podemos hacernos una ida de qué va el post y cómo
podemos acceder a él.
El sidebar de la derecha, en cambio, ha bajado su importancia. El fondo
de color resultaba demasiado estridente y daba un exceso de presencia
a una parte que, en realidad, es de apoyo. Se han aplicado los estilos
correspondientes y se ha vuelto a recurrir a los elementos corporativos
para ordenar y hacer más visual esta parte.

17. Post | propuesta_diseno_06B_post.jpg

18. Post | propuesta_diseno_06B_post.jpg
U
na vez dentro del post, la estructura es similar a la que veíamos en
el apartado anterior. La imagen destacada sigue siendo lo principal
y acompañamos al post de otras imágenes (en este caso son la
misma, pero no quiere decir que en un post real deban serlo: la superior es
la imagen destacada, y la otra es una imagen puesta durante la redacción).
Se ha acortado el ancho de columna para que la longitud de las líneas sea
menor y facilitar así, una vez más, la lectura.

19. Banners | propuesta_diseno_banners.jpg

20. Banners | propuesta_diseno_banners.jpg
S
e propone para los banners y espacios de promoción en general,
crear un contraste visual con el resto de la web. Utilizar fotografías
que estén hechas de manera que formen un mosaico o una especie
de pattern, sobre la que pondremos el mensaje que queramos. De esta
manera, evitamos que la web sea monótona y plana y conseguimos hacer
llamadas de atención muy potentes hacia los mensajes importantes.
También se propone una opción tipográfica para otros casos en los que
convenga más destacar el texto o, por la razón que sea, no queramos
poner una fotografía.
Las fotografías que se muestran de ejemplo, no son las seleccionadas
para colocar en la web. Tan sólo sirven de referencia. Deberemos buscar
unas imágenes que permitan la correcta lectura del texto con los colores
corporativos y, todavía mejor si la temática a la que nos remiten tiene que
ver con lo que vendemos.
Es importante el concepto de pattern o mosaico, porque de esta manera
la fotografía nos servirá de fondo pero no hará que el usuario se fije en
cosas determinadas de la misma.

21. Tipografía | Montserrat
P
ara la tipografía se ha escogido una tipografía web directamente de
Google Fonts, para que su calidad y su aplicación sea más sencilla.
Para su elección, se ha mirado una armonía con las tipografías
corporativas que forman parte del logo.
En cuanto a su lectura en pantalla, se contempla usar una segunda
tipografía para los textos más largos, ya que en la prueba no acaba de
quedar claro si resulta cómoda a la hora de leerla y quizá convenga una
tipografía un poco más fina y menos geométrica.
En el caso de que esto fuera necesario, utilizaremos para el texto base una
tipografía estándar, como sería la Arial o la Helvetica.
Montserrat Regular
abcdefghijklmopqr
stuvwxyz
abcdefghijklmo
pqrstuvwxyz
.:,;¿!¡?@#$%&|-_çñÇÑ
Montserrat Bold
abcdefghijklmopqrs
tuvwxyz
abcdefghijklmo
pqrstuvwxyz
.:,;¿!¡?@#$%&|-_çñÇÑ

22. Otros elementos | Iconos y redes sociales
L
a iconografía que se presenta en este rediseño es una orientación
del estilo que estaría bien que tomase. Una iconografía viva, colorida,
pero que no se base en fotografía ni en elementos recargados. Debe
ser simple pero debe comunicar.
Este tipo de iconografía, una vez determinada totalmente, debe aplicarse
también en los iconos para las redes sociales, que en esta propuesta
aparecen como están actualmente o simbolizados con círculos oscuros.
Para secciones como el blog, sería conveniente buscar un plug-in que nos
permita compartir contenido en las redes sociales y tenga recursos como
la contabilización de las veces que se ha compartido o de seguidores en
cada red social.
Encasodenoutilizaresterecurso,colocaremoslosiconoscorrespondientes,
igualándolos con los del resto de la web.
En una fase dos de diseño, sería conveniente revisar los contenidos fijos
de algunas secciones y reestructurarlos para que se puedan desarrollar
también alrededor de una iconografía similar a la descrita, y no tan sólo a
través de texto.

23. Previsualización y desarrollo del rediseño web
digitaldixit.com