Creación Web Marketing Online

Cómo sacarte un buen Mockup

Cómo hacer un Mockup

Hoy traigo algunos consejos/reflexiones sobre cómo hacer una buena maqueta antes de crear un sitio web. ¿Cómo lo haces tu?

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.

Hacer un Mockup de una web puede garantizar la satisfacción de tu cliente. - piopíalo    

Powered by Vcgs-Toolbox

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.

Nunca, jamás, hagas que tu web se adapte a la plantilla en vez de la plantilla a tu web - piopíalo    . ¿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.

Cuando vayas a diseñar una web, piensa siempre en los objetivos. - piopíalo    

Powered by Vcgs-Toolbox

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?

Acerca del autor

Víctor Campuzano

Growth Hacker no soy, pero lo vivo. De mi blog no vivo, pero aquí si que soy como soy. Marketing Digital, Creatividad y Blogging con pasión y desenfado. Alumno del Postgrado de Growth Hacking por IEBS.

Ahora es tu momento

*

19 comentarios

Uso de cookies

Esta web utiliza cookies propias y de terceros, como Google Analytics, para optimizar su navegación y realizar tareas de análisis y las pertenecientes a WordPress. Advierto que si continuas navegando, aceptas su uso. Puede cambiar la configuración, desactivarlas u obtener más información.

ACEPTAR