Design Tools for Today’s Web

by Anthony Colangelo

23 Reader Comments

Back to the Post
  1. I’ve been using Sketch for about a month and it’s been a great experience. The work flow is a breath of fresh air. I love being able to see all of my pages / art boards in front of me as I design.

    We are slowly transitioning to using sketch on all of our client’s projects.

    It’s very true that the outcome of a design really depends on the tools you are using. Sketch allows you to concentrate on the core elements, without getting distracted or pushed in a certain direction based on the features of an application.

    Now if I can just stop hitting the “V” shortcut as I did in Photoshop for all those years.

    Copy & paste the code below to embed this comment.
  2. @John: In the past, were you handing over PSDs to clients? Has that changed at all? Have you run into any situations in which you need to hand over assets, and the Sketch files are an issue?

    Also, I used to hit “V” all the time!

    Copy & paste the code below to embed this comment.
  3. I love Sketch for mobile interface design (iOS and Android) , but I’m not \much of a fan of it for web design. It just feels dirty to me. 

    While Sketch is a proper successor to what Fireworks was for mobile interface design,  can you speak more on how much different it is from PSD in the sense it ultimately can bring up the wrong ideas about the final product and be as hard to transition the static work to actual markup?

    The common problems I see with designing websites this way is the following that I’m having a hard time understanding how Sketch eliminates these problems compared to PSD despite being a vector and bitmap app (like Fireworks) that’s far better suited initially for interface work:

    - Deliverables that give off the wrong idea that the web site should look the same on every browser
    – Not much that can be translated to the actual medium the web site will be in (HTML or broken down further via a partial strategy)
    – Pixel perfectionalism and taking time away from the work being made in actual html w/ few tools to expedite the process of transferring it .

    Can you briefly touch on these things, Anthony?

    Copy & paste the code below to embed this comment.
  4. I just finished using Sketch for a larger web design project and have mixed feelings. On the one hand it seems much more appropriate for design for the web, simplifying the toolset down to the essentials, and giving you quick access to panels for easy edits. On the other hand, as my most recent design became more polished with photo and vector assets, I found myself needing to revert to Photoshop and Illustrator anyway.

    Designing icons in Sketch was so troublesome and buggy, that I had to them import them into Sketch from Illustrator. Also, as the file gathers more and more assets, the performance deteriorates significantly. I’ve enjoyed working with Sketch, but I’m not sure if it’s at a professional quality yet. But definitely looking forward to where v4 takes it.

    Copy & paste the code below to embed this comment.
  5. I noticed you design at retina size and export in 0.5× and 1×. With the export set available, I am designing in natural size and export in 1× and 2×. This gives me the sizes a web/iOS developer would use.

    Is there a special reason (graphically or technically) to design at retina size?

    Copy & paste the code below to embed this comment.
  6. @Kevin: I think a lot of that comes back to process and client education. Mock ups aren’t the only tool in our toolbox, and they shouldn’t be doing the work on their own. At Happy Cog (and personally), we do all of our wireframing in HTML, and that’s where we work out things like layout, responsive states, and interactions. Those prototypes are the things that get our native web thinking communicated.

    Our mock ups are where we establish the graphical side of things. We don’t make mock ups for every page or state—just enough to communicate the graphic style of what we’re building. So as our process has changed, we started using different tools to communicate different things. We do a lot to educate our clients on what purpose each deliverable serves, and that’s one of the most important things to establish with your clients early on.

    Copy & paste the code below to embed this comment.
  7. @Anthony: I don’t agree with the statement that the Sketch team can’t move as fast as the Adobe team. It’s quite the opposite, in a year, they’ve done more than Adobe in 4 or more years.

    @Kevin: It seems that you enjoy and find it better to design directly in the browser, go for it. Sketch can aid with that on the first mockups or with exporting graphic assets in SVG.

    @Johannes: Designing in retina size allows for 1px details, where if you design it on “normal” size, you’ll have to change that to 0.5px which is not ideal.

    Copy & paste the code below to embed this comment.
  8. @Johannes: Most of the design work I do is for iOS applications, so I’m often using iOS mirror. That said, I design at 2x sizes so that things look crisp when mirroring to retina or non-retina screens (specifically if I have pixel images like avatars or photos in my designs).

    Copy & paste the code below to embed this comment.
  9. @Juan: I can see both sides of that coin. I do think their small team enables them to be a lot more nimble and flexible, which goes a long way in such a fast-moving environment.

    Copy & paste the code below to embed this comment.
  10. @Matthew: I definitely had some performance issues previously, but I will say that v3 has been much more stable and I haven’t run into too many rendering bugs.

    Copy & paste the code below to embed this comment.
  11. With the greatest respect I came here to read an article called “Design Tools for Today’s Web”, and all I got was evangelism for a single Mac-only app. I suggest you re-title this article to reflect the fact it is about one tool in particular, a tool that is available only on one platform. I’m sure Sketch is great but the title is misleading.

    Copy & paste the code below to embed this comment.
  12. Thanks for another gentle nudge towards Sketch from someone who has known hardly anything but the Creative Suite.

    Copy & paste the code below to embed this comment.
  13. I dig Sketch for all the reasons pointed out in this article.  But to really get adoption on most teams, developers will have to pick this tool up. 

    That it’s a fairly priced app with a lot of time and efficiency benefits, it worth giving it a test drive during project discoveries, early wireframing and concepting; just to give people the opportunity to try it out. 

    Hopefully clients and teams will embrace it once they see just how much more easier it is.

    Copy & paste the code below to embed this comment.
  14. I thought this article was about design TOOLS – it reads more like a Sketch content advertising play.

    Sketch is pretty cool. I like it. The exportables are a huge thing. But it still blows me away that they have such an insular, Apple-centric view of the world. Macs are cool, too… but not everybody has one.

    Our Creative team standardized on Sketch last year, and it was an immediate bottleneck because many of our developers and QA members have Windows boxes. Assets aren’t the only things you export, and although the CSS rule feature is a neat trick, it’s not “done code” – you still have to code it against real CSS targets, deal with cross-browser rules, etc.

    Being OS X-only meant only a few “bridge” people in our organization ended up being the facilitators here. This bottleneck greatly decreased the value of the product This plus the lack of the kinds of more pixel-oriented measurement and manipulation tools found in things like Photoshop (and let’s face it, pixels are still very important in browsers no matter how much work you do in ems and rems) make Sketch more of a “neat tool” in my view rather than a Photoshop-killer.

    Copy & paste the code below to embed this comment.
  15. @Chad: Like everything in our line of work, being pragmatic is a requirement. Sketch, nor any tool, is going to be the perfect solution in every situation. It’s up to us to choose the right tool for ourselves, our teams, our clients, and our projects. I don’t use Sketch on every single project, because sometimes it isn’t the right fit, and that’s totally fine.

    Copy & paste the code below to embed this comment.
  16. I’ve read lots of articles about Sketch and though I tried using it I still don’t feel completely comfortable with it.
    How do you guys handle deliverables with agencies or developers that don’t use it?

    Copy & paste the code below to embed this comment.
  17. @Chad: At least the CSS stuff gets blown away if you use Autoprefixer (which is available right within Codekit – another OSX-exclusive app, or as a grunt extension), and I recommend doing this all the time. The css you write gets a lot cleaner and the output just fits for every browser.

    To the OSX only part yes… that’s true, the web is not OSX only, but with retina screens and software like Sketch, Codekit and Layervault it does get back to this OS again. There are alternatives to everything, but I rather use a small software like Sketch for a very specific task, than opening up the 1.5gb Photoshop beast which grew old. The last big changes in Photoshop were done in CS2. CS4 brought content aware scale which might be useful and smart objects which are great. But the rest? I do like getting away from Photoshop (and all other Adobe Apps), and I’m glad that I work in a small team of 5 where 3 of us switched to Sketch already.

    Copy & paste the code below to embed this comment.
  18. If Sketch was reliable I’d ditch Illustrator today. But I’ve been using it for a pretty small (16 page) iPhone app and good god, it’s incredibly frustrating. I spent most of today trying really hard not to put my fist through my iMac screen as Sketch came up with new and creative ways to break.

    A small sampling:

    By far the worst: Undo/Redo breaks constantly. I can’t tell you how many times I had to re-draw stuff because undo decided not to work. This drove me insane all day.

    I would specify x/y locations for lines, and later the x/y locations would shift randomly by fractions of px (so a straight line would end up off by a few 10ths of a px)

    I stretched a rectangle to make it wider, but as I did the left half turned transparent. Quitting/restarting Sketch didn’t even fix that one.

    I would resize text, and later come back and the text would be 1px smaller

    Masking is buggy… sometimes randomly everything above a mask layer will decide to be masked, even though you specified not to

    Generally laggy performance on my core i5 iMac with 8GB RAM…

    Copy & paste the code below to embed this comment.
  19. I was disappointed that only Sketch was mentioned in a post titled Design ToolS for todays web. :/

    Copy & paste the code below to embed this comment.
  20. Coming from the Photoshop/Illustrator world, opening up Sketch for the first time was a rush of fresh air. Oddly, the feeling I do get on some level is that there just isn’t enough “stuff” yet.

    Copy & paste the code below to embed this comment.
  21. Though Sketch is a big tool but I still think there is gap existed that needs to be filled by more tools like Sketch.

    Copy & paste the code below to embed this comment.
  22. Yeah you are right Stacey there is gap existed that need to be filled.
    http://www.bigtechideas.com

    Copy & paste the code below to embed this comment.
  23. I always do my Webdesign with the Adobe Creative Suite. But noticing Photoshop is not always getting the best out of me. Maybe Adobe should look at the current webdesigners workflow and try to make this availible in the software. Starting with Photoshop, jumping to Fireworks and so on..

    Copy & paste the code below to embed this comment.