Title: Continguts i recursos
Course: CFGS - Disseny i edició de publicacions impreses i multimèdia > Section: Definició i optimització dels aspectes audiovisuals d'una app

Continguts i recursos

Disseny gràfic

﻿

Disseny

Organització de la informació

- Jerarquia visual
  - Principis Gestalt de la percepció

Recorregut visual

- Centres d'interès - La jerarquia visual defineix uns centres d'interès de la imatge
- Línies de força - línies explícites o implícites en la imatge

El recorregut visual és la resultant de combinar la jerarquia, els centres d'interès i les línies de força  i és el recorregut que fa la vista per una imatge.
Cal utilitzar-la adequadament per conduir els usuaris en el sentit que ens interessa.

Per exemple:

Centres d'interès:

Línies de força:

Recorregut visual:

- Composició - com es combinen els elements gràfics en una imatge
  - Equilibri
  - Simetria
  - Moviment
  - Proporció
  - Ritme

 

Aspectes tècnics del disseny 

- Color RGB i CMYK  - En RGB els colors primaris llum són el vermell, el verd i el blau. Aquests colors s'utilitzen, sobretot, en aparells que combinen la llum emesa per diferents focus lluminosos per a crear la sensació de colors diversos.
En CMYK els colors primaris (pigment) són els que provenen de la reflexió de les ones lluminoses damunt dels objectes i s'empra sobretot en pintura i en impremta, ja que en aquestes disciplines els colors, generalment, no s'obtenen mesclant llums sinó barrejant pigments.

- Resolució d'imatge i mides d’arxiu 
- Formats d’imatge (vectorial i mapa de bits) 
- Formats d’arxius d’imatge 
- Formats d’arxius de vídeo i d’àudio 

 

Wireframes

Ús de la plataforma balsamiq

Comunicació audiovisual

El llibre d'estil

Conjunt de normes i convencions d’un mitjà. Fa entenedor el missatge, unifica l’estil de redacció i dota de personalitat al mitjà.

Defineix temes com ara:

- Regles deontològiques
- Tipografia
- Ortografia
- Colors
- Tipus de llenguatge

 

Normes de redacció per a textos multimedia

A la pantalla, la lectura és un 25% més lenta que en un mitjà escrit.
L'usuari sol ser impacient, escaneja enlloc de llegir. Cal utilitzar textos curts, clars i concisos.

- Titular descriptiu - utilitzem les paraules clau a l'inici
- Conclusions a l’inici (piràmide invertida del periodisme)
- Elements destacats
- Paràgrafs breus i amb una sola idea
- Limitar metàfores, subordinades, etc.
- Ús d’enllaços
- El disseny ha d'acompanyar la jerarquia d’informació desitjada 
- Legibilitat

 

Identitat de marca i imatge de marca

La identitat comprèn els aspectes conceptuals i físics així com les actuacions que una entitat porta a terme per comunicar-se (logotips, web, uniforme dels empleats, locals, etc.)
La imatge és la concepció psicològica que l’usuari té de la marca (si li sembla bona, dolenta, barata, informal, moderna, etc)

- El manual d'identitat corporativa 
- Objectius de la marca / història / introducció
- Simbologia bàsica - logotip i versions / altres elements / colors /tipografies
- Bons i mals usos
- Aplicacions

Elements d'UI (interfície d'usuari)

0. Interactivitat

A banda de teclats i botons, interaccionem amb els dispositius amb gestos:

(Realment hi ha moltes més combinacions definides i que encara estan poc explotades)

1. Input

Entrar informació

- Teclats intel·ligents - si per exemple estem en un camp d'entrada de telèfon, el teclat esdevé només numèric
- Autocompletat - evita haver d'escriure-ho tot així com fer alguns errors (per exemple Skype, Google Maps, Google Play Store)
- Lazy signups - permet utilitzar l'app sense haver-se registrat encara. Permet provar l'app abans de registrar-se

- Action bars (toolbar en iOs) - Accés ràpid a funcions freqüents

- Login Social - permet fer log in sense el procés de registre
- Botons grans - ideal per quan els usuaris estan fent altres coses en paral·lel

- Utilitzar els gestos per fer accions - a banda del teclat o els botons, les accions poden simplificar l'accés a algunes funcions

﻿

- Controls amagats - Permeten amagar botons secundaris o que només són importants en determinats contexts. Amb algun gest es revelen algunes opcions extres.

- Inputs expansibles - Controls que queden minimitzats fins que l’usuari hi vol accedir (per exemple, la cerca en el youtube)

- Desfés - L'opció de desfer permet que l’usuari realitzi accions amb més rapidesa que havent de confirmar cada acció però amb l’avantatge de poder desfer l’acció si s’ha equivocat.

Navegació

- Introduccions - a l’iniciar l’app es fa un recorregut per l’aplicació
- Menús desplegables - ocupen poc espai a la pantalla mentre no són desplegats
- Slide entre seccions - navegar entre seccions fent lliscar el dit per la pantalla
- Controls canviants - substituir algunes opcions segons el que estigui fent l’usuari per estalviar espai a la pantalla. Per exemple, si seguim un usuari a twitter tenim la opció de “unfollow” mentre que si no el seguim tenim la opció de “follow”

- Menus estàtics - no es belluguen encara que l’usuari faci scroll. Això fa que sempre estiguin disponibles

- Navegació vertical - afegeix opcions a la navegació per barra d’eines o tool bar

- Pop ups - pantalles que mostren informació rellevant sense que l’usuari hagi de canviar de lloc dins l’app, perdre dades entrades, etc.

- Barres laterals o sidebars - menus secundaris que queden amagats en una barra lateral que llisca sobre el contingut actual o bé el desplaça