6 tools to speed up your workflow when you design and build websites

Here are 6 tools that can help you speed up your workflow when you design and build websites. Hopefully you can use some of them.

1. CloudApp

Sharing stuff doesn’t have to be complicated. Cloud App can help you share things faster. You just drag and drop your files to the icon in the top bar or take a screenshot and voila! Immediately you have a nice short url to paste to whoever you like — like this one: http://cl.ly/240b1L33163W. A very handy tool for sharing mockups and other files fast instead of opening a browser.

CloudApp — Sharing things faster.

Free: 10 uploads daily — max file size: 25 MB — no custom domain
Pro: Unlimited uploads — max file size: 250 MB — custom domain
(~$60 — 1 year subscription)

2. Project Parfait

Released by Adobe a couple of days ago. Project Parfait looks very promising. Even though I’m NOT a big fan of designing in photoshop — some still prefer to make/get static mockups and layouts. With project parfait you can upload a psd to the browser and grab fonts, colours, measurements and more from it.

Very useful if your working with psd’s in your web projects. (if you don’t like adobe’s version — you can use avocode as an alternative: http://avocode.com/)

Project Parfait makes you grab fonts and more from psds in a browser

Free (Adobe login required)

3. Velositey

With this extension for Photoshop you can prototype a design of a website in seconds. After installing, you just hit a button in the extension and photoshop will magically make all the boxes and texts for you.

Take a look at the demo below:

Photoshop layout in 1 minute

Pay with a share

4. Sketch 3

It’s finally here! Released a couple of weeks ago. The most innovative and lightweight program to make designs with just got even better. If you want to start designing apps and websites — I would suggest you start using sketch 3. It’s easy to use and has a lot of great features and addons.

For example you can add iOS Mirror to Sketch3 that makes you preview your design on your iOS devices while you work. (costs only: $4.99).

Sketch 3 interface

You can also install great plugins like this one for free to help you make a baseline grid, correct alignment or a random color palette as seen below.

Random color palette in Sketch 3

There is also this little neat content generator plugin.

Content generator plugin for Sketch 3 — text
Content generator plugin for Sketch 3 — images

Sketch 3 has a lot of things you’d love to use. Compared to Adobe’s illustrator and photoshop this is a lightning fast tool. If you want to learn more about this tool and more about design in general I can highly recommend you to buy this online book as well.

I could talk a lot more about Sketch 3. But try it out yourself, you won’t be disappointed! Oh, last thing… It’s only $99!

Price: $99

5. 1Password

We’ve all been there. You’ve once again forgot one of your ~300 passwords on the great internet. It’s frustrating and time consuming. I bet your passwords are probably weak to and that you use the same password on other sites as well. Security-wise we all know it’s bad, but the majority of us do it. So what if you could store all your passwords in just one place, make all passwords unique and all you had to remember was just ONE strong password?

1Password is the app you need. After you install the app. You just add accounts and details along the way and change your passwords with the password generator. The password generator will then make your passwords SUPER strong and impossible to remember, example: vaJ9aI1wiK6Cyob5cIb3jot4cEv2cy — good luck memorising that one. But no worries, 1Password will store that for you.

1Password can also sync your data across all your devices automatically through iCloud, Dropbox, or locally over Wi-Fi where your data never leaves your network and they have both an iOS and Android app.

1password interface

A nice handy thing is their browser extensions, where you can easily access your passwords when you need them.

The browser extensions gives easy access to your passwords.

It does take sometime to make new passwords and add all your accounts, but it will without a doubt be worth it in the long run.

Price: $49.99 (Single user license)
Free for 30 days

6. Magic CSS3 Animations

If you want to use some cool CSS3 animations on your next project. I suggest you check out some of these magic CSS3 Animations with special effects. They are really cool and are pretty easy to add to your website. Check them out on the link below.

Magic CSS3 animations