Satdesign kubus
Leestijd: 7 min.
Leestijd: 7 min.

Van ontwerp naar website – handleiding voor ontwerpers

Regelmatig vragen ontwerpers mij hun design om te bouwen tot een website. Standaard krijg ik daarna de vraag ‘wat moet ik hiervoor aanleveren?’. In deze blog een kijkje in de keuken. Zo zie je hoe ik werk en wat ik nodig heb om jouw ontwerp tot leven te brengen.

Aanleveren van het ontwerp

Om de huisstijl van de klant goed weer te geven op een website heb ik minimaal het ontwerp van een homepage en subpagina nodig. Als hier verschillende designelementen op staan zoals tekst, foto’s, overzichten, reviews, call to actions en een contactformulier, kan ik dit doorvertalen naar de overige pagina’s van de site. Maar wil je meer controle? Lever dan alle belangrijke webpagina’s aan.

Ontwerp voor desktop of mobiel

In de meeste gevallen wordt de desktopversie aangeleverd en bepaal ik zelf uiteindelijk de mobiele weergave. Maar mocht de klant liever een ‘mobile first’ website hebben, dan kun je ook een mobiele weergave aanleveren.

Bij voorkeur lever jij je ontwerp aan in een pdf-bestand. Gebruik je speciale lettertypes? Lever dan ook de ttf-bestanden aan.

Pdf exporteren met Affinity Designer

Nu ik het ontwerp heb, open ik het in Affinity Designer. Designers maken het ontwerp vaak in een Adobe programma, zoals Illustrator of PhotoShop. Maar het openen van pdf-bestanden kan ook prima in Affinity Designer. Dit is een uitgebreid programma zonder de maandelijkse abonnementskosten.

PDF ontwerp geopend in Affinity Designer
Het ontwerp geopend in Affinity Designer

Opslaan van losse elementen

In Affinity Designer zie ik alle lagen van de elementen op de pagina. Hierdoor kan
Ik alle blokken, foto’s en teksten los van elkaar selecteren en veranderen of exporteren. Afhankelijk van het soort ontwerp sla ik elementen als losstaande bestanden op.

Meestal sla ik elementen op als svg-bestand. Omdat dit een vector formaat is, heeft het minder opslagcapaciteit nodig dan een jpg- of png-bestand. Dat is gunstig voor de laadtijd van de website.

Foto’s sla ik bij voorkeur op als jpg. Alleen wanneer het niet anders kan gebruik ik een png-bestand. Dit is zwaarder en daarom minder geschikt voor een website.

Instellen van de huisstijl in WordPress

In WordPress sla ik de kleuren uit de huisstijl op bij de standaardkleuren. Ze kunnen dan tijdens het bouwen makkelijk worden geselecteerd waardoor er zekerheid is dat alles binnen de huisstijl past.
Ook de lettertypes stel ik in. Het lettertype dat jij als ttf-bestand aanleverde, zet ik om naar verschillende andere formaten. Er zijn namelijk browsers die geen ttf gebruiken, maar bijvoorbeeld woff. Door verschillende formaten te uploaden toont de website altijd het juiste font.

Bouwen van de header en footer

De voorbereiding zit erop. Het is nu tijd om de daadwerkelijke pagina’s te bouwen in Elementor. Meestal komen de header (bovengedeelte) en footer (ondergedeelte) op iedere pagina terug. Daarom stel ik die apart in. Het hoeft dan niet op iedere pagina opnieuw geplaatst te worden. WordPress heeft hiervoor een templatefunctie. 

De homepage bouwen

Er is nu al iets zichtbaar op de pagina. Maar het is nog een beetje kaal met alleen een header en footer. Daarom bouw ik de rest van het ontwerp uit het pdf-bestand na. Daarbij doe ik mijn best alle verhoudingen die jij hebt bepaald over te nemen. Dit lukt helaas niet altijd 100%, omdat ik rekening moet houden met verschillende beeldschermformaten. 

De pagina bouwen in WordPress Elementor

Controleren van de website op verschillende devices

Wanneer ik een element op de website toevoeg of wijzig, controleer ik hoe dit eruit ziet op verschillende beeldschermformaten. In Elementor heb je daarvoor een handige ‘responsive’ optie. Hiermee bekijk ik de weergave op mobiel, tablet en desktop (en eventueel nog meer eigen ingestelde formaten).

Een website responsive maken is een tijdrovende klus. Maar uiteindelijk levert dit een pagina op zoals jij die bedoeld hebt. Hierna bouw ik alle subpagina’s. Er worden elementen hergebruikt zodat er een logisch en consistent ontwerp ontstaat.

Jouw rol in het proces

Bij de start van onze samenwerking bespreken we wat jouw rol in het proces is. Wil je bijvoorbeeld de homepage controleren nadat ik hem heb gebouwd? Of wil je nog feedback leveren nadat ik jouw ontwerp heb doorvertaald naar de overige pagina’s? Laat het ons weten, we denken graag met je mee.

Dit lever jij aan

Samenvattend heb ik dit van jou nodig:

Need to have

  • Ontwerp homepage en subpagina in pdf
  • Iconen in svg
  • Foto’s voor de overige pagina’s in jpg
  • Logo in svg
  • Gebruikte lettertypes in ttf

Nice to have

  • Huisstijldocument
  • Foto’s uit het ontwerp in jpg

Ben jij ontwerper en op zoek naar iemand die jouw ontwerp met zorg omzet naar een echte website Neem contact met ons op.

Pepijn van Rijen

Pepijn van Rijen

Deel dit artikel:

Blogs

We helpen je met onze energie graag een stap vooruit. Daarom vinden we het leuk om onze kennis over online ondernemen met je te delen.

Lees hieronder onze laatste bijdragen.

Het is mogelijk om je website ergens anders onder te brengen, maar hosting via Satdesign biedt een aantal belangrijke voordelen.
Satdesign is een klein bedrijf. Twee man sterk. Dat is even wennen als je gewend bent aan een groot webdesignbureau. Ik licht je daarom toe wat je kunt verwachten van onze bereikbaarheid.
Satdesign zit sinds 1 juni 2021 in het Blushuis in Breda. Graag vertel ik je in deze blog meer over dit gebouw. Waarom zitten we hier en wat zijn de voordelen om in een ‘verzamelgebouw’ onze zaken te doen?
Je website gebruikt een ‘cache’. Het kan daarom zijn dat een gemaakte wijziging niet altijd direct zichtbaar is voor de bezoeker. Er is een eenvoudige manier om de wijziging direct zichtbaar te maken voor iedereen.
Regelmatig vragen ontwerpers mij hun design om te bouwen tot een website. Standaard krijg ik daarna de vraag ‘wat moet ik hiervoor aanleveren?’. In deze blog een kijkje in de keuken. Zo zie je hoe ik werk en wat ik nodig heb om jouw ontwerp tot leven te brengen.
Een website is een belangrijk onderdeel van je online aanwezigheid en het is essentieel dat het up-to-date blijft om de aandacht van bezoekers te trekken en vast te houden.
Tegenwoordig is het hebben van een zakelijke website een essentieel onderdeel van elk bedrijf. Of je nu een klein of groot bedrijf hebt, een website kan je helpen om je klantenbestand te vergroten en je merk te versterken.
Een belangrijk aspect van webdesign is het creëren van een website die gemakkelijk te gebruiken is voor jouw bezoekers. Het optimaliseren van jouw website voor een betere gebruikerservaring kan resulteren in een hogere betrokkenheid van jouw publiek en een betere conversieratio.
Voor onze websites betaal je een eenmalige prijs én sluit je een maandelijks onderhoudsplan af. Hierbij betaal je iedere maand voor het goed en veilig functioneren van je site. We leggen je uit waarom we met een onderhoudsplan werken.