25+ fresh tools for web design

Default avatar.
August 26, 2015
25+ fresh tools for web design.
Recent months have brought a lot of great stuff for designers at every skill level. We’ve got tools for designing websites. Some of them try to create a sort of hybrid visual/code workflow, while others hide the code away altogether for the beginners. We’ve also got prototyping tools for both apps and sites, and a couple of testing tools besides. Some are brand new. Others have been around for a little while, but have recently been updated with awesome new stuff. Dig in! Discovery is half the fun.

Design tools

Macaw Scarlet

First on the list is Macaw Scarlet, a tool so fresh, it’s not out yet! But then, it’s from the guys who brought us the original Macaw, so lots of people are excited anyway. Billing itself as a “live design environment”, Macaw Scarlet will be geared toward making responsive web design easier for everyone. scarlet


Wagtail is not a design tool, it’s a CMS. And yet, it could easily be included in the design work-flow, especially where content design is concerned. You see, it has a fantastic feature called Streamfield, which works a lot like Medium’s post editor. The difference is that it’s customizable, and thus more powerful. This makes it a lot easier for the user to design content on each page. wagtail

Magic Mirror for Sketch 3

Here’s one for the Sketch users. Basically, it makes a sort of smart object designed to help you put mockups into stock photos. magic-mirror

Wire-framing tools

Wire Flow

This one gets my personal stamp of approval. It runs fast on my normally not-drawing-friendly tablet, and comes with just about everything you could ever want from a wire-framing app. It’s also designed to work with phone-sized devices, which could be a great way to properly visualize a phone app interface. wireflow

Apple Watch wire-frame kit

Wire-frame UI elements for the Apple Watch! What more do you need to know? apple_watch_wireframe


There has been more than one wireframe toolkit for Apple’s Keynote software. It was only a matter of time before someone made it happen for Powerpoint. And they have. Here it is. power-mockup

Prototyping tools


Coming all the way from Facebook itself: “Origami is a free tool for designing modern user interfaces. Quickly put together a prototype, run it on your iPhone or iPad, iterate on it, and export code snippets your engineers can use.” No word yet on how useful those code snippets actually are. But it’s Facebook. They have good engineers. origami


With simple tools, and a solid free plan, Marvel makes a great prototyping app. It integrates with Dropbox and Google Drive, importing any images you specify, and allowing you to link them together in a quick mock-up of an app. It keeps your imported images synced, too. If you save new versions to Dropbox or Google Drive, your prototype app automatically gets updated. marvel


Protosketch is a prototyping app (kind of) designed for the iPad. It comes with a UI kit (including tons of components), basic vector tools, alignment tools, and a lot more. It’s currently in beta, and it’s only for the iPad, but if that’s your platform, this could be perfect for you. It plays nice with other apps, too: it can export your files in raster formats, SVG, and PDF. protosketch


Like many other tools on this list, Frontify does prototyping. It also offers tools to make working on branding and style guides as a group easier. Create your color palette, define your style, and create a library of UI elements, and share it with the rest of your team. frontify


Use Atomic to pull in your files from Photoshop or Sketch and make prototypes from them. Version control, collaboration features, and more make this an excellent tool for slick, fast, iterative design. atomic


Form is an advanced prototype creator that works in tandem with your iPhone. Create the prototype in your desktop or laptop, and see the results immediately on your phone. Plus, it uses Google’s Material Design principles to make your prototype look great. form


Pixate specializes in high-fidelity “native” prototypes that are displayed on your phone and work a lot like the real thing. pixate

Web builders


Sandvox is a Mac app for the non-coders among us. It’s largely template-based (as is an ever-increasing portion of the Internet), but does make provisons for more advanced users to add stuff in manually. It doubles as a sort of CMS for some kinds of sites, like blogs, and though the software isn't “new”, recent versions have introduced Sandvox Hosting. The hand-coders among us might recoil at the idea, but for newbies, the package deal is actually pretty great. It does work with any host, though, so if you want to handle that yourself, you can. sandvox


A site builder for beginners, XPRS offers free sites for personal use, for artists and students. There are pro plans for business and e-commerce. xprs

WordPress builders

Themify Flow

WordPress may have its detractors, but others are taking it in surprising new directions. The guys over at Themify, for example, decided that it was time to create a design tool on top of the publishing platform. The result is Themify Flow which allows you to create custom, responsive Wordpress themes from a drag-n-drop interface. Best of all, it’s free and open source. themifyflow


Cornerstone is sort of competing with Themify Flow, in that it offers a visual way to create WordPress themes, right on top of WordPress itself. It operates differenly, however. For example, it features a live code editor, and other features design to give developer-level access to the front-end design. Also, it’s not free, unless you buy the X Theme. cornerstone


Quards is another page builder plugin for WordPress. Most of the design work is done for you, but instead of choosing a single template, you build each page with “cards”. These are basically pre-made layout sections which can be mixed and matched to build a whole page. It’s good for landing pages, arranging individual articles in new and original ways, promo sites, and those sorts of things. qards

Collaboration & productivity tools


A quick and easy tool for Slack users who need to share their design work a lot. With extensions/apps for Adobe CC, Sketch, Chrome, and OSX, it simplifies sharing whatever you’re working on. relay

Skala Preview

Want to see previews of whatever you’re working on in Photoshop or Android? Just install Skala Preview, and you’ll be able to send lossless, color-perfect previews to just about any mobile device. It comes with the option to plug the device into your computer via USB instead of using wi-fi. skala_preview


RightFont is a fast, pretty font manager for Mac that integrates with Adobe CC and Sketch. right_font

Fresh code

jQuery 3

The jQuery 3 alpha has been released. There aren’t any new features to speak of, but there have been extensive re-writes of old features, bug fixes, and performance improvements. jquery

Simpler Sidebar

Speaking of jQuery, there are a number of new plugins out that could make a designer’s job a lot easier, especially if you’re a designer who also codes a bit. We start with Simpler Sidebar, which makes sidebars. It’s small, it’s fast, it’s pretty. Just don’t use a hamburger menu to trigger it, I guess. simpler-sidebar


Label your radio buttons and check boxes in style. Great for the designer who just can’t let browsers do things their own way. labelauty


When filling out forms, I occasionally click on a field, get distracted by something, and then come back to it. If that field was labeled with a placeholder attribute, I sometimes have to un-select it to remember what I’m supposed to be typing. Silly, but human. smart-placeholder solves that design issue by keeping the placeholder visible below the text being typed. Neat, right? smart-placeholder

Refreshed tools

We'd be remiss if we didn't call attention to the great work being done on already well-known apps. Here are the ones that have had some noteworthy updates recently:


Webflow has been integrating third-party services into its functionality (much like the rest of the Internet) in some new ways. As of now, you can add functionality to your web forms right from Webflow. You can add e-mails to Mailchimp lists, send out tweets, add data to Google spreadsheets, or make a new note with Evernote. You can also, incidentally, have your form send an e-mail. webflow


InVision has been introducing new features steadily, including free, unlimited mobile user testing, a workflow manager, Dribbble integration, and emoji. Yes, emoji. invision


In recent months, Strikingly has introduced a new page editor, collaboration, and it even added an RSS feed for its blog functionality… Better late than never. strikingly

Adobe Muse

Lastly, Adobe Muse is still a thing — hey, not everyone needs the power of DreamWeaver. Like its more powerful older sibling, Muse can now use any font from TypeKit. It can also now create blogs, e-commerce sites, and improved contact forms. Plus, like some other apps in the CC suite of apps, it can now access the massive Adobe Stock library. muse

Ezequiel Bruni

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.

Read Next

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…