Webdesign en webontwikkeling: niet voor beginners

1. Lay-out en vormgeving, UX- en UI-design

Velen menen goed te zijn in het combineren van kleuren. Door Instagram en de camerafunctionaliteit denken veel mensen een krak te zijn in fotografie. Toch moet je voor de ontwikkeling van een website over heel veel grafische vaardigheden beschikken die verder gaan dan wat aangeboren talent of het gebruik van digitale tools.

Zo vertelde een student me ooit goed te zijn in Photoshop, maar in feite ging het over het gebruik van filters in Instagram.

Naast het ontwerpen of "vormgeven" van een site (webdesign), komt er ook webontwikkeling (programmeren) aan te pas. Een aantal skills zijn onontbeerlijk:

Het kunnen samenstellen of gebruiken van een professionele huisstijl: kleur, kleurenpalet, vectorieel logo, stijlbijbel, typografie...
Verstand van UX-design (user experience design)
Grondige kennis van interaction design (welke interactieve toepassingen zijn mogelijk).
Wat kan wel of niet in een website? Bijvoorbeeld: in een website kan je geen gebruik maken van de webcam of camera van de smartphone, je kan geen bestanden opslaan op de harde schijf van de gebruiker enz.
UI-design: een goede gebruikersinterface is meer dan ooit belangrijk. Een website of webapp staat of valt bij zijn UI (User Interface). Je moet kennis hebben van de diverse UI-stijlen. Grote bedrijven zoals Apple, Microsoft en Google hebben hiervoor ganse teams van professionele ontwerpers in dienst. Meen niet te snel dat je hiervoor zelf de nodige skills hebt.
Information architecture & user research: bij het ontwerpen van een uitgebreide(re) site of webapp, moet je een grondig idee hebben van wie je eindgebruikers zullen zijn. Op basis hiervan bouw je de "informatie-architectuur" van je frontend en backend op.
Niet bang zijn van coderen in HTML, CSS, javascript.
Verstand hebben van servertechnologie.
Kunnen programmeren in één of andere servertechnologie zoals PHP.
Een databank kunnen opzetten in bijvoorbeeld MySQL.
...

Kortom: een website opbouwen en de vormgeving... is niet weggelegd voor beginners. Grafische vormgeving, webdesign en ook webontwikkeling... vragen zeer veel vaardigheden en vooral ook veel ervaring.

Meer info of diepgang nodig voor 'webdesign'?

Een uitgebreide handleiding over User Interface- en User Experience- design vind je in dit PDF-bestand (pagina 20 tot en met 43): https://www.schoolvoorbeeld.be/cursusmultimedia.pdf
Professionele kleurpaletten samenstellen: www.paletton.com
Professionele lettertypes voor websites: https://fonts.google.com/
Professionele UI-ontwerpen: https://material.io/design/ en https://developer.apple.com/design/human-interface-guidelines/
Professionele iconsets: https://fontawesome.com/
...

2. CMS-systemen en maatwerk

Grotere websites zoals blogs, nieuwssites, bedrijfssites, webshops... vragen andere oplossingen. Het is dan niet meer efficiënt om bijvoorbeeld voor elk product dat je op een site wil tonen, een afzonderlijke webpagina te maken in een teksteditor.

De artikels die op de pagina's verschijnen, worden gestructureerd opgeslagen in een databank. De webontwikkelaar programmeert in een of andere programmeertaal (bijvoorbeeld PHP) een stuk code dat de databank kan openen en lezen. De software doet meer dan enkel de databank openen. De code genereert op basis van de databankinhouden automatisch webpagina's (in HTML).

Hoe werkt zo'n systeem? Bekijk het in onderstaand filmpje:

De eigenaar van de site of iemand van haar/zijn bedrijf (één of meerdere teamleden) kunnen de inhouden van de site zelf toevoegen via een online systeem, zo'n beetje zoals je in Facebook reacties post, maar dan met meer mogelijkheden.

Zo'n systeem bestempelen we als een CMS, een content management system. Alle informatie die aan de site wordt toegevoegd, blijft op de server bewaard in een databank. De server maakt automatisch de webpagina's die de bezoeker wil bekijken.

^{Hieronder een voorbeeld van het CMS-systeem achter deze site waarin ik deze tekst nu aan het intikken ben :-)}

Zo'n systeem waarbij er heel wat automatisch gebeurt op de "achtergrond" (op de webserver) vormt de basis van heel veel websites, maar ook van webapplicaties zoals social media (Facebook, Instagram...), reissites (booking.com...), online bankieren... enz.

Voor zulke backendtoepassingen worden in veel gevallen bestaande CMS-systemen (zie ook vorige pagina) zoals WordPress of Joomla ingezet. Heel vaak is er echter nood aan gespecialiseerd maatwerk waarbij één of meerdere webontwikkelaars nodig zijn.

Cursus backendontwikkeling

3. Webshops, betaalsystemen en synchronisatieproblemen

Raad een bedrijf niet te snel een webshop aan. Er zitten zeer veel addertjes (en zelfs serieuze slangen) onder het gras:

Wat als je webshop online een paar schoenen verkoopt en je verkoopt hetzelfde paar ook "offline" in je winkel? Hoe los je dat probleem op?

Nadelen en problemen:

Het grootste probleem met webshops is synchronisatie met een “offline” winkel en/of een stockbeheer.
Het is niet altijd “slim” om al je producten zichtbaar op je site te plaatsen, ook al heb je geen webshop.
Denk ook aan: koppeling met betaalsysteem + kostprijs daarvan.

4. Mobile first en responsive websites

Google verwacht dat elke site zonder problemen mobiel kan bekeken worden. En als Google dat zegt, dan kunnen we niet anders dan "luisteren", want Google is de grootste en belangrijkste zoekmachine in de westerse wereld.

Dit kan je makkelijk zelf uittesten door je browservenster te versmallen of de site op een smartphone te bezoeken.

^{Afbeelding: De site www.cultuurreizen.be op laptop en op smartphone.}

Wacht niet tot je site kant-en-klaar online staat. Je moet evenmin een "extra" of afzonderlijke site bouwen. Een webmaster die op een slimme manier gebruikmaakt van CSS, heeft aan mobiele ondersteuning nog relatief weinig werk. De nieuwste vormen van webdesign zorgen ervoor dat je site meteen "responsive" reageert. D.w.z. dat je site zich ogenblikkelijk aanpast aan het scherm waarop hij wordt weergegeven.

De controle van de Google-politie

Google controleert of een site mobile-first is (of een site in de eerste plaats gericht is op mobiele toestellen). Als dit niet het geval is, gaat je site naar beneden in de zoekresultaten. Dat wil je als eigenaar van een website natuurlijk niet.

Google voert die controle natuurlijk niet "manueel" uit (met echte mensen). De zoekmachine gebruikt hiervoor software die de broncode van je webpagina's (de HTML-code) uitleest.

In hoofdzaak gaat die software op zoek naar één regeltje code. Je kan zelf controleren of die regel aanwezig is. Als dat niet het geval is, kan je aan de webmaster de tip geven om die regel toe te voegen.

Hoe ga je te werk?

Open je website of webpagina in een browser zoals Google Chrome.
Rechtsklik in de pagina (liefst niet op een afbeelding).
Klik op "Paginabron weergeven".
De HTML-code van de webpagina verschijnt nu in beeld.
Ga op zoek naar de volgende regel (meestal één van de eerste regels in de code):
Als die regel niet te vinden is, moet je de webmaster vragen om die aan elke pagina toe te voegen.