We’re far removed from the days of the janky-looking Netscape browser, websites coded by hand on Notepad, and the widespread use of Flash in now-defunct website intro pages. While all of these interesting elements defined the earlier, foundational years of website design, there have been many improvements in our slightly more modern times that have brought about productivity and aesthetic improvements to the process.

Save some time on your next web project with these ingenious web page design tools—most of them are free to use! Here’s the list, carefully prepared by Maddy Osman form Blogsmith.

Image Tools

What is a website without content? As visuals help visitors create quicker connections than text alone, you’ll want to use these free web page design tools to stylize your website accordingly.

Sure, we’re biased, but you had to have seen this one coming! Icons8 provides free and paid web-friendly icons for any design project. Our free icons are .PNG only with a 100x100px limit and require linking back to Icons8. Choose from 60,000+ options. Our paid unlimited plan offers access to all icons of any size and format, HTML snippets, a recoloring feature, and no linking required. Grab access for $19.90 per month or $199/year.

Use this ingenious web design tool to generate your website’s favicon.ico file. You can upload an existing image using different formats that include PNG, JPG, and GIF. Once processed, it will be converted to a Favicon (ICO/.ico) and App Icon.

Coding Tools

There’s no need to re-code the wheel when incorporating these ingenious free web page design tools.

HTML-Ipsum is the next level Lorem Ipsum HTML-based tool for websites and other online projects.

If you’ve been living under a rock (hardly a place for a web designer), Lorem Ipsum is the most-used dummy text by web designers for when the design has to come before the copy. Rather than just share text snippets, this tool provides users with Lorem Ipsum samples that are already pre-formatted as HTML tags in terms of lists, forms, paragraphs, and so on.

Using HTML Ipsum is easy—just go to the website, click the heading of any section on the page, and the HTML-Ipsum block will be automatically copied to your clipboard.

A similar tool is Bacon Ipsum, which provides a lot of the same functionality with a humorous (and delicious) twist in line with their tagline: “A Meatier Lorem Ipsum Generator”.

Nobody wants to pay $149/year for Hello Bar. And if you opt for the free version of the tool, you don’t want 10% of website visitors to see their messaging over yours! Cut the middle man out and configure your own “Hello Bar” with this code clone.

Sometimes, you have to start designing without content—images included. PlaceIMG can help you cut down on time otherwise wasted pulling in dummy images. Using custom URLs, you can use the tool to generate placeholder pictures in various resolutions, choosing options with regards to certain categories and effects.

This tool can be more useful than other placeholder generators because it makes it easy to put in an actual image instead of just a blank box. That said, Placeholdit.co would be a better image placeholder tool if you prefer a solid color placeholder instead of an image.

If you’re not using a page builder, you may not have any built-in button functionality. Instead of coding and refreshing constantly until it turns out right, use CSS-Trick’s button generator. Easily customize the various aspects of your button using the tool and grab the code by clicking on the button that you created.

While we’re talking about proper code, it seems proper to mention Embed Responsively. This tool provides responsive CSS to go along with embeded code from different websites/platforms such as YouTube, Vimeo, Instagram, and Google Maps.

Tooltipster is a jQuery plugin for modern tooltips. A tooltip is the message that appears when a cursor is positioned over an icon, image, hyperlink, or other element in a graphical user interface. Tooltipster is free to download—see how it works for yourself with demos on their website.

Wireframe Tools

Before you design, you must first wireframe! These (mostly) free web page design tools make the process easy.

Website wireframes, also known as page schematics or screen blueprints, are important for any website (and other design projects!). These initial designs serve as the skeletal framework of your website.

Though there is no shortage of wireframing tools on the market, WireframeApp stands out as a top choice. This is because it offers a lot of intuitive tools, plenty of stencils, and smart sharing options. If you happen to grab it during one of their Appsumo (or email newsletter-based) deals, you’ll get lifetime access for a fraction of the cost.

If you can’t wait for a lifetime deal, don’t sweat it. WireframeApp’s reasonable pricing starts at $9/month for the Basic plan, $19/month for Pro, and $29/month for Enterprise.

Testing Tools

Peek is the free version of the more well-known UserTesting. After you sign up and submit your website, you will see and hear a 5-minute video of a real person using your site or app. Although it’s free to use, think of it as a trial for UserTesting’s main offering—you only get one user test for free.

BrowserStack is a cross-browser testing tool that offers live, web-based browser testing. It gives instant access to all mobile and desktop browsers.

Features include a real device cloud, 1100+ desktop browsers, test dev environments, security, and privacy. You’ll have time to explore the tool via a free trial but will have to pay if you want to use BrowserStack over the long term.

Browser testing plans starts at $29/month for the Live plan, $99/month for Automate Pro, $149/month for Automate Mobile, and you can contact BrowserStack for a quotation for the Enterprise plan. Mobile App Testing plans starts at $49/month for App Live, $199/month for App Automate, and again, contact for a quote if you want to make use of the Enterprise plan.

Typography Tools

Words can convey a lot of meaning with the proper aesthetics. Make use of these free web page design tools to ensure that your typography is on-brand and on-point.

Canva is an amazing online graphic design software tool used by many developers and designers. Canva also offers a free typography tool call Font Combination. As you might guess by the tool’s fairly straightforward name, you can use this tool to test out different font combinations for your web design projects.

If you come across a font you’d like to use (or match), WhatTheFont makes it easy to identify that font from an image. To use this free tool, simply upload an image and WhatTheFont will try to match it to the closest font they have in their database. They also offer a forum feature if you need additional help finding the name of the font in your submitted image.

Tech Stacks Tools

Trying to replicate a certain look, feel, or functionality? Use these free web page design tools to see behind the hood of other websites.

Similar to the aforementioned, this tool allows you to determine which technologies are being used by certain websites and apps. TechStacks offers a list of popular stacks and technologies in different categories, such as programming language, OS, database, and server.

As already mentioned previously, Canva is a really easy to use online graphic design software. This tool makes it easy and quick to create necessary image assets—even if you wouldn’t consider yourself to be a graphic designer. Make use of free graphic assets, templates, and paid stock image options.

Sketch is a design toolkit that helps designers see a given project through from start to finish. It features a complete toolkit, non-destructive editing, grid and guides, vector editing, iOS mirroring, code export, export presets, and pixel precision. Licenses are available for $99/year (but you can start with a free trial).

Envato operates a group of digital marketplaces with creative assets for designers—including WordPress themes, plugins, stock photos, and graphic assets. Envato Elements is one of their tools that allows users to download unlimited templates that can be used for graphics and web design for just $29 per month. All of Envato’s “elements” are created by independent designers. Also included with an Envato Elements membership: ebooks, online courses, and an AND CO membership!

No image? No problem. Adobe’s online color wheel allows designers and developers to easily pick colors and process them to their HEX equivalents. Explore popular color palettes for inspiration if you’re stuck.

Google Chrome Extensions

Your browser can be used for so much more than simply viewing websites. Try these free web page design tools—easily configured with Google Chrome as extensions!

This Chrome extension is used to view any web page—local or on the web—with a wireframe overlay.

Ingenious (Mostly) Free Web Page Design Tools

Without proper processes and systems, a web design project can end up going way over scope. Employ the use of these ingenious (mostly) free web page design tools to become a more efficient web developer.

Did we forget one of your favorite ingenious free web page design tools? Tweet one or many at @Icons8 and we’ll share our favorites!