TURNO DE MAÑANA

Docente: Moisés Martínez

Requisitos mínimos

Los criterios mínimos para el proyecto final de ciclo para el módulo Diseño de Interfaces contempla la realización de una landing page como presentación del proyecto o descripción de la aplicación con los siguientes requisitos:

Diseño

Crear un prototipo en Figma con las siguientes características:

• Seleccionar un color dominante asociado a esa temática.
• Crea una paleta de colores con el color dominante seleccionado. La paleta podrá ser monocromática, análoga o complementaria.
• Selecciona una fuente para el prototipo. Explica la elección de esa fuente.
• Crea una combinación armónica con otra fuente, aplicando diversos pesos en la jerarquía visual.
• Seleccionar dos colores para la fuente y background, calculando el contraste entre ellos según el estándar WCAG 2.
• Aplicar varios ejemplos en vuestra composición de «Equilibrio visual y tensión compositiva». Explica la elección de esos elementos y qué significado aporta.
• El prototipo será diseñado para una resolución de 1920 x 1080, utilizando una rejilla de 12 columnas y para una resolución móvil 360 x 640.

CSS3

• Utilizar CSS3 para dar formato a la interfaz. No se podrá utilizar ningún tipo de Framework tipo Bootstrap, Materialize, UIKit. En caso de usar uno de estos frameworks, crear una landing page con los requisitos mínimos expuestos en este documento.
• Crear una animación o transición interactiva de uno o varios elementos del DOM por medio del ó ratón. (Por ejemplo efecto parallax).
• El diseño de la interfaz deberá ser “Responsive” utilizando Media Queries, FlexBox y Grid layout.
• Utilizar el preprocesador SASS para estructurar los archivos css en un único main.css (main.scss ) con @import a los demás scss (colores, cabecera, pie, cuerpo…).
• Utilizar la metodología BEM para la descripción de los selectores, variables...

HTML5

• Insertar un elemento multimedia de cada tipo: video, sonido, canvas y SVG.
• Se podrán utilizar las librerias Chartjs, D3.js, koolChart, Snap.svg o cualquier para incluir gráficas, animaciones, galería de imágenes para canvas o SVG.

Imagen Vectorial

Utilizar un software tipo inkscape para crear el logo vectorial al cual se le podrá aplicar alguna animación con Snap.svg o anime.js para cubrir el punto anterior.

---

TURNO DE TARDE

Docente: Rocío López

Requisitos mínimos:

• 2 Prototipos Figma, uno para la versión mobile y otro para la Desktop, basados en la temática que elijáis, cada prototipo, mínimo ha de tener 3 páginas.
• Maquetación CSS3 + HTML5 de los 2 prototipos:
  • versión Desktop se ha de hacer con CSS puro, sin framework.
  • versión mobile podéis hacer uso de framework.
• Es importante saber por adelantado, que un prototipo se implementará con javascript y otro con React. Lo digo a la hora de pensar en el diseño de ambas versiones de cara a los componentes a incluir. Debería tener todos los componentes/átomos que veáis necesarios para luego poder enriquecer vuestro proyecto tanto desde la parte CSS como desde la parte Javascript y la parte React. (como por ejemplo, diseño de componentes: carrusel, acordeón, mobile menu, modales, header sticky, formulario CTA, Tab Component,...)
• A continuación se detalla en profundidad los requisitos tanto del diseño Figma como de su correspondiente maquetación en CSS:

Diseño Figma

• Principios de diseño:

  • Ha de seguir los principios de diseño vistos en clase (principio de unidad/proximidad/distribución de elementos, tamaño, color, espacio negativo,contraste, ..)

• Color

  • Paletas de colores a definir:
    • Paleta para los colores neutros/ grises que se usarán para el texto.
    • Paleta para el color primario
    • Paleta para el color secundario (si es que vas a poner un segundo color, es optativo)
    • Color acento (CTA)
  • Para definir esos colores has de basarte en:
    • Psicología del color (qué emoción transmitirá)
    • regla 60-30-10
    • estrategia usada (monocromática/análoga/complementaria/triada/tetrádica)

• Tipografía

  • Puedes usar una fuente o varias, en caso de usar varias han de ser compatibles (pairing)

• Uso de patrones conocidos para:

  • Hero, blank states, navegación (breadcrumbs, hamburger menu, ..), buscador, review, ...
  • Layout patterns (Z pattern, F-pattern, row pattern, grid pattern,...)

• Figma

  • Prototipo reusable, consistente y bien estructurado.
  • Atomic design para dotar de un alto grado de reusabilidad y consistencia a vuestro prototipo:
    • Página Figma donde se especificará: Tipografía, colores, iconos, imágenes, ilustraciones, grillas y espaciados usados
    • Página de Figma con los componentes maestros.
  • Declaración de estilos en Figma (para tener guardada la tipografía, colores, grilla,..)
  • Para el espaciado y los diferentes font-size, usar un sistema / regla de valores bien definidos que garanticen la consistencia del prototipo.
  • Uso de maestros/instancias
  • Uso de variantes (por ejemplo para los estados de los botones)
  • Uso de interacciones (navegación entre páginas, validación de formularios, desplegables, modales, scroll horizontal, ...)
  • El prototipo ha de ser responsive (haciendo uso de autolayout, constraints)
  • Haciendo uso de algún plugin de figma se ha de testar que el contraste entre fondo y frente es correcto en términos de accesibilidad.

Maquetación CSS3 & HTML5

• Código legible, reusable, bien estructurado y con una adecuada documentación interna del código.
• El CSS ha de estar organizado en diferente ficheros para una buena legibilidad (patrón 7-1)
• CSS3: uso de selectores de clase, pseudoclases, pseudoelementos, diferentes flujos de posicionamiento, gradientes, sombras, animaciones, layouts, ...
• Uso adecuado de íconos SVG
• Uso de Animaciones (transition, keyframes)
• Diseño responsive (unidades relativas, max-width, media querys, flexbox, grid)
• Uso de SASS
• Uso de la metodología BEM
• Tratamiento de imágenes en términos de calidad y eficiencia.
• Uso de etiquetas semánticas
• Testar vuestro diseño con lighthouse y w3C validation y desde diferentes dispositivos móviles, no vale solo con testarlo desde el devTools de vuestro navegador, hay que probarlo en diferentes dispositivos móviles, para ello, se ha de desplegar en un hosting gratuito como netlify.