Opleiding Webdesign Expert

Wat kun je na het volgen van de opleiding Webdesign Expert

Jouw resultaat

• Je kunt een UX-strategie ontwikkelen en je concept visualiseren
• Je leert hoe je kunt tekenen met Sketch en kunt (interactieve) prototypes maken
• Je kunt een professionele website bouwen voor jezelf of een opdrachtgever
• Je kunt je website optimaliseren voor bezoekers en zoekmachines (SEO)
• Je kunt je website naar eigen smaak inrichten met thema’s, templates, hooks, filters en widgets

Programma van de opleiding Webdesign Expert

UX Design

Dag 1

College 1

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

College 2

• Ux research
• Doelen stellen
• Je doelgroep analyseren
• De vier globale gebruikerstypen
• Persona’s maken
• Zoekmachine-optimalisatie gebruiken voor je structuur
• Zelf een plan schrijven

Dag 2

College 3

• Card sorting
• 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

College 4

• Je concept en strategie uitschrijven

Visual Design met Sketch en Invision

Dag 1

College 1

• Introductie in Sketch: in vogelvlucht door het programma
• Lagen en pagina’s
• Gereedschap
• Inspector menu
• Tekenen in Sketch
• Sneltoetsen
• Foto's importeren
• Een foto bijsnijden (maskeren)
• Vectorafbeeldingen importeren en wijzigen
• Objecten groeperen
• Slim schalen voor responsive design
• Lagen uitlijnen en distribueren
• Kleuren in het ontwerp opnieuw gebruiken
• Herbruikbare vormgeving maken
• Tekststijlen aanmaken

College 2

• Symbolen (herbruikbare elementen)
• Een layoutraster instellen
• Pixelprecies werken
• De indeling aanpassen voor tablets en mobiele telefoons
• Bestanden exporteren
• Tekengebieden exporteren
• Plug-ins gebruiken
• Prototype maken in Sketch
• Praktijkopdracht

Dag 2

College 3

• Workflow: van wireframes naar visual design
• Craft Plugin
• Introductie Invision: in vogelvlucht door het programma
• Je Sketch-ontwerpen importeren naar Invision
• Interactieve prototypes maken in InVision

College 4

• Werken aan je praktijkopdracht

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 

College 1

• Waar is een CMS eigenlijk voor, en waarin onderscheidt WordPress zich?
• WordPress verkennen: dashboard, scherminstellingen, admin-bar, navigatiemenu, front- en backend
• Pagina’s en de berichtensectie met categorieën en tags: hoe gebruik je de teksteditor, hoe publiceer je?
• Content importeren
• Met menu’s werken

College 2

• Media toevoegen en beheren: waar moet je op letten?
• Widgets gebruiken in widget-area’s
• Het thema aanpassen met de customizer
• Instellingen toepassen

Dag 2 

College 3

• Welke opties heb je voor de weergave van je WordPress-site?
• Wat zijn ‘goede’ thema’s?
• Het verschil tussen ‘freemium’ en ‘premium’
• Een thema kopen, doen? En dan?

College 4

• Functies toevoegen met plugins, zoals een contactformulier en webstatistieken
• Waar moeten plugins aan voldoen? Een shortlist
• Een paar freemium plugins installeren
• Extra: wat kan er nog meer binnen WordPress?

WordPress gevorderd

College 1

• Verschil in de rol van content beheerder versus website beheerder
• Domeinnaamregistratie, de hosting, DNS en FTP
• Het WP Filesystem en de Database
• Wat is PHP, HTML en CSS
• Je WordPress veilig houden: wat doe je met bestanden op webservers, en hoe houd je anderen buiten de deur?
• Introductie van de Inspector
• 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?

College 2

• Hoe installeer en configureer je WordPress plugins, welke zijn populair, welke zijn oké en welke zeker niet?
• ’s Nachts backups van je bestanden en database maken
• Hoe verhuis je een WordPress-website?

WordPress Code

Ochtend

• Achter je site regelen ruim 1500 bestanden alles. Hoe kom je bij die bestanden, en wat doen ze aan de achterkant, voorkant (content) en daartussen?
• De hosting ontsluit belangrijke factoren als de PHP-versie en -variabelen. Hoe krijg je toegang tot de hosting, en hoe en pas je PHPmyAdmin en serverbased-instellingen aan om je website beter te laten functioneren?
• WordPress draait op PHP: wat is het, en wat doet het?

Middag

• PHP, html, CSS, JavaScript en jQuery: ze zorgen er allemaal voor dat je website werkt. Maar hoe?
• Slim wijzigingen aanpassen in WordPress-templates: zo ‘tweak’ je het design van je website
• De WordPress Loop is cruciaal, maar waarom? En hoe kun je met functies, filters en hooks WordPress naar je hand zetten?
• Aan de slag met de block-editor van WordPress: je schrijft zelf een plugin om blocks te kunnen bouwen die je ook echt kunt selecteren en gebruiken.

WordPress Bouw je eigen Thema

Dag 1

College 1

• Introductie: wat kun je allemaal met Oxygenbuilder?
• De plugin installeren en configureren
• De Oxygenbuilder-editor verkennen: wat voor tabs en opties heb je?

College 2

• Templating: zelf een functionerend template bouwen dat past bij je doelstellingen en situatie
• Global settings en responsive design: verschillende webdesigns voor verschillende apparaten maken

Dag 2 

College 1

• Library: op ontdekkingstocht in de designbibliotheek van Oyxenbuilder. Welke standaard website-onderdelen zitten erin, en hoe pas je ze aan?
• Settings: je cache regelen, je toegang bepalen, SVG-sets uploaden en andere instellingen

College 2

• Praktijkopdracht: de site van een pizza-webshop ontwerpen. We letten alleen op het design, de functionaliteit komt in een andere training aan bod.