Skipping Sketch and other design tools: Prototyping two simple screens in *code* in just over 13 minutes [Video]

Designing In Code Example Design

Sketch is blowing up right now and companies expect UI/UX people to know it—it comes up a lot. Besides the fact that it’s Mac OS only, I think it’s a great tool for designers to create rich looking designs for their apps. However, one of the problems with its growing ubiquity is that everyone is beginning to think it’s THE BEST method for prototyping. I can concede that it could be the best prototyping tool, but it it’s not the best method. Let’s get one thing straight:

Code Is KING.


Some facts about my process and the results:

  • I did not practice. This video was recorded in one try
  • I started with my own mobile design boilerplate that defined the screen dimensions and some color classes. Everything else was written on the fly
  • The screens are simple, but in another 5 minutes, a noticeable layer of polish could be added
  • This is just a fake app created for the purposes of this blog post.
  • The demo is interactive, it links to its own pages (and elsewhere), and is viewable in a mobile browser.
  • Sending a link to a live demo is better than sending a PDF.

Let’s compare and contrast Sketch and writing code:

I came across this link that outlines the benefits of Sketch.

“Sketch is 100% Vector-Based” – what this is saying is that it’s scaleable.
Code is scalable and it does vectors too.

“With Sketch, draw once, export as many resolutions as needed”.
With code, just code once, scales to the heavens, no exports needed.

“Sketch has pixel snapping and alignment”.
Code has native syntax for pixel perfect precision and alignment.

“Sketch supports multiple pages”.
So do webpages.

“Sketch supports text and other styles”.
Code: delivering cascading style sheets since 1996.

“Sketch doesn’t need to downsize assets to share work”.
Code doesn’t require this either, and sharing is as simple as sending a link.

“Sketch can export to SVG”.
Code doesn’t need to be exported. It just IS.

“Sketch Knows CSS”.
CSS is Code.

“Sketch can pull Color From Anwhere”.
Many text editors do this.

“Sketch can mirror your Designs onto Mobile Devices and Tablets”.
With a coded responsive demo, the same link will display optimized on all mobile devices, tablets, and desktops.

“Sketch has more intuitive slicing, while Photoshop’s slicing is antiquated.”
Code: Slicing? LOL.

Sketch: “Speed up your workflow by creating designs a whole lot faster than Photoshop”
Code: Speed up your workflow by creating designs directly in the browser, skipping all the middleman tools.

See also 6 Reasons Not To Hire A Photoshop Warrior