Previsualización y desarrollo del rediseño web

digitaldixit.com

dixitaldixit.com | Introducción

En 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.

Home | propuesta_diseno_01_home.jpg

Como 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.

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.

Redacció de continguts web | propuesta_diseno_02A_redaccio.jpg

Estratègia de xarxes socials | propuesta_diseno_02B_estrategia.jpg

Creació de pàgines web | propuesta_diseno_02C_creacio.jpg

Redacció de continguts web | propuesta_diseno_02A_redaccio.jpg

Para 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.

Qui som? | propuesta_diseno_03_quisom.jpg

Qui som? | propuesta_diseno_03_quisom.jpg

La 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.

Clients | propuesta_diseno_04_clients.jpg

Clients | propuesta_diseno_04_clients.jpg

La 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.

Contacte | propuesta_diseno_05_contacte.jpg

Contacte | propuesta_diseno_05_contacte.jpg

Para 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.

Bloc | propuesta_diseno_06A_contacte.jpg

Bloc | propuesta_diseno_06A_bloc.jpg

Tambié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.

Post | propuesta_diseno_06B_post.jpg

Post | propuesta_diseno_06B_post.jpg

Una 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.

Banners | propuesta_diseno_banners.jpg

Banners | propuesta_diseno_banners.jpg

Se 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.

Tipografía | Montserrat

Para 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

abcdefghijklmopqrstuvwxyzABCdefgHijkLmoPqRSTUvwxyz.:,;¿!¡?@#$%&|-_çñÇÑ

Montserrat Bold

abcdefghijklmopqrstuvwxyzABCdEFGHIjkLMoPQRsTuvwxyz.:,;¿!¡?@#$%&|-_çñÇÑ

otros elementos | Iconos y redes sociales

La 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.

En caso de no utilizar este recurso, colocaremos los iconos correspondientes,

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.

Previsualización y desarrollo del rediseño web

digitaldixit.com