El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Disseny i Composició

Següent ►
►

El disseny i la composició són elements fonamentals en la creació d'interfícies d'usuari efectives i atractives. Aquest tema se centra en com organitzar visualment els elements en una interfície per millorar l'experiència de l'usuari i assegurar que la informació es presenti de manera clara i coherent.

Conceptes Clau de Disseny i Composició

  1. Jerarquia Visual

    • Definició: La jerarquia visual és l'organització dels elements d'una interfície de manera que els usuaris puguin comprendre fàcilment la importància relativa de cada element.
    • Tècniques:
      • Mida: Els elements més grans solen atreure més atenció.
      • Color: Els colors vius o contrastats poden destacar elements importants.
      • Posició: Els elements situats a la part superior o central de la pantalla solen ser percebuts com més importants.

  2. Equilibri

    • Definició: L'equilibri es refereix a la distribució equitativa dels elements visuals en una interfície.
    • Tipus:
      • Simètric: Els elements es distribueixen de manera igual a banda i banda d'un eix central.
      • Asimètric: Els elements es distribueixen de manera desigual però equilibrada, creant un interès visual dinàmic.

  3. Proximitat

    • Definició: La proximitat implica agrupar elements relacionats junts per indicar que estan connectats.
    • Aplicació: Els elements que estan físicament propers es perceben com a part d'un mateix grup o categoria.

  4. Repetició

    • Definició: La repetició consisteix en utilitzar elements visuals similars per crear coherència i unitat en el disseny.
    • Exemples: Ús consistent de colors, tipografies i estils de botons.

  5. Contrast

    • Definició: El contrast s'utilitza per destacar elements importants i crear interès visual.
    • Exemples: Contrast de color, mida, forma o textura.

  6. Espai en Blanc (o Espai Negatiu)

    • Definició: L'espai en blanc és l'espai buit al voltant dels elements de la interfície.
    • Beneficis: Ajuda a millorar la llegibilitat i a reduir la sobrecàrrega visual.

Exemples Pràctics

Exemple 1: Jerarquia Visual amb Mida i Color

<div style="font-size: 24px; color: #333;">Títol Principal</div>
<div style="font-size: 18px; color: #555;">Subtítol</div>
<p style="font-size: 14px; color: #777;">Aquest és el text del paràgraf que proporciona informació addicional.</p>

Explicació: En aquest exemple, el títol principal és més gran i té un color més fosc per destacar-lo. El subtítol és una mica més petit i el text del paràgraf és el més petit i clar.

Exemple 2: Equilibri Asimètric

<div style="float: left; width: 60%; background-color: #f0f0f0;">Contingut Principal</div>
<div style="float: right; width: 30%; background-color: #e0e0e0;">Barra Lateral</div>

Explicació: L'equilibri asimètric s'aconsegueix distribuint el contingut principal i la barra lateral de manera desigual però equilibrada.

Exercici Pràctic

Exercici: Crea una pàgina web senzilla que utilitzi els principis de jerarquia visual, equilibri i espai en blanc per presentar un article de blog amb un títol, subtítol, text del cos i una imatge.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Article de Blog</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.6;
        }
        .title {
            font-size: 32px;
            color: #333;
            margin-bottom: 10px;
        }
        .subtitle {
            font-size: 24px;
            color: #555;
            margin-bottom: 20px;
        }
        .content {
            font-size: 16px;
            color: #666;
        }
        .image {
            width: 100%;
            height: auto;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="title">Títol de l'Article</div>
    <div class="subtitle">Subtítol de l'Article</div>
    <img src="imatge.jpg" alt="Imatge de l'article" class="image">
    <div class="content">
        <p>Aquest és el text del cos de l'article. Utilitza espai en blanc per millorar la llegibilitat i assegurar que el contingut sigui fàcil de seguir.</p>
    </div>
</body>
</html>

Conclusió

El disseny i la composició són essencials per crear interfícies d'usuari efectives. Mitjançant l'aplicació de principis com la jerarquia visual, l'equilibri, la proximitat, la repetició, el contrast i l'espai en blanc, els dissenyadors poden guiar l'usuari a través de la interfície de manera intuïtiva i atractiva. A mesura que avancem en el curs, aquests conceptes seran fonamentals per a la creació de dissenys més complexos i interactius.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats