We are hiring developers

18 Mar 2018 | by Daniel

Why You Should Be Using Sketch #2

Part 2. What makes a good web design program?

A public service for web designers.

What we do.

Let's for a moment think about what we as web design people actually do.

We produce pictures that look like real websites. We do this to give people who need a website  an impression of what a website might look like when it goes live. Once the people who need a new website are happy with the pictures we have drawn for them, we then provide assets and documentation to help code-y people turn our pictures of websites into real working websites.

So what would we as people who make pictures of websites want out of a tool to help us draw pictures of websites?

We would probably want it to default to standard screen resolution (72dpi). We would also want it to default to using the additive colour model ‘RGB’. We would appreciate it if at the click of a button we could access standard website and device screen sizes to work on. In our dreams we might hope that it would limit any text and box stylings to what can actually be replicated in well supported HTML5 and CSS3. And in our hottest, wildest fever dreams we would ask that as the tap of a hotkey we could copy CSS code snippets to send over to our coding friends.

Well, fellow travellers, with Sketch you were able to do all that (and a whole lot more) from day dot. Now let’s talk about the competition.

What we need.

When I got into the old web design game there were two tools that you could use to design websites and they were made by the same software company.

One was explicitly designed for the task of drawing pictures of websites and the other was a tool made for improving photographs that inventive designers had appropriated by sheer force of will into a pixel-friendly workspace. I’m talking of course about Adobe Fireworks and Photoshop. Fireworks was the specific web design programme and it let you draw, order and resize vectors in a genuine RGA 72 dpi environment, kinda like how real websites work. Photoshop however never asked for nor wanted to be born into this family, and it tried to tell you itself with its nil vector handling, poor pixel anchoring and general Photoshop-ness.

This was the world available to web designers back then. It was a clammy, clunky world and there were Wotsit crumbs all over the place. We had no features to make sure what we were designing could actually be replicated in code. We had no friendly shortcuts to set us up in a mobile environment. We couldn’t just export a transparent PNG as we pleased. It was cowboy country. Something had to happen. Well, something did happen. Sketch 3 happened.

Sketch 3 happened.

Sketch 3 is at its least, the best programme that exists for making pictures of websites. It is also, as far as I can tell, the only programme that exists for making pictures of websites that is also of tangible use to the people who have to code up those pictures of websites. That seemed to be a concept utterly alien to even the built-for-purpose Fireworks. I won’t create a comparison table of features pitting Sketch against Photoshop and (the now unsupported) Fireworks because it simply isn’t worth it. Sketch was, from the moment it was released back in odd ‘11, the only programme to draw pictures of websites with.

In the next blog, I will talk about some of Sketch’s basic features and how Sketch keeps you in the mind of the coder.

A blog post by Daniel

A public service for those who make pictures of web sites.

read more

Virtually every feature Sketch has is special. Even those MVP ‘expected’ features like text and exporting images is frankly tip top, so let’s take a run down of the features that I find useful day...

read more