Diseño, Reflexión | 21 de junio de 2017

El proceso de rediseño de FranciscoAMK.com

También puedes escuchar este artículo
Abrir en otra ventana

Ya desde hace una semana que este sitio tiene una nueva cara y me parece apropiado compartir contigo el cómo y el porqué de este rediseño.

Presumo que este será un artículo algo extenso, así que sin más introducción, vamos al grano:

Por qué rediseñar

El sitio llevaba poco más de dos años sin mayores cambios en términos estructurales y, en ese tiempo, habían pasado bastantes cosas que no se veían reflejadas en su diseño. Habían secciones que estaban completamente ocultas, contenidos a los que era difícil acceder y artículos que quedaban olvidados conforme pasaba el tiempo y ya no eran recientes.

Adicionalmente, como soy el único que tiene que entrar casi todos los días al sitio web, ya me tenía bastante aburrido su diseño, sobre todo porque, dada su antigüedad, sentía que no reflejaba la calidad de los diseño que puedo hacer ahora.

Versión previa del diseño

Ahora bien, todo lo que he mencionado hasta ahora es lo que me había despertado las ganas de rediseñar el sitio, pero no fue lo que realmente me hizo tomar acción y lanzar una nueva versión. Lo que consiguió esto fue un rechazo.

Hace poco más de un mes postulé a un proyecto muy interesante (del cual no te puedo contar mucho por el momento) y fui rechazado. El motivo que me dieron fue que mis diseños no eran lo suficientemente pulcros y que no tenían la calidad necesaria para aceptarme.

Frente a este rechazo tenía tres opciones:

  1. Inflar mi ego y decir «Imbéciles, no saben lo que se pierden. No saben apreciar mi talento».
  2. Achacarme y decir «Soy un impostor. A quién quiero engañar, si en realidad soy el peor diseñador del universo».
  3. Tomármelo como un desafío, mirar honestamente mis diseños y decir «Pensándolo bien, tienen razón, yo puedo diseñar mucho mejor que esto».

Como te imaginarás opté por esta última opción y estoy en medio de una cruzada por rediseñar varios sitios que están bajo mi control. Éste ha sido el primero, luego viene el sitio de mi esposa, los de algunos amigos y, finalmente, una actualización al portafolio de APK Estudio.

Objetivos del diseño

Una vez embarcado en la misión de rediseñar el sitio, tuve que decidir cuáles serían mis objetivos. Esto fue bastante sencillo porque ya los tenía claros desde mucho antes y podría resumirlos de la siguiente forma:

  1. Proyectar una estética más limpia y minimalista, que representara mi estética personal: Esto nace porque el sitio anterior estaba demasiado influenciado por lo que «se supone» que uno debe hacer desde un punto de vista de marketing digital, pero en esa búsqueda se había diluido mi propia identidad visual.
  2. Dar visibilidad a los contenidos que hasta entonces estaban invisibles: Como podrás notar, en el menú superior hay enlaces a secciones que antes no estaban, como las herramientas, las plantillas, las recomendaciones y los servicios. Todo esto existía pero solo lo podías ver si te mandaba el enlace directo por email.
  3. Dar a entender de qué se trata el sitio más fácilmente: Hasta antes del rediseño uno podría haber pensado que era el sitio personal de un diseñador, que era solo un blog o que era algo menos profesional. El nuevo diseño debería dar a entender de manera rápida y directa que este es un sitio para aprender sobre diseño web, ya sea a través de cursos o de artículos de blog, en donde además se encuentran otro tipo de recursos y absolutamente todo es creado por una sola persona, ese tal Francisco. Por eso la importancia de la foto con mi cara al principio.

Tecnologías usadas

Una vez con los objetivos claros vino el trabajo de comenzar a hacerlo realidad, para ello usé varios programas y/o tecnologías. Veamos cuáles fueron:

Libreta

Lo primero y lo más importante fue definir el mapa de contenidos, esto lo hice en mi libreta y luego lo pasé en limpio en iA Writer, la aplicación que uso para redactar. Aquí el desafío fue crear un menú de navegación que fuera sencillo, pero que permitiera dar visibilidad todos los contenidos.

Luego seguí con un par de bocetos en mi libreta. No fueron para nada muy detallados, ya que tenía la idea bastante clara de tanto que le había dado vueltas en la cabeza, así que sin dedicarle mucho tiempo a esto pasé directo a la computadora.

Sketch / Sketch Cloud

Como ya es costumbre, el diseño lo armé en Sketch. Luego, la primera versión la subí a Sketch Cloud para pedir feedback a algunos amigos.

Primera versión del rediseño

Ellos me comentaron que estéticamente se veía muy bien, pero que parecía más bien el sitio de una agencia… y tenían toda la razón. En base a ese feedback actualicé el diseño y pasé por un par de versiones más hasta que llegué a uno que me dejó satisfecho.

El diseño solo lo hice en su versión de escritorio para ahorrar tiempo, porque ya teniendo la estructura y los estilos definidos, la versión móvil la puedo crear en la etapa del código.

Nueva versión del diseño

Webflow

Hace varios años que tenía una cuenta en Webflow, pero en aquel entonces no me sentí cómodo usando la aplicación y la había dejado de lado.

Soy un fiel seguidor del blog de Ran Segall y él siempre habla de lo bueno que es Webflow. Lo escuché tantas veces hasta que me terminó convenciendo de darle una segunda oportunidad… y me encantó. Sin duda la aplicación ha cambiado un montón desde cuando me registré en 2014. ¡Ahora es 327 veces mejor!

Usé el link que tiene Ran en su sitio y registré una cuenta con un 50% de descuento por seis meses 🙂

Webflow fue la herramienta para desarrollar todo el frontend, es decir, el HTML, el CSS y el JavaScript. Las animaciones también las hice con WebFlow, sin escribir nada de código.

Ya en el futuro tendré más tiempo para hablarte acerca de Webflow y quizás hacer algunos tutoriales al respecto, pero volvamos al tema.

JavaScript

Varias personas me han preguntado cómo hice el efecto de texto que se escribe y se borra en el homepage y es bastante simple en realidad.

Usé Typer.js y basta solo con incluirlo en nuestra página y añadir algunos data-attributes al elemento que queremos animar. Aquí está la documentación.

Si el público lo pide, quizás haga un tutorial más detallado en el futuro 😉

WordPress

Ya con todo el frontend listo, incluyendo el script de typer.js, exporté el código desde Webflow y me dispuse a implementarlo en WordPress, para ello creé un tema personalizado, partiendo de un tema base (que aprendemos a crear en mi curso Creación de Temas WordPress Profesionales) y todo el código lo escribí en el programa Coda.

Una de las cosas que más me tomó tiempo en el rediseño anterior del sitio fue el crear campos personalizados para cada tipo de contenidos y hacer que absolutamente todo fuera autoadministrable desde el escritorio de WordPres. En esta ocasión lo hice diferente.

Me di cuenta que para mí es tan fácil editar un archivo fuente como lo es editar un artículo en el escritorio de WordPress, así que hay varias cosas en las que no me desgaste y las dejé de manera dura en los archivos del tema WordPress. Cabe mencionar que esto es algo que nunca haría el el sitio de un cliente, pero este es mi propio sitio, así que me vale.

Flywheel

Subir el nuevo tema, actualizar los contenidos y hacer que estuvieran en línea fue un proceso demasiado simple gracias a mi hosting, Flywheel. El proceso fue el siguiente:

  1. Crear entorno staging: Con solo un par de clicks, Flywheel me permitió crear una copia exacta de mi sitio en una dirección protegida con contraseña.
  2. Actualizar sitio: Desde esta versión espejo del sitio pude subir el nuevo tema, hacer los cambios pertinentes a nivel de código, contenidos y actualización de plugins.
  3. Pasar cambios a producción: Una vez que estuve conforme con los cambios, desde el escritorio de Flywheel hice un par de clicks y la versión espejo o staging del sitio pasó a ser la versión pública.

De este modo, lo que significó un trabajo de varias horas, separadas en diferentes días, ante los ojos de los visitantes del sitio, solo significó que de un momento a otro el sitio tenía un nuevo diseño y una nueva estructura de contenidos.

Si quieres probar Flywheel, tengo un lindo y jugoso link de afiliado esperando por ti.

Feedback hasta el momento

Como en todo rediseño hay unas cuantas cosas que se me pasaron por alto, pero afortunadamente los lectores de mi newsletter son gente maravillosa y me han ayudado a detectar y corregir esos detalles.

Incluso uno de ellos, Rodrigo Mendoza, se dio el trabajo de prácticamente leer todo el sitio y decirme en qué lugares me faltaron acentos, comas y puntos. Muchas gracias.

El términos del diseño en sí, he recibido principalmente comentarios positivos y alguna que otra sugerencia amable de amigos diseñadores, así que estoy bastante feliz con el resultado.

Bien, creo que eso resume bastante en detalle el proceso de rediseño de este sitio, pero ahora es tu turno.

¿Es momento de rediseñar tu sitio? Si es así, te invito a hacerlo y después compartir tu experiencia en un artículo como este para que podamos conocer más de tu proceso.

Y si has rediseñado tu sitio hace poco, creo que a todos nos encantaría verlo. Deja un enlace en los comentarios para poder mirarlo.

Un abrazo,
@FranciscoAMK

También te podría interesar:

La honestidad y los temas de WordPress

Hace un tiempo tuve una reunión con un cliente que necesitaba rediseñar su sitio web luego de un par de años sin recibir ninguna actualización, tanto en contenido como en diseño. El cliente me presentó el sitio actual e inmediatamente identifiqué el tema que estaba usando (creo haberlo visto en ThemeForest). Le dije «es buena […]

Seguir leyendo...

Detalles del curso «Creación de temas WordPress profesionales»

Si aún tienes alguna duda sobre cómo es el curso»Creación de temas WordPress Profesionales«, o qué tan detalladamente se tratan los temas, quiero mostrarte 2 de las 49 clases que componen la versión básica del curso para que puedas hacerte una idea. Para mí, lo más importante es tratar de explicar cada paso que damos a […]

Seguir leyendo...

Cómo diseñar un landing page en Sketch 3

Actualización: Las siguientes partes de esta serie ya están listas: Parte 2 y Parte 3. Próximamente realizaré un evento en vivo orientado a diseñadores gráficos que quieran aprender de diseño web. Aún no está definida la fecha ni los contenidos específicos a tratar en este evento, pero es un buen momento para diseñar el landing page […]

Seguir leyendo...

Hay 6 opiniones

  1. Hola Francisco,

    He descubierto tu web hace poco y he visto que compartes información de mucha calidad con los lectores, y sobre todo a todos los diseñadores web que estamos empezando en este mundillo.

    El rediseño de tu web me parece muy profesional y me gusta mucho.

    Por cierto, yo uso la aplicación de Local By Flywheel para instalar WordPress en local para hacer pruebas y va genial, así que supongo que su hosting también será bastante bueno.

    Enhorabuena por tu trabajo 🙂

    Un saludo

    Jessica

  2. Francisco.

    Muchas gracias por compartir no solamente tu proceso de trabajo de rediseño, sino también lo que pasó antes y que te movió a hacerlo. Muy interesante. Es un ejemplo a tener en cuenta para cuando nos toque manejar reacciones ante las críticas.

    Así también, muchas gracias por el privilegio otorgado al ser mencionado en tu artículo 😀 Particularmente, opino que este privilegio es grande, por lo que mi agradecimiento también. Felicidades una vez más por la nueva cara de tu sitio. Me encuentro esperando ansiosamente tu webinario.

    Un abrazo!

Y tú ¿Qué opinas?

Puede que no te responda, pero ten por seguro que leeré tu comentario. Por si acaso, tu email no se mostrará ;)

Recibe más artículos como este cada semana

Únete a los 8.158 suscriptores y recibe cada miércoles nuevo contenido sobre diseño, sitios web y creatividad.

¡Ya estamos casi! revisa tu bandeja de entrada para verificar tu email por favor.
Uy! Parece que algo salió mal procesando tu solicitud. Recaraga la página e inténtalo de nuevo.

Ya me suscribí antes, no me muestres esto.