Mockups y comparaciones

  • Posts

En la web es muy fácil perder oportunidades, lo digo porque la atención de los que navegan en ella es muy limitada y entrar a un sitio requiere a veces un gran esfuerzo y en muchas ocasiones, toneladas de paciencia.

Muchísimos desarrolladores web tienen una propensión por las grandes imágenes, los efectos parallax, las metamorfósis del CSS y más que nada, tienen esta innecesaria afección por intoxicar el código de las páginas con insertos de JavaScript por todas partes en pro de «aumentar la funcionalidad» del producto, que termina en una página web que tarda eones en cargar y solo obliga al visitante a dar atrás o cerrar la ventana del navegador.

Por eso es importante saber qué es esencial y más que nada, qué está por encima de las funciones y el diseño.


Este es un ejemplo real de dos sitios web de una misma marca de artículos para el hogar: Bed Bath and Beyond, esta es una empresa reconocida tanto en EU cómo en México por su giro comercial: artículos para el hogar, sin embargo no es la única empresa ni el primer lugar en el que se piensa cuando se quieren comprar estos.

Me llamó la atención su sitio web por un artículo que hicieron sobre ella acerca de su «éxito» en el e-commerce mexicano. Cuando entré al sitio, el Home Page cargó en un tiempo moderado y al desplegarse enteramente el mensaje era claro, le hablaba a aquél que buscaba artículos para el hogar y le decía que había llegado al lugar ideal para encontrar todas esas soluciones para su casa.

Al ir al sitio de la marca en Estados Unidos la página de inicio es muy distinta, no apela directamente a que el visitante descubra en esa tienda en línea los beneficios para su hogar, más bien, ofrece directamente beneficios de envío por comprar ahí mismo. En esta página de la marca en EU el sitio apela a los clientes que ya conocen la marca y les hace notar las ventajas de comprar ahí mismo. Supongo que ‘Bed Bath and Beyond’ tiene como fuerte competencia a Amazon.com por lo que aprovechando la presencia consolidada de la marca en ese país, ponen más peso en los beneficios añadidos de comprar ahí mismo y no con la competencia.

2 Home Pages, diferentes objetivos

Cabe aclarar que no hay una mejor que la otra, ambas tienen misiones distintas y sería un error comparar los resultados de ambas. En EU BB&B es una marca bien establecida que se ha expandido globalmente y tiene más giros comerciales que el de artículos para el hogar. En México su objetivo es consolidar a la marca, así como en Canada su objetivo es continuar fortaleciendo los lazos con sus clientes en ese país.

En ambos websites puedes ver que el copy o el mensaje en texto que agregan al inicio del home page tiene un tamaño considerable, la fuente es la del título 1 y utilizan distintas caligrafías, en EU usan una fuente sans sin mayúsculas y en México usan una serif combinada con sans, que la hace sentirse más elegante a mi parecer:

Para mí y para todo marketer el copy debería ser prioritario en un sitio web. Claramente una imagen puede ser más poderosa, pero una imagen es lenta en cargar a comparación de una fuente nativa del sitio web. Y ultimadamente, una imagen sin un copy adecuado puede dar pie a la mala interpretación, por eso antes de la imagen de inicio o background lo más importante es el mensaje, el copy.

En el caso de este blog, he probado dos versiones en el mensaje de inicio:

2 versiones del Home Page de este sitio

Una vez más, no se trata tanto de cuál es el mejor o cuál es correcto, sino de ¿cuál es el objetivo?

En una versión (izquierda) hablo de lo que mi estudio hace: proyectos digitales:

En el otro hablo sobre mí mismo de una forma más personal:

En ambos utilizo una fuente serif (de hecho todo el sitio utiliza la fuente Adamina), el tamaño de la fuente aún no es el ideal para el mensaje, además de que creo que entre menos palabras mejor, y por ahora no hay ninguna imagen para soportar el mensaje de inicio. En cualquiera de los casos, ambas versiones son mejorables.

Idealmente, lo «ideal» sería encontrar un punto intermedio entre ambos y definir el mensaje de inicio con una frase simple, soportado por una buena imagen que esté en esta intersección entre lo que mi estudio hace y quien soy yo.

La gran ventaja de la web es que no tendrías que quedarte con una u otra versión sino utilizar distintas versiones para distintos canales o vías de acceso de distintas personas a tu sitio. Pero en mi experiencia lo mejor es simplificar y ofrecer en un mensaje consistente la información necesaria para saber de qué va tu sitio y trabajo. Eventualmente espero poder llegar a esta intersección de mensajes y rediseñar mi sitio más ad hoc a lo que yo hago en mi estudio.

La versión 4 del Home Page de mi sitio

Este mockup, este diagrama que vez aquí es una versión real digitalizada de los mockups que hago (en lápiz y papel) para los diseños de mi sitio.

El objetivo de esta versión del Home Page es básicamente encontrar esta intersección de la que hablaba y completar esa premisa con los siguientes elementos de la página que quedan bajo el copy + la imagen de background.

«Deja que tu trabajo hable por tí» es básicamente el ‘aproach‘ que estoy siguiendo y colocar una galería de los proyectos que estaré presentando, más guías técnicas y otros elementos serán una manera de hacer que el mensaje de inicio solo sea una invitación a descubrir lo que hago.←Debo mencionar que esta no es la versión final del rediseño pero se acerca.

En cualquier caso, ya sea que hagas un desarrollo para un sitio de ecommerce o para tu propio blog, creo que es necesario entender a quién le estás hablando y qué necesidades estás resolviendo al presentarle tu sitio web.

Amo los sitios que son puramente personales, sin ninguna intensión de establecer una relación con el mundo digital o los llamados «usuarios» y en la medida de lo posible trato de dejar esta huella personal en mi sitio, pero, este estudio es algo más que un espacio personal, por lo que invierto en pensar cómo debe quedar cada elemento y con quién quiero comunicar o establecer una relación de trabajo.

Falta mucho por mejorar y hacer. Estoy evitando utilizar plugins y elementos que hagan más pesada la navegación del sitio. Espero dentro de poco poder progresar con esto, al fin y al cabo, este website es una carta de presentación muy importante para mí porque aquí queda el registro de mi trabajo y de perspectivas personales sobre la vida digital.


FelipeRM.Studio por correo

Recibe en tu bandeja de entrada cada publicación hecha en este sitio.
Solo registra tu email y listo.

Desarrollado por Buttondown.

Deberás confirmar tu suscripción en un correo que te llegará en breve.
Visita la Política de Privacidad para saber cómo se utiliza tu dirección de correo electrónico.
Spoiler alert!: FelipeRM Studio no comparte ni comercializa en ninguna forma con tus datos personales.
Si no te has podido registrar, envía un email a hola@feliperm.studio.