Sketch/XD naar HTMLLay-out naar HTML

Je Sketch- of XD-ontwerp gebouwd in HTML en CSS: een pagina uit geëxporteerde artboards, met een mobiele versie

Meestal klaar in 15 minutenRevisies inbegrepenKwaliteitscontrole
Pakketten
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.

Je Sketch- of XD-ontwerp gebouwd in HTML en CSS: een pagina uit geëxporteerde artboards, met een mobiele versie

Voorbeeldresultaat

Voorbeeld voor het pakket Standaard

Dental clinic home page built from its design

Before: the design the client sent

The home page design

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

Sommige ontwerpen staan nog in Sketch- of Adobe XD-bestanden die zonder de app moeilijk te openen zijn, en de pagina is nooit gebouwd. Exporteer de artboards als PNG en upload ze, en wij bouwen ze in HTML en CSS: dezelfde secties, grid, kleuren en knoppen, met echte tekst, plus een mobiele versie gemaakt van het desktopartboard als er geen mobiele is. Wij kunnen geen .sketch- of .xd-bestanden, cloudlinks of prototypes openen, dus wat niet zichtbaar is in de export komt in de briefing. Foto's en iconen worden in dezelfde geest opnieuw getekend, tenzij je ze exporteert en apart 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.
  • Uit je artboardsSecties, witruimte, kleuren en lettergroottes zoals geëxporteerd
  • Mobiele versieGemaakt van het desktopontwerp als je geen mobiel ontwerp hebt
  • Echte tekstKoppen en alinea's als HTML die zoekmachines lezen
  • Je afbeeldingenFoto's, iconen en logo die apart zijn geëxporteerd worden overgenomen zoals ze zijn
  • Schone codeGewone HTML en CSS, geen frameworks, niets wordt van andere sites geladen

Hoe het werkt

  1. 1
    ExportJe exporteert de artboards als PNG en uploadt ze met je notities
  2. 2
    BouwWij bouwen de pagina's en tekenen de ontbrekende afbeeldingen
  3. 3
    Voorbeeld 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: artboards geëxporteerd uit Sketch (het onderdeel Export van de Inspector) of uit XD (Bestand > Exporteren > Geselecteerd), één pagina per bestand, op 1x of 2x, en desgewenst foto's, iconen of je logo apart geëxporteerd. Geef aan welk artboard bij welke pagina hoort, de lettertypen, staten die niet in de export staan, zoals een geopend menu, en waar elke knop naartoe leidt. Geen .sketch- of .xd-bestanden.

We vragen je:

  • Welk artboard hoort bij welke pagina?
  • Lettertypen in het ontwerp
  • Wijzigingen ten opzichte van het oude ontwerp
  • Waar leidt elke knop naartoe?
  • Is het ontwerp van jou?

Pakketten vergelijken

PakkettenBasis1 artboard, maximaal 5 secties€ 19Standaard1 artboard, maximaal 10 secties€ 35PremiumMaximaal 3 artboards€ 60
Levertijd1 dag2 dagen3 dagen
Revisies123
Pagina's113
Sectiesmaximaal 5maximaal 10maximaal 8 per pagina
Getekende afbeeldingen voor de pagina24—
Mobiele versieJaJaJa
Wat je uploadtPNG-export van artboardsPNG-export van artboardsPNG-export van artboards
Getekende afbeeldingen voor de pagina's——6
Bestellen BasisBestellen StandaardBestellen 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.
Hoe het werkt →

Vragen en antwoorden

Ik heb Sketch of XD niet meer geïnstalleerd.

Vraag dan iemand die het bestand nog heeft om de artboards te exporteren, of stuur scherpe screenshots van het ontwerp als de tekst daarop leesbaar is. Wij werken alleen op basis van afbeeldingen.

Kunnen jullie mijn cloudlink gebruiken?

Nee, wij werken alleen met geüploade afbeeldingen, niet met links of ontwerpbestanden, en wij loggen niet in op je accounts.

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.

Kunnen jullie het oude ontwerp tijdens het bouwen opfrissen?

Kleine wijzigingen uit je briefing, zoals een nieuwe tekst, kleur of knoplabel, ja. Een nieuwe layout voor de hele pagina is een herontwerp en valt niet onder deze dienst: hier bouwen wij het ontwerp dat je instuurt.

Staat je antwoord er niet bij?

Pakketten