Actividad 7: Desarrolla una landing page a partir de un prototipo

Descripción de la actividad

Desarrolla una landing page a partir del prototipo a alta resolución que encontrarás adjunto (prototipo-landing.pdf). Estas indicaciones son:

• Las fuentes y código de colores a utilizar
• Qué información se desplegará en cada sección de la página
• Qué distribución de los contenidos (columnas) desea para cada pantalla

Tareas a realizar

• Realizar el prototipo (wireframe) en Figma, para pantalla pequeña y pantalla grande – 1h
• Desarrollo de estructura en Visual Code – 5h
• Desarrollo de estilos en Visual Code  – 10h
• Publicar regularmente los archivos en el servidor – 10min
• Recibir feedback del cliente y realizar cambios. Conceptos a tener en cuenta:
  1. Legibilidad: Jerarquía tipográfica: Especificar la importancia de cada párrafo: h1, h2, h3, p, li. ¿Disponemos de ellos? ¿Puedo localizar correctamente cada bloque de contenido?
  2. Legibilidad: Tratamiento del color ¿Hay colores que destacan mucho por encima de otros?¿Percibo algunos de ellos de manera poco armónica? Buscamos armonía. Pueden ser complementarios, análogos, dos o tres colores…
  3. Usabilidad: Acceso a los enlaces de navegación. ¿Son visibles y percibibles como elementos de navegación? ¿Tengo suficiente espacio para clicar?¿Tengo navgación para movil y escritorio?
  4. Accesibilidad: texto alternativo en las imágenes ¿Tengo texto alternativo?
  5. Legibilidad: Resaltado de elementos de la interfície. Color del texto respecto al color del fondo. Relación figura-fondo. ¿Utilizo correctamente los colores e imágenes de fondo para que resulte legible el contenido?
  https://color.a11y.com/ContrastPair/?bgcolor=ffffff&fgcolor=000000
  6. Longitud de los párrafos ¿Son demasiado largos? ¿Resulta legible?
  7. Legibilidad: Alineación de bloques ¿Se percibe correctamente cada bloque de contenido con los del mismo bloque?
  8. Legibilidad: Peso de cada bloque de contenido ¿Están bién colocados?¿Los percibo con la importancia que yo quiero que tengan?
  9. Legibilidad: Tratamiento del texto (font-size: 2em, font-family: arial, color: blue, text-align: center, line-height: 1, word-spacing:4px, font-style:italic, text-transform:uppercase, font-weight: bold)
  10. Usabilidad: El diseño que funciona mejor es el más sencillo. Complicamos la estructura a partir de nuestras necesidades

Requerimientos

• Utilizaremos, para el layout general, el sistema de columnas que nos ofrece Bootstrap y para el resto, cuadrículas con grid
• Tiene que desplegarse de forma responsive
• Debemos proporcionar a nuestro desarrollador/a un prototipo de la página (wireframe, mockup…)
• Texto: Proporcionados en el archivo adjunto Mockup Landing Sselective.docx
• Imágenes: Las podemos conseguir de bancos de imágenes gratuitos
• Iconos: Podemos obtenerlos desde Figma

Update!

Necesitaremos una tabla comparando los datos para:
Vidrio doble acristalamiento standard
Vidrio doble acristalamiento Sselective