Please enable JavaScript.
Coggle requires JavaScript to display documents.
Procesos Iterativos, Retícula, Guías de estilo, Librería de elementos,…
Procesos Iterativos
Métodos de evaluación
Cualitativos
- observación, recorrido cognitivo (cognitive walkthrough), entrevistas, focus groups, etc.
Cuantitativos
- analíticas, cuestionarios, test con usuarios, tree testing, etc.
Gutter
- Distancia entre columnas de la retícula
Márgenes
- Distancia que hay entre la retícula y el contorno de la ventana del navegador o de la pantalla
Baseline
- Distancia vertical entre los elementos
-
Campo
- Divisiones horizontales de la página
Guías de estilo
Gama cromática
- No más de 3 primarios (no se tiene en cuenta las fotos)
- Colores secundarios para llamar la atención (call-to-action)
- Se definen de forma alfanumérica en la guía de estilo
Tipografía
- No más de una o dos fuentes
- Se describen incluyendo:
- la fuente utilizada
- el tamaño
- la variación (regular, bold, cursiva, etc.)
- el color (en alfanumérico)
Elementos interactivos
- botón en estado normal, hover, clicado, visitado o desactivado
Iconografía
- colección de iconos utilizados
Estilo de imágenes
- formatos de imagen previstos
- No debería haber muchos
-
Afforence
-
Skeuomorfismo
- diseñar un objeto o elemento imitando la apariencia de un objeto físico que tenga funcionalidades similares. Se dejó de utilizar
flat design
- Se aleja de skeuomorfismo dando a los elementos y enfoque minimalista. Es la tendencia actual
material design
- Dan animación al flat design (ej: Android)
Color
Sistemas de colores
colores complementarios
- En posiciones opuestas den círculo cromático. Ej: rojo y verde, azul y naranja.
- Ha de haber uno dominante.
personalizado
- Basados en otro criterios o estilo de la marca.
Colore análogos
- Próximos en círculo cromático. Ej: verde y azul
- Debe haber uno dominante
-
Tipografías
-
:Formatos tipográficos para pantalla
- Web: El usuario verá la que tenga disponible en su equipo
- Apps y otros formatos cerrados (PDF, etc): Se puede integrar cualquier fuente ya que va incrustada
-
Webfonts
- WOFF (web open font format) o WOFF2 (versión optimizada).
- Con ellas es posible utilizar más variedad de fuentes independientes de la que se tenga instalada ya que el navegador accede a ellas y las carga en el equipo.
- En CSS se instancia mediante @fontface
- WebFonts gratuitas: Google fonts, FontSquirrel
Legibilidad
Factores
-
Tamaño
- Buena gerarquía: titulo, subtítulo, etc
Interlineado
- 150% del tamaño del texto
-
Longitud
de línea
- Número de caracteres por línea
Pautas
- Diseño de los títulos
- Texto escaneable
- Espacio vacío
- Coherencia
- Densidad
- Romper la rutina
- Separadores
- La primera frase de cada párrafo debería resumir el contenido del párrafo entero
Restricción
-
Tipos de restricciones
- Físicas
- Culturales
- Semánticas
- Lógicas
Iconos interactivos
Semiótica
- disciplina que analiza cómo utilizamos los signos para comunicar significados
Icono
- elemento gráfico que representa un objeto
Índice
- elemento gráfico que tiene una relación directa con su referente. Ej: humo es índice de fuego, impresora
Símbolo
- elemento gráfico que se asocia a su referente por convención. Ej: simbolo + para añadir
Metáfora
- traslación del significado de un concepto a otro. Ej: icono papelera
Metonimia
- metáfora en la que una cosa o idea se representa mediante otra con la que mantiene alguna relación semántica
Sinécdoque
- representar un objeto mediante una de sus partes
Jerarquía
Factores
- Tamaño:
- Color: Los muy saturados y los grises se colocan al final ya que atraen más la atención.
- Contraste: atraen más la atención
- Alineación: En la zona superior derecha atraen más la atención.
- Repetición: Se perciben relacionados si tienen el mismo color.
- Proximidad: Se perciben como relacionados (ej: título y su párrafo). Apartarlo un elemento de un conjunto se hace para destacar.
- Espacio vacío: Sobre un elemento atrae la atención sobre él
- Textura: contra más textura más destacará.