There are so many great web design tools around these days, created to help you with mockups, frameworks, testing, and more. You’ll also find an abundance of downloads on the many elements that make up good web design, including but not limited to VR, animation, colours, and typography.
No matter what problem you’re trying to solve in your web design workflow it’s likely that someone has made a tool for it, whether it’s a standalone utility or a feature within a larger app. The even better news is that so many of these great tools are free, although this does make the array of tools on offer far more daunting to choose from.
To help web creatives out, we’ve rounded up what we think are the best tools around right now (for a more specific list, see this UI design tools roundup). As this is quite a long list, we have arranged the tools into sections to make the article easier to navigate. On this page you’ll find complete web design software such as Sketch and Adobe XD, followed by more basic dedicated wireframing tools, and web design frameworks and libraries. On page two, there’s a range of smaller, more specialised tools for everything from working with images to ensuring inclusivity in your work.
While you’re here, you might want to check out our roundup of the best web hosting services, and choose one of the best website builders, too.
COMPLETE DESIGN TOOLS
01. InVision Studio
InVision Studio aims to cover all bases and be the only UI tool you’ll need. It comes with a bucketload of features to help you create beautiful interactive interfaces, including tools for rapid prototyping, responsive and collaborative design, and working with design systems.
If you’re already using InVision with tools like Sketch, there’s quite a bit of crossover in features. However, Studio’s power lies in the prototyping department, especially if your design involves animation. Rapid prototyping will allow you to create complex and imaginative transitions, enabling you to really achieve the level of animation you desire. Simply figure out how you want to your UI to look at the start of its transition, and then design the end result. InVision Studio works the rest out for you.
On top of that, you can create these custom animations and transitions from a number of gestures and interactions like swiping, clicking, and hovering.
When you’re all done, export your prototypes through InVision and invite people to collaborate. You can view your project on its intended platform – a great way to explore and test your design. Clients will then be able to comment right onto the design.
To top that, you can stop thinking about creating numerous artboards for multiple devices – Studio’s layout engine will adjust your design to any screen automatically. This timesaver gives you space to think so much more about your design.
02. Sketch
![Sketch has replaced Photoshop as the UI design tool of choice for many web designers [Image: Bohemian Coding]](https://vanilla.futurecdn.net/creativebloq/media/img/missing-image.svg)
Bohemian Coding’s Sketch is one of the most widely-used web design platforms; it’s a highly powerful vector-based tool for building interfaces and prototypes in a collaborative way. Sketch was built especially for making websites and apps so there are no unnecessary features cluttering your interface and it’s faster and more efficient than software that has a broader scope.
Rory Berry, creative director at Superrb, made the switch to Sketch a few years ago, and highly recommends it. “Compared to Photoshop, sorting all your documents and making revisions on Sketch is much easier,” he begins. “Sketch has small documents whereas Photoshop has large ones. Due to it being a vector-based app, the file sizes are dramatically smaller compared to Photoshop.”
And that’s not all. “The built-in grid system in Sketch is great and makes interface design much easier. I think the overall UI and minimal feel makes it much cleaner to design in and user friendly. Photoshop seems very complicated in comparison.”
The community offers hundreds of Sketch plugins to make your design workflow easier and smoother.
The downside of Sketch is that it’s only available on Mac, and there are no plans to support other operating systems. This has been a problem, as designers will often want to share .sketch files with developers using Windows. Fortunately there is now a “Sketch for Windows” application called Lunacy that will open and edit .sketch files and eliminate most of this pain – read about it in the Exporting and Converting section of this article.
Don’t miss our top tips for using Sketch.
03. Adobe XD
Adobe XD offers the best environment for digital projects under the Adobe Creative Cloud suite. If you’re a keen Adobe user and new to XD, you may not find the interface very ‘Adobe’-like to begin with. However, it does stack up to the other leading tools out there. It is a jump if you’ve been designing in Photoshop for a while, too, but very worth it for UI design.
This vector design and wireframing tool keeps getting better, with additions such as support for auto-animation ensuring the tool can keep up with the latest trends in UX. XD includes drawing tools, tools that enable you to define non-static interactions, mobile and desktop previews, and sharing tools for giving feedback on designs. It allows you to select a device-specific artboard size for starting a project, and you can even import popular UI kits, for example Google’s Material Design.
Crucially, Adobe XD integrates with the rest of Creative Cloud, which means you’ll be able to import and work with assets from Photoshop or Illustrator easily. If you already use other Adobe apps, the UI will feel nice and familiar and shouldn’t present too much of a learning curve.
Andrei Robu, design director at Robu Studio in Barcelona, is among its fans. “For quick mockups it’s great,” he says. “It’s a very light interface, with lots of photos loaded in, and great for moodboards. The prototyping is very useful to show clients how stuff works, especially because you can push the content online right away.”
Ellis Rogers, graphic designer at Receptional Ltd also recommends it. “When the design/prototype or wireframe is complete, Adobe XD allows you to very quickly select elements and create page transitions for a working prototype, which can be shared via a link,” he explains. “The link also allows you to gather feedback per page, keeping it all organised. The link can be updated within Adobe XD so the client can always see the latest version without having to worry about incorrect versions. It’s an absolute joy to work with.”
04. Marvel
Marvel is another web design tool that’s great for producing quick ideas, refining an interface to how you want it to look, and building prototypes. Marvel offers a really neat way of building pages, allowing you to simulate your design through a prototype. There are some wonderful integrations for inserting your designs into your project workflow. Interestingly, there’s an integrated user testing feature, which is still fairly unusual in the web design toolscape. It’s all online too, so no need to download anything.
05. Figma
Figma is an interface design tool that enables multiple designers to collaborate in real-time. This is very effective when you have multiple stakeholders in the project that are involved in shaping the outcome. It’s available in the browser, or on Windows, Mac or Linux, and there are both free and paid versions depending on what you use it for.
Here are some of its outstanding features:
“Figma has a similar USP as Sketch, with the exception of being cross-platform,” explains front-end designer Benjamin Read. “When I used it to create a couple of icons I found the workflow incredibly smooth. It took me no time to learn and had the added benefit of being collaborative: you can share graphics with others within the app.”
“I’ve been trying to switch to Linux for my work and sometimes we use Windows, so Figma makes sense to me from a practical standpoint,” he adds.
Freelance content writer and artworker David Eastwood also has good things to say about Figma. “It’s also been a really useful tool when we’ve needed to quickly mock MVTs; sometimes small additions to an existing layout. We love that you can quickly create designs for desktop, tablet and mobile.”
06. Affinity Designer
![Affinity Designer is as powerful on iPad as it in on desktop [Affinity Designer]](https://cdn.mos.cms.futurecdn.net/tuoe8fbdQ4eaBZz7X9kTie-970-80.jpg.webp)
“Serif’s Affinity Designer has been dubbed the ‘Photoshop killer’ by some, and it’s easy to see why,” says product designer Dan Edwards. “There were a few features I really enjoyed, including adjustable, non-destructive layers. This essentially means you can adjust images or vectors without damaging them.
“The 1,000,000 per cent zoom was just bliss; it’s especially useful when working with vector art, as you can really get in close. The undo and history features are also really handy: Affinity allows you to go back over 8,000 steps!”
“When it comes to designing, the UI feels familiar. When moving from Photoshop, everyone seems to want to start over, which can pose a real challenge. What Affinity has done is to keep the layout familiar, while tightening everything up and hiding distractions. I was easily able to jump straight in and get designing.”
Don’t miss our guides to using the Pixel persona, the Export persona and the Pen tool in Affinity Designer. Also note that Serif also makes a Photoshop alternative, Affinity Photo and an InDesign alternative, Affinity Publisher; all of which play together nicely.
MOCKUPS AND PROTOTYPES
07. UXPin
The next web design tool in our list is UXPin. This dedicated prototyping app is available for Mac, Windows, or in the browser. With most other design tools you can only mimic interactions by linking different elements on your artboard, UXPin gets closer to the code and enables you to work with interactive states, logic, and code components.
There are integrated element libraries for iOS, Material Design and Bootstrap, plus hundreds of free icon sets, to help you on your way. UXPin also has accessibility features to ensure your designs stay in line with WCAG standards, which we applaud.
You can create your first prototype in UXPin for free, and if it suits you switch to a paid monthly subscription (team memberships are available). UXPin also has great integration with Sketch, so it could be one to introduce into your workflow if you’re a Sketch fan that finds its prototyping capabilities limiting.
08. Proto.io
Proto.io is a top application that allows for the inception of lifelike prototypes that begin with rough ideas and end with fully fledged designs. The tool also provides you with a range of possibilities for your projects, including detailed and custom vector animations.
You can start by developing initial ideas with a hand-drawn style, work them into wireframes, and finish them off with a high-fidelity prototype. The Sketch and Photoshop plugins help if you want to design using other tools, but Proto.io handles the end-to-end design process well. Other features – user-testing, for example – will help validate your designs. This is an all-in-one solution with a great number of trusted brands already using it.
There are a bunch of great demos to start playing with, and you can really see just how easily this end-to-end solution could replace a number of tools currently in place. Proto.io also offers assets managers, developer guides, and the ability to record your prototype, making it one of the better prototyping tools out there.
09. Balsamiq
If rapid, efficient wireframing is what you’re looking for then Balsamiq is a strong suggestion. You can quickly develop a structure and layouts for your projects with ease. Drag-and-drop elements make life easier, and you can link buttons to other pages. By wireframing, you can quickly start to plan your interfaces and share them with your team or clients. Balsamiq has been going since 2008 and prides itself on its low-fidelity, fast, focused no-nonsense approach.
10. ProtoPie
Web design tool ProtoPie allows you to create complex interactions and get close to your design’s ideal end function. Perhaps the standout feature is the ability to control the sensors of smart devices in your prototype, such as tilt, sound, compass and 3D Touch sensors.
Depending on your project, this is a great tool for those that want to encompass native app features. It’s easy as pie and no code is required.
11. MockFlow
MockFlow is a suite of applications for wireframing and planning websites. WireframePro helps you to set out your initial idea and then iterate until it’s just right – there’s a UI revision tracker to help you with this. It comes with thousands of pre-built components and layouts that you can adjust to meet your requirements, and there’s a preview mode for presenting your work to colleagues and clients.
Once you’ve done your wireframes, the rest of the suite can help you with other aspects of planning your website including information architecture, making a style guide (this can be generated automatically), and working through a sign-off process.
If you’d like to see some other options, check out our roundup of top wireframe tools.
12. Adobe Comp
Bewilderingly, Adobe has not seen fit to include direct export to XD – crazy! – despite a long-standing request that has been under review for what seems like forever. However, exporting to Photoshop is built-in (along with Illustrator and InDesign), and once tweaks to your mockup are made in the ubiquitous image editor you can then export from there to XD. Despite this unwelcome extra step in the Adobe devotee wireframer’s user journey, Comp fully deserves its inclusion in this list with its go-anywhere capabilities, ease-of-use, and impressive UI.
13. Flinto
Flinto is a design tool that allows you to create unique interactions within your designs. You can utilise a number of gestures, and make easy transitions by designing the before and after states. Flinto simply works out the differences and animates for you – super helpful.
Bear in mind that this is iOS only, but it will feel familiar when you start using it. There’s documentation online to help you on your way, and importing from Sketch and Figma is straightforward too.
14. Axure
Axure has always been one of the best wireframing tools on the market, great for complex projects that require dynamic data. With Axure, you can really focus on mocking up projects that are both technical and require key attention on structure and data.
Axure’s hand-off process includes the creation of thorough specifications that help developers to create a final product that matches your designs.
15. Justinmind
Justinmind will help with prototyping, and integrates with other tools like Sketch and Photoshop. You can choose your interactions and gestures to help assemble your prototype. It also contains UI kits, so you can put together screens quickly, and it’s responsive, too.
16. Fluid
Fluid is a simple and intuitive tool for building rapid prototypes and working up designs. It packs some nice out-of-the-box assets to get you going with rapid prototypes. Once you’ve upgraded, it’s really easy to assemble your own symbols with your own preferred UI assets. This tool offers very fast UI design, with assets available for both high and low fidelity prototypes.
17. Framer
Framer is a prototyping system that improves communication and collaboration on your team, especially between designers and developers. It is built with design systems in mind, and integrates with your code to generate documentation that is easy to follow and updates automatically. Keeping everyone on the same page and up to date is a core function – so when your code updates, so does your design.
DESIGN FRAMEWORKS AND LIBRARIES
18. Bootstrap
Bootstrap is certainly not a new tool, but it has revolutionised development and continues to shape how we build stuff on the web. Features to look out for include responsive containers that are fluid up to a certain breakpoint, and responsive .row-cols classes for specifying the number of columns across breakpoints efficiently.
Bootstrap also has its own open source icon library, Bootstrap Icons, that is designed to work with Bootstrap components.
Find the best free Bootstrap themes in our guide.
19. Startup 4
If you like Bootstrap but don’t want to dive into the raw thing, Startup 4 is the easy way; it’s an online app with built-in templates and themes for building websites based on Bootstrap 4 with a 12-column grid. You can build your site without writing code using the drag-and-drop interface, but you will need some knowledge of HTML and CSS to finish things up.
20. Vue.js
Vue.js is a framework for building user interfaces, and uses a virtual DOM. As the name suggests, Vue’s core library is focused on the view layer.
Look at a code example, taken from Vue’s docs, that utilises user input and demonstrates the library’s elegance. We’ll start with the HTML:
<div id="example">
<p>{{ message }}</p>
<button
v-on:click="reverseMessage">Reverse
Message</button>
</div>Notice the custom v-on handler that calls the reverseMessage method. Here’s the JavaScript:
var myApp = new Vue({
el: '#example',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').
reverse().join('')
}
}
});This example populated the paragraph with data and defines the reverseMessage method. Vue is great for those less experienced with complex libraries, but also has a number of plugins to help with development of complex single-page web apps.
21. Pattern Lab
Although at its core it’s a static site generator that stitches together UI components, there’s much more to Pattern Lab than that. It’s language-and tool-agnostic; it enables you to nest UI patterns inside each other and design with dynamic data; it features device-agnostic viewport resizing tools to help you ensure your design system is fully responsive; and it’s fully extensible so you can be sure it’ll expand to meet your needs.
22. Material Design
![Material Design is a set of principles from Google [Image: Google]](https://cdn.mos.cms.futurecdn.net/jy66eRcpxnSwGUuAGofGFL-970-80.jpg.webp)
Material Design is a visual language from Google that aims to combine the classic principles of good design with innovations in technology and science to create a cohesive and flexible foundation your website.
Websites and apps created using the Material Design framework will look modern and be familiar to the user, so people will find it easy to use your product right away. There are many tools available to help with this design system; click Resources on the nav bar to find them.
This next selection of web design tools covers more specialised options. These are tools to streamline your workflow and address specific problems, depending on your particular needs. There are sections on working with images, tools for animation, testing, handing over to clients or devs, exploring VR and AR, working with typography, and more.
IMAGES
23. Canva
Want to mock up something like an infographic quickly and easy? Then Lawrence Harmer, founder of Solve Web Media, recommends Canva. It’s a free, browser-based tool that’s used by both designers and non-designers to make graphics for both print and the web.
“Canva is pretty good for making nice images,” says Harmer. “Images are the window into the soul of your website and social media, so a tool like this can be a key to success.”
24. Affinity Photo
Looking for an alternative to Photoshop or Illustrator? This is one for the pros, as Affinity Photo pretty much covers everything you’d ever need. It works superbly on desktop and there’s also an excellent iPad version. This tool is Photoshop and Illustrator in one, and offers a great deal of features and power to enable you to create superb designs. For more complete image manipulation tools, explore our list of the best image editing software.
25. Orion Icon
This web design tool is one for the armoury. Most of us will know that brilliant icon sets can always be hard to find. Even using the best stock libraries, it can be a long old slog to find something you like when it comes to Icons. If that’s the case, check Orion Icon out. It is super helpful to find the right icons and to top it all, you can then manipulate the style of your icon, including choices of solid, line, colour and flat icons.
Every icon comes in SVG and vector format with a bunch of controls to build your perfect set. A nice feature is that you can build collections for different projects, ensuring you never forget which icons you used and how they were styled.
Not quite what you’re after? Take a look at our roundup of the best free icon sets around.
26. SVGito
SVGito is a free web app that cleans up your SVG files, to save you the bother of manually editing them. Created by Peter Nowell, this neat little app automatically optimises your SVGs at the touch of a button, and will typically reduce their size and complexity without changing how they actually look on screen.
27. Squoosh
Squoosh is a free app from Google that’s aimed at helping web designers compress their images without sacrificing quality. You drag and drop your image into the app and use a slider to play with the amount of compression, so you can quickly find a good balance between picture quality and file size.
The app works both online and offline, and overall it’s a win-win: web designers save time, and Google gets a faster web that still looks good.
ANIMATION
28. Principle
Principle is great for interaction design – for mobile applications in particular. Tweaking and polishing animated interactions is a breeze with Principle. You can look at individual assets and how they independently animate, right down to timings and easing. This is another Mac-only app.
29. Anima
Anima is an awesome plugin if you want to start using Sketch for more sophisticated prototyping. For many Sketch users, this can be the missing piece to create really nice transitions and more complex interface animations.
30. Anime.js
Although web page animations have at times got a bad rap, used judiciously they can make a website easier to navigate. CSS animations and transitions have been a huge step forward, but more complex interactions often require a library. Anime.js is an animation engine you’ll want to take a look at if you need to add complex animated components to your apps.
Here’s an example to demonstrate the super-simple API:
var myAnimation = anime({
targets: ['.box1', '.box2'],
translateX: '5rem',
rotate: 180,
duration: 3000,
loop: true
});This code defines the objects you want to animate, along with specifics of the animations. The API allows you to target elements using CSS selectors, DOM elements or even JavaScript objects.
The author, Julian Garnier, has provided a CodePen collection that demonstrates what the library can do, as well as thorough documentation on GitHub.
31. Hype Professional
Hype Professional is an application that will allow you to export stunning interactive and animated HTML5 layouts. Animate elements with natural movements and collisions without keyframes or code. This incredibly easy editor provides you with the tools to breathe life into your designs, and leave static interfaces behind.
TESTING
32. Tobii Pro
Tobii Pro is a software development suite for eye trackers and analysis. With these tools, designers can conduct online eye tracking studies on subjects as they navigate a website layout, ideal for figuring out, say, how to use logos for web design with perfect placement. Similar testing can be done with the tool for online banking portals, streaming services and work portals, offering a more authentic view on online behaviour and the reasons behind particular actions on your web designs. That insight can then be used to optimize a site for user friendliness and engagement.
33. Sizzy
Sizzy is a tool that allows you to preview multiple screens at once while you’re testing out your responsive web apps.
Creator Kristijan Ristovski had previously been using react-storybook to switch between the different variations of each component. But he got annoyed having to go back and forth between so many devices. So he built Sizzy, which allows you to see all the changes simultaneously, making it much quicker and easier to spot and fix layout bugs.
34. Linksplit
Head to the site, enter your destination URLs and you’re given a single, short test URL to share with your audience. If you like, too, you can set up rules. For example, if you want people in the UK who are using Chrome on iOS to end up in a different place to people in the US, that’s pretty easy to set up.
35. Verifier
Fake email addresses registered to disposable domains are the scourge of online communities, and this simple tool can be your site’s Batman. Verifier can be dropped into the email sign-up on your site, where it checks through a list of over 18,000 disposable domains in an instant and lets the user know if they need to provide a real address to sign up. It also checks that the domain of the address is valid and exists, and that the syntax is correct.
With a free forever API key, Verifier could be an important step in crushing the spammer blight in online communities – something that its creator is very passionate about. The Sisyphean task of cleaning up the web starts right here.
EXPORTING AND CONVERTING
36. Lunacy
The arrival of Lunacy was a big relief for Sketch users because it solves the problem of .sketch files being “stuck” on Macs; now you can open, edit and save them with this free Windows software. It’s a fast program – it will open large files without grinding to a halt, and there is a decent crop of editing tools so you can make some tweaks, save the file and send it to coworkers. You can export to PNG and SVG, and Lunacy will automatically download any missing Google fonts. The team behind Lunacy are aiming to gradually bring its feature-set in line with that of Sketch.
37. Zeplin
Zeplin is a tool that fits in the post-design and pre-development stage. It allows you to take your design and prototypes and hand them over to developers, complete with all the specs, codes snippets and exportable assets you need from design files. You can upload your Sketch, Photoshop, XD and Figma files to Zeplin and this tool will create an environment for developers and designers to send over the project without the tedious task of creating guidelines. This is wonderful for bigger product teams.
38. React Sketch.app
React Sketch.app provides a super-easy way to manage Sketch assets in a large design system. Built by the team at Airbnb to help bridge the gap between designers and engineers, it’s basically an open-source library that allows you to write React components that render to Sketch documents.
Because React Sketch.app uses Flexbox, its components can have the same rich layout as your real components. That means no more dragging rectangles by hand; everything works like your target layout engine.
React Sketch.app, then, makes it simple to fetch and incorporate data into your Sketch files. It also provides an easy way to build your own custom design tools on top of Sketch. You can learn more about how it works in this post.
39. URL to PDF
Brought to you by Alvar Carto, URL to PDF is a self-hosted API that enables you to convert your HTML into PDFs, so it’s handy for rendering receipts, invoices, or any other HTML content. The API ignores a page’s @media print CSS rules by default, and sets Chrome to emulate @media screen, to make the default PDF look more like the actual site. You can set it to operate automatically at regular intervals and best of all, it’s free.
40. Avocode
Avocode makes it extremely easy for frontend developers to code websites or apps from Photoshop or Sketch designs. It’s built by the same team that brought us CSS Hat and PNG Hat, so it’s not surprising they’ve taken the exporting process one step further here. Although previous apps have allowed you to export assets, what makes Avocode really special is that you can use its Photoshop plugin to sync your PSD into Avocode with just one click.
Avocode quickly and automatically analyses your PSD or Sketch file and brings everything into a beautifully designed UI. You then have full control over how you export assets, including SVG exporting as standard.
You can also click elements in the design, and copy and paste the code into a text editor of your choice. “It gives users everything they need for coding – a preview of the design, and access to all layers and export assets,” says Avocode co-founder Vu Hoang Anh. “The best thing is that developers won’t need Photoshop or Sketch at all. The current workflow really sucks and that’s why we created Avocode.”
We’re not sure any app can ever replicate a developer. But we know of many hard pressed designers who happily use this to turn PSDs and Sketch files into interactive designs, which can then form the foundations for the website build.
VR AND AR
41. ARKit
Augmented reality – blending digital objects and information with the environment around you – is a space that’s generating a lot of excitement in the web and app development community right now. Not least because of Apple’s ARKit, a framework that allows you to easily create AR experiences for iPhone and iPad.
42. Firefox Reality
If you’re working in webVR, you’ll want to check out Firefox Reality, a browser for virtual reality optimized devices such as Viveport, Oculus, and Google Daydream.
Launched by Mozilla in September 2018, it’s available now from these device’s app stores, and is designed to move seamlessly between the 2D web and the immersive web. Among these features is the ability to search the web using your voice, via your device headset. The browser is being built in the open, and you can follow along via its Github page. Also check out the VR app Hologram, further down on our list.
43. Hologram
This means that developers can download projects created with Hologram and use them in their A-Frame workflows. It’s currently available on Mac and a Windows version is promised soon.
TYPOGRAPHY
44. Type Nugget
Type Nugget addresses a need you’ll have on just about every front end project: dealing with CSS typography. Still in beta with more features in the works, it’s an online typesetting tool that gives you fine control of type styles.
The tool displays a diverse set of text samples on the page, which can be live-tweaked in a panel on the right. The panel lets you select font size, weight, style, colour, letter spacing, text decoration and more for individual aspects of the page (global styles, headings, paragraphs, links and HTML lists).
Usefully, this tool allows you to register for an account, log in and save your progress. After specifying all your settings, you can hit the ‘Generate Code’ button and Type Nugget will produce a link to a style sheet hosted on its CDN. If you find CSS typography tedious and repetitive, you’ll benefit greatly from adding this tool to your workflow.
45. Textblock
Glyphic’s Textblock is a JavaScript tool that adjusts the size, leading and grades of your type to make it fully responsive. It operates as a progressive enhancement over your existing CSS, and making your text adjust to fit any viewport width or device orientation.
46. Gridlover
Gridlover gives you the tools to automatically adjust your typography to figure out the most effective approaches. Fiddle with the font size, line height and scale factor sliders, then watch the typography respond.
OTHER
47. Aquarelo
Want to match your website’s colour scheme to a particular image? Then you may well find Aquarelo handy. It’s a free Mac app that uses a clustering algorithm to analyse your images and lets you know which colours are dominant in a picture, so you can use that information in your design.
You drag and drop your image into the app and the dominant colours appear in a panel. You can then click on any of the colours to add them to your clipboard.
48. Vivaldi
Sometimes the best web design tool can be something as simple as a new browser. Vivaldi is a fast, customisable web browser for power-users built by some of the people who started Opera. Dubbed ‘a browser for our friends’, Vivaldi is built using web technologies. JavaScript and React were used to make the user interface, along with Node.js and lots of NPM modules.
Vivaldi is the most customisable browser out there, and it offers other cool features such as command line control, a panel for taking notes, tab stacking and tiling, and web panels that enable you to put all your favourite sites in one place for easy access.
49. CodePen Projects
Founded in 2012 by Alex Vazquez, Tim Sabat and Chris Coyier, CodePen has grown to become of the web’s largest and liveliest communities for testing and showcasing HTML, CSS and JavaScript code snippets. For its first five years, it functioned as both an online code editor and an open-source learning environment, where developers could create code snippets (“pens”), test them and get feedback.
Then in 2017, CodePen took another big leap forward by launching its own IDE (Integrated Development Environment), CodePen Projects, which enables you to build websites within your browser.
You can drag and drop your website files, organise them into tabs, and preview your site as you build it. There are templates to help you create sites more quickly if you choose, as well as built-in debugging tools.
Note that, although it works in a similar way to the Pen Editor, CodePen Projects doesn’t replace the latter but sits alongside it. You can learn more about CodePen Projects in this blog post.
50. Foundation for Emails 2
Foundation for Emails 2 is a framework from ZURB formerly known as Ink. It is used for creating responsive HTML emails that work on just about every platform and service, bundling together email coding best practices. The tool uses a Sass codebase that gives you access to a settings file, wherein you can define all sorts of defaults to suit your needs.
51. Ethical Ads
The creators of Ethical Ads don’t like the fact that monetising a website requires advertising which often detracts from the design by being ugly and obtrusive. The solution they’ve created is an advertising network whose ads have all been vetted – they’re all ethical companies and the ads are tastefully designed.
52. CSS Scan
CSS Scan is a browser extension that works on any website you visit in Chrome, Firefox or Safari and it’s great for finding out how your favourite sites are styled. Instead of opening Dev Tools to inspect an element, you can use it to view the CSS of any element you hover over – it appears in a pop-up view and you can copy all its rules with one click. You can use it to copy particular elements from themes or templates to adapt for your own use, and it’s great for debugging your own code.
53. Stark
Baked into Figma, Sketch and Adobe XD, Stark makes designing with accessibility in mind easier than ever before. A great example of this is Stark’s colour contrast analyser which can be used to measure colour contrast ratio and find the minimum advised by the Web Content Accessibility Guidelines (WCAG). The app can also simulate what designs look like for users with varying types of colour-blindness – 4.5% of the world is a lot of potential users, after all. To learn more about making your web work as inclusive as possible, read our how to create inclusive web design guide.
This post was originally published on Creative Bloq.