tentrend.nl
Tentrend
Verhuur en verkoop van sfeervolle tenten voor bruiloften en evenementen
- Websitebouw
Je Figma-ontwerp naar WordPress.
Je ontwerp staat klaar in Figma, met een frame per pagina en een nette set componenten. Nu moet het een website worden die net zo strak oogt, vlot laadt en die je zelf bijwerkt. Daar zorg ik voor, van het eerste frame tot de laatste knop. Eerst een check van je bestand, dan een vaste prijs.
Wie bouwt je Figma-ontwerp in WordPress?
Dat doe ik: Joost Wijgergangs van Web&Wij. Ik zet Figma-ontwerpen om in een WordPress-website met een eigen thema, zodat het resultaat aanvoelt als wat je in Figma ziet en jij de inhoud zelf beheert. Sinds 2023 heb ik ruim 30 websites gebouwd, veel daarvan vanuit een ontwerp dat iemand anders maakte. Je werkt rechtstreeks met mij, ook als je ontwerper meedenkt.
- Wie: Joost Wijgergangs, van Web&Wij
- Wat: Figma-ontwerpen bouwen in WordPress
- Voor wie: Ondernemers en teams met een ontwerp in Figma
- Techniek: WordPress met een eigen thema, zonder paginabouwer
- Kennismaking: Een half uur, online of telefonisch
- Reactie: Binnen 1 werkdag
Web&Wij? Dat zijn jij en ik.
Wat ik in je Figma-bestand bekijk
Een Figma-bestand vertelt veel meer dan hoe een pagina eruitziet. Elk frame is een scherm. Componenten zijn de bouwstenen die steeds terugkomen, zoals een knop of een kaart met een foto. Varianten laten zien hoe zo'n bouwsteen verandert, bijvoorbeeld een knop waar je muis boven hangt. Hoe netter dat is opgezet, hoe trouwer ik het kan volgen.
Auto layout helpt ook. Daarmee leg je in Figma vast hoeveel ruimte er tussen onderdelen zit en wat er gebeurt als een tekst langer wordt. Precies dat moet een website ook weten, want jouw teksten veranderen straks in het beheer.
Waar het vaak op vastloopt: er is alleen een frame voor de computer, een lettertype zonder licentie voor het web of een onderdeel dat wel getekend is maar niet beschreven, zoals een schuivende reeks foto's. Dat haal ik er vooraf uit. Ontbreekt de versie voor de telefoon, dan spreken we af of ik die afleid uit je ontwerp of dat je ontwerper hem nog tekent.
Herken je dit?
Het ontwerp is af en goedgekeurd. Nu het bouwen nog.
Bang dat het net anders wordt
Je hebt lang aan je ontwerp geschaafd. Een website waarop de afstanden en lettergroottes ongeveer kloppen, is niet wat je zoekt.
Geen telefoonversie
In Figma staat alleen het scherm van de computer. Hoe het menu en de tabellen op een telefoon werken, weet nog niemand.
Zelf aanpassen wordt een gok
Je wilt straks zelf teksten wisselen, maar bent bang dat je dan de opmaak van je ontwerper stukmaakt.
Zo pak ik het aan
Ik lees je bestand vooraf door, vraag na wat onduidelijk is en bouw vaste velden, zodat de opmaak blijft staan als jij de tekst aanpast.
Wat je krijgt
Een website die je Figma-ontwerp volgt en die je daarna zelf in de hand hebt.
-
Een check van je bestand
Voor ik begin, loop ik alle frames na. Wat ontbreekt, lastig is of extra tijd kost, hoor je voordat je een prijs krijgt.
-
Componenten worden bouwstenen
Een knop of kaart uit je ontwerp wordt één bouwsteen in de code. Zo ziet hij er op elke pagina hetzelfde uit.
-
Varianten die echt werken
Een knop die van kleur verandert of een menu dat openklapt: de toestanden uit je varianten zitten gewoon in de website.
-
Goed op een telefoon
Heb je een mobiel frame, dan volg ik dat. Zo niet, dan leid ik de telefoonversie af uit je ontwerp, zoals we vooraf afspreken.
-
Velden met de inhoud erin
Elke pagina krijgt vaste velden met de teksten en foto's uit je ontwerp al ingevuld. Jij past de inhoud aan, de vormgeving blijft staan.
-
Licht en vlot
Zo min mogelijk plugins en afbeeldingen in een formaat dat snel laadt, ook als je ontwerp vol grote foto's staat.
In de praktijk
Zo werkt het
Van een gedeelde link naar een website die live staat.
-
Kennismaken
Je deelt een link naar je Figma-bestand met leesrechten. In een half uur, online of telefonisch, loop je met me door de belangrijkste schermen.
-
Check en voorstel
Ik bekijk elk frame en meld wat ontbreekt of extra werk vraagt. Daarna krijg je een voorstel met een vaste prijs en een planning.
-
Bouwen op een testversie
Ik bouw de website op een testversie. Jij legt hem naast je Figma-frames en geeft in twee rondes je feedback.
-
Live en verder
Op een werkdag, nooit op vrijdag, gaat de website live. Daarna krijg je 14 dagen nazorg op alles wat we afspraken.
Benieuwd hoe een project precies verloopt?
Meer over mijn werkwijzeVeelgestelde vragen
Welke Figma-onderdelen heb je van me nodig?
Het liefst een bestand met een frame per pagina, voor de computer en de telefoon, plus je componenten. Een link met leesrechten is genoeg: daarmee kan ik maten, kleuren en lettertypes bekijken. Gebruik je auto layout en vaste stijlen voor kleur en tekst, dan komt de website nog dichter bij je ontwerp.
Mijn ontwerp heeft geen mobiel frame. Is dat een probleem?
Nee, maar we spreken het vooraf af. Meestal leid ik de telefoonversie af uit je computerontwerp: kolommen komen onder elkaar en het menu klapt in. Wil je ontwerper de telefoonschermen liever zelf tekenen, dan wacht ik daarop. Hoe we het doen, staat in het voorstel.
Wordt de website precies zoals in Figma?
Zo dicht als een browser toelaat. Een website is geen plaatje: teksten worden langer of korter en schermen hebben allerlei breedtes. Daarom volg ik de regels uit je ontwerp, zoals de ruimte tussen onderdelen. Niet alleen wat je op één scherm ziet. Wijkt iets af, dan zie je dat op de testversie en pas ik het aan in een van de twee feedbackrondes.
Kan ik zelf teksten aanpassen zonder het ontwerp te slopen?
Ja. Elke pagina krijgt vaste velden voor tekst, foto's en knoppen. De vormgeving zit in het thema, dus een langere titel of een andere foto gooit de opmaak niet om. Je krijgt een eigen inlog die alleen laat zien wat je mag aanpassen.
Mijn ontwerp gebruikt een betaald lettertype. Kan dat?
Ja, als je licentie gebruik op een website toestaat. Lettertypes uit Google Fonts mag je gratis gebruiken, ook zakelijk. Bij een betaald lettertype heb je meestal een aparte licentie voor het web nodig. Twijfel je, stuur dan de naam mee, dan kijk ik het na.
Wat kost het om mijn Figma-ontwerp te laten bouwen?
Dat hangt af van het aantal verschillende schermen en wat er beweegt of rekent. Tien pagina's die op dezelfde bouwstenen leunen, zijn minder werk dan vijf pagina's die elk anders in elkaar zitten. Na de check krijg je één vaste prijs. Komt er onderweg iets bij, dan hoor je eerst wat het kost.
Mijn ontwerper wil meekijken. Kan dat?
Graag zelfs. Je ontwerper kijkt mee op de testversie en technische vragen mogen rechtstreeks naar mij. De feedback bundel je wel samen in één overzicht, zodat ik niets mis en we de twee rondes goed benutten.
Werk je ook met een ontwerp uit Adobe XD?
Ja. Het gaat om de schermen en de afspraken die erin staan, niet om het programma. Een ontwerp in Adobe XD bekijk ik op dezelfde manier: per scherm, per bouwsteen en met de vraag hoe het zich gedraagt op een telefoon.
Staat je vraag er niet bij? Stel hem gerust.
Bijgewerkt op door Joost Wijgergangs
Ligt je Figma-bestand klaar?
Plan een gratis kennismaking en zet de link naar je bestand erbij. Dan lopen we samen de schermen door.