Desde hace bastante tiempo Responsive Design suena como una constante en la web. El panorama sigue cambiando, a mi modo de ver más rápido de lo que esperábamos. Es casi un hecho que la navegación móvil superará a la navegación desde una computadora de escritorio. Ante tal evento debemos en lugar de hacer diferentes sitios específicos  para cada tipo de dispositivo web, debemos hacer uno adaptable al tamaño de pantalla del dispositivo en el que se esté mostrando. resumiendo es hora de practicar el Responsive Design.

Este artículo no va dirigido a los diseñadores que ya saben las mejores practicas para aplicar el Responsive Web Design, va dirigido a todos los que están por sumergirse en un nuevo proyecto, definitivamente es algo a tener en cuenta.

Aquí de manera muy sencilla les presento 5 beneficios seguros al aplicar el Responsive Design

1. Como marca, no quedarás atrapado en una constante adaptación de sitios a dispositivos, plataformas, formatos
2. Dejarás atrás practicas tremendamente complicadas y poco eficientes
3. Solo se desarrollará un sitio
4. El cliente tendrá una experiencia lo más placentera posible con independencia de qué medio esté usando para ver nuestra web.
5. Al aplicar el punto anterior, la web gustará más, será más compartida, mejor valorada, más popular y eso en SEO es muy importante.

Pensemos pues, que el Responsive Design es una mezcla de usabilidad, diseño de experiencia y algo de metodología de desarrollo, y que a nuestro modo de ver a llegado para quedarse.

Les compartimos 10 ejemplos de sitios web “Responsive”

The Boston Globe

Staffanstorp

Sasquatch! Music Festival

Think Vitamin

Food Sense

Simon Collison

Forefathers Group

Illy Issimo

Earth Hour

Ribot

Es muy común que un diseñador pase horas creando un diseño determinado que aunque estéticamente sea válido y cumpla con los términos de usabilidad requeridos sea rechazado finalmente por el cliente. Luego viene un momento de frustración que  en algunos casos puede influir negativamente en el resto de los intentos que puedan hacerse hasta llegar a complacer al cliente.

Esto sucede porque un diseño puede tener varias soluciones creativas y todas ser válidas. Pero el cliente, en el mejor de los casos, espera ver algo y puede darse el caso de que obtenga una solución que aunque válida sea diferente a lo que esperaba. La solución a este problema está en saber que espera el cliente y cumplir directamente con sus expectativas. La herramienta más práctica para ello, son los Moodboards.

La definición

Un Moodboard es un poster o tabloide (impreso o digital) compuesto por imágenes, recortes, texto, colores en determinada composición con el objetivo de transmitir emociones al cliente y obtener una respuesta que permita definir a que estilos y preferencias responde mejor para poder realizar un trabajo de diseño equilibrado entre los requerimientos que pueda tener un diseño y la respuesta a los valores estéticos del cliente. En pocas palabras, un diseño efectivo, que guste a la mayoría y al cliente también.

Como utilizamos los Moodboards en Neuseed

Aunque es nuestro caso lo utilizamos principalmente para diseñar Websites puede ser útil para otros sectores creativos como la moda, los storyboards, filmes, diseño de interiores, entre otros.

Partiendo de los resultados obtenidos de la investigación previa realizada analizando varios factores como la competencia, las tendencias y muy importante, la información obtenida del cliente, el diseñador debe formarse uno o varios caminos estéticos a seguir. Es entonces cuando debe conformarse el Moodboard, uniendo ejemplos, pantallazos, colores, tipografías y todo lo que sirva de inspiración para presentarlo al cliente y obtener una respuesta simple. Que le gusta y que no. Tendremos la base para crear sin necesidad de haber creado un diseño definitivo.

De esta forma ya tenemos una idea bastante concreta de que espera el cliente y podemos entregar un diseño mucho más certero ahorrándonos fracasos y por tanto que se desequilibre la relación tiempo disponible y presupuesto.

Quizás el único aspecto negativo de utilizar Moodboard es que un diseñador puede acomodarse y sencillamente copiar lo que el cliente elija como de su gusto.  Esta práctica no es recomendable pues al final estaría en la misma situación que al comienzo, entregar un diseño que será rechazado por falta de originalidad.

Si deseas ver más ejemplos de Moodboards en Flickr hay una galería muy extensa.

Ya está online Masterbranch. Un proyecto en el que tuvimos el privilegio de diseñar desde cero la imagen y el Sitio web en general.

Masterbranch es un CV online creado a partir de la experiencia del usuario en diferentes proyectos. Tiene formato de red social y permite la interacción entre usuarios a través del seguimiento de eventos y proyectos de una forma muy intuitiva y sencilla. Mediante Masterbranch puedes recuperar el contacto con compañeros de proyectos con los que ya has trabajo y establecer nuevos contactos. Además puedes dar seguimiento al lanzamiento de nuevos proyectos opensource y formar parte de dicha comunidad.
Nuestro trabajo

Nuestro trabajo

La primera fase claramente tuvo que ver con la imagen. Aunque en un inicio todo se planteo como un rediseño a la red social profesional Debug_mode=On durante el proceso de creación del nuevo logotipo el cliente decidió ir más allá y meterse en un proyecto aún más ambicioso. Una vez arreglado todo comenzamos entonces con el logo de Masterbranch.

El logo representa una rama de desarrollo. Los puntos muestran etapas o versiones de un software en desarrollo y la vez se integra muy bien con el nombre en cuestión. El cliente vino con una idea muy clara de lo que quería con este logo, llevarla a cabo utilizando los colores apropiados, el uso del equilibrio, proporción y tipografía adecuados.

La segunda fase ya fue como tal el diseño y maquetación de las páginas que conforman el Sitio web. El diseño responde a la necesidad del cliente de una interfaz de usuario con alto nivel de usabilidad, sencilla pero capaz de mostrar una gran cantidad de funciones y opciones sin complicar la experiencia del usuario.

Para la Homepage tuvimos que crear tres ilustraciones que reflejaran en 3 pasos o frases cuales son los objetivos de Masterbranch. Esta parte la disfrutamos muchísimo.

Aquí les dejo otro ejemplo en el cual utilizamos cuadros de dialogo creados con jQuery.  En estos momentos ha sufrido algunas modificaciones ya realizadas por el cliente en el proceso de desarrollo. Si deseas ver más puedes darte de alta o sencillamente revisar lo que puedas ver sin registrarte.

Nota: Todos los avatares utilizados en las propuestas de diseño son tomados de perfiles públicos de twitter con el único fin de mostrar contenido real en el diseño. En ningún momento pretendemos generar publicidad al proyecto ni dar a entender que los usuarios mostrados en el diseño forman parte de dicha red.

Si deseas ver otros proyectos realizados por Neuseed puedes darle una ojeada a nuestro portafolio y si necesitas algún servicio no dudes en contactar con nosotros.

Sobre el diseño puedo decir que aun tendrá más, estamos trabajando en aumentar de forma considerable la calidad del portfolio y principalmente el blog que siempre ha sido algo que no ha tenido mucho movimiento en Neuseed y pretendemos cambiar eso.

Algo bueno es que desde ayer somos noticia en algunos sitios importantes como Loogic de Javier Martin un buen amigo y no solo en la red hispana, tambien en cssWOW y 101 Best Websites

En el estudio estamos muy contentos con la aceptación favorable que ha tenido el diseño y en base a esto vamos a seguir trabajando en mejorarlo y agregar nuevas funcionalidades que puedan ser de utilidad a nuestros clientes y lectores del blog.

En este caso el cliente fue muy específico sobre sus requerimientos para situar la publicidad sin que esta entorpeciera el diseño ni la información. Decidimos entonces situar el mega banner en la cabecera justo a la derecha del logo y poner la navegación principal debajo en línea común con el buscador. Esta última muestra las páginas creadas en WordPress y las enlaza.