Diseño, Reflexión | 12 de noviembre de 2014

Rediseñando FranciscoAMK.com (Parte 2: Diseño homepage y blog)

En el post anterior de esta serie sobre el rediseño de FranciscoAMK.com te comenté cuáles son las motivaciones detrás de esta reestructuración del sitio y de algunos parámetros que deberían guiar el camino de este proyecto, como por ejemplo, la simpleza y la facilidad de lectura.

He estado trabajando en base a esos parámetros en el diseño y eso es precisamente lo que quiero mostrarte esta semana: El nuevo diseño de 2 de las partes más esenciales de este sitio, que son la página de inicio y el blog.

Pero antes de hablar de estas páginas específicas, quiero contarte acerca del estilo que he decidido aplicar en este nuevo diseño.

Acerca del estilo

El estilo que he querido aplicar en el sitio, como ya lo había comentado anteriormente está basado en la simpleza y en la sencillez de sitios como Medium, que ofrecen una experiencia de consumo de contenido muy agradable, pero al mismo tiempo, con la intención de captar la atención de los visitantes para poder guiarlos (amablemente) a tomar la acción que deseo que tomen en el sitio, que es suscribirse al newsletter.

¿Que por qué me interesa tanto que se suscriban al newsletter?

Bueno, pues porque el newsletter es la forma más amigable y directa que tengo de comunicarme con la gente interesada en mi contenido y en lo que tengo para ofrecer. ¿Qué puede ser más personal en términos de comunicaciones digitales que un correo electrónico? Actualmente son cerca de 2.000 suscritos y espero que ese número siga creciendo con el tiempo.

En este contexto, minimalista y marketero a la vez (no sé en realidad si esa palabra exista) se plantea un desafío bien importante en cuanto al estilo del diseño.

Para resolver este desafío decidí usar mucho color blanco y hacer que el texto resalte bastante en un color gris oscuro con un poco de inclinación al azul (estoy seguro que mi esposa Natalia tiene un nombre específico para ese color), y en cuanto a la tipografía he optado por usar una fuente serif para el cuerpo llamada Crimson Text y una fuente sans serif (o palo seco) para encabezados y textos secundarios llamada Roboto.

Aquí hay un adelanto de como luce esta combinación (desde mi instagram):

Buena mezcla de tipografías desde Google Fonts: Roboto + Crimson Text

A photo posted by Francisco Aguilera G. (@franciscoamk) on

Para ser honesto aún no estoy 100% seguro de esta combinación, estoy siendo seducido por Freight Text Pro últimamente… bueno, al momento de maquetar el sitio en HTML y CSS me daré la chance de probar como funciona. Cuéntame cuál te parece mejor.

Con respecto a algunas partes específicas, quiero señalar lo importante que es para mí simplificar tanto como sea posible la cabecera y el pie de página, y creo que lo he conseguido bien. En la cabecera verás cómo ahora soy capaz de realmente resaltar un enlace en el menú y en el pie de página verás que he eliminado los widgets que allí vivían, básicamente porque nadie hacía click en ellos.

Página de inicio

La página de inicio en mi sitio es muy relevante, es la página más visitadas y actualmente una de las peor diseñadas (compite en esta categoría con la página de cursos).

Mi intención con esta página es poder entregar mi propuesta de valor de la forma más directa y honesta posible, por ello todos los textos han sido re-escritos y el layout general ha sido reestructurado.

Mira en este enlace el diseño en tamaño real aquí:
http://cl.ly/image/420M0T282h0R/o

1-avance-home

Esta página se compone de diferentes secciones que detallo a continuación:

Hero section

Esto es lo primero que verán las personas al llegar a la página y quiero que su primera impresión sea clara “Este es un sitio de 1 persona (no de una empresa) en donde podré aprender de diseño, desarrollo web y WordPress” por ello el encabezado deja claro de qué temas trata el sitio, mientras que la foto se encarga de dejar en claro que este sitio es personal.

De todos modos, es probable en un 90% que se cambie esta foto por otra. Mi sobrina y talentosa fotógrafa se ofreció a tomarme un buen retrato para esta área.

Con respecto al llamado a la acción, verás que no estoy invitando a los visitantes a suscribirse al newsletter sino a descargar un archivo.

A veces el newsletter por sí solo no es suficiente, por eso he decidido crear un pack exclusivo que servirá de incentivo para invitar a las personas a suscribirse y descargar el contenido.

La idea es que las personas hagan click en este botón y se abra un popup con el formularo de suscripción, en donde se les informe que no solo descargarán el pack de ayuda al diseñador web, sino que también se suscribirán al newsletter, pero que pueden desuscribirse en cualquier momento.

El contenido de este pack debería ser:

  • Guía en PDF: Las bases del desarrollo de temas WordPress
  • Guía en PDF Las bases de HTML y CSS
  • Set de fotografías de alta resolución de libre uso (tomadas por mí)
  • Archivo PSD: Diseño de sitio web tipo portafolio
  • Plantilla HTML: Sitio web tipo portafolio

¿Qué tal?¿Quién no se suscribiría con tremendo incentivo 🙂 ?

Presentación

Luego de la primera impresión del hero section, si el visitante sigue haciendo scroll, pretendo aprovechar su atención para presentar de una forma más detallada y honesta qué es lo que tengo para ofrecer, al mismo tiempo que voy desarrollando una narrativa en torno a mi persona y mi sitio.

Esta sección contempla un testimonio de mi buen amigo Víctor García (quien ha sabido sacar provecho a mi material), con la intención de demostrar a los visitantes que lo que encontrarán navegando en esta páginas de verdad valioso.

Para finalizar esta propuesta, lo más lógico es ofrecer la posibilidad de suscribirse para acceder al contenido, así que ahí está el formulario de suscripción.

Cursos destacados

Algo muy necesario y que no está en el diseño actual, la posibilidad de destacar los mejores cusrsos disponibles y/o aquellos que estén en oferta o recién lanzados.

Artículos recientes

He relegado esta parte prácticamente al pie de página, dado que se convierte más en un distractor que en algo que realmente enganche a los visitantes, quiero probar si alejar el blog de los formularios de suscripción efectivamente aumenta las suscripciones.

Llamado a la acción de recordatorio

¿Quién sabe? Tal vez al hacer tanto scroll, el visitante se olvidó de que podía descargar un completo kit, así que es preferible recordárselo ¿no crees?

Página de Blog

Esta página actualmente es débil porque cada post ocupa demasiado espacio y porque se muestran muy pocos artículos en cada página. También la invitación a suscribirse es débil, así que arreglemos todo eso.

Mira en este enlace el diseño en tamaño real aquí:
http://cl.ly/image/2f1j2v1j1o2l/o

2-avance-blog

Alguno de los principales cambios en esta página es poner un formulario de suscripción bien destacado en la parte superior con una propuesta muy simple: “Diseño, desarrollo web y WordPress en tu inbox“, creo que no hay una forma más sencilla y directa de decir lo mismo. Usé aquí también el factor validación social para incentivar las suscripciones diciendo “Únete a los más de 2000“.

Verás que nuevamente estoy aprovechando de promocionar mis cursos, esta vez en el sidebar derecho y de seguro te llamará la atención que haya un segundo formulario de suscripción. Estos formularios coexistirán en la misma página pero difícilmente aparezcan ambos en pantalla al mismo tiempo, así que no habrá repetición.

La idea es que a medida que se hace scroll y el llamado superior desaparece, el llamado inferior aparecerá en pantalla y, si el contenido es muy largo, este bloque se quedará pegado a la parte superior.

Aquí probablemente use sticky.js para conseguir esa funcionalidad.

Para optimizar tanto como sea posible el espacio disponible, destacaré con fotografía sólo el artículo más reciente y el resto estará en una especie de cuadrícula que me permitirá mostrar más posts en menos espacio sin que se vea sobrecargado de texto.

Debo admitir que esta idea está inspirada en un diseño de Brian Gardner, pero shhh… no le digas a nadie, es un secreto entre tú y yo.

Detalle de un artículo

Aquí es donde más debiera notarse mi enfoque a facilitar la lectura, y creo que lo he conseguido 😉

Mira en este enlace el diseño en tamaño real aquí:
http://cl.ly/image/1K0F0m3J3y2z

3-avance-detalle

Una de las cosas interesantes que voy a hacer con mis artículos es dejar de mostrar la fecha, porque creo que la mayoría de los posts son de larga vida y da lo mismo si fueron publicados ahora o un par de meses atrás ¿Qué opinas de esto?

No tengo mucho más que decir respecto a este diseño, aparte de que he querido eliminar tantos elementos como fuera posible para dejar la lectura libre de distracciones.

Notarás que hay varios elementos que faltan dentro del diseño, como los blockquotes o los diferentes niveles de encabezado, pero está bien, lo hice así a propósito, porque me gusta improvisar un poco mientras escribo el CSS.

¿Y los bocetos?

La verdad es que no los hubo. En este proceso salté directamente desde un par de líneas inentendibles en mi cuaderno directamente Sketch para probar diferentes opciones de diseño.

Si quieres ver, tengo una foto de este boceto:

El detallado wireframe del nuevo diseño de mi sitio

A photo posted by Francisco Aguilera G. (@franciscoamk) on

Lo que se viene

En el próximo artículo de esta serie espero poder mostrarte los diseños de página estándar y por sobre todo las ideas que tengo para aplicar a la página de cursos, que actualmente es la más débil, pero con lo que tengo en mente, creo que será (por mucho) la mejor del sitio.

Cuéntame qué te parecen los diseños ¿Crees que falta algo?¿Que hay algo que sobre?
La sección de comentarios espera por tu opinión 🙂

Un abrazo desde Santiago de Chile a donde quiera que estés
@FranciscoAMK

También te podría interesar:

El rol del diseñador en el futuro de la web

No hace falta tener una bola de cristal para saber hacia donde apunta el mundo de la creación de sitios web. Herramientas como Weebly, Webflow, Jimdo, Squarespace y The Grid, entre otras, lo dejan muy en claro: La creación de sitio web es cada vez más del tipo “Hágalo usted mismo”, en donde cualquier persona […]

Seguir leyendo...

Proceso creativo de un landing page (Parte 3: lo técnico)

Este es el tercer y último artículo de una serie en la cual estamos conociendo el tras bambalinas del proceso creativo de un landing page, donde ya cubrimos el proceso de redacción del texto y el diseño de la página. En este artículo, pretendía hablar inicialmente de la maquetación HTML y los estilos CSS que apliqué, […]

Seguir leyendo...

Ser emprendedor y lidiar con los bancos

Llevo bastantes años trabajando en el diseño de manera independiente, tanto desde el punto de vista del diseño gráfico como en el diseño y desarrollo web. Este camino comenzó primero como una actividad paralela a mis trabajos fijos, con horario de oficina y una estructura organizacional a la que rendir cuentas. Luego poco a poco […]

Seguir leyendo...

Hay 6 opiniones

  1. ¡Hola! ¿Cómo vas?

    Justamente yo estaba planteándome la misma idea (eliminar elementos y pasarme a una onda minimalista)

    Muy buena propuesta de diseño y espero que pronto la tengas publicada. Estaré pendiente del boceto del diseño de la página de cursos.

    Gracias por compartir tu proceso, que cada quien tiene su estilo y siempre se aprende algo nuevo.

    Buen fin de semana.

  2. Me parece que en la actualidad mostrar “mucho es no mostrar nada…” es decir, me describo como un humilde programador con cero experiencia desarrollando web, pero tengo algo que opinar!!

    Por ejemplo, algo hay un termino que me tuvo algo podrido cuando trabajaba junto a un staft de desarrolladores web (para ser especificos mi sitio de trabajo estaba al costado de ellos, no desarrollabamos algo juntos) y es “Responsive”, el asunto es que estaban modificando todo un site y migrandolo a wordpress, pero la pagina original era mas sencilla, clic aqui y clic alla y obtenias lo que querias, pero la actual que esta en wordpress… pasas el mouse por doquier y todo “parece tener vida” como si vivieras dentro de un gif animado, ver el zoom de las imagenes que vez, tener que bajar mucho con el mouse porque es como si 3 paginas donde se iba antes mediantes links independientes ahora estaban en 1 sola, como si fuera un tremendo gusano de texto….

    Quiza ya me extendi mucho, pero el asunto es que la onda “minimalista” es la que siempre deberia prevalecer, hay veces veo que abusan mucho de las bondades del codigo y terminan “prostituyendo” cada funcion y en lo personal estoy en contra de la pedofilia!! 😛

    En fin, estoy aprendiendo wordpress y Francisco gracias por compartir tu experiencia, asi que aqui va mi granito de arena y deberia ser un estandar en todas las paginas webs:

    “Scroll Facility” -> paginar con solo girar la rueda del mouse u oprimir una “flecha abajo” y que eso tenga un efecto como cuando pasas el dedo por uno de esos aparatejos touch screen.

    Bueno como dije, estoy en cero en web, pero creo saber lo que es saludable para que una pagina no solo sea atractiva y amigable, sino para que tambien sea navegable como para que mi hija de 3 años pueda hacer y deshacer al interactuar con una pagina web.

    Saludos. (:

  3. Hola Maestro Francisco, muchas gracias por compartir tantas cosas de valor incalculable, quería preguntarte si trabajas en algún momento con un framework tipo genesis para wordpress, o siempre armas las plantillas desde cero lo que para mi es espectacular por que es la manera de tener el control total de todo, espero que no sea una pregunta fuera de foco

    Saludos 🙂

  4. Hola! me parecen buenísimos los cambios, eso sí, yo no quitaría la fecha de los artículos, siempre está bueno saber si son actuales o si son de hace 10 años.
    Por lo demás, mucha suerte! (me perdí el black friday!)

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