Clients & Productivity

How to Generate HTML from Sketch

by Viktor Solovey

Photoshop might dominate the design world, but there are a few other programs catching up. Sketch is starting to make a dent in Photoshop’s throne. If you’ve found that Photoshop isn’t to your liking and you own a Mac, then give Sketch a whirl. It’s a little bit cheaper, and holds the same functionality. And don’t worry, it’s still entirely convertible when the time comes to turn your final design into functional HTML.

How to Convert Sketch to HTML

Like a Photoshop document, Sketch can be converted to HTML in a few different ways: plug-ins, software and hand coding. Which you choose depends a lot on your specific situation and budget. There are advantages and disadvantages to each route.

Plug-ins

Like Photoshop, Sketch is compatible with a number of plug-ins, a couple of which purport to deliver completed code with a few simple clicks. This is the option for the adventurous designer who’s willing to pull double duty as a computer programmer.

Pros

This is the cheapest option. Many Sketch plug-ins are free or very cheap (Launchpad for example, is free if you don’t mind the company logo popping up all over your finished product. From there you can tier up to different subscription fees).

Cons

The ads are a bit misleading for most conversion plug-ins. You’re not actually going to get a complete product out of the deal. The plug-in will generate a foundation that you’ll be expected to tweak and mold before your site’s ready to go. So if you don’t have the time or knowledge to dive into the code and make sure it’s working for all screen sizes and loading quickly, then you probably want to steer clear of this option.

Plug-ins are also likely to leave you with dodgy code to begin with. They lack human judgement, and tend to work with lengthy, bloated code. Making these codes useable can sometimes take more time than hand coding from the start.

Software

There are software applications other than plug-ins that can convert Sketch to code for you, too. You might purchase and download the whole program or you might upload your Sketch designs online and download the results. These vary in cost but can usually end up surpassing plug-ins. (Many online converters like Avocode let you start for free before they begin asking for payments).

Pros

While more expensive than most plug-ins, these software tools will still be cheaper than most professional services. They’re a fast option and there’s no middleman.

Cons

Like plug-ins, these tools can leave you with bloated or unresponsive code, and you’ve often got no recourse if something goes wrong. All types of conversions software operate by the laws of “let the buyer beware.” If your code doesn’t work, you can’t send it in to be fixed or demand a refund. You may also find that there are elements of your design that simply “don’t work” with the conversion software, and you might have to greatly alter your original plan.

Hand coding

This is by far the best options quality-wise. If you’re a designer by day and a computer programmer by night then feel free to convert your designs yourself. If you’re not so HTML-inclined, then there are professionals who can help you. Many companies specialize exclusively in design document to HTML conversion services.

Pros

With conversion software, there is a limit to how decent a result you’re ever going to get, but there’s no cap on the quality you can get from a hand coding service. They can offer you the whole shebang.

  • W3C Markup Validation
  • Pixel-precise conversion
  • SEO-optimized code
  • Cross-browser compatibility
  • Mobile screen scaling
  • Clean code that’s easily modified
  • Fast loading times

Cons

The only downside to this option is cost. It’s by far the most expensive route, with decent quality companies usually charging 100 to 200 dollars for the first page of code and slightly less for each inner page. So it may not be within everyone’s budget. But if you’re designing for professional purposes, then the high initial cost of manually conversion is well worth it.

Remember that cheap and cost effective are not the same thing. You’re going to get a better product with hand coding, and you’ll eliminate the risk of needing your site fixed or redone.

Choosing a hand coding service

There are a lot of conversion companies out there, so shop with discretion for a partnership you won’t later regret.

Reliable PSD is a sure bet if you’re looking for a company with a strong background in design (they began life as a creative industry frustrated by poor conversion services). Unlike other conversion companies, they put an extra emphasis on quality assurance testing and client communication, so if you’re wanting to avoid a lengthy back-and-forth, they’re definitely the coders to turn to.

Join the Conversation

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You might also like:

hello@reliablepsd.com
close

Join over 10,000 agencies, designers, and
entrepreneurs getting our posts
about design and conversions

Thank you! We look forward
to seeing you around the blog :-)