CONTENT MANAGEMENT

Content Modelling

Een stapje terug

Verde

Het echte denkwerk werd al voor ons gedaan:

• Visual Design was al klaar

• Slechts één collection

• Eenvoudige field types

#throwback Les 1

We analyseerden het design...

...en namen alles eenvoudig over in het CMS.

• De meeste websites bevatten meer complexiteit
• De meeste websites bevatten meer soorten fields
• Niet al die complexiteit is mogelijk in elk CMS
• Niet alle ideeën die we hebben zijn mogelijk volgens de beschikbare data van de klant

👉 Er is nood aan een manier om tijdens het wireframingproces al logische en technische keuzes vast te leggen.

Verde

#throwback Les 1

Welke soorten content hebben we?

• Producten
• Nieuwsberichten
• Vacatures
• Team members
• Blogs
• Recepten
• Groepslessen
• ...

1. Content types

Welke informatie bewaren we?

Welke informatie heeft de klant ter beschikking?

• Productprijs
• Profielfoto
• Body content
• Datum
• Tags
• Korte beschrijving
• Auteur
• ...

2. Field types

• Welke informatie is verplicht?
• Hoe groot mag een profielfoto zijn?
• Hoeveel tekst mag een "short description" bevatten?
• Hoeveel categorieën moeten er minstens aangeduid zijn?
• ...

3. Requirements

Welke informatie is verbonden met elkaar?

• 🧑‍🍳 Recepten → Chef
• 📚 Boeken → Auteur
• 🥗 Recept → categorie Type (ontbijt / lunch / diner)
• 🥗 Recept → categorie Effort (easy / medium / hard)
• 🥗 Recept → categorie Seizoen (zomer / winter)
• 🎤 Liedjes → muzikant → albums →  Liedjes
• ...

4. Relations

1. Content types
2. Field types
3. Requirements
4. Relations

👉 Deze structuur leggen we vast in een content model.

Structuur op voorhand bepalen

Verde

Het content model voor Verde zou er als volgt uit zien:

Content models

= Een blauwdruk van de contentstructuur van een website of app

• Bevat één of meerdere content types / collections
• Elk content type bevat verschillende fields
• Elk field kan verschillende restricties krijgen
• Je maakt dit tijdens de eerste fase van het project

Wat is een content model?

Een eenvoudig content model

• 1 content type
• Eenvoudige field types

Een complexer content model

• Meerdere content type
• Advanced field types
• Relaties tussen content types

⚠️ Dit is niet mogelijk in Figma Sites

"Wat met Spotify?

Welke content types zijn er in Spotify?

Voorbeeld

Deel uit een mogelijk content model voor een applicatie zoals Spotify

Figma Sites als eerste kennismaking

Figma Sites heeft een eenvoudig CMS

• Slechts een beperkt aantal field types
• Geen geavanceerde relaties
• Geen uitgebreide restrictions
• Geen descriptions of required fields

👉 Handig als concept, maar echte CMS'en kunnen veel meer complexiteit en logica aan.

Meerdere collections

Stel dat we Verde uitbreiden:

• Plants
• Blog posts: extra klanten werven door kennisdeling
• Vacatures: extra personeel zoeken omdat onze website zo goed rendeert

👉 Elke soort content krijgt een eigen collection.

Eén site, meerdere content types

Oefening 1

Multiple collections

Maak een content model voor een Job Platform applicatie. 

Via de applicatie kunnen bezoekers:

• relevante vacatures vinden
• blogberichten lezen over hoe ze zich kunnen bijscholen en tips om te solliciteren
• zich inschrijven om interessante events zoals jobbeurzen en sollicitatietrainingen te volgen

Uitgebreide uitleg op Canvas

Field types

Het juiste field type helpt om content correct te structureren & tonen in de front-end.

In Figma Sites kan je 5 soorten data opslaan:

• Plain text
• Rich text
• Link
• Image
• Date 

Niet elk field is tekst

Afhankelijk van het gekozen CMS, zijn er vaak nog extra soorten beschikbaar:

Nog meer field types

• Number: Aantal producten, prijs, score,...
• Video or asset: Case video, CV in PDF-formaat,...
• (Multi-)select box: Tags: "Design" / "Development"
• Boolean: Featured article, On sale,...
• ...

Voorbeeld: Webflow

Relations

Content staat niet altijd op zichzelf

Collections kunnen met elkaar verbonden zijn.

• Category:
  • ​Indoor
  • Outdoor
  • Beginner-friendly
• Article → Category
• Plant → Category

➡️ We duiden dit ook letterlijk aan met een pijl.

Voorbeeld

Voor de website 'Verde': elke plant valt binnen een categorie, vb "Indoor"

• Content kan hergebruikt worden
• Minder dubbele informatie
• Consistentere content
• Filtering & zoeken

Voordelen van relaties

👉 Meer collections + meer relaties = complexer model.

👉Daarom denken we hierover vroeg in het proces na.

Oefening 2

Field types & relations

Maak een content model voor een events platform.

• Via de applicatie kunnen bezoekers events bekijken. 
• De events worden georganiseerd door verschillende organisatoren
• De events vinden plaats op op verschillende locatie.
• De events worden opgedeeld in categorieën.

Uitgebreide uitleg op Canvas

Restrictions

& descriptions

Content is niet altijd perfect

Wat als de editor...

• een titel van 200 tekens invoert? 
• een gigantische afbeelding uploadt?
• geen korte beschrijving invult?
• een verkeerde waarde invoert?

Een goed content model houdt daar rekening mee.

Restrictions

= bepalen wat niet en wel mag
Kan je, afhankelijk van het CMS, instellen per field.

• Minimum/maximum aantal karakters
• Bestandstype
• Afbeeldingsgrootte
• ...

Descriptions

= geef de content editor extra uitleg

Gebruik dit enkel voor éxtra belangrijke info of indien het label op zich niet duidelijk genoeg is!

Required

= verplicht de gebruiker dit veld in te vullen

Meestal aangeduid met een asterisk (*)

Oefening 3

Restrictions

Dupliceer oefening 2.

Voeg relevante restrictions & descriptions toe. 

Duid aan welke velden required zijn.

Uitgebreide uitleg op Canvas

Huistaak

Movies discovery app

• Analyseer de aangeleverde wireframes voor de app
• Bouw een Content Model

Uitgebreide uitleg op Canvas