Different UX designers approach the task of wireframing in different ways. Some like to draw by hand, while others like to use apps or tools found online. But more often than not, the decision to use online tools or to wireframe by hand, and the process used to get to from wireframe to code, is less related to the individual preference of the UX Designer, and much more related to what approach the particular situation requires. It depends largely on how much emphasis there is on visual design in a project, and how much uncertainty there is with respect to what is being designed.

In the bullet points below are a number of ways different designers can structure the process from design to implementation:

• Wireframe > Interactive Prototype > Visual > Design
• Sketch > Code
• Sketch > Wireframe > Hi-Def Wireframe > Visual > Code
• Sketch > Wireframe > Visual > Code

If the task is very narrow and the visual design is either set or considered unimportant (such as with many backend administrative interfaces), then sketch > code makes sense, whereas if the time and resources and the business value are all high, then spending the time to make a high-definition wireframe and going through a cycle of testing with a fully realized interactive prototype makes better sense.