En aquesta pàgina documento la plantilla de disseny que segueixen totes les pàgines del meu portfoli: on va el text, on van les imatges, on és la navegació i per què he pres aquestes decisions pensant en la facilitat d'ús i en l'experiència de qui visita el lloc.
1. Estructura general de la pàgina
Esquema: plantilla de pàgina en ordinador.
| Zona | Què conté | On és |
|---|---|---|
| 1. Capçalera | El nom del portfoli, amb el degradat corporatiu | A dalt de tot, en totes les pàgines |
| 2. Menú lateral | Reptes, encàrrecs i guies, desplegables | A l'esquerra, sempre visible en ordinador |
| 3. Contingut | El text de la pàgina, dins d'una targeta | Al centre, a la dreta del menú |
| 4. Imatges i esquemes | Figures amb peu de foto | Dins del contingut, just després del text que expliquen |
| 5. Peu de pàgina | Informació final del lloc | A baix de tot |
2. Estructura interna de cada pàgina
Totes les pàgines de documentació segueixen el mateix ordre, de manera que qui n'hagi llegit una ja sap com llegir les altres:
- Títol (H1) i introducció breu que explica de què va la pàgina.
- Seccions numerades (H2) amb apartats (H3) quan cal.
- Imatges i esquemes col·locats després del text que il·lustren, amb un peu de foto en cursiva.
- Taules per comparar opcions o llistar dades.
- Blocs de codi amb lletra monoespaiada per a les comandes.
- Conclusió final.
3. Justificació des de l'experiència d'usuari
| Criteri d'usabilitat | Decisió de disseny | Per què |
|---|---|---|
| Navegació sempre visible | Menú lateral fix a l'esquerra | L'usuari sempre sap on és i pot saltar d'un repte a un altre amb un clic, sense haver de tornar enrere |
| Ubicació familiar | Menú a l'esquerra, contingut al centre | Es llegeix d'esquerra a dreta, i la majoria de webs col·loquen la navegació en aquesta zona, així que no cal aprendre-ho |
| Menú sense soroll | Només es veuen els Reptes; els encàrrecs es desplegen en prémer | Redueix la càrrega visual i mostra l'estructura general d'un cop d'ull |
| Jerarquia visual clara | H1, H2 i H3 amb mides i pesos diferents | Qui fa una ullada ràpida entén l'estructura de la pàgina sense llegir-la sencera |
| Lectura còmoda | Text dins d'una targeta d'amplada limitada, amb molt interlineat | Les línies massa llargues cansen; una columna més estreta es llegeix millor |
| Imatge al costat del text | Cada figura va just després del paràgraf que l'explica, amb peu de foto | L'usuari relaciona l'esquema amb el text sense haver de buscar-lo |
| Consistència | La mateixa plantilla a totes les pàgines | Qui n'ha vist una sap on trobar tot a les altres, i el lloc es veu professional |
| Ús en mòbil | El menú es converteix en un botó ☰ que el desplega | En una pantalla petita el menú fix ocuparia massa espai |
4. Adaptació a mòbil i tauleta
Esquema: la mateixa plantilla en mòbil, amb el menú tancat i obert.
En pantalles de més de 920 píxels d'ample (ordinador i tauleta gran), el menú és una columna fixa a l'esquerra de 330 píxels i el contingut s'ajusta a la resta. En pantalles més petites, el menú queda amagat i s'obre amb el botó ☰ de dalt a l'esquerra, i es tanca amb ✕. El contingut passa a ocupar tot l'ample.
5. Aplicació a tot el lloc
La plantilla està definida una sola vegada a l'estil general del lloc i al tema, de manera que s'aplica automàticament a totes les pàgines. Les pàgines de documentació del cicle (instal·lacions, tema, plugins, tipografia, colors i accessos) segueixen el mateix ordre d'apartats i la mateixa ubicació de menú, text, imatges i taules. Això dona al portfoli un aspecte uniforme i professional.
