Mockup

Home  /  Ecommerce  /  Mockup

Aquí te dejamos algunos consejos/reflexiones sobre cómo hacer una buena maqueta o Mockup antes de crear un sitio web.

En concreto, hoy vamos a ver el proceso para crear una buena maqueta o mockup de una web porque es algo que, en estos últimos días, ocupa un gran porcentaje del tiempo de un FreeLancer. Y, bueno, ya sabes, la mejor forma de integrar tu blog en tú vida personal y profesional, es hablando de lo que haces.

¿Qué es un Mockup?

En términos generales, 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 cuál 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.

  • 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, tú 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 cuál 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 (lo más que puedas) 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.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” Acabar el Mockup te permite delegar cada tarea en paralelo a cada profesional, quien podrá acabar su labor sin depender del otro.

Lo que nunca debes hacer

Nunca, hagas que tu web se adapte a la plantilla en vez de la plantilla a tu web.

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 ponen “competencias”, tu escribes “carpintero al 100 %, yesero al 80%”. No, esto no es así.

Empieza a construir la web sin pensar en la plantilla. Piensa en los objetivos de mi cliente.

Cuando vayas a diseñar una web, piensa siempre en los objetivos

Pasos en la creación de un Mockup

Esto 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. Hay dedicar un mínimo de 3 a 5 horas reales en la construcción del Mockup.

Ejemplo de cómo hacerlo

  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 tú sabes de webs pero quizás se te escape algo de creatividad o diseño.
  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”. 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.
  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. Ésta suele ser un resumen de las secciones anteriores y puedes reutilizar bloques importantes de cada página en la principal, céntrate en los objetivos generales del sitio web.

Fuente: vicampuzano.com

Comments are closed.