OntwikkelingPhotoshop naar HTML
Je Photoshop-ontwerp gebouwd in HTML en CSS: een pagina uit je geëxporteerde layout, met een mobiele versie
Prijsvanaf € 19
Figma naar HTMLLay-out naar HTML
BetaalbeschermingDetails
- Revisies binnen het pakket zijn gratis.
- Reageer je niet binnen 3 dagen na levering, dan wordt het werk automatisch goedgekeurd.
Het geld wordt bij betaling gereserveerd en pas vrijgegeven als je het werk goedkeurt.
Voorbeeldresultaat
Voorbeeld voor het pakket Standaard
Dental clinic home page built from its design
Before: the design the client sent
After: the working page
Files: a ZIP archive with index.html, the styles and 2 pictures for the page, ready to upload to the client's hosting. The pictures here are screenshots of the page.
Client: Bright Smile Dental. Task: turn the home page design into a working HTML page with the same layout, colours and texts, and booking buttons that call the clinic.
De klant en alle details zijn verzonnen.
Over deze dienst
Je ontwerp staat klaar in Figma en je hebt het nodig als werkende pagina. Exporteer de frames als PNG op 1x of 2x en upload ze, en wij bouwen ze in HTML en CSS: dezelfde secties, grid, witruimte, kleuren en knoppen, met echte tekst in plaats van een afbeelding van tekst. Als je een mobiel frame hebt, volgen we dat; zo niet, dan maken we de mobiele versie op basis van het desktopframe. Wij kunnen geen .fig-bestanden of Figma-links openen, dus lagen, componenten, varianten en prototypelinks worden niet gelezen: wat niet zichtbaar is in de export, zoals hoverkleuren, komt in de briefing. Foto's worden opnieuw getekend tenzij je ze uploadt. Geen animaties, back-end, CMS of hosting.
Wat is inbegrepen
- Wat je krijgtEen ZIP-archief met de pagina's, stijlen en afbeeldingen, klaar om naar je hosting te uploaden, plus een voorbeeld van elke pagina op de bestelpagina.
- Trouw aan je framesSecties, grid, witruimte, kleuren en lettergroottes zoals geëxporteerd
- Mobiele versieOp basis van je mobiele frame, of gemaakt van het desktopframe
- Echte tekstKoppen en alinea's als HTML die zoekmachines lezen
- Je afbeeldingen, als je ze stuurtFoto's en iconen die apart zijn geëxporteerd worden overgenomen zoals ze zijn; de rest wordt opnieuw getekend
- Schone codeGewone HTML en CSS, geen frameworks, niets wordt van andere sites geladen
Hoe het werkt
- 1ExportJe exporteert de frames als PNG, uploadt ze en vermeldt wat niet zichtbaar is
- 2BouwWij bouwen de pagina's en tekenen de ontbrekende afbeeldingen
- 3Voorbeeld en archiefJe vergelijkt de pagina's met je ontwerp op een computer en een telefoon, downloadt het archief en vraagt binnen je pakket om aanpassingen
Wat we van je nodig hebben
Maximaal 5 afbeeldingen als PNG, JPEG of WebP: frames geëxporteerd uit Figma op 1x of 2x, één pagina per bestand, plus desgewenst foto's, illustraties of je logo apart geëxporteerd om zo te gebruiken. Geef aan welk frame bij welke pagina hoort, de namen van de gebruikte lettertypen, hover- of geopende staten die niet in de export staan, en waar elke knop naartoe leidt. Geen .fig-bestanden of Figma-links.
We vragen je:
- Welk frame hoort bij welke pagina?
- Lettertypen in het ontwerp
- Staten die niet in de export staan
- Waar leidt elke knop naartoe?
- Is het ontwerp van jou?
Pakketten vergelijken
| Pakketten | Basis1 Figma-frame, maximaal 5 secties€ 19 | Standaard1 Figma-frame, maximaal 10 secties€ 35 | PremiumMaximaal 3 Figma-frames€ 60 |
|---|---|---|---|
| Levertijd | 1 dag | 2 dagen | 3 dagen |
| Revisies | 1 | 2 | 3 |
| Pagina's | 1 | 1 | 3 |
| Secties | maximaal 5 | maximaal 10 | maximaal 8 per pagina |
| Getekende afbeeldingen voor de pagina | 2 | 4 | — |
| Mobiele versie | Ja | Ja | Ja |
| Wat je uploadt | PNG-export van frames | PNG-export van frames | PNG-export van frames |
| Getekende afbeeldingen voor de pagina's | — | — | 6 |
| Bestellen Basis | Bestellen Standaard | Bestellen Premium |
Betaalbescherming
Je betaalt bij het bestellen, maar het geld wordt alleen vrijgegeven voor goedgekeurd werk.
- Vaste prijsDe prijs van het pakket verandert niet meer nadat je hebt betaald.
- Het geld wordt gereserveerdBij betaling wordt het bedrag alleen gereserveerd. Het gaat pas naar de dienst als je het werk goedkeurt.
- Gecontroleerd vóór leveringElk resultaat doorloopt een kwaliteitscontrole voordat het bij jou komt, en je ziet het op de bestelpagina voordat je het goedkeurt.
- Gratis revisiesVraag wijzigingen binnen je briefing aan, zo vaak als het pakket toestaat.
- Goedkeuring na 3 dagenKeur je het werk binnen 3 dagen na levering niet goed en vraag je ook geen wijzigingen, dan wordt het automatisch goedgekeurd. Schrijf je na levering in de chat van de bestelling, dan wacht de bestelling; zodra we hebben geantwoord, kunnen we de 3 dagen opnieuw laten ingaan en melden we dat in de chat.
- Opnieuw doen of volledige terugbetalingPast het resultaat niet bij je briefing en hebben de revisies dat niet opgelost, of duurt het werk meer dan twee keer zo lang als de levertijd, schrijf dan in de chat van de bestelling: we doen het werk opnieuw of betalen het volledige bedrag terug.
Vragen en antwoorden
Hoe exporteer ik uit Figma?
Selecteer het frame, voeg een exportinstelling toe in het onderdeel Export van het rechterpaneel, kies PNG op 1x of 2x en klik op Export. Een lange pagina kan één hoog frame zijn; zeer hoge frames exporteren beter op 1x.
Kunnen jullie gewoon mijn Figma-link gebruiken?
Nee, wij werken alleen met geüploade afbeeldingen, niet met links of .fig-bestanden, en wij loggen niet in op je accounts.
Worden mijn lettertypen gebruikt?
Pagina's gebruiken systeemlettertypen die dicht bij de jouwe liggen, omdat er niets van andere sites wordt geladen. Geef ons de namen van de lettertypen zodat wij de dichtstbijzijnde kiezen; je kunt later de webfontbestanden toevoegen als je licentie dat toestaat.
Komt het tot op de pixel overeen met mijn ontwerp?
Het komt dichtbij qua indeling, kleuren, maten en volgorde van secties, maar niet tot op de pixel: lettertypen zijn vergelijkbare systeemlettertypen en foto's worden opnieuw getekend tenzij je je eigen foto's uploadt. Met revisies pas je aan wat voor jou belangrijk is.
Werken de prototype-interacties?
Links, knoppen en het mobiele menu werken. Prototypeflows, overlays, animaties en overgangen maken geen deel uit van deze dienst.
Staat je antwoord er niet bij?
Ontwikkeling
OntwikkelingSketch/XD naar HTML
Je Sketch- of XD-ontwerp gebouwd in HTML en CSS: een pagina uit geëxporteerde artboards, met een mobiele versie
Prijsvanaf € 19
OntwikkelingPagina in referentiestijl
Een pagina in HTML en CSS in de stijl van een site die je mooi vindt, met je eigen inhoud en een mobiele versie
Prijsvanaf € 19
OntwikkelingMobiele versie uit ontwerp
Je mobiele ontwerp gebouwd in HTML en CSS: een pagina uit je telefoonschermen die ook op computers goed opent
Prijsvanaf € 19