Ah, the browser-based app. It’s solid software that updates itself. You don’t have to mess with downloading things. And, perhaps most fantastic of all, your app of choice can be accessed on any machine, anywhere in the world.

Browser-based tools make collaboration a breeze, too. Whether multiple collaborators can log in and see a project while it’s in progress, or you need to save and share something, being web-based means no one else has to mess with software or fiddle with attachments.

We’re in what feels like a golden age of software and SaaS, which gives us access to all kinds of browser-based tools that make the process of web design go smoothly. Here are some goodies:

Apps for project management

There are several big names in project management apps that are web-based. Trello is essentially card-based, which makes it appeal to the visually oriented among us. It works whether you’re solo or you have a team, which is really nice. The ability to collaborate and loop in team members right there on the page is solid, and the integrations with other software and apps make it especially strong.

Asana is another tool that teams love. It’s visually appealing with color-coding options, and they emphasize their email integration that allows you to add items and tasks via email. It’s dashboard-based, unlike the card-based Trello.

And finally, Basecamp is another project management tool that’s perfect for staying organized. It’s my personal favorite because of the way their to-do lists function – I find the check boxes highly satisfying. It has drag-and-drop functions, an integrated calendar, and a low one-time fee for the solo-user (which is how I use it).

For those days when you need to be all in the same room but geographically that’s not possible, web-based video conferencing apps are a great tool. MegaMeeting is a browser-based video conferencing tool that can accommodate up to 16 people on the video and unlimited additional viewers. It’s also capable of doing webinars, which are great for onboarding, presentations, and ongoing training.

Design details

Use web-based apps and even browser extensions to make the artistic element of your work go a little easier.

A color-picker is a no-brainer for any web designer. Adobe Color CC is an obvious choice, especially if you’ve burrowed deep into the Adobe creative suite. It integrates with other programs seamlessly and operates on the cloud. Plus it’s a lot of fun to tinker with their color wheel and get inspired.

Coolors is a free, web-based color scheme generator. It’s great for when you want something fast and light that you don’t have to pay for. You can generate palettes randomly, extract them from images, or type in the hex codes yourself. You can save your palettes to your account and then access them anytime via the cloud. There’s also an add-on for Adobe Photoshop and Illustrator, if that’s your jam.

Frontify offers a web-based tool that establishes your brand style guide. Keep all your brand libraries in one place, including fonts and typography, colors, logos, and icon sets. It’s a collaborative tool, which makes it easy for everyone on your team to stay on the same page. Or you can share your style guide(s) privately, e.g. with a client for their approval.

Quick picture editing/graphic design tools

If Photoshop is your love language, you might not be in the market for quick image and graphic tools. But if you’re interested in pulling together some visual elements quickly and you like the idea of drag-and-drop, there are some great web-based tools for you.

Pixlr-o-matic takes any image and drops one of their pre-set vintage and retro filters overtop. If you just want a quick, almost push-button edit to your images, Pixlr-o-matic is a great option for you.

If you do some page design work but want to make it super-fast, turn to Canva. Canva is exceptionally easy to use, and it’s ready-made for common little design projects like social media shares and website elements. It’s drag-and-drop and fairly intuitive, and because it’s web-based, you can use it anywhere, on anything. Their tablet app is also solid.

Another super-fast tool that does a specific task for you really quickly and really well is called Unique Gradient Generator. It’s all about creating unique, blurry background images for you. Essentially what they do is take a tiny piece of a stock image, blow it up, and smooth it out. The result is beautiful full-size blurs, plus a lot of extra time in your pocket. It’s all done right in one browser screen, and you use your keyboard arrows to navigate to the exact right spot. It really couldn’t be faster or easier.

Prototyping

Prototyping is a big part of the design process, and there are some web-based apps that make it a snap to work on your prototypes and get feedback from the rest of your team, such as InVision. Because it’s web-based, you get a sense of how your design will really look on the web. Plus it’s a great tool for working with remote teammates.

For something more appropriate for a team of one, or something that’s just more lightweight, check out Atomic. Atomic helps you put together prototypes quickly and simply, and you can integrate it with other collaborative software like Trello or Slack.

Macaw creates wireframes and prototypes rapidly, and builds the code in the background. It’s especially great if you want to prototype your design and show it to the client before adjusting a WordPress theme.

What other tools are essential in your toolkit? Let us know your favorites in the comments below!