[Caso de uso]: Un nuevo landing

Nuevo año, nuevas metas, nuevo podcast. Y para mí website, un nuevo diseño también.

Mi página de inicio no ha sido la mejor. El día del lanzamiento era literalmente la lista de posts del blog y ya, luego con el tiempo, y como prometí en ese primer post he ido agregando cosas, y mejorando la experiencia en general.

Hasta hace poco, el home era un breve resumen de mí y los posts más recientes, los cuales cambian cada vez que se sube un post nuevo. Esto no es directamente malo, pero era algo que no me convencía ya que no quiero que esto sea solo mi blog, sino que también deseo utilizarlo como mi página personal, donde pueda hablar de mí, exponer quién soy y ponerme en contacto con ustedes a la vez que muestro mi portafolio.

Un home sencillo

Primera versión del Landing

Mis requerimientos eran simples: un home donde no saliera mi cara, con un footer más sencillo y elegante, donde pudiera exponer en lo que estoy trabajando sin ser muy detallado. Debo confesar que no soy diseñador, así que tome Adobe XD, que es mi herramienta predilecta, y empecé a poner algunos bloques que hicieran algo de sentido. Me encontré con la página de undraw de donde saqué el diseño que utilicé.

Lo que aprendí

La versión 2.0

Version 2 del Landing

Está versión va adaptándose más a la que termino siendo oficialmente la versión final y es la que está ahora. Aún así tuvo sus fallos y sus aciertos. Me había casado con la idea de que fuera una página con una sola sección grande. Pero había recolectado inspiración de otros lugares, como la página de mi amigo José Varona donde tenía una parte de testimonios, quería hablar algo de mí, y quería mostrar mis proyectos.

Lo que salió mal

Teniendo todas esas consideraciones en mente empecé a trabajar en la siguiente versión.

Aunque esté solo mostrando las imágenes, parezca que solo diseñé y muchos de los errores sean más que evidentes, debo confesar que llevé a cabo cada una de estas ideas al menos a un 80% y esto se puede ver reflejado en el Git history de este feature.

La tercera es la vencida

Version 3 del Landing

Al fin una que remediaba todos los otros errores y agregaba algo de sabor.

Esta vez diseñé a 1366x768 y tuve en mente los diferentes tamaños de pantalla (desde 360px hasta 1920px). Conservé también algunas partes del otro diseño, como el gran HeroIntro section (con la imagen de mi escritorio). Le di más protagonismo a mis colores, deshaciéndome (casi) por completo del fondo blanco clásico.

Convertí el carrusel de proyectos en uno a ancho completo y me deshice del texto vertical. Reutilicé el formulario de contacto pero le cambié el layout y agregué más opciones al selector de Razón.

Retos de este diseño y diferencias

La única parte que se puede decir que se mantuvo desde la versión 1 de este diseño fue el footer.

En conclusión

Aquí pude explorar diferentes ambientes y hacer un rediseño con el que me siento satisfecho y del que sé tendré que mejorar en el futuro (cercano) y me siento satisfecho con eso.

Quiero agradecer a quienes se tomaron su tiempo y me escribieron para la sección de Testimonios. Giancarlos, Efraín, Daniel, José. Pero en especial a Efraín que es la única persona que vio los 3 diseños y desde siempre me ayudó y motivó a terminar; de hecho de él fue la idea de completarlo antes de mi charla para ReactRD.

Anuncio: Estaré dando una charla sobre Custom React Hooks para la comunidad de ReactRD este 21 de febrero. Entérate de más en EventTribe (es Gratis).

Si quieres compartir tu opinión del diseño, como siempre puedes encontrarme en Twitter @taverasmisael o puedes hacerlo a través de la página de contacto. También me gustaría hacer otros casos de uso, así que si te gustó el formato avísame.

Hasta la próxima que probablemente sea sobre el lanzamiento del podcast.

Ir al principio