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.
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.
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.
