Diseño, Reflexión | 3 de diciembre de 2014

Rediseñando FranciscoAMK.com (Parte 3: Página de cursos)

Continuando con el proceso de rediseño de FranciscoAMK.com, en donde ya hemos visto las motivaciones principales y el diseño de las páginas de inicio, blog y detalle de un artículo, ha llegado el momento de mostrarte el nuevo diseño de la página de cursos.

Esta página es una de las más importantes del sitio ya que los cursos son la instancia en la que mayor interacción hay entre la audiencia (los estudiantes) y yo, sin embargo al día de hoy esa página es horrible y únicamente muestra un listado de enlaces sin mayor detalle ni mayor contexto.

Así luce la página hoy. ¡Horrible!
Así luce la página hoy. ¡Horrible!

El objetivo que quiero alcanzar con la reestructuración de esta página, es permitir a los visitantes tener una idea global muy rápida de la cantidad de cursos que hay y entender con facilidad qué es lo que puede obtener de cada uno de ellos.

Te presento a Víctor

Víctor

Una de las situaciones que he visto repetirse una y otra vez en personas que toman mis cursos, es que suelen confundirse respecto a cual tomar primero y cual tomar después. En varias ocasiones ha habido estudiantes que se inscriben a un curso de desarrollo de temas WordPress sin antes saber cómo usar o instalar este sistema y he tenido que invitarlos a tomar primero Dominando WordPress, en donde aprenderán lo básico sobre el uso y administración de la plataforma.

Para solucionar esto, quise crear una historia, la historia de Víctor, un muchacho que pasó de no saber casi nada de diseño web a poder dedicarse profesionalmente a esto de manera independiente con la ayuda de los cursos que se publican en este sitio.

Víctor viene a ser la representación gráfica de mi cliente ideal, de hecho, está inspirado en uno de los estudiantes que ha tomado gran parte de mis cursos y a quien he visto progresar considerablemente.

Lo que este personaje representa es un diseñador/consultor web inteligente e independiente que es lo suficientemente disciplinado como para aprender por su propia cuenta, pero que al mismo tiempo es altamente creativo, lo cual le ha permitido usar los conocimientos recibidos para adaptarlos a su realidad y sacar el máximo provecho de ellos. Por eso su vestimenta es bien juvenil, pero sin ser desordenada, demostrando que es creativo y libre pero sin dejar de ser profesional.

Si te interesa conocer la parte técnica de la ilustración, la realicé con un “Pentel brush pen” sobre una hoja de papel bond 24 y luego de escanearlo lo coloreé en photoshop mediante una Wacom Cintiq 12UX. ¿Te gustaría ver un tutorial sobre esto?

Debo agradecer a Natalia, que me ayudó a definir el concepto y dibujar el rostro 🙂

Aún recuerdo cómo dibujar

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

La página de Cursos

Cuando alguien entra a la página de cursos, pretendo que no se sienta abrumado por una serie de títulos o enlaces a diferentes cursos, lo que haré en cambio, será presentar a Víctor y su historia para ayudar a comprender el rol que cad uno de los cursos cumple.

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

Página de cursos Título

Qué aburrido sería que el título fuese simplemente “cursos“, creo que la pregunta “¿Qué quieres aprender?” es mucho más inclusiva ya que invita al lector a formar parte de la experiencia, en lugar de ser un simple espectador del listado de cursos.

Categorías

Hoy día mis cursos están absolutamente desordenados y no están categorizados. Creo que la idea de ordenar los cursos en grupos es muy buena para facilitar la comprensión del rol que cada uno de ellos cumple. Para potenciar esto, diseñé algunos íconos, que permiten graficar visualmente esta nueva organización.

La historia

Ya te he contado antes de qué se trata esto, así que quiero centrarme ahora en un aspecto técnico: Como puedes notar, el texto ocupa un espacio considerablemente más alto del  que ocupa la ilustración, así que usaré el plugin Sticky de jQuery para que la ilustración se mueva con el flujo del scroll y quede fija en la parte superior mientras el texto sigue moviéndose.

El listado de cursos

Cuando un visitante haga click sobre una de las categorías de cursos, lo que verá va a ser el listado de cursos en esa categoría y, pretendo que cada curso lleve una imagen, el título y una descripción que permita saber rápidamente de qué se trata. Toda vez que se haga click en “Más info y acceso“, la persona llegará directamente al landing page del curso.

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

Página de cursos

Lo siguiente

Bien, creo que ya ha sido suficiente diseño por ahora, ya tengo los conceptos bien claros sobre lo que quiero conseguir y cual es la línea gráfica que debo seguir, así que lo que haré ahora es lanzarme directamente sobre el código para comenzar a maquetar y desarrollar el tema WordPress necesario para que mi sitio se vea así como lo indican las imágenes de este artículo y los anteriores.

Te iré contando a medida que avance con esta labor 🙂

__
Espero que esta serie de artículos te esté resultando de utilidad y si piensas que hay algo que debo agregar o quitar, a nivel de diseño, estrategia o concepto, ya sabes que el área de comentarios está abierta para ti.

Un abrazo,
@FranciscoAMK

También te podría interesar:

Usar plantillas de página en custom post types de WordPress

Sigo avanzando en el rediseño de mi sitio y me he encontrado con un nuevo desafío: la necesidad de usar plantillas de página en un custom post type. A primera vista parece algo sencillo, pero me sorprendí al notar que WordPress no soporta esta característica de manera nativa. Déjame darte algo de contexto. ¿Qué es […]

Seguir leyendo...

Mi fórmula secreta para ser un mejor freelance

La mayor parte de mi tiempo la dedico a diseñar y desarrollar sitios web para clientes directos a través de APK Estudio, empresa que creamos junto a mi esposa hace algunos años, sin embargo, ocasionalmente (aunque cada vez menos) desarrollo la labor de freelance para algunas agencias más grandes. A veces me contratan solamente para diseñar, […]

Seguir leyendo...

No tengo miedo a crear mi propia competencia

Muchas veces me han preguntado si no tengo miedo a crear mi propia competencia al estar publicando material educativo en mi sitio a modo de videos, tutoriales, artículos y cursos… La verdad es que no tengo miedo en absoluto y en este video te cuento el por qué 🙂 Si te gusta el show, suscríbete […]

Seguir leyendo...

Hay una opinión

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.