Webdesign Expert

Als allround webdesigner weet je in allerlei specialismen je weg: van UX Design tot websitebeheer. In deze webdesign opleiding stomen we je klaar voor een carrière als algemeen webdesigner, waarbij de focus op WordPress ligt. Niet alleen omdat het zo populair is, maar ook omdat je er allerlei kanten mee op kunt. Na afloop bouw je zelfstandig complete websites, die ook nog eens aan alle usability-eisen voldoen.

Zo is de opleiding opgebouwd

Deze webdesign opleiding bestaat uit twaalf trainingsdagen en zeven trainingen die op elkaar aansluiten:

• UX Design
• Visual Design met Figma
• Interaction Design
• WordPress basis
• WordPress gevorderd
• WordPress Code
• WordPress Bouw je eigen Thema

Programma van de opleiding Webdesign Expert

UX Design

Dag 1 Ochtend

• Introductie UX Design
• Waar liggen je UX-kansen in apps en websites?
• Design Thinking
• User centered design
• Usability
• Testen
• Een strategisch plan opzetten

Middag

• Ux research
• Doelen stellen
• Je doelgroep analyseren
• De vier globale gebruikerstypen
• Persona’s maken
• Zoekmachine-optimalisatie gebruiken voor je structuur
• Zelf een plan schrijven
• Bespaar tijd door gebruik te maken van AI-tools zoals ChatGPT

Dag 2 Ochtend

• Card sorting
• Tree testing
• De kracht van gamification
• Triggers en variabele beloning
• Context gebruiken: locatie, datum, tijd
• Belangrijke overtuigingstechnieken
• De customer journey (klantreis)
• Het proces van a tot z
• Belangrijke do's en dont's

Middag

• Je concept en strategie uitschrijven

Visual Design met Figma

Dag 1 Ochtend

• Introductie Figma: in vogelvlucht door het programma
• Lagen, assets en pagina’s
• Gereedschap
• Inspector-menu
• Tekenen / pentool gebruiken in Figma
• Sneltoetsen
• Foto's importeren en bewerken (maskeren)
• Vectorafbeeldingen importeren en wijzigen
• Objecten groeperen
• Slim schalen met restricties voor responsive design
• Lagen uitlijnen en distribueren
• Tekststijlen aanmaken
• Kleuren in het ontwerp opnieuw gebruiken
• Herbruikbare vormgeving maken

Middag

• Master components en assets (herbruikbare elementen)
• Een layoutraster instellen voor pixelperfect design
• De indeling aanpassen voor tablets en mobiele telefoons
• Bestanden exporteren
• Losse elementen exporteren
• Plug-ins gebruiken
• Prototype maken in Figma
• Praktijkopdracht

Dag 2 Ochtend

• Een ontwerp veranderen in een klikbaar prototype
• Verbindingen maken tussen schermen
• Toevoegen van animaties, overgangen en effecten als sticky headers en floating buttons

Middag

• Praktijkopdracht afronden
• Samenwerken binnen een Figma-bestand: medewerkers uitnodigen, rechten verlenen en feedback geven
• Een Figma-design opleveren bij developers

Interaction Design

Dag 1 College 1

• De basisprincipes van interaction design
• Toepassingsgebieden: wanneer is interaction design belangrijk?
• De geschiedenis van interfaces
• Voorbeelden van goede interaction designs
• Trends in het vakgebied
• Interfaces voor web en mobiel (adaptive/responsive design)

College 2

• Sitestructuur
• Casestudies
• Een interface ontwerpen
• De navigatie ontwerpen
• Landingspagina
• Homepage
• Productpagina
• Categoriepagina

Dag 2 College 3

• Formulieren
• Check-outs
• Dashboardapplicatie
• Facet-filter
• Navigatie ontwerpen voor mobiel
• Datavisualisatie
• Design patterns
• Interaction style guide

College 4

• Page description diagrams
• Wireframes maken
• Een functioneel ontwerp maken
• Prototyping
• Opdracht
• Presentatie opdracht

WordPress Basis

Dag 1  Ochtend 

• Wat is WordPress, en waarin onderscheidt het zich ten opzichte van andere systemen?
• WordPress verkennen: dashboard, scherminstellingen, admin-bar, navigatiemenu, front- en backend
• De belangrijkste stappen die bij elke nieuwe site van belang zijn: website titel, slogan, taal, tijdzone en permalinks
• De verschillende Post Types: de keuzes en publicatiemogelijkheden
• Het plaatsen en ordenen van berichten

  Middag

• Werken met blokken en patronen (bijv. media toevoegen)
• Menu’s aanmaken voor interne en externe pagina’s
• Widgets gebruiken en beheren

Dag 2  Ochtend

• Thema’s kiezen: gratis vs. premium
• Aanpassingen doen via de Customizer
• Contactpagina maken met formulier
• Bezoekersgedrag meten via statistieken-plugins

Middag

• Gebruikersbeheer: meerdere mensen aan de site laten werken
• Privacy-instellingen: cookiemelding en privacyverklaring
• Content exporteren en importeren
• Een website planmatig opbouwen en optimaliseren

WordPress gevorderd

Ochtend

• Verschil in de rol van content beheerder versus website beheerder
• Domeinnaamregistratie: waar moet je op letten?
• Het filesystem en het belang van de database en het bestand wp-config.php
• Wat is FTP en waar heb je het voor nodig?
• Het installeren en verplaatsen van een website
• De beveiliging van je website
• Back-ups maken en terugzetten
• Hoe pas je de styling van je thema aan, waarom moet je altijd een ‘child theme’ gebruiken en hoe pas je HTML en CSS aan via de editor?

Middag

• Hoe installeer en configureer je WordPress plugins en waar moet je op letten?
• Welke mogelijkheden zijn er om AI te integreren, welke plugins zijn er?
• Waarom is 'onder water' kijken belangrijk en welke functie heeft de browser Inspector?
• Eenvoudige CSS aanpassingen doen via de Extra CSS in de Customizer
• Een Child thema maken en het hoofdthema aanpassen
• De mogelijkheden van de nieuwe generatie Block thema's

WordPress Code

Ochtend

• LocalWP is dé perfecte ontwikkeltool om WordPress sites te clonen, exporteren naar zip, blueprints te maken, we bespreken de ins & outs
• Wat is de syntax van PHP en welke functie vervult het in WordPress
• Hoe zit het filesystem in elkaar, de mapstructuur en de functie van het bestand wp-config.php
• De database editor van LocalWP heet Adminer, op je hosting gebruik je vaak Phpmyadmin

Middag

• Leer de basis van de webtalen HTML, CSS en JS door onder water te kijken met de Inspector
• Met een plugin gaan we hooks plaatsen in WordPress, zodat we minder plugins nodig hebben
• Ontdek de kracht van snippets waarmee je aanpassingen kunt doen in WordPress zonder dat je dit in templatebestanden hoeft te doen
• Thema aanpassingen uitvoeren, child theming en AI code snippets laten schrijven

WordPress Bouw je eigen Thema

Dag 1 Ochtend

• Introductie tot Breakdance en vergelijking met Elementor
• Installatie & configuratie via LocalWP
• Werken met Design Sets: import en toepassingen
• Inzicht in Global Settings en hoe je die slim inzet

Middag

• Fonts instellen via Presets (Heading & Body)
• Header & Footer analyseren en aanpassen
• Vrije opdracht met alternatieve Design Set

Dag 2  Ochtend

• Werken met Popups
• Verkennen van Basis elementen (bouwstenen van Breakdance)
• Verdieping in Block-, Site-, Advanced- en Form-elementen

Middag

• Eigen site bouwen vanaf een blanco canvas
• Alles toepassen: Headers, Footers, Templates, Global instellingen
• Maintenance modus en performance verbeteren
• Je ontwerp omzetten naar een Design Set om te hergebruiken
• Werken met codefragmenten (Header/Footer) en belangrijke tools
• UI aanpassen via Preferences & lokaal lettertypes installeren (.woff/.woff2)