Webdesign Expert

De Opleiding Webdesign Expert is een uitgebreid traject om websites te ontwerpen en te bouwen voor verschillende soorten schermen, zowel op desktop als op mobiel. Twaalfdaagse webdesign opleiding In 12 dagen word je een expert op het gebied van webdesign door het volgen van een uitgebalanceerd pakket aan cursussen:

• UX Design (2 dagen)
• Interaction design (2 dagen)
• Visual Design met Sketch en Invision (2 dagen)
• WordPress Website maken (2 dagen)
• WordPress Beheer (1 dag)
• WordPress Code (1 dag)
• WordPress Bouw je eigen thema (2 dagen)

Wat kun je na het volgen van de Opleiding Webdesign Expert Tijdens de eerste training leer je een strategie en concept voor je eigen website of app te ontwikkelen. Met interaction design technieken optimaliseer je vervolgens jouw bestaande website of app. Of je ontwikkelt op deze manier een geheel nieuwe site of app. Wanneer je jouw concept direct kunt visualiseren en klikbaar kunt maken, kun je ook meteen testen hoe de site of app werkt bij de gebruiker. Veel professionele webdesigners werken daarom met de programma's Sketch en Invision om hun ideeën snel in visuele prototypes om te zetten. Website maken met Wordpress Het tweede deel van de opleiding verdiepen we ons meer in de techniek. De meeste websites maken gebruik van het platform Wordpress en daarom leer je in dit tweede deel hoe je een website kunt maken en beheren in Wordpress. WordPress is op dit moment het meest populaire contentmanagementsysteem. WordPress is heel gebruiksvriendelijk en zet je snel op het juiste spoor. Diploma Webdesign Expert Tijdens de eerste drie cursussen werk je aan een eigen case waar je een website of app voor gaat maken. Aan de hand van de UX theorie krijg je praktijkopdrachten. De ervaren docent begeleid je hierbij maar je krijgt ook tips en adviezen van je medecursisten. Uiteindelijk maak je een klikbaar prototype van je ontwerp. In het tweede deel maak je een eigen website in Wordpress. Wanneer je alle opdrachten met goed resultaat hebt afgerond, behaal je het diploma Webdesign Expert. Hoe bereid ik me voor? Voor deze webdesign opleiding is geen specifieke voorkennis vereist. Het is wel handig als je alvast nadenkt voor welke site of app je een ontwerp wil maken. Het onderwerp is vrij.

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

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

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

WordPress level I (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 1

• 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 2

• 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 level II (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 – ochtend

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

Dag 1 – middag

• 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 – ochtend

• 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

Dag 2 – middag

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