2. Ontwerpen - fatihg61/Fatihport GitHub Wiki

Ontwerpfase

Overzicht

In de ontwerpfase worden de visuele en technische aspecten van het portfolio uitgewerkt. Dit omvat het creΓ«ren van verschillende schetsen en diagrammen om de structuur en het ontwerp van de website te visualiseren zodat verschillende partijen dit kan begrijpen.

Component Diagram

Een component diagram toont de verschillende onderdelen van de website en hun onderlinge relaties. Dit helpt bij het begrijpen van de structuur en hoe de componenten met elkaar communiceren.

                     +----------------------+
                     |  App.svelte (Root)   |
                     +----------+-----------+
                                |
                                v
                     +----------+-----------+
                     |       +page.svelte   |
                     +----------+-----------+
                                |
                +---------------+----------------+
                |               |                |
                v               v                v
     +----------+---------+ +---+---------+  +----+--------+
     |   Header.svelte    | | form.svelte |  |  api.js     |
     +----------+---------+ +-------------+  +-------------+
                |
                v
     +----------+----------+
     |    About.svelte     |
     +----------+----------+
                |
                v
     +----------+----------+
     |   Projects.svelte   |
     +---------------------+

src/
β”œβ”€β”€ lib/
β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”œβ”€β”€ Header.svelte
β”‚   β”‚   β”œβ”€β”€ About.svelte
β”‚   β”‚   └── Projects.svelte
β”œβ”€β”€ routes/
β”‚   β”œβ”€β”€ +page.svelte
β”‚   β”œβ”€β”€ form.svelte
β”‚   β”œβ”€β”€ api.js
└── App.svelte

Data Flow Diagram

Een data flow diagram (DFD) geeft een overzicht van hoe gegevens door stromen. Het laat zien waar de gegevens vandaan komen, hoe ze worden verwerkt, en waar ze naartoe gaan.

[User Submits Form]
        |
        v
[Form Component]
        |
        v
[Form Submission Handler]
        |
        v
[Fetch API POST Request to Web3Forms]
        |
        v
[Web3Forms API]
        |
        v
[API Response]
        |
        v
[Handle Response in Form Component]
        |
        v
[Update UI Based on Response]
        |
        v
[Displayed to User]

Breakdown Schetsen

Breakdown schetsen geven een gedetailleerde weergave van de afzonderlijke onderdelen van de website. Dit kan helpen bij het plannen van de ontwikkeling van specifieke functies en elementen.

IMG_0123

HiFi Schets

HiFi (High Fidelity) schetsen zijn gedetailleerde, nauwkeurige ontwerpen van de uiteindelijke webpagina's. Ze tonen precies hoe de website/component eruit zal zien en functioneren, inclusief kleuren, typografie en afbeeldingen.

image

Morphological Chart

Een morphological chart wordt gebruikt om verschillende ontwerpmogelijkheden te verkennen. Het geeft een overzicht van de verschillende combinaties van ontwerpelementen en hun mogelijke uitwerkingen.

IMG_0122