Grau en Disseny

/

2023-2024

Introducció al Disseny Web

Professor/a:Jordi Galobart

Sinopsi

Aquesta assignatura mostra com analitzar, conceptualitzar, dissenyar, desenvolupar i implementar projectes gràfics per pantalla, siguin webs, apps o propostes digitals multiplataforma. L’alumne aprendrà les característiques del mitjà en línia avui en dia, en termes d’optimització, usabilitat i visualització en dispositius mòbils. Els continguts de l’assignatura aniran enfocats especialment a l’aprenentatge de llenguatges i eines de maquetació web, i al disseny visual d’interfícies gràfiques interactives i animades. El temari pren el relleu d’Infografia II, és recomanable cursar-la però no és imprescindible. 

Objectius de l'assignatura

Analitzar, conceptualitzar, dissenyar, desenvolupar i implementar un projecte web real, que respongui a les necessitats del mitjà avui en dia en termes d’optimització, usabilitat i visualització en dispositius mòbils. Els continguts de l’assignatura aniran enfocats especialment al disseny visual d’interfícies gráfiques digitals interactives i animades.

Adquirir una visió global del medi web i projectar amb contingut multimèdia tenint en compte tant el seu potencial creatiu com els seus requisits tècnics.

Capacitar l’alumne per treballar i relacionar-se amb l’esmentada indústria.

Relació de continguts

  • Introducció i conceptes previs. Terminologia web.

Mòdul 1: CONCEPTUALITZACIÓ

  • Procés de treball i fluxos de treball en un projecte web
  • Diferents tipus de dissenyador web (UX, UI, Visual, UI, Developer)
  • Definició dels objectius del projecte per a pantalla: Briefing, user persona, benchmarking, moodboards.

Mòdul 2: UX: EXPERIÈNCIA D’USUARI

  • Arquitectura de la informació i estratègia de continguts. Flow charts.
  • Principis d’usabilitat
  • Wireframes
  • Testeig i eines de prototipat interactiu: Figma i/o Adobe XD.

Mòdul 3: UI : DISSENY D’INTERFÍCIE

  • Resolucions de pantalla
  • Treball amb fotografia/Imatge
  • Llegibilitat i Tipografia
  • Iconografia
  • Color
  • Grid / Retícules
  • Responsive web design i Mobile First
  • Treball amb software específic de disseny UI: Figma i/o Adobe XD.

Mòdul 4: MAQUETACIÓ I ESTILS. DESENVOLUPAMENT D’UN PROJECTE WEB HTML5 I CSS3

  • Maquetació web: Estructura i contingut HTML +CSS
  • Nous estàndards : HTML5 i web semàntica + CSS3
  • Responsive Web Design. Optimització per a dispositius mòbils.
  • Afegint interacció complexa: ús de llibreries javascript i recursos de programació (processing i p5.js)

Mòdul 5: TEST I PUBLICACIÓ DE LA WEB.

  • Servidors, dominis i allotjaments web.
  • Programes FTP: Filezilla.
  • Publicació de webs.

Mòdul 6. GESTORS DE CONTINGUTS O CMS (WordPress)

  • Instal·lació de CMS: Bases de dades i arxius de sistema
  • Creació de continguts
  • Plantilles
  • Extensió de funcionalitats i plugins

Mòdul 7. Animacions i Microinteraccions

  • Prototips animats
  • Bases d’animació amb After Effects
  • Exportació de material animat per a la web

Activitats d'Avaluació

Observació de la participació, Seguiment del treball realitzat, Realització de treballs o projectes, Presentació de projectes

Criteris específics

L’avaluació d’aquesta assignatura es realitzarà a partir de la supervisió i feedback setmanal del desenvolupament del projecte en curs, l’avaluació del projecte final de cada mòdul i la participació a classe.

L’assignatura es divideix en quatre mòduls avaluables:

1. Mòdul de maquetació HTML y CSS responsive. (20% nota final)

2. Mòdul de disseny d’interfície web responsive (40% nota final)

3. Mòdul de treball amb CMS  (20% nota final)

4. Mòdul d’animació i microinteraccions (10% nota final)

4. Avaluació contínua de la participació (10% de la nota final.)

En cas de nova emergència sanitària que impliqui confinament les activitats i les ponderacions de l’avaluació no s’alteraran.
En cas  que no es puguin fer presencialment, es traslladaran a la virtualitat.

És imprescindible lliurar i aprovar (amb nota superior a 4) tots els exercicis per a aprovar l’assignatura.

Metodologies docents

Sessions de treball amb tot el grup classe, Sessions de tutories individual, Sessions de treball autònom individual

Altres metodologies docents

Abans de cada sessió es proporcionarà un material teòric-pràctic, de consulta en línia, que l’alumne haurà de treballar pel seu compte (flipped classroom). Al temps de classe s’aprofundirà en el tema a tractar, es resoldran els dubtes i es desenvoluparà un treball pràctic relacionat amb el contingut treballat.

Es crearan grups de suport a l’aprenentatge, que seran grups d’alumnes amb interessos comuns que desenvoluparan i compartiran entre ells les seves investigacions i avenços, per tal de fomentar l’aprenentatge cooperatiu.

Al pla de treball de l’assignatura es definiran sessions de seguiment individual i/o per grups de suport a l’aprenentatge, en les que els alumnes faran presentacions dels seus projectes i es donarà feedback.

En cas d’una situació d’emergència sanitària que impliqui nou confinament, la docència es traslladarà a la virtualitat en la seva totalitat i s’adequarà la metodologia a aquest nou context.  

En la mateixa línia, se substituiran totes les activitats experimentals i/o pràctiques, que es desenvoluparan de forma individual i telemàtica amb l’assistència del professor, si s’escau.

 

Activitats formatives

  • Exposicions magistrals
  • Videotutorials
  • Realització d’activitats o exercicis d’aplicació
  • Construcció/elaboració de materials o productes/projectes
  • Seminaris i tutories compartides
  • Exposicions orals i defenses de projectes
  • Correcció/revisió d’exercicis i seguiment

Bibliografia

Cederholm,D. 2010. CSS3 for Web Designers. [e-book] A Book Apart. Brief books for people who make websites.  Accesible a: < http://www.abookapart.com/products/css3-for-web-designers> [Accès el 03 Febrer 2014].

Keith, J. 2010. HTML5 for web designers. [e-book] A Book Apart. Brief books for people who make websites.  Accesible a: <http://www.abookapart.com/products/html5-for-web-designers> [Accès el 03 Febrer 2014].

Kissane, E. 2011. The elements of content strategy. [e-book] A Book Apart. Brief books for people who make websites.  Accesible a: <http://www.abookapart.com/products/the-elements-of-content-strategy> [Accès el 03 Febrer 2014].

Marcotte, E. 2011. Responsive Web Design. [e-book] A Book Apart. Brief books for people who make websites.  Accesible a: <http://www.abookapart.com/products/responsive-web-design> [Accès el 03 Febrer 2014].

Walter, A. 2011. Designing for emotion [e-book] A Book Apart. Brief books for people who make websites. Accesible a: <http://www.abookapart.com/products/designing-for-emotion> [Accès el 03 Febrer 2014].

macbook-apple-imac-computer-39284
Titulació:Grau en Disseny
Curs:4rt
Semestre:7è
Crèdits ECTS:6
Codi Assignatura:GDVG34
Tipus:Optativa
Matèria:Infografia
Dept. de coordinació:Itinerari Gràfic
Recomanacions
Assignatures prèvies recomanades:
Infografia II
Assignatures posteriors recomanades:
Darrera actualització: oct. 11, 2023

Competències:

Competencies generals
CG1 . Exercir la professió des de la pràctica creativa i el compromís ètic per desenvolupar propostes professionals de qualitat que aportin innovació i contribueixin al benestar i a la transformació social.

Competències bàsiques
CB2. Que els estudiants sàpiguen aplicar els seus coneixements a la seva feina o vocació d’una forma professional i posseeixin les competències que solen demostrar-se per mitjà de l’elaboració i la defensa d’arguments i la resolució de problemes dins de la seva àrea d’estudi.
Competències transversals
CT5. Exercir la ciutadania activa i la responsabilitats individual amb el compromís en els valors democràtics, de sostenibilitat i de disseny universal, a partir de pràctiques basades en l’aprenentatge i servei i la inclusió social.
Competències específiques
CE5. Dominar les tècniques de representació gràfica, les eines de representació digital, així com els llenguatges expressius i la producció formal manual específics dels diferents àmbits del disseny per poder-les aplicar de forma coherent als processos d’ experimentació, de desenvolupament , de realització i de presentació dels projectes professionals.

Resultats d'aprenentatge:
  • Identifica i defineix als usuaris de la seva aplicació web, escollint una formalització adequada.
  • Gestiona els processos de conceptualització, disseny i desenvolupament d’una aplicació interactiva i/o multiplataforma (on-line y off–line)
  • Pensa i materialitza adequadament fluxos, wireframes i esbossos adients per al seu projecte, sobre la base de la recerca duta a terme.
  • Utilitza adequadament les eines específiques de creació i maquetació de contingut per al web.
  • Optimitza el material multimèdia segons les necessitats del medi al qual es dirigeix.
  • Aplica els seus coneixements, el criteri i les seves capacitats de resolució de problemes en l’àmbit professional del disseny de web, de forma creativa i innovadora.