Webdesign van scratch tot PRO - gratis cursus van Skillbox, training, Datum: 29 november 2023.

Figma van nul tot PRO
Je beheerst het populairste webdesignprogramma op professioneel niveau. Leer hoe u interactieve prototypes kunt maken, ontwerpen aan ontwikkelaars kunt overdragen en tijd kunt besparen op routinetaken.

Maak kennis met Figma
U begrijpt de interface en basisinstellingen van het programma. Leer geometrische vormen, lagen en tekstvelden gebruiken. Bouw je eerste prototype.

Figma-basishulpmiddelen
Ontdek wat frames zijn en hoe ze verschillen van lagen. Leer eenvoudige vormen tekenen, kleur, effecten en tekst toevoegen. Leer de basisprincipes van prototypen.

Iconen, illustraties en afbeeldingen
Leer hoe u uw eigen pictogrammen kunt maken en afbeeldingen kunt manipuleren met behulp van de interne tools van Figma. U kunt geheel opnieuw ontwerplay-outs maken zonder gebruik te maken van editors van derden.

Componenten
Leer hoe u componenten maakt en het instellingenpaneel gebruikt. Leer hoe u interactieve prototypes kunt maken en de klant kunt laten zien hoe mensen de toekomstige site zullen gebruiken.

Componentbibliotheken en algemene stijlen
U kunt bibliotheken met stijlen en UI Kit maken om interface-elementen te standaardiseren. Leer hoe u nette lay-outs kunt maken met behulp van modulaire rasters.

Automatische lay-out en varianten
U begrijpt hoe u lay-outs kunt combineren tot een systeem met behulp van de functie Varianten. Je kunt complexe interface-elementen voor verschillende apparaten maken en aanpassen.

Complexe documenten met meerdere pagina's
Leer werken met basisschermen en maak een paginaboom. Ga aan de slag met de bètafunctie Branches. U zult begrijpen hoe u het werk van het team kunt organiseren op verschillende versies van dezelfde lay-out.

Extra functies en gemeenschap van auteurs
Ontdek welke plug-ins u helpen snel conceptprojecten te maken en met bewerkingen te werken. Leer hoe u animatie aan prototypes kunt toevoegen.

Het voorbereiden van een lay-out voor ontwikkelaars
Je kunt de ontwikkelaar de technische aspecten van het project en de code van de componenten laten zien. Leer hoe u het werk van uw team kunt optimaliseren met de Figma Jam-plug-in.

Webdesign van nul tot PRO
Je verdiept je in het vak van webdesigner. Je leert hoe je aan een project werkt - vanaf de eerste ontmoeting met de klant tot de voltooide website. Leer creatieve ideeën te bedenken en gebruik te maken van UX-onderzoek. Verbeter uw vaardigheden door middel van ontwerpsprints.

Inleiding tot het beroep van webdesigner
Ontdek welke problemen webontwerpers oplossen en waarom deze specialisten zo gewild zijn. Maak kennis met professionele termen en hulpmiddelen.

Eerste opdracht: communicatie met de klant en technische specificaties
Leer communiceren met de klant: ontdek de doelen en beperkingen van het project, bespreek referenties, plan deadlines. U zult begrijpen hoe u de juiste verwachtingen kunt scheppen op het werk en niet te veel kunt beloven. Technische specificaties opstellen.

Zoek naar een idee
U zult begrijpen hoe observatie u helpt de beste ontwerpideeën te vinden. Leer uw concurrenten analyseren, maak moodboards en selecteer succesvolle referenties voor uw project.

Modulaire roosters
Elke lay-out begint met een modulair raster. U maakt kennis met de soorten en leert hoe u de juiste kiest. Leer meer over de nuances van rasters voor mobiele en volledige versies.

Verticaal ritme
Leer de aandacht van gebruikers te beheersen met behulp van een competente compositie en verticaal ritme. Leer meer over visuele hiërarchie en begrijp welke grootte elk element op de pagina moet hebben.

Typografie
Leer lettertypen selecteren en met elkaar combineren. Je begrijpt hoe je een effectief ontwerp kunt maken, rekening houdend met de regels van de typografie.

Sprinten 1
Duur en minimalistisch: wij creëren een landingspagina-ontwerp op basis van typografie

De taak van teksten in interfaces
Lees meer over de vereisten voor teksten voor interfaces. Leer de basisprincipes van UX-copywriting. Je kunt de teksten aanpassen zodat ze begrijpelijk zijn voor de gebruiker en perfect in de opmaak passen.

Kleuren, achtergronden en schaduwen
Beheers de kleurentheorie en leer over de functies ervan in de interface. U begrijpt hoe u een palet voor een website selecteert en de elementen markeert die het belangrijkst zijn voor de gebruiker. U kunt realistische schaduwen maken voor knoppen en andere ontwerpcomponenten.

Contrast en leesbaarheid
Leer hoe u belangrijke blokken op een pagina visueel kunt markeren en tekst leesbaarder kunt maken. Maak kennis met de principes van inclusief ontwerp en maak websites voor een breed publiek.

Prototype op de eerste pagina
Creëer een wireframe - een prototype dat zich richt op structuur en logica in plaats van op visueel ontwerp. Beheers twee ontwerpbenaderingen: block en freestyle.

Sprint 2
UX schrijven: we creëren een landingspagina en bereiden teksten voor voor alle interface-elementen.

Scherm eerste pagina
Maak kennis met de atomaire ontwerpmethode, die het ontwerpen van websites zal versnellen. U begrijpt hoe u vanaf het eerste scherm de aandacht van gebruikers kunt trekken. Leer knoppen, pictogrammen, gegevensinvoervelden en formulieren maken in een consistente stijl en schaal.

Gebruikersonderzoek: Customer Journey Map en User Flow
Leer hoe u in uw ontwerp rekening kunt houden met de behoeften van uw doelgroep. Leer een Customer Journey Map en User Flow te maken en evalueer het gebruikersgedrag in elke fase van de interactie met de site.

Navigatie
Begrijp de soorten navigatie. U zult begrijpen voor welke taken en apparaten elk geschikt is.

Ontwerp van hoofdblokken
Leer productkaarten, sliders, blokken met voordelen, tarieven en advertenties maken. Je stelt een volwaardige pagina samen en begrijpt hoe je deze aan de klant moet presenteren. U kunt uw ontwerpbeslissingen toelichten, wijzigingen adequaat accepteren en omgaan met bezwaren van klanten.

Aanpassingsvermogen en componenten
Maak kennis met responsive webdesign en de principes ervan. Laten we eens kijken naar populaire adaptieve meshes. Leer hoe u een hoogwaardige mobiele versie van de site kunt maken.

Sprinten 3
We passen de pagina-indeling aan voor computer, tablet en mobiele telefoon.

Presentatie van het project aan de klant
Leer hoe u een project op een effectieve en begrijpelijke manier presenteert. Leer uw oplossingen aan de klant uitleggen en beantwoord typische of onverwachte vragen.

Het overdragen van de lay-out aan ontwikkelaars
Je zet de lagen en hun namen op volgorde, maakt eenvoudige animaties van elementen en overgangen tussen pagina's en maakt een specificatie. Leer een ontwerpbeoordeling uit te voeren na de lay-out.

Sprinten 4
Technieken voor een indrukwekkend portfolio: een case maken over Behance.

Portefeuille geval
U zult uitzoeken wat beter is voor promotie: een website voor visitekaartjes of een portfolio op ontwerpplatforms. Leer hoe u cases kunt maken op Behance, zodat uw werk wordt opgemerkt en gewaardeerd. Meer informatie over betaalde en gratis promotiemethoden.

Bonusmodules

1. Principes van succesvol werken met de klant
2. Waar u bestellingen kunt zoeken
3. Hoe ontwerpers in grote teams werken

Afstudeerproject

Website-ontwerpconcept
Kies een van de echte klanten en ontwikkel een websiteontwerp voor hun bedrijf. Gebruik storytellingprincipes om over je werk te praten.