Wireframes
El objetivo de los wireframes es el de mostrar qué elementos se incluyen en una página web y donde. Como se explicó al principio, los wireframes prescinden de decidir colores, texturas, fuentes y otros elementos que se pueden definir después, para que en este paso nos podamos concentrar en el qué y en el dónde.
Contenido => Wireframes
Los elementos que vamos a incluir son los siguientes:
- Sistema de pedidos
- Menú con fotos, descripción y precios
- Mapa interactivo
- Links a Waze
- Sobre Nosotros
- Número de teléfono
- Sección de Descuentos y Ofertas
- Visibilidad del Chef
- Imágenes
- Links a perfiles sociales
- Título y texto con keywords
- Logo
Para hacer un wireframe hay muchas opciones. Se pueden usar software de diseño y otras aplicaciones de edición de imágenes. Las siguientes son algunos sitios web para hacer wireframes que tienen opciones gratuitas. Para este e-Book usamos la primera.
Wireframe de la página principal
Este es el wireframe de la página principal y es el resultado del recorrido que hicimos anteriormente desde el objetivo hasta el contenido. Con este wireframe completamos el recorrido desde el objetivo hasta al wireframe.
Es una opción que toma en cuenta los objetivos y todos los puntos del recorrido que hicimos hasta ahora.. No es la única opción, es solo una opción de tantas y está sujeta a gustos, preferencias y debates pero definitivamente cumple con lo que queríamos es decir es una estructura qué nos permite alcanzar los objetivos, toma en cuenta los objetivos del plan de marketing.
A continuación analizamos cómo este wireframe cumple con cada punto.
Sistema de pedidos
Le damos la mayor visibilidad y prominencia posible al contenido directamente relacionado con la conversión principal. En el centro de la página y above the fold mostramos una breve descripción y un evidente botón que lleva al menú y después al sistema de pedidos.
Menú con fotos, descripción y precios
Los mismos botones que se muestran en la imagen anterior llevan al menú que incluye fotos, descripciones y precios.
Mapa interactivo y Links a Waze
El botón ubicaciones lleva a una página que muestra un mapa interactivo y links a waze para cada una de las ubicaciones de los restaurantes físicos
Sobre Nosotros
El botón Nosotros del menú lleva a una página con todo el contenido necesario para esta sección.
Número de teléfono
Incluimos un número de teléfono visible en la esquina superior izquierda y en el menú hay un link a una página con todos los datos de contacto, incluyendo el número de teléfono.
Sección de Descuentos y Ofertas
Incluimos dos secciones con descuento y ofertas. De ser necesario pueden agregarse más y las imágenes eventualmente pueden agrandarse.
Visibilidad del Chef
Agregamos una sección dedicada a la biografía del chef con una foto
Imágenes
Hay una foto grande y prominente que eventualmente puede ser un slider con varias fotos cambiando automáticamente. También agregamos fotos de los platos que hay en oferta.
Links a perfiles sociales
Se incluyeron tres íconos con links a diferentes redes sociales en el footer. Dependiendo de las que se necesitan se pueden agregar o quitar.
Título y texto con keywords
Encima de la foto principal se incluye un texto y un título que se pueden usar para usar para optimización del sitio para los buscadores.
Logo
Se incluyó el logo en la esquina superior izquierda.
