Hoe zet je Sketch om naar WordPress?

Een uitgebreid artikel vind je hier: https://sketchtowp.co/ (in het Engels), onderstaande informatie is deels gebaseerd op dat artikel.

Sketch wordt voornamelijk gebruikt voor het maken van UI/UX ontwerpen voor websites en mobiele applicaties. Veel ontwerpers gebruiken het, net als Photoshop, AdobeXD en andere ontwerpprogramma s.

Er zijn 5 manieren om een ontwerp om te zetten naar WordPress/een WordPress thema:

1. Programmeer het met de hand
2. Gebruik een Basis/Starter thema
3. Maak gebruik van een PageBuilder
4. Gebruik geautomatiseerde conversie
5. Laat het doen

Methode 1 en 2 heb je achtergrondkennis voor nodig, en kennis van HTML, pHp en CSS.
Methode 3 hoef je niet voor te kunnen programmeren, maar het is wel aan te bevelen dat je kennis hebt van page builders.
Methode 4 heb je wat meer kennis voor nodig dan basiskennis en geeft niet altijd het beste resultaat.
Methode 5 zitten meer kosten aan – en geeft je de keuze tussen de andere 4 methodes.

Bekijk de conclusie om te zien wat ik de beste methode vind.

Methode 1: Van Sketch naar HTML naar WordPress thema

Deze methode heeft 2 stappen: eerst zet je het ontwerp om naar HTML, en daarna zet je de HTML om naar een WordPress thema.

Stap 1: Sketch naar HTML

Er zijn twee opties bij het converteren van Sketch-ontwerpen naar HTML: handmatig te coderen of geautomatiseerde tools gebruiken.

Hoewel het sneller is, wordt het gebruik van geautomatiseerde tools meestal niet aanbevolen door veel ervaren ontwikkelaars. Dit komt omdat de resulterende codes mogelijk van lage kwaliteit zijn, niet responsive en over het algemeen onbruikbaar zijn als WordPress-thema. (zie methode 4)

Daarom kun je het beste conversie via handmatige handcodering gebruiken. Het is een conversiemethode die zorgt voor hoogwaardige en responsive code, aangezien je er de volledige controle over hebt.

Zorg er bij het kiezen van de handmatige codering ook voor dat je bibliotheken zoals Bootstrap gebruikt. Dan weet je zeker dat je aan het einde van de conversie een responsive site hebt die op alle soorten apparaten werkt.

Dit zijn de algemene stappen die je kunt volgen bij het converteren van Sketch naar HTML:

1. Open de Sketch-bestanden.
2. Ga naar getbootstrap.com en download de HTML-startsjabloon.
3. Begin met het bouwen van de pagina lay-out van het ontwerp, beginnend bij de koptekst, gevolgd door de voettekst en de overige delen van de pagina. Vergeet niet om global.css en style.css toe te voegen voor de typografie, kleuren, CSS voor knoppen, formulieren, enz.
4. WordPress-thema’s zijn opgebouwd uit meerdere bestanden, dus zorg ervoor dat u uw koptekst, inhoud, voettekst en andere delen van het ontwerp semantisch verdeelt in verschillende HTML-secties of div. Deze taak van verdelen helpt om de bestanden eenvoudig afzonderlijk in WordPress-sjablonen te plaatsen.
5. Raadpleeg het ontwerp en codeer de overige pagina’s. Zoals vermeld, wordt het aanbevolen om mediaquery’s te gebruiken die de responsiviteit van het resultaat garanderen.

Als je klaar bent met het handmatig coderen van de HTML-pagina’s, ben je klaar om door te gaan naar stap twee van methode 1, HTML converteren naar WordPress-thema.

Stap 2: HTML naar WordPress-thema

Om door te gaan met deze stap, raden we je aan om de volgende tutorials van WordPress en HTMLtoWP.co te bekijken. Dit zijn tutorials voor het ontwikkelen van WordPress-thema’s die u door het proces zullen vergemakkelijken.

1. WordPress Theme Development door WordPress.org
2. WordPress Theme Handbook op WordPress.org
3. HTML to WordPress conversion tutorial door HTMLtoWP.co

Na het verkennen van de tutorials, kun je nu doorgaan met de stappen die we hieronder hebben vermeld, zodat je kunt beginnen met het converteren van je Sketch-ontwerpen naar een WordPress-thema.

Stappen voor conversie van HTML naar WordPress

1. Maak een geheel nieuw thema en maak de onderstaande bestanden:
   style.css – functions.php – header.php – footer.php – index.php – single.php – page.php
2. Kopieer je style.css naar de style.css van het thema. Houd het gebied met opmerkingen bovenaan, omdat het de koptekst van de stylesheet definieert.
3. Kopieer de code voor je header van je HTML naar header.php. Om de normale headercode om te zetten in een WordPress-headercode, voegt je de native WordPress-functies toe, zoals wp_head() en wp_wp_menu().
4. Kopieer de footer-code van je HTML-bestand naar footer.php van het thema en voeg de functie wp_footer() toe. Als je van plan bent de voettekst te beheren met behulp van widgets, vergeet dan niet om de functie get_sidebar() op te nemen.
5. Zet voor statische homepages de rest van de code op home.php. Je kunt echter index.php gebruiken als het een lijst met lijsten toont.
6. Nadat de startpagina is voltooid, gaat je verder met het bouwen van de resterende pagina’s door voor elk afzonderlijke paginasjabloonbestanden te maken.

Voordelen:

• Responsieve en bruikbare resulterende codes omdat je volledige controle hebt over hun kwaliteit.
• De geproduceerde codes zijn goed becommentarieerd, schoon en bloat-vrij.
• Aangezien je handmatig codeert, heb je alle vrijheid om je eigen set codeerstandaarden te volgen.
• Je kunt alle CSS-frameworks kiezen om te gebruiken.

Nadelen:

• Het is erg omslachtig.
• Het is tijdrovend.
• Het heeft je waakzame aandacht nodig. Anders kun je belangrijke bestanden of stukjes code missen.
• Het is gevoelig voor bugs, net als alle andere codes die helemaal opnieuw zijn opgebouwd.
• Het vereist PHP- of WordPress-thema-ontwikkeling.
• Het is tijdrovend om te onderhouden aangezien er regelmatig updates zijn van WordPress, plugins en pHp versies.
• Alle WordPress voordelen (aanpassen menu, widgets, aanpassen footer etc.) moet je er zelf in bouwen als je dat wilt gebruiken.
• Niet standaard alle plugins bruikbaar

Methode 2: Maak gebruik van een zgn Starter thema of basis thema

Methode 2 biedt een veel eenvoudigere conversiemethode dan de vorige. Het zal niet al te veel werk en tijd vergen vanwege de vooraf gemaakte thema’s die je zult gebruiken en de volgende taak van het eenvoudig invullen van uw HTML-code.

Deze starter/boiler-thema’s bevatten style.css, functions.php, header.php en in wezen alle absolute minimumcode die nodig is om het thema uit te voeren. Met behulp van genoemde startthema’s kunt je direct beginnen met het omzetten van je ontwerpen naar WordPress-thema’s.

Dit zijn startthema’s die je kunt uitproberen:

1. Underscores – starter theme built by WordPress
2. Understrap – this is a combination of Underscores and Bootstrap.
3. WP Bootstrap Starter – Another starter theme based on Bootstrap.

Om deze methode te gebruiken, hoeft een gebruiker alleen een spoedcursus in WordPress-themastructuren te doorlopen. In plaats van diepgaande kennis van al zijn functies, vereist deze methode dat je alleen de basisfuncties leert.

Open om te beginnen uw HTML-bestanden die zijn geconverteerd vanuit een Sketch-ontwerp. Kies een startthema en begin met het invullen van uw HTML-codes rond de reeds bestaande codestructuur van het thema. Er zijn ook thema’s zoals Understrap, die een Customizer-functie heeft waarmee je de globale koptekst, voettekst, kleuren, typografie en lay-out kunt aanpassen.

Het gebruik van startthema’s voor de conversie van Sketch naar WordPress is eigenlijk een geweldige manier om WordPress-thema’s door ervaring te leren. Dus als je net nieuw bent in de branche en meer wilt weten over WordPress-thema’s, is deze methode een uitstekende en aanbevolen manier om te beginnen totdat je geleidelijk thema’s helemaal opnieuw kunt bouwen.

Voordelen:

• Het is een snellere methode, in tegenstelling tot de vorige.
• De vooraf gemaakte codestructuur zorgt ervoor dat u onmiddellijk hoogwaardige, lightweight en goed becommentarieerde code hebt.
• Codes SEO vriendelijk en semantisch.
• Het is minder vatbaar voor bugs dan de eerste methode.

Nadelen:

• Het is misschien sneller dan de eerste methode, maar het is nog steeds een vervelende manier van conversie.
• Het vereist PHP- of WordPress-thema-ontwikkeling.

Maak gebruik van een basisthema

Basisthema s hebben een standaard WordPress layout en kun je eigenlijk al zo gebruiken. Met ingebouwde velden en achtergronden kun je zelfs zonder programmeren je thema neerzetten. Via een Child Theme kun je nog meer aanpassen. Deze zijn voornamelijk geschikt voor eenvoudige ontwerpen.

Basisthema s zijn onder andere:

1. GeneratePress
2. Genesis

Voordelen:

• Het is een snelle manier voor eenvoudige websites.
• Je hoeft niet of weinig te programmeren.
• Alle WordPress-functies ingebouwd.
• Je hebt geen problemen met het gebruik van plugins.
• Er zijn regelmatig updates van je basisthema.

Nadelen:

• Voornamelijk geschikt voor eenvoudige websites

Methode 3: Gebruik een Page Builder

Page Builders zijn de tools voor slepen en neerzetten die ontwikkelaars gebruiken om Sketch-ontwerpen om te zetten naar WordPress-thema’s, zelfs zonder achtergrondkennis en ervaring met coderen.

Dit is een methode die rijke basisthema’s combineert met krachtige bouwers tijdens het conversieproces. Het is ook de perfecte methode voor gebruikers die niet weten hoe ze moeten coderen, maar die vooraf gebouwde thema’s kunnen aanpassen.

Dus, hoe werkt het? De basisthema’s worden gebruikt om de globale lay-outelementen in te stellen die nodig zijn om de sitestructuur klaar te maken. Deze elementen omvatten de koptekst, voettekst, kleuren, typografie, lay-outbreedte en meer. Paginabuilders worden vervolgens gebruikt om de inhoud van alle afzonderlijke pagina’s van de site te bouwen.

Enkele van de meest populaire Page Builders zijn Divi en Elementor.

Voordelen:

• Het is een van de gemakkelijkste manieren om Sketch naar WordPress te converteren.
• Het is een aanbevolen methode voor ontwerpers die basiskennis hebben van HTML/CSS en die deze methode kunnen gebruiken.
• Het is een snellere methode dan de vorige in de lijst, vooral als je al de weg weet in thema’s en Page Builders.
• Je maakt gebruik van de updates van de Page Builder, dus je hebt geen problemen met het onderhoud van je site met betrekking tot WordPress en plugin updates.
• Je kunt gemakkelijk delen aan je ontwerp toevoegen en verwijderen.

Nadelen:

• Als je net begint, kan dit een hoge leercurve opleveren.
• Sommige paginabuilders produceren zeer opgeblazen code.
• Over het algemeen zijn websites die met deze methode zijn gebouwd iets langzamer dan wanneer ze helemaal opnieuw zijn gebouwd.

Methode 4: Geautomatiseerd omzetten met behulp van softwaretools

Deze methode omvat een proces in twee stappen waarbij verschillende softwaretools worden gebruikt om Sketch naar WordPress te converteren.

Stap 1: het converteren van Sketch naar HTML

Je kunt hiervoor de Genus-plug-in voor Sketch gebruiken. Genus is een open-source plug-in die is ontwikkeld voor Sketch, waarmee je snel en eenvoudig een HTML-versie van je ontwerp kunt exporteren. Je kunt hier meer te weten komen over Genus.

Je kunt natuurlijk ook gebruik maken van andere tools, bijvoorbeeld animaapp.com

Als je de HTML-bestanden voor je ontwerp hebt, is het tijd om opnieuw een softwaretool te gebruiken die het automatisch naar WordPress converteert.

Stap 2: converteer HTML naar WordPress

Je kunt hiervoor gebruik maken van enkele tools, die meestal niet gratis zijn. Je geeft aan wat je content-gebied is en de tool zet het om naar WordPress. Je kunt dus op elke pagina maar één gebied beheren met inhoud.

Je kunt ook de volgende tools proberen: ExportKit and Pinegrow.com

Houd er rekening mee dat deze methode niet wordt aanbevolen voor complexe projecten. Dit komt omdat deze tools moeilijker in te stellen zijn wanneer ze worden gebruikt voor complexere ontwerpen. Het is ook minder waarschijnlijk dat dit leidt tot bruikbare codes. Het kan zijn dat je uiteindelijk toch nog het grootste deel van de codebase handmatig moet coderen. Bovendien is de code weinig flexibel: je hebt een thema volgens je ontwerp, maar kunt daar later weinig aan aanpassen.

Daarom wordt deze methode met het gebruik van geautomatiseerde tools voornamelijk gebruikt voor eenvoudige ontwerpen, terwijl de meer complexe ontwerpen beter kunnen worden gemaakt door handmatige codering en het gebruik van page builders meer flexibiliteit biedt.

Zeker met de flexibiliteit van veel thema s is het gemakkelijker om een passend thema te kiezen en dat in te vullen. Bijvoorbeeld Generatepress.

Voordelen:

• Een snelle methode van Sketch naar WordPress-conversie.
• Je hoeft alleen de basisstructuren van WordPress-sjablonen te kennen.
• Je kunt tegelijkertijd je thema ontwikkelen en de website ontwerpen.
• Deze methode kost minder dan de andere die in de lijst worden genoemd.

Nadelen:

• Hoe complexer het project, hoe groter de resulterende codes
• Deze methode wordt niet aanbevolen voor complexe schetsontwerpen.
• Je kunt vaak maar één inhoudsgebied aangeven.
• Er komen geen updates van.
• Het is niet flexibel.

Methode 5: Laat het een ander doen

Tsja, die is flauw maar wel waar:
Als je er niet druk mee wilt of kunt zijn: laat het doen.

Dus ik zou zeggen: neem even contact op voor de mogelijkheden.

Voordelen:

• Het is een volledig handsfree conversie van Sketch naar WordPress – je hoeft er (zelf) niets aan te doen.
• Er is geen codeerkennis vereist.
• In plaats van je tijd te besteden aan coderen, kunt je je meer richten op de groei van je bedrijf.
• Het inhuren van goede developers die van je ontwerp een flexibele en snelle WordPress website kunnen maken is mogelijk met het juiste budget.

Nadelen:

• Het is beslist duurder dan de vorige methoden in de lijst.
• Het kan moeilijk en tijdrovend zijn om betrouwbare ontwikkelaars te vinden die pixel-perfecte conversieservices kunnen leveren.
• Verwacht dat je minder controle hebt over de kwaliteit van de code (haha: wat wordt het als je het zelf doet?). Maar je kunt er zeker van zijn dat je uiteindelijk nog steeds een goede WordPress website krijgt, omdat ontwikkelaars je regelmatig hun vorderingen zullen laten zien voor feedback en goedkeuring.

Conclusie

Het omzetten van Sketch-ontwerpen naar WordPress kun je op verschillende manieren doen – of laten doen. Daarbij is er verschil in tijd en moeite en verschil in onderhoud.

• Het handmatig programmeren van een eigen thema kost veel tijd en het bijhouden en veilig werkend houden van een eigen thema kost ook nog eens veel tijd.
• Bij het gebruiken van een starter thema is het afhankelijk van het ontwerp / hoeveel eigen code er in zit hoe onderhoudsvriendelijk de site is. Van de starter thema s komen wel updates beschikbaar als dat nodig is.
• Bij het gebruik van Page Builders, zeker als je gebruik maakt van bekendere, hoef je je geen zorgen te maken over het bijhouden van de site: er komen regelmatig updates. Ook kun je later gemakkelijk dingen aan de site toevoegen en aanpassen.

Zoals je ziet gaat mijn voorkeur uit naar het gebruik van een Page Builder. Dit scheelt veel tijd (= budget), geeft flexibiliteit en zorgt voor goed onderhoud (= veiligheid) met betrekking tot updates.