Design

18 Helpful Online Tools For Web Designers

By February 28, 2017 No Comments

Every designer has a toolbox full of tried and tested design tools that play an essential role in our work. Of course we are big fans of going back to the basics using pencil and paper to jot down our ideas. But many times new apps and resources help us get those creative juices flowing and simply speed up the way we work. There are a plethora of helpful online tools for web designers available today, but not all are created equal.

Here are 18 premium online tools for web designers:

Photo Tools for web designers

Photos on a website are an absolute must. Not only do they create visual interest but they can tell a story without words, pull on emotions, and help visitors relate to your content. Having photos in general is important, but what’s even more important is choosing quality photos. Although I highly recommend hiring a professional to take photos of your business, I’m also a huge fan of some of the free and premium photo tools out there. Choosing photos that aren’t cheesy or posed, but feel natural and have an artistic touch will have a greater impact on your website. Below are my 5 go to sites for photos and photo editing tools for web designers.

1. Pexels

Pexels tools for web designers

Pexels adds at least 30 new photos every week that are completely free and can be used on any project, even commercial without permission from the photographer. Pexels even has a nice search feature to help you narrow down your desired photo category. Learn more about other free stock photography websites.

2. iStock

istock tools for web designers

iStock has really stepped up their photograph library. I’m able to find more and more candid and artistic photos each time I search through their library. They still have cheesy posed photos here and there but the selection has definitely improved. The only downfall is that these photos are going to cost you anywhere from $11-$33 each. But it’s well worth it if you select the right photos for your web design project.

3. Fotor

Fotor tools for web designers

Even though Photoshop is the industry standard when it comes to photo enhancement, we found a great alternative online tool for web designers that offers similar editing capabilities. Fotor is a fairly new service that began in 2012 and provides professional-level photo editing. It’s also available as an app so you can edit photos right on your phone.

4. Place It

place it tools for web designers

PlaceIt is great tool for web designers for creating high quality, instant product mockups for marketing. All you have to do is give them a screenshot of your product or a url and they will generate an image within an iPhone, macbook, or other devise. You can even choose from a wide variety of themes, including work, home and social environments. This tool is a paid but affordable service and is perfect for those who don’t have access to photoshop or just don’t have the time to create product mockups.


Font Tools For Web Designers

There was a time not too long ago where web designers only had a few web friendly fonts to choose from. Thankfully that is no longer the case. With services like Google Fonts and Font Squirrel we are now able to showcase our creativity even more than before. Here are 4 font tools for web designers that I couldn’t live without.

1. Font Pair

Font Pair tools for web designers

Font pair is one of my favorite online font tools because it allows you to see exactly how the font will render on the web and you can view a variety of different Google Font pairings. It also allows you to filter based on Sans-Serif/Serif, Serif/Sans-Serif, Sans-Serif/Sans-Serif, Cursive/Sans-Serif, Cursive/Serif, and Serif/Serif. Even better, you can click and start typing anywhere within the text and header areas to see how your content will look. It’s pretty much a play ground for web designers and font admirers.

2. Google Fonts

Google Fonts tools for web designers

I’ve been using google fonts for many years now and it’s still my number one go-to online font library for web design projects. Not only do they have hundreds of different fonts to choose from but they are always adding more. Google fonts load fast, render well, and typically have lots of font weights and styles to choose from.

3. Font Squirrel

Font-squirrel tools for web designers

Font Squirrel offers free handpicked, high quality fonts for commercial use. Plus they also have a free font generator tool and a free font identifier tool. These features come in handy when you’re trying to match up a clients old logo with something that is the same or very similar.

4. WhatFont

What Font tools for web designers

Looking for a font but don’t want to pull out the inspector? Then you should definitely add WhatFont to your browser extension list. This extension will show you font information simply by hovering over the text. All you have to do is toggle the extension on to view the font and then turn it back off when you’re done.


Color Tools For Web Designers

Some of my favorite web design projects require rebranding a company or improving their outdated color scheme. And sure I could whip open my Photoshop and go crazy with the color picker. But many times I prefer to use an online tool to help me choose a harmonious color scheme. Below are my 3 favorite tools for web designers to generate beautiful and effective color schemes. For a full list visit: Understanding Color Schemes & Choosing Colors for Your Website.

1. Adobe Color CC

Adobe Color CC tools for web designers

Adobe Color CC, also known as Adobe Kuler, has many nice features for web designers. You can choose to browse through already created color schemes by sorting through themes or searching keywords. You can also generate your own color scheme by using the color wheel. This is great if you have a color in mind and you’re looking for complementary colors or other color rules.

2. Coolors

Coolors tools for web designers

Coolors is a super easy and fast color scheme generator. The generator loads 5 harmonious colors to create a new color scheme. If you don’t like what it comes up with then just hit the space bar and fly through endless color possibilities.

3. Flat UI Colors

Flat UI tools for web designers

With Flat UI still being one of the most popular trends, this website will ensure that you’re selecting the most popular Fat UI colors. You’ll have to be a bit more careful about what colors you pair together for your web design project. However, most of these colors look great together anyways!


Inspiration Tools For Web Designers

There are a lot of online tools to help designers get out of a rut, get inspired, or simply improve their game. But finding the right go-to inspirational sites can sometime be a challenge. So I’ve put together a list of my favorite inspiration tools for web designers to help you get your creative juices flowing. Looking for more like this? View Best Websites For Design Inspiration.

1. Dribbble

dribbble tools for web designers

Dribbble is considered the “show and tell” for designers, creators and developers. Not only is this tool great for gathering inspiration and browsing current trends, but you can also connect with some pretty hip designers around the globe. Dribbble is a great tool for web designers for quick visual inspiration for their next project.

2. Design Shack

design shack tools for web designers

With Design Shack you can sort projects by type, including print, web, branding or by color, with over 50+ colors to get inspired by. The color tool is great for determining color pairing because you can see how the colors work together in a finished project. The gallery is not the only cool feature on design shack. They also post articles quite frequently on topics that would interest most designers.

3. Web Design Inspiration

Web Design Inspiration tools for web designers

I like Web Design Inspiration for getting my creative juices flowing because they try to publish different styles, feels and looks from various places. It’s a great tool for web designers who are trying to think outside of the box because not everything shown is from top industries. Instead they focus on what looks good no matter what the company or business is.

4. From Up North

From Up North tools for web designers

From Up North is an online magazine that collects the best and latest news from the creative industry. They share inspiration and showcase amazing creatives from across the globe. It’s a great tool for web designers who are looking to see what design trends as a whole are currently prominent.


CSS Tools For Web Designers

Online CSS Tools are great for generating common lines of code for your css style sheet. And not only do they free up brain space but they speed up my coding by generating all of the browser specific code needed to make these things work flawlessly across the web. For a full list of css tools check out: Powerful CSS Tools for Web Designers & Developers.

1. CSS3Generator

css3 tools for web designers

CSS3 Generator has been my best friend for about 5 years now. I use this CSS tool almost every day for box shadows, text shadows, transparent colors and more. And sure, I could remember how to do all these things on my own. But this tool makes it so easy and saves me so much time. All I have to do is type in my requirements and it generates the code right there for me.

2. Animate.css

Animate Css tools for web designers

From attention seekers to animated entrances and exits, to slide, zoom and fade, Animate.css has your back. This CSS tool is great for when you want to add movement and animation to elements without using any Javascript.

3. Colorzilla Gradient Editor

gradient css tools for web designers

Colorzilla Gradient Editor was also one of the first CSS tools for web designers I bookmarked. It allows you to enter in your color hex codes and then generates every browser compatibly component you need. There is no way I would ever remember these on my own.


Whether you’re looking to have a quick turnover on your next web design project, or you’re simply in a design rut, having these 18 tools on hand can help you save time and produce your best work.

What are your favorite online tools for web designers that you couldn’t live without? Let us know in the comments!

Executive's Guide to Web Development

80 pages of topics and tips to navigate your way to a better website.

Leave a Reply