Progettazione dell'interfaccia utente Modello HTML

Una sezione introduttiva completa per una pagina HTML statica

Il titolo, l'impostazione grafica dell'immagine, il testo esplicativo, la riga di attribuzione e il pulsante «Scopri di più» costituiscono già una sezione introduttiva coerente anziché un insieme disarticolato di elementi. L'affermazione introduce l'argomento, la fotografia in bianco e nero di due persone offre un riferimento visivo umano e il paragrafo fornisce il contesto a supporto accanto all'immagine. Poiché il pulsante segue immediatamente il testo, la sezione include anche un punto di riferimento chiaro per indirizzare i lettori verso ulteriori informazioni all'interno della pagina contenitrice.

La disposizione interna è autonoma: il titolo occupa la parte superiore del blocco, mentre l'immagine circolare e il testo formano il corpo principale a due colonne. La fotografia è sovrapposta a un cerchio grigio tenue più grande e circondata da quattro accenti verde lime, creando un fuoco visivo riconoscibile senza richiedere contenuti esterni alla sezione. Lo sfondo antracite scuro e il testo bianco mantengono il messaggio visivamente separato dalle sezioni adiacenti quando il blocco viene inserito in una pagina HTML statica.

Trattandosi di una sezione HTML pronta all'uso, può ospitare un'introduzione editoriale o una presentazione in stile «Chi siamo», mentre le altre sezioni forniscono la navigazione, il contesto generale o i contenuti successivi. Il blocco fornisce il proprio messaggio e la propria gerarchia visiva; il restante progetto statico definisce il resto della pagina. L'attribuzione Freepik deve essere mantenuta insieme all'immagine in fase di adattamento della sezione.