Cómo sacarte un buen Mockup

por | 16 Sep 2014 | Herramientas Growth | 16 Comentarios

Dicen que la forma más divertida es colocar los 5 dedos alrededor de la nariz y decir: “¡sal, estas rodeado!”. Pero nada más lejos de la realidad. Si quieres conseguirlo, lo mejor es que combines años de experiencia con nuevas formas más discretas y creativas. Para esto los niños son lo más. Pero, claro, ¿quien puede ser más creativo que un niño?

Jajajajajaja. Ya, no hace falta que me lo digas. Ya sabes cómo soy. Y por eso mismo sabes que este post no va sobre “las velas del Dicaprio to congelao” sino que tiene que ver mucho sobre el Marketing Digital. En concreto, hoy vamos a ver el proceso para crear una buena maqueta de una web porque es algo que, en estos últimos días, ocupa un gran porcentaje de mi tiempo. Y, bueno, ya sabes, la mejor forma de integrar tu blog en tu vida persoprofesional es hablando de lo que haces.

¿Te apetece?

¿Qué es un Mockup?

En términos generales, un Mockup es lo mismo que una maqueta o un prototipo, según si simplemente es un dibujo del resultado final (maqueta) o una versión con funcionalidad reducida (prototipo) que permita intuir cual será su comportamiento o funciones reales.

En lo que al diseño y desarrollo web se refiere y más aún cuando se trata de un trabajo para un cliente, un mockup es el primer paso para la conclusión satisfactoria de un proyecto web para un cliente. ¿Ein? Pues si:

  • Permite al cliente visualizar el resultado final. Los que estamos inmersos en este mundo hemos ido adquiriendo la capacidad de visualizar una web (o gran parte) sin necesidad de tenerla delante. Si te cuento algo así como “aquí irán los botones sociales para compartir”, eres capaz de verlos a todo color. ¿Verdad? Y si te digo que esto es un slider, tu casi ya tienes las fotos seleccionadas. Sin embargo, por mi experiencia, la mayoría de los clientes no tienen esta capacidad y tienen la sensación de estar haciendo un acto de fe cuando cierran un trato.
  • Deja claro el alcance total del proyecto. Puesto que se hacen maquetas de casi todas las páginas (o al menos de cada una que sea distinta de las demás), el conjunto deja claro cual es el alcance del proyecto y evita suposiciones que luego pueden derivar en situaciones incómodas (y a veces costosas) tanto para el cliente como para nosotros. En este caso, si el cliente detecta carencias, estamos en un punto en que se puede rectificar el presupuesto sin perder demasiado.
  • Agiliza (un montón) el proceso de desarrollo. Es increíble el poder que te otorga la sensación de progresión, de estar avanzando. Tengo comprobado que se consiguen mejores resultados cuando tienes una guía de todo el proceso y vas tachando pequeñas partes de ésta, una tras otra. En este caso, el Mockup puede servirte como una perfecta guía.
  • Ayuda en la delegación de tareas. Como responsable de Marketing Online, mi labor (además de comprar las napolitanas para el equipo cada día), es preocuparme de que la web en su conjunto esté diseñada para cumplir los objetivos del cliente. Por eso, cuando construyo el mockup, me preocupo de que la estructura esté diseñada para conducir al visitante hacia esos objetivos. Luego, voy añadiendo anotaciones para el diseñador, programador y redactor, para que conviertan ese lienzo “bocetado” (no, no es cuando un andaluz te arrea con los 5 dedos, ¿verdad Antonio?) en un cuadro acabado. Acabar el Mockup te permite delegar cada tarea en paralelo a cada profesional, quien podrá acabar su labor sin depender del otro. Así, aceleras el proceso.

Bueno, igual hay más razones, pero no quiero aburrirte. Y tampoco que se te indigesten chistes tan malos como el de Antonio. Ya te vale Antonio. En fin.

[piopialo vcboxed=»1″]Hacer un Mockup de una web puede garantizar la satisfacción de tu cliente.[/piopialo]

Lo que nunca debes hacer

He querido hacer este pequeño punto porque es algo que, entonando el mea culpa, quizás todos hayamos hecho (o estemos haciendo, aunque yo ya no) en alguna ocasión.

[piopialo]Nunca, jamás, hagas que tu web se adapte a la plantilla en vez de la plantilla a tu web[/piopialo]. ¿Me sigues por dónde voy? ¿Verdad que te suena?

Una forma muy cómoda y barata de realizar una web es escoger una plantilla que te parezca atractiva y adaptar el contenido a esa plantilla. Donde el plantillador pone fotos, tu pones fotos. Donde el plantillador pone “equipo” con fotos de gente que parecen los Cullen, pos tu pones las fotos de tus empleados (o te los inventas). Donde ponen “competencias”, pos pones “azulejero al 100 %, yesero al 80%”. No, esto no es así.

Yo antes utilizaba plantillas pero ahora, tras llevarme más de un desengaño, he preferido optar por frameworks o plantillas genéricas que te permiten construir una web “como te de la gana” de una forma rápida y económica.

Pero, sobre todo, empiezo a construir la web sin pensar en la plantilla. Pienso en los objetivos de mi cliente.

Por cierto, el Framework o super tema que ahora mismo estoy utilizando es Divi, de Elegant Themes. Su constructor visual es una pasada y es rápido y estable.

[piopialo vcboxed=»1″]Cuando vayas a diseñar una web, piensa siempre en los objetivos.[/piopialo]

Pasos en la creación de un Mockup

Bueno, pues ya vamos terminando. El caso es que, finalmente, lo que debe quedar claro es que, en el proceso de creación de un Website, el Mockup o maqueta es lo que deberás hacer justo después de aprobar el presupuesto (o antes incluso, según tus recursos o las exigencias del cliente).

Pero, para hacerlo, no basta con ponerse directamente a trazar líneas. Hay que pensar. De hecho, yo suelo dedicar un mínimo de 3 a 5 horas reales en la construcción del Mockup.

¿Quieres saber cómo lo hago?

  1. Definir claramente los objetivos. Los objetivos de tu cliente. ¿Qué es lo que quieres conseguir con la web? ¿Cuál se supone que sería la visita perfecta y qué acciones o pasos conllevaría?
  2. Investigar la competencia y negocios similares. Es bueno echar un vistazo a tu “ecosistema digital” para familiarizarte y coger ideas porque tu sabes de webs pero quizás se te escape algo de albañilería.
  3. Crear una estructura completa del sitio web. En base a los objetivos y el contenido que querrás mostrar, crea una estructura de la web donde queden claras las secciones y páginas.
  4. Concretar las partes comunes. Define qué llevarán las partes comunes de la web, que pueden ser la cabecera, el pie de página e incluso la barra lateral.
  5. Identificar las páginas “bocetables” (¿otra vez Antonio?). Identifica, en base a la estructura, qué modelos de página deberías crear. No te repitas, una página de producto es una, no los 50 productos. (Vaaaale, sobraba la aclaración, lo se).
  6. Construir la maqueta del contenido de cada página. Construye la maqueta de cada página, concretando los objetivos específicos de esa página concreta, centrando la estructura en ellos y el proceso lógico que se debería seguir para conseguirlos. Por ejemplo, no comprarías algo sin saber qué es y cuánto cuesta, ¿verdad?. Por tanto, debes responder primero a las preguntas antes de ofrecer la posibilidad de comprar.
  7. Construir la página principal. Siempre dejo la página principal porque ésta suele ser un resumen de las secciones anteriores y suelo reutilizar bloques. En la principal, céntrate en los objetivos generales del sitio web.

¿Te das cuenta? Es más una labor estratégica que de contenidos, SEO, Diseño o Programación. Pero, eso si, tener una visión global o un mínimo de nociones acerca de todas las áreas te ayudará en la construcción de la maqueta.

Para terminar, quiero dejarte un ejemplo de una web muy sencilla que realicé hace muy poquito. En la imagen puedes ver la maqueta y, si quieres ver el resultado final, puedes acceder a la web reformasjp.es.

Mockup ReformasJP

¿Qué opinas? ¿Concias esta técnica? ¿La aplicas en tu día a día? ¿La aplicas en otras áreas? ¿Te acuerdas de las “bocetadas” de Marshall a Barnie?

5/5 - (1 voto)

16 Comentarios

  1. Bor

    Muy muy MUY buen post Víctor.

    Hace no mucho tuve un training en usabilidad web y fue la primera vez que trabajé con mockups. Desde entonces las amo. Estaba más enfocado a desarrollo de aplicaciones, pero al final la filosofía es la misma.

    Lo dicho, maravilloso post. Se va derechito a mi archivo de recursos útiles 😉

    Responder
    • Victor Campuzano Gallego

      Hola Bor!!!

      Muchas gracias por el comentario, me hizo ilusión tu reacción en Twitter cuando lo publiqué.

      Saludos! 🙂

      Responder
  2. Alejandro

    Sos un groso victor… y punto!

    Responder
    • Victor Campuzano Gallego

      Jajajajaja. Muchas gracias Alejandro! 🙂

      He tenido que buscar qué significaba la expresión. Para los que no lo sepan, es en Argentino como decir «eres muy grande» en Español.

      Así que muchas muchas gracias! 🙂

      Responder
  3. #Jerby

    A nuestro modestísimo blog de Blogramé, lo hemos rodeado de comentarios por todos los lados; banner incluido.

    Creemos que de esa manera, todo el mundo se dará cuenta de que somos un Taller de Comentaristas. Si alguien sigue teniendo dudas, le podemos hacer una demostración gratuita.

    Responder
  4. Andres Felipe

    Que excelente articulo, esta muy buena la pagina de Juan Pedro, que tema puedo utilizar para hacer una pagina parecida?

    Responder
  5. Stiven López

    Valla Víctor, eres un mosntruo. Te escribo desde El Cerrito, Valle del Cauca, Colombia, hace mucho tiempo quería escribirte y agradecerte por tus contenidos que han sido de mucha ayuda en este andar del marketing online y el diseño web para nuestra agencia que esta en crecimeinto.

    En lo personal leo todos y cada uno de los mails que llegan a mi correo. Me parece fabuloso que comaprtas con los usuarios de la nube tus conocimientos.

    Por cierto, es la primer vez que te escribo.

    Felicidades y que nos sigas alimentando con vuestras ideas.

    Responder
    • Victor Campuzano Gallego

      Hola Stiven!!

      Pues bienvenido y millones de gracias! 🙂 Espero que este sea el primero de muchos comentarios pues, aquí mas que en ningún sitio, los comentarios son muy agradecidos y todo el mundo es bien recibido.

      Un abrazo para Colombia! 🙂

      Responder
  6. Len Moreno Penna

    Hola, que herramienta para hacer mockups me recomiendas? También quiero preguntar si es bueno hacer el mockup y después el wireframe? Gracias.

    Responder
    • Victor Campuzano Gallego

      Hola Len!

      La verdad es que eso depende. Crear un wireframe sirve para hacer una construcción más sencilla del Layout. En proyectos llevados a cabo en equipo, es muy bueno porque uno crea la estructura en base a sus conocimientos, otro redacta el texto y luego pasan el wireframe al diseñador para que lo ponga bonito. Finalmente se puede crear el Mockup.

      En proyectos más pequeños, el wireframe es buena opción para pedir aprobación previa al cliente. Le haces el wire, te lo aprueba. Le aplicas diseño, te lo aprueba. Luego ya no necesitas el mockup.

      Para hacer mockups hay muchas herramientas, como https://moqups.com/. Recientemente he descubierto una, Pinegrow, que me ha gustado mucho.

      Saludos!

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.