Desarrolla una landing page a partir del prototipo a alta resolución que recibirás de tu cliente. Estas indicaciones son:
·Cambio fuentes y código de colores a utilizar
·CambioQué información se desplegará en cada sección de la página
·CambioQué distribución de los contenidos (columnas) desea para cada pantalla
·CambioRealizar el prototipo (wireframe) en Figma - 1h
·CambioHablo con mi cliente y le pregunto dudas... - 15min
·CambioDesarrollo de estructura en Visual Code - 5h
·CambioDesarrollo de estilos en Visual Code - 10h
·CambioPublicar regularmente los archivos en el servidor - 10min
·CambioRecibir feedback del cliente y realizar cambios. Conceptos a tener en cuenta:
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?
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?
Accesibilidad: texto alternativo en las imágenes ¿Tengo texto alternativo?
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
Longitud de los párrafos ¿Son demasiado largos? ¿Resulta legible?
Legibilidad: Alineación de bloques ¿Se percibe correctamente cada bloque de contenido con los del mismo bloque?
Legibilidad: Peso de cada bloque de contenido ¿Están bién colocados?¿Los percibo con la importancia que yo quiero que tengan?
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)
Usabilidad: El diseño que funciona mejor es el más sencillo. Complicamos la estructura a partir de nuestras necesidades
·CambioUtilizaremos el sistema de columnas que nos ofrece Bootstrap
·CambioTiene que desplegarse de forma responsive
·CambioDebemos proporcionar a nuestro desarrollador/a un prototipo de la página (wireframe, mockup...)
·CambioTexto: Proporcionados en el archivo adjunto Mockup Landing Sselective.docx
·CambioImágenes: Las podemos conseguir de bancos de imágenes gratuitos
·CambioIconos: Podemos obtenerlos desde Figma
·CambioSeparación entre parrafos para una mejor lectura
·CambioSubrayado de titulos y subtitulos para definir secciones
·CambioCambio de tamaño de fuentes entre secciones para una mejor visualización