DISEÑO WEB N3

Diseño y construcción del wireframe de una Landing Page

El wireframe es un elemento fundamental en el proceso de diseño web. Se trata de una representación visual esquemática de una página web que muestra la estructura y la distribución de los elementos de la interfaz, pero no su apariencia visual.
i

La importancia del Wireframe

La creación de un wireframe es un paso esencial en la planificación y el diseño de un sitio web. Al crear un wireframe, el diseñador web puede determinar cómo se organizarán los elementos de la página, cómo se dispondrá el contenido, qué elementos serán prioritarios y cómo se presentarán los distintos tipos de información.

Colaboración en equipo

Además de ayudar a planificar la disposición de los elementos de la interfaz, los wireframes también son útiles para facilitar la comunicación entre los miembros del equipo de diseño. Al presentar un wireframe a los clientes, estos pueden comprender de manera clara y concisa el diseño propuesto y ofrecer comentarios útiles antes de que el trabajo de diseño se haya realizado.

Uso de Software

Los wireframes se pueden crear utilizando una variedad de herramientas, incluyendo papel y lápiz, programas de diseño vectorial como Illustrator o Sketch, o aplicaciones especializadas en diseño de wireframes como Balsamiq o Figma. Independientemente de la herramienta utilizada, los wireframes son una herramienta esencial para el diseño web y deben ser una parte integral del proceso de diseño de cualquier sitio web.

Tipos de wireframes: de baja fidelidad, de alta fidelidad, interactivos, etc.

Analicis de Wireframes

Wireframes de baja fidelidad

Estos wireframes son rápidos de crear y se utilizan para representar la estructura básica y la disposición de los elementos de la página. Por lo general, se crean utilizando lápiz y papel o herramientas de dibujo simples en línea. Son ideales para la fase inicial de planificación y diseño, ya que permiten a los diseñadores experimentar con diferentes diseños sin preocuparse demasiado por los detalles visuales.

Wireframes de alta fidelidad
Estos wireframes son más detallados y representan una versión más precisa de la interfaz final. Utilizan elementos visuales más elaborados y pueden incluir detalles como textos de muestra y gráficos simples. Por lo general, se crean con herramientas de diseño gráfico como Illustrator o Sketch. Son útiles para la fase de diseño avanzado y para demostrar con mayor precisión la apariencia y el funcionamiento de la interfaz.
Wireframes con contenido real
Estos wireframes son más detallados y representan una versión más precisa de la interfaz final. Utilizan elementos visuales más elaborados y pueden incluir detalles como textos de muestra y gráficos simples. Por lo general, se crean con herramientas de diseño gráfico como Illustrator o Sketch. Son útiles para la fase de diseño avanzado y para demostrar con mayor precisión la apariencia y el funcionamiento de la interfaz.

Wireframes interactivos

Estos wireframes se centran en la funcionalidad de la interfaz, permitiendo a los usuarios interactuar con los elementos de la página. Pueden incluir animaciones simples y permiten a los diseñadores probar el flujo de la navegación y la experiencia del usuario en general. Son útiles para la fase de diseño de interacción avanzado y se crean con herramientas especializadas en diseño de interacción como Figma, Sketch, o Adobe XD.

Wireframes anotados

Estos wireframes son similares a los de baja fidelidad o alta fidelidad, pero incluyen anotaciones que explican los elementos de la interfaz y su funcionamiento. Son ideales para la comunicación con los desarrolladores y el equipo de proyecto, ya que proporcionan detalles adicionales sobre el diseño y la funcionalidad.

El Wireframe como un aliado del Diseño

En general, los diferentes tipos de wireframes tienen como objetivo ayudar a los diseñadores a planificar y diseñar una interfaz de usuario eficaz y eficiente. Al elegir el tipo de wireframe adecuado para el proyecto y la fase de diseño, los diseñadores pueden mejorar su proceso de diseño y garantizar un resultado final exitoso.

Características de una landing page

Encabezado

El encabezado debe ser claro y conciso, y destacar el valor que ofrece el producto o servicio que se está promocionando. Debe llamar la atención del visitante y hacer que quiera seguir leyendo.

Imágenes y videos

El uso de imágenes y videos relevantes puede ayudar a capturar la atención del visitante y demostrar el valor del producto o servicio. Es importante elegir imágenes y videos de alta calidad y que sean coherentes con la marca.

Llamados a la acción

los llamados a la acción deben ser claros y prominentes, y deben estar diseñados para guiar al visitante a través del proceso de conversión. Deben estar ubicados en lugares estratégicos de la página y ser coherentes con la oferta.
|

Testimonios y reseñas

Las reseñas y testimonios de clientes satisfechos pueden ayudar a generar confianza y credibilidad en la marca y el producto o servicio que se está promocionando.

Formulario de contacto o registro

El formulario de contacto o registro debe ser fácil de usar y estar ubicado en un lugar visible de la página. Debe pedir solo la información necesaria para completar la conversión y no ser demasiado extenso.

Diseño y navegación

El diseño debe ser coherente con la marca y la navegación debe ser fácil e intuitiva. La página debe cargar rápidamente y estar optimizada para dispositivos móviles.

Landing page efectiva:

Recuerda que la estructura y el contenido de la landing page deben estar diseñados para lograr una conversión efectiva, ya sea una compra, un registro, una descarga, etc. 

Evaluacion  15%

Entrega de plantilla

De acuerdo lo aprendido, se tendrá que enviar la plantilla creada en Divi, exportada del THEME BUILDER, esta plantilla debe contener el encabezado global y el pie de pagina global. Guardada con su nombre completo y la sección. A continuación dejo un video de como exportar por si te lo perdiste!

Landing Page de alta fidelidad

Enviar landing Page, en formato Wireframe de alta fidelidad, usando como referencia los módulos nativos de Divi, el Wireframe debe ser en Formato AI, con su nombre y sección, tendrá que contener piezas graficas originales y el uso del criterio para que sea efectiva y coherente.

Criterios Descripción Puntos
Conocimiento Se evidencia un conocimiento claro y preciso del uso de Divi y su Theme Builder en la creación de plantillas. 10
Encabezado y pie de página La plantilla entregada contiene un encabezado global y un pie de página global coherentes y efectivos. 10
Calidad La plantilla es de alta calidad, con un diseño atractivo, coherente y fácil de usar. 5

Criterios Descripción Puntos
Conocimiento Se evidencia un conocimiento claro y preciso del uso de Divi y sus módulos nativos en la creación de una landing page. 10
Diseño El wireframe de alta fidelidad es atractivo, coherente y efectivo, con una clara estructura de contenido y una jerarquía visual adecuada. 15
Piezas gráficas originales Se han creado piezas gráficas originales que complementan y enriquecen el diseño de la landing page. 10
Uso del criterio La landing page es efectiva y coherente, y se evidencia el uso del criterio en la toma de decisiones de diseño. 5

El correo debe ser enviado a sebastiangonzalez@live.cl   poner en asunto: Tarea acompañado de su nombre y sección.

debe contener las indicaciones de la web, como por ejemplo: la finalidad del proyecto que están comenzando