En 2014, fundé la agencia MOTE junto a Rembrant Van der Mijnsbrugge. Especializándonos en comercio electrónico, colaboramos con nuestros clientes en cada etapa de su trayectoria, desde la estrategia de mercado inicial y la identidad de marca hasta el diseño, desarrollo y marketing, siempre con un enfoque en el crecimiento sostenible. A lo largo de mis 15 años de experiencia en diseño web para comercio electrónico, he moldeado las estrategias de clientes que van desde marcas independientes hasta empresas Fortune 500. Estoy encantado de compartir los consejos y recomendaciones sobre diseño web que he reunido a lo largo de mi carrera.
—Sara Mote
Editar un tema de sitio web predefinido es algo sencillo. Si quieres ver cómo quedará tu sitio con cuatro productos por fila en lugar de dos, puedes previsualizarlo en cuestión de segundos.
Sin embargo, con un sitio web completamente personalizado, realizar cambios en el código puede ser costoso y requerir mucho tiempo. Por eso, los diseñadores crean mockups de sitios web antes de pasar a la etapa de desarrollo.
En este artículo, aprenderás más sobre los mockups de sitios web, así como las herramientas y mejores prácticas para crear tu propio mockup.
¿Qué es un mockup de sitio web?
Un mockup de sitio web es una vista previa visual estática de cómo se verá un sitio. Ofrece una idea del diseño y la disposición final del sitio, pero aún no es funcional con el código de backend que haría que el sitio fuera interactivo y estuviera listo para publicarse.
Los diseñadores web utilizan mockups para explorar diferentes opciones de diseño antes de pasar el diseño a desarrollo para su codificación. Cuando un sitio web se ha construido en código, es más difícil realizar ajustes, por lo que un mockup de alta fidelidad (uno que esté lo más cerca posible del producto final) puede ahorrar tiempo y dinero.
Mockups de sitios web vs. wireframes vs. prototipos
Los wireframes, mockups y prototipos son diferentes formas de visualizar un diseño. Aquí verás cuándo usar cada uno:
Wireframes
Los wireframes son diagramas que muestran la disposición y estructura de un sitio web sin elementos de diseño. Puedes pensar en un wireframe como un plano de tu diseño web.
Un wireframe puede ser un simple boceto en papel, por lo que es una herramienta útil para quienes no son diseñadores y quieren comunicar su idea. También pueden ayudar a los diseñadores que trabajan en sitios con elementos nuevos, ya que los wireframes permiten decidir sobre el esquema básico y la funcionalidad del sitio antes de quedar atrapado en el diseño y el código.
Incluso si vas a crear un sitio de comercio electrónico más sencillo, un wireframe puede ayudarte a solidificar el embudo de ventas y la experiencia del cliente que quieres crear. Como los wireframes son tan simples, son una manera excelente de asegurar que todos estén de acuerdo antes de empezar con el diseño.
Mockups
Los mockups son representaciones estáticas detalladas que ilustran la disposición del sitio web con decisiones de marca ya aplicadas. A diferencia de los wireframes, los mockups incluyen dirección artística, tipografía y el uso del color.
Los mockups ofrecen una vista previa realista de cómo se verá el sitio web final de cara al usuario, pero aún no son interactivos. Son esenciales para crear un sitio web personalizado porque permiten realizar cambios en el diseño antes de que comience la codificación.
Prototipos
Los prototipos son la opción de mayor fidelidad para previsualizar un sitio web. Son modelos interactivos que utilizan enlaces de vista previa para simular la experiencia del usuario y acercar el diseño del sitio web a la realidad.
Para proyectos que requieren probar diferentes elementos interactivos antes del desarrollo, un prototipo puede ser muy beneficioso. Para proyectos más simples, puedes pasar directamente del mockup al desarrollo.
Cómo crear un mockup de sitio web
- Decide cómo presentar la marca
- Crea una narrativa lineal
- Reúne elementos de marca
- Diseña plantillas para cada tipo de página
- Añade marcadores significativos
- Obtén comentarios
Tanto si estás diseñando algo tú mismo o trabajando con un diseñador, los elementos básicos a tener en cuenta al avanzar en el proceso de diseño son los mismos.
1. Decide cómo presentar la marca
El primer paso en el diseño de un sitio web es dar un paso atrás y pensar en cómo presentar la marca. Si trabajas con un diseñador, puedes iniciar el proceso con un resumen creativo. Esto les ayudará a conocer tu marca, audiencia e inspiraciones.
Es natural querer enfocarse en características específicas, pero antes de dejarte llevar por detalles técnicos, intenta ampliar tu perspectiva: piensa en la historia general que quieres contar con la disposición de tu sitio web.
Por ejemplo, podrías empezar con el objetivo de animar a los usuarios a pasar más tiempo en tu página de inicio. La página de inicio suele ser el primer punto de contacto para una marca. También tiende a tener las tasas de rebote más altas.
Pero en lugar de comenzar desde una perspectiva de características o optimización de conversiones, pregúntate: “¿Cómo se puede establecer una conexión más profunda con los visitantes de la página de inicio?”
La solución podría ser tan simple como escribir una presentación sobre tu marca por encima de la línea de pliegue. Si tus valores de marca están en el corazón de tu negocio, muéstralos directamente en la página de inicio. Por ejemplo, mostrar valores como la sostenibilidad o la inclusividad podría llamar la atención de tu audiencia objetivo, manteniéndola en tu sitio más tiempo.
2. Crea una narrativa lineal
Tu sitio web debe seguir una narrativa lineal, lo que significa que cada sección y página fluye lógicamente y se construye sobre la siguiente. Una buena narrativa asegura que cuando alguien llegue a tu página de inicio, se hará una idea clara de tu marca y tus ofertas.
A medida que avancen por el sitio, debes ofrecer más detalles y características que les ayuden a encontrar los productos adecuados para ellos.
En un sitio web de comercio electrónico tradicional, tu narrativa lineal es el embudo de ventas: un usuario llega a la página de inicio, que presenta tu marca.
Desde allí, encuentran tus páginas de productos, que ofrecen más detalles que tu página de inicio, resaltando la información más importante primero, con información secundaria y terciaria. Entonces, el usuario seleccionará productos, irá a la página del carrito y, finalmente, completará el proceso de pago.
3. Reúne elementos de marca
Cuando hayas pensado en cómo vas a crear la narrativa del sitio web, reúne los elementos de marca que utilizarás en el diseño.
Si tienes directrices de marca, puedes compartirlas con tu diseñador (o referenciarlas tú mismo). Si no, deberás decidir sobre elementos de marca como la tipografía, los gráficos y los colores antes de crear un mockup.
La disposición de la cuadrícula del sitio web se basará en las alturas de línea y el espaciado de letras de tus fuentes, por lo que es importante decidir sobre esos elementos antes de dibujar tu mockup. Cuando tengas una disposición de cuadrícula, puedes crear mockups utilizando tus activos de diseño y el resumen creativo.
4. Diseña plantillas para cada tipo de página
Cuando diseñas un mockup de sitio web, no crees uno para cada página individual. En lugar de ello, crea plantillas de mockup para diferentes tipos de páginas, como una plantilla de página de colección y otra de página de producto.
A medida que diseñes cada una de las plantillas, da un paso atrás y pregúntate: “¿Qué hará que la experiencia sea mejor?” Por ejemplo, si tienes un surtido de seis productos o menos, tu página de colección debería mostrar cada uno de esos productos y añadir un poco de contexto antes de entrar en las páginas de producto detalladas.
Pero si tienes un inventario de docenas, cientos o incluso miles de productos, deberías diseñar un sitio web con un filtrado de productos más avanzado. Eso ayudará a asegurar que los clientes que lleguen a una página de colección puedan reducir los resultados a los productos más relevantes para ellos.
5. Añade marcadores significativos
Dado que un mockup es una vista previa de cómo se verá tu sitio web, es posible que aún estés generando contenido para el sitio mientras se desarrolla el mockup. Si ese es el caso, puedes utilizar un marcador significativo.
Aunque las imágenes y textos utilizados en el mockup sean temporales, deberían estar lo más cerca posible del objetivo final. De esa manera, cuando previsualices los mockups, obtendrás una idea de la dirección prevista para el sitio. Por ejemplo, en lugar de usar el típico texto de marcador de posición “lorem ipsum”, puedes redactar un texto de muestra que coincida con la marca.
6. Obtén comentarios
Cuando tu mockup esté listo, es hora de presentarlo a los interesados y obtener comentarios. La ventaja principal de crear un mockup de sitio web es que puedes hacer revisiones sin cambiar el código, así que aprovecha esta oportunidad para asegurarte de que todos los interesados estén seguros antes de empezar a producir el mockup.
Herramientas para mockups de sitios web
Sketch
Sketch es una aplicación de diseño web que permite una iteración rápida. Creada en 2010 específicamente para diseño de IU, Sketch puede crear mockups y prototipos interactivos. Una suscripción estándar comienza en $10 al mes (unos 9 €).
Figma
Figma es una herramienta de diseño que permite la colaboración en tiempo real. Si tienes varias personas trabajando en un mockup al mismo tiempo, Figma podría ser una buena opción. Puedes registrarte en Figma de forma gratuita, pero si quieres usar todas sus funciones, los planes comienzan a partir de 16 € al mes.
Adobe XD
A los diseñadores que trabajan con toda la suite de diseño de Adobe (aplicaciones como Photoshop, Illustrator, InDesign y Lightroom) les encanta Adobe XD por su integración fluida con otras aplicaciones de Adobe. Adobe ya no vende XD como un producto independiente, pero puedes acceder a él a través de una suscripción a Adobe Creative Cloud por 36,29 € al mes.
Preguntas frecuentes sobre mockup de sitio web
¿Cómo puedo crear un mockup de sitio web gratis?
Para crear un mockup de sitio web, necesitas una herramienta de diseño, que suele tener un coste. Afortunadamente, muchas herramientas de diseño, como Figma, ofrecen un período de prueba gratuito o una versión gratuita con menos funciones que puedes usar como punto de partida. Canva es otra herramienta gratuita que puedes utilizar para hacer un mockup de sitio web sin coste.
¿Cuándo debería crear un mockup de sitio web?
Un mockup de sitio web es útil al construir un sitio web completamente personalizado porque te permite hacerte una idea de cómo se verá y se sentirá el sitio antes de pasar al desarrollo. Te proporciona algo que puedes compartir, referenciar e iterar mientras diseñas. Dependiendo del proyecto, podrías crear un mockup de sitio web después de esbozar un wireframe, o podrías omitir el wireframe y pasar directamente al mockup después de determinar los requisitos del proyecto.
¿Los mockups de sitio web son necesarios?
Dependiendo del proyecto específico, puede que no necesites crear mockups de sitios web. Por ejemplo, si creas tu sitio utilizando un tema de Shopify, puedes omitir el mockup y usar la plantilla como prototipo interactivo. Dicho esto, muchos de los principios para crear un buen mockup aún se aplican a ese enfoque.
