Handgetekende website-indelingen converteren naar HTML-code met Sketch2Code van Microsoft

Heb je je ooit afgevraagd hoe cool het zou zijn om gewoon iets op papier te tekenen en het in de echte wereld tot leven te laten komen? Welnu, dat is precies wat Microsoft heeft bereikt met de AI-aangedreven Skletch2Code-webapp, die met één klik op de knop handgeschreven tekeningen van een whiteboard naar HTML-websites kan converteren.

Sketch2Code kan elke handgetekende lay-out van een website in slechts enkele seconden omzetten in HTML. De tool maakt gebruik van de Computer Vision AI-service van Microsoft om HTML-objecten in een tekening te detecteren en gebruikt vervolgens tekstherkenning om de handgeschreven tekst in de tekening te extraheren om HTML-fragmenten van alle ontwerpelementen in de afbeelding te combineren en samen te stellen.

Dit maakt het voor webontwerpers en ontwikkelaars waanzinnig snel om binnen enkele seconden HTML-prototypes van een website in veel verschillende stijlen te bouwen. Als je wilt weten hoe dit in de backend werkt, lees dan zeker de technische details over Sketch2Code op de website van Microsoft.

Hieronder vindt u een korte tutorial om u te laten zien hoe eenvoudig het is om Sketch2Code te gebruiken om lay-outtekeningen van websites om te zetten in echte HTML-pagina’s.

Teken eerst een lay-out van uw website op een whiteboard of een wit vel. Maak er vervolgens een foto van en sla deze op uw computer op. Klik daarna op onderstaande knop om de Sketch2Code webapp in uw browser te openen.

Zodra u de website geopend heeft, klikt u op de knop Ontwerp uploaden en selecteert u de afbeelding van de website-indeling die u op een whiteboard of wit vel hebt getekend.

Selecteer en upload uw handgetekende website-indeling

Nadat u het handgetekende website-ontwerp heeft geüpload, kunt u achterover leunen en kijken hoe Sketch2Code AI gebruikt en automatisch een HTML-pagina genereert op basis van de lay-out in de afbeelding die u heeft geüpload.

Zodra het proces is voltooid, krijgt u een voorbeeld van de nieuw gegenereerde HTML-pagina te zien, samen met de optie om de volledige code te downloaden. Klik op de knop Uw HTML-code downloaden om de. html-bestand van uw handgetekende website-indeling, zodat u deze lokaal in uw webbrowser kunt testen en bekijken.

Klik op de knop “Download uw HTML-code”.

Dat is het. We hopen dat Sketch2Code u tijd bespaart bij het prototypen van een webpagina-indeling.