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

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