Design en data
Introductie
Design en data
Twee grote delen:
- Data visualisatie
- Dynamic content UI
Data visualisatie - uitleg
Bij data visualisatie gaan we een poel aan data zo overzichtelijk mogelijk gaan visualiseren. Hierbij maken we gebruik van:
- Grafieken: lijn-, staafgrafieken
- Tabellen
- Vergelijkingen van data, categorieën, ...
Data visualisatie - voorbeeld
Data visualisatie - voorbeeld
Data visualisatie - valkuilen
- Overwhelming: overvloed aan mooi opgemaakte grafieken en tabellen zonder correctie hiërarchie
- Over-designed visualisaties die niet aangepast zijn aan de data
Data visualisatie - tips
Het belang van visuele hiërarchie
Data visualisatie - tips
Het belang van visuele hiërarchie - kleur
Data visualisatie - tips
Emphasize by de-emphasizing
Data visualisatie - tips
Semantics are secondary
Dynamic content UI - uitleg
Een UI dat wordt opgebouwd door data uit een database en zich aanpast aan de gebruikersinput, voorkeur en locatie.
Dynamic content UI - uitleg
Dit kan om het even welke soort content gaan
Dynamic content UI - uitleg
Dit kan om het even welke soort welke pagina gaan
Dynamic content UI - CMS
Content Management System is een systeem dat toelaat om alle content te beheren. Het laat toe meerdere auteurs content toe te voegen, te wijzigen en te verwijderen.
Dynamic content UI - CMS - templates
Dynamic content UI - tips
- Bepaal eerst je content voor je de opmaak vastlegt
- Ga een pagina niet individueel opmaken. Design een type-pagina
Dynamic content UI - typepagina
Dynamic content UI - typepagina
Dynamic content UI - tips
- Ga er niet vanuit dat data altijd zal passen in de voorziene ruimte
Data Driven Design - uitleg
Designen, testen en verfijnen van de UI/UX op basis van data die verzameld is door UX tracking, markttrends en input van de klant.
Na analyse van die data krijgen we objectieve inzichten waarmee we een design kunnen redesignen.
Design en data
CMS Collections
CMS Collections
Structuur bepalen
Webflow werkt met collections. Dit is een verzameling van # type content: blogpost, artikels, teammembers, ...
Een collection bevat items
Binnen een collectie bouw je de structuur op door velden te bepalen
Structuur bepalen
Structuur bepalen - new collection
Met slug wordt de url opgebouwd
Structuur bepalen - collection velden
Content toevoegen
Eenmaal de structuur klopt gaan we content toevoegen
OF
Oefening - collections
Maak een nieuwe collection in webflow voor Comic books
- Welke data kunnen we verzamelen?
- Welke type velden ga je hiervoor gebruiken?
Vul de collection met minimaal 5 items
Content visualiseren
Deze content kunnen we weergeven op een pagina
Content visualiseren - Collection list
- Overzicht van een Collection
- Kan je toevoegen aan elke type pagina
- Koppel je Collection List aan een bepaalde Collection
- Koppel een bepaald element met een collection item.
1.
2.
Content visualiseren - list filtering
- Elementen selecteren op basis van een element van een item.
- Filter zal altijd de laatste content overnemen. Pas je de content aan dan werken filters automatisch mee.
- Huidige item verbergen?
Content visualiseren - Collection Page
- Zal automatisch worden aangemaakt na het aanmaken van een collectie
- Wordt aangeduid met het paarse icoontje
- De pagina wordt opgebouwd met statische en dynamische inhoud
- Koppel dynamische elementen met een collection-item
Conditional visibility
Een voorwaarde opleggen wanneer een bepaald element of sectie zichtbaar is. Dit is afhankelijk van je collectie-velden
Oefening - collections vervolg
- Visualiseer Comic books als een list op je homepage waarbij je de laatste 3 comics toont. Voeg een knop toe op naar de template page te gaan van elke comic
- Bouw de template page op.
EN
Design en data
Ecommerce
Ecommerce Collections
Design en data
Portfolio