Introducció al Disseny Web

Professorat: Jordi Galobart

Sinopsi

Aquesta assignatura es basa en els coneixements de disseny per pantalla d’Infografia II. En aquest semestre els estudiants aprenen a dissenyar, desenvolupar i implementar projectes gràfics per pantalla, siguin webs, apps o propostes digitals multiplataforma. Els exercicis treballen amb els requisits actuals d’optimització, usabilitat i visualització en dispositius mòbils. El temari està orientat a l’aprenentatge de llenguatges i eines de maquetació web, així com al disseny visual d’interfícies gràfiques interactives i animades.

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: Elements HTML

Introducció a l’HTML i conceptes bàsics de maquetació.
Creació d’estructures HTML bàsiques: capçaleres, paràgrafs, enllaços, taules i llistes.
Formularis: inputs, botons, radio buttons, checkbox i altres elements interactius.
Bones pràctiques i accessibilitat web.

Mòdul 2: Disseny d’interfície CSS

Introducció al CSS: selecció d’elements i propietats.
Disseny amb CSS: Colors, tipografia i estils de text.
Maquetació amb CSS: dissenys en bloc, inline i floats.
Introducció a CSS Grid i Flexbox per a layouts més complexos.
Conceptes de llegibilitat, iconografia i treball amb imatges.

Mòdul 3: Disseny adaptatiu a diferents dispositius (Responsive Design)

Disseny Responsive i metodologia Mobile First.
Media Queries: adaptació de la maquetació a diferents dispositius.
Adaptació d’elements multimèdia a diverses resolucions.
Optimització de contingut i recursos per a una càrrega eficient en dispositius mòbils.

Mòdul 4: Animacions i Interaccions

Introducció a les animacions CSS i transicions.
Creació de microinteraccions per a millorar l’experiència d’usuari.
Implementació d’animacions amb JavaScript i llibreries com GSAP.
Prototips animats amb After Effects i exportació per a web.

Mòdul 5: Publicació de Webs

Coneixements bàsics de servidors, dominis i allotjament web.
Ús de programes FTP com Filezilla per a la pujada de projectes.
Publicació de webs en entorns locals i servidors externs.
Proves de funcionament i solució d’errors.

Mòdul 6: Conceptualització i UX

Procés de conceptualització: Definició del briefing, user personas i benchmarking.
Creació de flow charts i arquitectura de la informació.
Eines de prototipat interactiu: Figma i Adobe XD.
Testeig d’usabilitat i recollida de feedback.

Mòdul 7: Gestors de Continguts: WordPress i Webflow

Instal·lació i configuració de WordPress i Webflow.
Creació de continguts i estructuració de plantilles.
Extensió de funcionalitats amb plugins i integracions.
Optimització i gestió de SEO en CMS.

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 tres entregues avaluables:

Mòdul de maquetació HTML y CSS bàsic. (40% nota final)
Mòdul de disseny d’interfície web responsive amb animacions i microinteraccions (40% nota final)
Mòdul de treball amb CMS (20% nota final)

É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

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

Busquets, C. 2023. Diseño desde Marte. Jardin de Monos. Manual de diseño de producto digital.

Duckett, J. 2011. HTML and CSS. Design and build websites.

Keith, J. 2010. HTML5 for web designers. [e-book] A Book Apart. Brief books for people who make websites. Accesible a: <https://archive.org/details/ABookApart1to7/1_HTML5_for_Web_Designers>.

Cederholm,D. 2010. CSS3 for Web Designers. [e-book] A Book Apart. Brief books for people who make websites. Accesible a: <https://archive.org/details/ABookApart1to7/2_CSS3_For_Web_Designers/>.

Kissane, E. 2011. The elements of content strategy. [e-book] A Book Apart. Brief books for people who make websites. Accesible a: <https://archive.org/details/ABookApart1to7/3_Elements_Content_Strategy/>

Marcotte, E. 2011. Responsive Web Design. [e-book] A Book Apart. Brief books for people who make websites. Accesible a: <https://archive.org/details/ABookApart1to7/4_Responsive_Web_Design>.Walter, A. 2011. Designing for emotion [e-book] A Book Apart. Brief books for people who make websites. Accesible a: <https://archive.org/details/ABookApart1to7/5_Designing_for_Emotion/>.

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. 3, 2025

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.