7 other incredible tools I use when I design and build websites

Peter Assentorp
Dec 12, 2013 · 4 min read

So my blog post called ‘7 incredible tools I use when I design and build websites’ got a lot of really good feedback. So I thought I’d share 7 tools more. There are a couple of these tools I don’t use that often anymore. Mainly because I’ve switch to designing/deciding in the browser.

I did another piece here on medium a week ago, which is a case study on my latest project, where I designed a website without photoshop. You can read it here.

With that said… let’s move on.

1. css3ps

CSS3Ps is a free photoshop plugin that converts your layers in photoshop to CSS3. You simply install the extension for photoshop, mark your layer in your document, hit the css3 button and after a few seconds it will generate the css3 code for you, which you can then copy/paste right into your stylesheet.

Css3ps — very nice extension for photoshop

Website: http://css3ps.com/

2. Slicy

So you’re done with your web design in Photoshop. And now you’re ready to slice it up. Instead of doing this manually you can use slicy, which will export all your assets for your website. All you have to do is rename your layer groups, drop your photoshop document into slicy and you’re done! All your images are now stored in a folder an you can copy/paste them to your project. It even supports Retina. All you do is append “+@2x” to the layer.

Slicy — automatic export of your photoshop assets

Website: http://macrabbit.com/slicy/
Free to try — $29 to buy

3. Animate.css

This little stylesheet makes it easy for you to do animations and they are even cross-browser compatible! You can customize your build of the stylesheet to only include the animations you want. I’ve used it a couple of times with some good ol’ jquery and it works like a charm. Try it!

Animate.css makes cool animations on your website

Website: https://daneden.me/animate/

4. GuideGuide

“Dealing with grids in Photoshop is a pain. With GuideGuide, it doesn’t have to be. Pixel accurate columns, rows, midpoints, and baselines can be created based on your document or selection with the click of a button. Frequently used guide sets can be saved for repeat use. Grids can use multiple types of measurements.” — enough said, this is a must have for photoshop!


Website: http://guideguide.me/

5. Baseline generator

This website can help you get your baseline grid right. If you don’t know what it is. I suggest you google it. I’m not a master at working with a baseline grid, eventhough I should be, but practice makes perfect and this tool has helped me a lot so far. It calculates the correct amount of space between your text and output the css for you right away. Great tool.

Baseline grid generator

Website: http://joshnh.com/tools/em-baseline-generator.html

6. Dev Tools Mobile

Note: This tool only works in Chrome Canary at the moment. You can download chrome canary here: https://www.google.com/intl/en/chrome/browser/canary.html — Canary has all the latest Chrome features available.

There are hundreds of different mobiles out there and it’s hard to have them all. If you have some of the devices to test and debug on. You know it’s frustrating going back an forth between your mobile and desktop. Well not anymore. Google have just added Mobile Emulation to their Chrome Dev Tools. It’s very handy, if you for example like me, don’t own a Google Nexus 4 and want to see how your website looks on that device. The good thing is that I’m able to inspect elements on my site in the emulator. Nice!

Chrome Dev Tools — Emulation
Emulation in action

I’d recommend you watch this demo on youtube from Paul Irish, where he will walk you through the entire thing in detail: http://goo.gl/JImsUh — it’s 24 minutes long.


7. BrandColors.net

I came across this website recently and I’ve come back again and again ever since. The site is basicly just a long list of some of the biggest brands colors in the world. Instead of trying to find the right facebook blue, google blue, ikea yellow and so on you can go to this site and it will show the brand name and the correct hex value to copy and paste. It is also a great inspiration if you need some good colors for your website.



I hope you could use some of these tools for your next project.

Twitter : @assentorp

    Peter Assentorp

    Written by

    Freelance UX Designer. Owner of Sportmonda.dk / .se / .de and .nl

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade