How I used Sketch to design Nusii; Beautiful proposals, simplified.
Nusii is online proposal software for creative professionals, and it was designed in Sketch. Its customers range from freelance designers to digital agencies.
Tweetable goodness: Nusii: Proposal software for creative professionals. Beautiful proposals, simplified.
12 months ago Nusii was little more than an idea. It was an ugly MVP designed in Photoshop and contracted out to a developer for $2,500. A lot has happened since then, and thankfully I discovered Sketch in between that first concept and the one launching today.
The problem with designing for the web…
A web app can be made up of multiple screens and dozens, if not hundreds of interactions. In the days of old (ie: 12 months ago for me) this would have meant a PSD for every screen. I’d save each one individually and pray my Internet connection would hold while uploading to Dropbox. The drawbacks were substantial.
Changes across multiple files were a real pain
If you’ve ever designed in Photoshop then you know what it means to make changes across several PSD’s. A menu needs changing, or an icon needs updating across the entire app and you’re battling with dozens of huge files… Even with Photoshop’s Smart Objects you still need to invest considerable time digging about, finding the culprit and then making any changes.
Sketch allows you to keep all those separate project files in the same document! You can have multiple pages and multiple artboards all in the same small .sketch file. Even if you don’t use Sketch’s version of smart objects (Symbols) you can still save a lot of time by having all of your files at hand and in plain sight.
PS file sizes were ridiculous
Anything more than a simple one page website could summon forth the beach ball of death of a regular basis. It’s not unusual to work on files that are upwards of 40mb (and that’s on the low side). That might not sound too bad, but that’s just one file. How many files go into an app, web app or website? Even my maxed out Macbook would begin to lag after a while and I’d be swearing at my screen in no time.
Apart from Sketch being all vector, I’ve no real idea about the science behind Sketch’s small file sizes, but it works. You can have an entire web app like Nusii all saved in the same file and not take up more than 10 mb! The benefits are obviously huge.
No design overview
Sometimes you want to look at a design in its entirety. And yet again Photoshop lets us down. Most PSD designs are either separated out as individual files or stored as huge files that are split into layers or layer comps. Layer comps are great when they work properly, but I’ve had some epic battles after making edits, and I’ve always ended up going back to individual PSD files.
Again Sketch tackles this from the ground up. All screens are saved in the same file and we have the ability to get an overview of everything within the same page (provided it’s on the same page). The fact that these files weigh so little means you can drag things around as you need to and view pretty much any page in its entirety.
Icons and Sketch
Yet another game changer for me was icon design. My old workflow involved the old one-two between Illustrator and Photoshop. I’d first create my icon in Illustrator, cross my fingers and then paste it into Photoshop. The headaches were endless. The intricacies of getting an Illustrator Smart Object to sit squarely on the pixel in PS were the cause of many an outburst! This is no longer an issue.
Icon design has become a joy, seriously. I now love working with icons and in fact I’m more comfortable designing icons in Sketch that I ever was in Illustrator. It’s even helped with my logo work.
But don’t get me wrong, there are some nasty bugs in Sketch, but my willingness to battle through them says a lot about the importance of Sketch. With all its Sketchyness it’s still light years ahead of Photoshop when it comes to interface design. And I’m willing to put up with these bugs in favour of the bigger picture. I hope that in the near future it will be a more solid tool that I can recommend without adding any “buts”.
If you already use Sketch then you know all this, and I’m preaching to the choir. If you don’t, I suggest you download their trial and see for yourself. It will take a little getting used to, I’d been using PS for ten years before making the switch, but it is worth persevering with. The upside is a faster, more productive workflow and an interface that gives you only what you need.
Good luck, and be sure to drop by Nusii and start winning more proposals today.
