Exciting New Tools for Designers, January 2020

January 9, 2020 • Exciting, Tools

We typically start the month with a roundup of new tools and resources for designers, but with the start of a new year (and new decade), we thought a roundup of things to help you get more organized would be appropriate.

Some of these tools have been around for a while with features you might not be using. Other tools are on the new side and offer great functionality. How many of these tools are part of your kit? Which ones will you resolve to use this year?

Here’s what you need to get organized this month and start 2020 off right.

Dropbox

Dropbox is one tool that’s hard to live without. Not only can you use it to manage files and share, you can also use it to run presentations directly with Zoom conferencing or in Slack. Free plans are enough to get started and upgraded plans provide greater storage capability for individuals or teams.

Working from multiple locations with desktop sync and sharing client files are features that make this tool something I use every day.

Feature you need to be using: Shared link expiration dates. When you share files via link, set an expiration date to ensure files aren’t hanging out with access indefinitely.

Slack

Slack is probably a tool that you are already using, but are you making the most of it? Channels, hashtags, and integrations are the key to ensuring that Slack works for you in the way you need it. Take the time to set these up for an efficient, and organized, workflow across multiple teams.

Feature you need to be using: Sync Slack and your Google Calendar for real-time away statuses that work for you.

Cloud Libraries

We all work from a variety of locations—home, work, on desktops and laptops—so cloud-based libraries are a must. Save common files in a location that you can access from anywhere.

Feature you need to be using: Adobe Creative Cloud comes with a place to save libraries, but you can save and connect library files from any cloud-based tool.

Trello

Trello is a free organization and collaboration tool for just about any project. Think of it as a giant project checklist that allows you (or other team members) to keep an eye on how anything from a website build to planning a trip. It works cross devices and isn’t hard to figure out.

Feature you need to be using: Workflow automatons with due date commands and rule-based triggers to make tedious processes happen on their own.

Google Keep

Google Keep is the notetaking app you always wanted. Take notes from any device—sync across all devices—and share or keep notes to yourself. You can take notes by typing, with photos or audio (and it will transcribe messages for you). The best part is this notes app is free and pretty much makes anything else you are using obsolete.

Feature you need to be using: Location, and time-based reminders help keep you on task just when you need it.

Grammarly

Grammarly saves time and effort by checking your messages, everything from documents to website content to emails or social media posts, as you type. Use it to avoid embarrassing mistakes in your writing.

Feature you need to be using: Emojis help you track the tone of your message so that it’s on point and audience-appropriate.

ClickUp

ClickUp takes all your other apps and merges them into a single location and dashboard for easy organization. You can use it to manage your own workspace (free) or collaborate with teams (paid plan). There are multiple views—I’m a big fan of the list option—and templates help jumpstart using the tool.

Feature you need to be using: Use the messages option to create tasks or comments. Boom!

Filing System

Nothing beats a solid filing system. The key benefit of a system is that you store files and folders in the same way every time, making it easier to find things later.

I keep folders first by year. Within annual folders are folders by client name. Then by project name. When projects are complete, I end up with two folders: WORKING and FINAL. Use the same format for naming files. (I use Client Name-Project-Year.)

Feature you need to be using: Date project files. Relying on “date modified” settings isn’t enough if you resave an old file by mistake.

Invoicely

Invoicely makes it easy to work as a freelance designer. The platform is made for sending invoices, managing clients, and allows you to accept online payments. It’s secure and offers a free plan (as well as a paid option).

Feature you need to be using: If you are trying to get organized, time tracking tools help you know just what an individual client costs. You can enter time, expense per client, and mileage so you can get a realistic picture of revenue by project.

HelloSign

HelloSign is for anyone dealing with documents that need signatures. Send and sign online with a platform that’s secure and easy for users to understand. Plus, you can sign items right from common tools such as Gmail or other G-Suite apps.

Feature you need to be using: Store all your signed documents in the interface so you can find them later. (HelloSign will also automatically send reminders if someone hasn’t signed a form.)

Traditional Planner Online Calendar

Pair a paper planner with your online calendar to keep track of tasks (paper planner as a checklist) as well as events and appointments (online calendar). Daily deadlines are best managed when you can jot them down and check them off throughout the day. Plus, that note is right in front of you to stay focused.

Feature you need to be using: Try a weekly paper planner, tear off sheets, or a dry erase board for task management that doesn’t seem overwhelming.

WeTransfer

WeTransfer makes sending large files a lot easier. There’s nothing worse than a file getting lost in cyberspace because it’s too big for email. WeTransfer allows you to send and receive big files with just a click. (And you don’t have to have an account to download files.)

Feature you need to be using: Integrate WeTransfer with other tools such as Slack, Sketch or Chrome for direct sharing from wherever you are working.

JotForm

JotForm is the ultimate tool for creating any type of online form, from simple surveys to signups to payment collection or image uploads. The service has free and paid plans, depending on usage and everything is customizable, so forms can be branded with ease.

Feature you need to be using: PDF Templates are ready-made forms for everything from a simple invoice to contracts or photo waivers. Start with a PDF and tweak as you need. Plus, you can set it up to be filled out digitally and returned to you. This is a huge timesaver, and you can save custom forms in your account to use over and over again.

Featured image via Unsplash.

15 Tools Web Designers Should Try in 2020

December 12, 2019 • Designers, Tools

Last updated: December 10, 2019

Tools web designers and web design agencies should try in 2020

Note: Make sure to bookmark this post, because we will continue to update it weekly with new tools we test.

Designing for the world wide web is easier than ever. Every day, there is a new tool that is “the last web design tool you’ll ever need”. Most of the time, its a load of shit.

When I first started, I spent hours looking for the easiest way to design a website (using Photoshop) and turn it into a website. Eventually, I learned enough about WordPress to buy and install themes and boom, I was a “web designer”.

It didn’t take long for me to realize that I was going to have to step my game up if I wanted to start making the big bucks. So, I decided to learn to write code. While I still try and keep up-to-date with new development tools and coding languages/frameworks, design is still my forte.

With all of the software testing I do, there is still tons of features (or software as a whole) I am hoping to see in the future:

Version control for designers – this should come standard with all design tools.
Better code export functionality – a few tools are getting close but most seem to focus more on apps than websites
Easier client feedback – again, a lot of tools do offer this, but most still seem to need some work

We have a select group of tools we use for all of our web design projects, but we still love testing the new ones that come to the market.

A breakdown of some of our web design software categories:

Best wireframing tools
Best prototyping tools
Best web design feedback and collaboration tools
Best handoff tools
Best project planning task management for web designers

The best wireframing, project planning, and user-flow software for web designers in 2020

#1 Flowmapp – Best for creating sitemaps and user-flow graphs

best web design tools of 2020

Flowmapp is one of our favorite tools because of its simplicity. With Flowmapp, you can easily map out your website’s sitemap. In our process, we will create our sitemap in Flowmapp and share it with our clients so they can visually see their list of pages and how they will be grouped. It also gives them a good idea as to how we intend to group pages within the website’s navigation.

To make it even cooler, Flowmapp also has a User Flow tool that allows you to create an anticipated user-journey to create a conversion strategy.

Software overview:

Platforms: Currently browser only
Best for: Web design plans, sitemaps, and user flow graphs
Integrations: Slack
Price: $15/mo – $199/mo
Free trial: Yes, 14-days

#2 Eagle – Best for mood boards and design inspiration

best web design tools of 2020 - Eagle

Of all the tools I use, Eagle is probably the one I use most frequently. Eagle is one of the coolest tools I have ever come across and one I use for not only web design projects but also for our graphic design and branding services. Eagle is a visual library to organize and view your fields. For Mac users, it is a better version of your Finder.

I have Eagle synced to my Google Drive account and use it to view all of my saved designs, PSD mockups, and a million other reasons. The best part about Eagle is the never-ending file format list it supports. You can save and view PSDs, PDFs, JPGs, PNGs, Videos, Gifs, Word Docs, Powerpoints, and about twenty other formats.

It is the perfect way to create a moodboard or collect inspiration for web design projects.

Software overview:

Platforms: macOS and Windows
Best for: Web design planning, moodboards, viewing design files
Integrations: Dropbox, Google Drive, and several other cloud tools
Price: $29 (lifetime cost)
Free trial: Yes, 30-days

#3 Whimiscal – Best for project planning, wireframing, and flowcharts

best web design tools of 2020 - Whimsical

Whimisical is the perfect tool for web designers who want to visually plan their entire process. Whimsical has four main features: flowcharts, wireframes, sticky notes, and mind maps. Each tool/feature gives web designers a simple interface with complex functionality. The sticky notes feature is one of our favorite. It allows you to easily create notes or tasks for your project and arrange them however you’d like.

Whimsical also makes it extremely easy to share your board(s) with clients. You have the option to create a share link or export the entire board as an image.

Software overview:

Platforms: Browser only
Best for: Web design planning, flowcharts, wireframes
Integrations: None at the moment
Price: $0 – $12/mo
Free trial: Free membership option (4 boards free)

The best UX design and prototyping software for web designers in 2020

#4 Adobe XD – Best for prototyping and designing

Best web design prototyping software 2020

Adobe XD is our go-to software when it comes to designing websites. Before XD, I slaved away creating UX mockups in Photoshop and boy was my tiny little mind blown away to the first time I used XD. XD’s simplicity is why we love it here at DELT. Its interface is so clean and simple you can pop out 10 different designs in less than twenty minutes. They may look like shit, but the possibility is still there.

Like many Adobe products, its lack of updates and new features, in the beginning, had me a bit worried, but it looks like XD is now in it for the long haul. While we haven’t fully adapted XD’s prototyping functionality, we religiously use its other features like creating design assets and sharing our work with clients. One of XD’s most promising new features is its plugin marketplace. It appears to have new plugins added almost daily and it is finally built a steady integration platform so it will only continue to get better.

Software overview:

Platforms: macOS and Windows
Best for: Web and UX design, client collaboration, web design prototyping
Integrations: Creative Cloud and rapidly growing plugin marketplace
Price: $9.99/mo for XD only, $52.99/mo for all Creative Cloud apps
Free trial: Yes

#5 Sketch – Best for prototyping and web design

Best website design tools for 2020 - sketch

Sketch has been one of the most popular web design tools for Mac users for quite some time now. Sketch is very similar to XD, and had I not been a Windows user for the first couple of years I started learning web design, we would almost certainly be using Sketch for our web design services. Back when XD lacked the growth I like to see in design software, I tried converting to Sketch a few times. And while it definitely offers a clean and simple interface, I just found it lacked the ease of use that XD had.

With that said, Sketch is a great tool for web designers. It has a lot of features XD does not have, and its integrations and extensions currently have the upper-hand on XD in my mind.

Software overview:

Platforms: macOS
Best for: Web and UX design, web design prototyping
Integrations: Huge marketplace with tons of extensions
Price: $99 (for one year of updates)
Free trial: Yes, 30-days

#6 Framer/Framer X – Best for web designs, prototyping, and developer handoffs

Framer - best software for web designers in 2020

Framer was one of the first tools with an emphasis on creating interactive/animated web designs and prototypes. Framer’s newest flagship software, Framer X, is a beautifully designed tool that makes designing high-fidelity UX prototypes a breeze. Framer X is also one of the first – if not the first – web design tool to offer an in-app marketplace.

One of the features that makes Framer truly stand out is its developer-handoff option. Their developer tool allows you to create advanced animations and export the layouts and animations to React.

Software overview:

Platforms: macOS
Best for: Web and UX design, web design prototyping, code export
Integrations: Framer X store allows tons of in-app integrations
Price: $15/mo – $99/mo
Free trial: Yes

#7 InVision & InVision Studio – Wireframing, design feedback, and prototyping

Best tools for web design agencies

InVision has been a leader in the design industry for as long as I can remember. They have grown from a simple design sharing/feedback tool to a one-stop-shop for designers and agencies. InVision has a handful of design tools: Freehand (create wireframes and plans by hand), Boards (a tool for creating moodboards or showcasing designs for feedback – also great for graphic and logo designs), Prototyping (mobile and web design feedback and basic click actions), and Studio (along with several others).

Studio is InVision’s latest tool and, like Framer X, it was created as a solution for people who wanted to be able to easily create designs, animate those designs, and export the designs and animations to code. Studio has seen exponential growth since its first launch and InVision has turned into a very forward-thinking, consumer-driven company, so we are very excited to see how far they take all of their products.

Software overview:

Platforms: macOS, Windows, and Browser
Best for: Web and UX design, web design prototyping, code export
Integrations: Atlassian, Sketch, Adobe, Slack, More, and a growing App Library for Studio
Price: $0 – $99/mo (Studio is Free)
Free trial: Yes

#8 Protopie – Best for creating interactive web design prototypes

best tools for web design agencies - protopie

Our final web design prototyping tool on this list is ProtoPie. Like the other software mentioned, ProtoPie, allows you to create high-fidelity interactive prototypes for mobile and desktop web designs and apps. Of all the tools, ProtoPie probably offers the most features in terms of animation customization.

Another area ProtoPie stands out is its ability to be integrated into web design teams. With ProtoPie, design teams can easily collaborate on projects, provide feedback and comments, and it even offers a version control function.

Software overview:

Platforms: macOS and Windows
Best for: Creating interactive web, mobile, and app designs
Integrations: Adobe XD, Sketch, and Figma
Price: $13/mo – $50/mo
Free trial: Yes

#9 ProjectHuddle – Best tool for design and live website feedback

Best web designers software - ProjectHuddle

Another tool I spent countless hours searching for was one that offered easy client feedback. Our team had found reliable options in some other tools, but none that really allowed us to quickly share web designs and collect feedback – until we started using ProjectHuddle.

ProjectHuddle is a WordPress Plugin, but you can use it with any website framework (HTML, Drupal, PHP, etc.). You simply install the Plugin on any WordPress site, and you can then upload logo designs, web designs, or any other designs, and then send a custom link to your clients to make comments and provide feedback.

Along with static designs, you can also paste the link to any live website. All you have to do is paste some Javascript in the code of that site and bam: your clients can now make hotspots/annotations once they login to the dashboard.

Our favorite thing about ProjectHuddle is we have control over everything. We can edit the PHP to change or add functionality or change the CSS to match our brand. The fact that we use WordPress to develop most of our websites definitely is a plus as well.

Software overview:

Platforms: Browser/WordPress
Best for: Collecting feedback on live websites and static designs
Integrations: Zapier
Price: $109/year – $139/year
Free trial: No

The best tools for web design feedback and collaboration

#10 MarkUp – Best for collecting feedback and collaborating on live websites

Best design feedback software 2020

MarkUp is a simple and modern way to collect feedback from clients and designers on your live website. MarkUp eliminates the need to send countless emails, create endless spreadsheets, or set up meetings every time your client or design team has edits they want to be made to your website.

Our favorite things about MarkUp is how clean the user interface is and how simple it is to set up. If you visit MarkUp’s website, you can paste in a URL and test their software in realtime.

Software overview:

Platforms: Browser only
Best for: Collecting feedback and collaborating on live websites
Integrations: None currently
Price: Currently free
Free trial: Yes

#11 Pastel – Best for getting feedback on live websites and static designs

website design comment feedback software

Pastel is another feedback tool that is perfect for both design teams and individual designers. Pastel offers a beautiful user interface and works perfectly on both static designs and live websites. No matter what framework your website is developed on, Pastel can easily be integrated to gather feedback from stakeholders or collaborate with other people on your design team.

Unlike the other design feedback tools on this list, Pastel offers a strong arsenal of integrations. You can create support tickets from comments and export them to task management tools like Asana, Jira, or Trello.

Software overview:

Platforms: Browser only
Best for: Collecting feedback on live websites and static designs
Integrations: Trello, Asana, Jira
Price: $0 – $249
Free trial: Yes, 14-days

#12 Toybox – Best software for design collaboration and managing tasks

Software for web design agencies

Toybox does more than just provide web design teams with a solution to collect feedback. Toybox is focused on taking the hassle out of bug reporting during your web design reviews. Inside of Toybox are three main features: Annotate (comment and feedback tool for websites), Inspect (hover over an element and make CSS edits/comments), and their newest tool, Roller.

Roller is a feature that is still in its early stages, but we are super excited to see where it goes. Currently, it integrates with Figma, but they also plan releases for Sketch and XD. Toybox’s Roller allows you to find and fix inconsistencies in your designs to ensure accuracy across your designs and prototypes.

Software overview:

Platforms: Browser only
Best for: Collecting feedback on live websites and static designs
Integrations: Trello, Slack, Asana, Figma, more
Price: $25/mo – $149/mo
Free trial: Yes, 30-days

The best developer handoff and project planning software for web designers

#13 Avocode – Best tool for turning static designs into code

The best design to code tool for web designers and developers

Avocode is the OG of design-to-development software. Avocode was originally a tool that gave developers the ability to take a PSD and extract code/inspect its elements to easily gather CSS. Now, it is harder to find a tool that doesn’t integrate with Avocode.

Along with its developer hand-off features, Avocode also allows you to collaborate on designs, organize and manage design files, and even create click-through functionality for your prototypes. Avocode is currently compatible with Photoshop, Sketch, Illustrator, Figma, and XD.

Software overview:

Platforms: Windows, macOS, Linux, Web/Browser
Best for: Turning design assets into code/developer hand-off
Integrations: Adobe products, Sketch, Figma, Slack more
Price: $19/mo – $100/mo
Free trial: Yes, 14-days

#14 LogicalPlan – Best software for web design project planning

Best web task management software

LogicalPlan is the software on this life we are the most excited to see grow. In short, LogicalPlan is a project and task management solution with awesome functionality for creative planning. Software is the most useful when it can eliminate as many tools as possible. LogicalPlan has the potential to do just that.

Its task lists are very well designed, and there is also a portion of the page dedicated to a separate, more visual depiction of your tasks. You can create a mindmap, a timeline, or even another task list.

Software overview:

Platforms: Browser, i0s, Android
Best for: Creating and managing web design plans and tasks
Integrations: iPhone and Android phones
Price: $0 – $9/mo
Free trial: Yes, free version

#15 Abstract – Best version control software for designers

best version control software for web designers

As we previously mentioned, making version control a more viable option for designers is something we want software developers to put more of a focus on. Abstract does just that. Abstract is the first tool (that we are aware of) built specifically to provide version control for static designs. Currently, Abstract can only be used with Sketch but there is a beta version of an Adobe XD plugin.

In addition to version control, Abstract also offers design collaboration and developer handoff functionalities.

Software overview:

Platforms: macOS
Best for: Designers using Sketch and needing version control
Integrations: Sketch and Adobe XD
Price: $9/mo – $15/mo
Free trial: Yes, 14-days

Coming soon: an ongoing list of new software for web designers. Check back soon or sign up for a newsletter to get updated as soon as it goes live!

20+ Color Tools For Web Designers

November 21, 2019 • Color, Tools

Setting a basic color theme for your web design project might be an easy task, however, deciding upon the right combinations or coming up with a color scheme may get tricky, especially when you don’t know which color tool would work best for you.

So to help determine the best color schemes for your projects, here are some of the best color tools for webs designers. Let’s check out the list.

Adobe Color CC

You may know this tool by its previous name Adobe Kuler. It’s one of the most popular features by Adobe allowing you to combine colors.

ColourLovers

ColourLovers is an online community of color lovers. It contains images and their color palettes, so you can use them for your own work.

Coolors

Coolors is a quick color scheme generator. It allows users to create and share color palettes in no time. It chooses the main color of the images and finds perfect color combinations.

Color Snapper 2

Color Snapper 2 is a tool created for OS X Yosemite. It was made for graphic designers so they can play, modify, adjust, organize, save, and export colors on the screen.

Colordot

Colordot is a great website and iOS app allowing you to create and share color schemes. You can choose color with a finger or a camera.

Adobe Capture CC

Adobe Capture CC allows you to take a picture of anything you like and turn it into a color palette, create a brush, and pattern. It’s available on desktop and mobile.

LOL Colors

LOL Colors is one of the services created by Mackenzie Child. It’s a website with curated color palettes. Every colorful teardrop is clickable with ready-to-copy hex codes.

Gradients.io

Gradients.io lets visitors use gradient fills for their images. The website contains a page full of squares in different color palettes with their hex codes for easier usage.

CheckMyColours

CheckMyColours helps you combine foreground and background colors of all DOM elements. It’s created to check if the colors pairing create a proper contrast for people with color deficits.

Color Hunter

Color Hunter is a useful tool for designers. Just find an image you like and upload it (or enter image URL) to the website. The service will create a color palette from your chosen image.

TinEye

TinEye allows you to extract color from over 20 million Creative Common images from Flickr. Just select a color, slide dividers to adjust the color and add tags to your search.

Paletton

Paletton is made to help graphic designers create websites with proper color combinations. You can also use pre-made color palettes in a chosen color.

Colorspire

Colorspire is a 3-steps color palette builder. You can choose a base color, then create a color scheme, and see huge colors preview.

Color Explorer

Color Explorer is one of the most in-depth color tools available out there. With its help, you can create, analyze, and customize your color schemes. It’s absolutely free.

0to255

0to255 will help you to find darker and lighter shades of one color. It can be used to find a range of shades for one particular color.

ColorRotate

ColorRotate is a helpful color editing app for tablets. WIth 3D color scope, you can take a full control of colors of a subject.

SpyColor.com

SpyColor.com is a free app that provides information about any color, including conversions to many color models, such as RGB, CMYK, HSL, HSV, and much more. You can create various color schemes, for example, complementary, split-complementary, triadic, tetradic, five-tone, clash and more.

Designspiration

On this site, you can select up to five hues from a full-page palette. Then, it will generate a display of all the images in its database with this color combination.

ColorMunki

ColorMunki lets you create your own colors. You can create color palettes, find similar colors, and properly match them.

Pantone

This service created for Apple users will help you to explore the world of colors and find new shades. You can discover color harmonies, values, and cross-references.

ColorZilla

ColorZilla is Firefox and Google Chrome plugin extension that includes a color picker, eye-dropper, CSS gradient generator and palette browser.

Color Hunt

Color Hunt is a new social media channel for color lovers. You can discover carefully picked color palettes, and choose some Hot, Popular or Random color schemes to use in your future designs.

Material UI Colors

Material UI Colors is an amazing service to choose contrasting colors for material design.

ColorDrop

ColorDrop showcases hundreds of amazing color palettes you can use. For easier navigation, use sections “Favourites” and “Flat Colors”.

4 Best SEO Tools for Web Designers

November 8, 2019 • Designers, Tools

There’s a lot of overlap between SEO tools, which is why it can be so difficult figuring out which is the best to use. To simplify things, I’ve selected the 4 SEO tools that will seamlessly integrate with your design workflow and won’t break your budget.

You already have a ton of tools in your web design toolbox which is why I’m reluctant to write this post the way I would for copywriters and SEO pros. Why? Well, because there are literally dozens of SEO tools you could add to your workflow. Unless you’re promising clients that their websites will go to #1 in search results for every keyword they want to win, there’s no reason to add that kind of complexity to your life.

That said, you can’t completely ignore SEO. No one is going to shell out money for a web hosting plan, domain name, and professional web design services and not expect results in return. But before your client’s website can start capturing leads and sales, it needs organic search traffic — which is why you’ll need some SEO tools and strategies to help you out.

Today, I’m going to introduce you to the best SEO tools for web designers.

Moz: The Best Premium SEO Tool

There’s a lot of really good competition out there when it comes to premium SEO tools, but Moz is the clear winner as far as web designers are concerned.

One of the things that’s great about using Moz for SEO is that it comes with a free toolbox. Whether you need an introduction to search engine optimization or simply want to give a premium SEO tool to try, the toolbox will do the trick.

With free Moz tools, you can do things like:

Research possible keywords;
Analyze the rankability of your domain;
Review your current keywords (regular and branded);
See if you’ve earned any featured snippets, backlinks, and more;
Snoop on the competition’s website and ranking keywords.

Of course, if you make the upgrade to Moz Pro, you gain access to more powerful SEO tools, like:

Technical website audits;
Backlink analysis;
Missing keyword opportunities;
Local SEO strategies;
SERP rankings for desktop, mobile, and local.

And it’s all laid out in an intuitive dashboard.

A Word About the Competition

Mangools, Ahrefs, and SEMrush are all fantastic options if you’re trying to build higher-ranking websites and to scale up your SEO offering for clients. However, these are all truly premium solutions, so unless you’re prepared to use every feature these pay-to-play tools offer, it’s probably not worth it to open your wallet for them.

Ubersuggest: The Best Free SEO Tool

You’re probably wondering if any of the leading SEO tools are available for free. There are a few, but Neil Patel’s Ubersuggest is by far the best of the litter.

What’s really nice about this tool is that, although it’s simple enough to use, you can put it to work for you in a number of ways.

For example, you can use the site audit tool to review current clients’ websites. If you’re looking for a conversation starter, this could be your ticket in. You’ll have insights on how well or poorly their website has done in terms of SEO, get suggestions on how to improve, and even be able to see their site speed while you’re at it.

You could also use this tool for basic keyword research and recommendations, which would make it especially helpful in earlier planning stages. Or take it to the next level and assess what’s going on in your clients’ competitive markets.

Yoast: The Best WordPress SEO Tool

For those of you that design websites using WordPress, Yoast is a must-have SEO plugin.

Although Yoast doesn’t help with keyword planning or backlink tracking, it allows web designers and writers to improve their search engine optimization page by page.

It allows you to assign a focus keyword, title tag, and meta description to each post or page;
It lets you preview your Google search snippet on desktop and mobile to make sure everything fits and a featured image is present;
It scores your page on how well it’s optimized around your keyword;
It scores your page on other SEO factors like text length, image alt attributes, internal links, and so on;
It scores your page on readability as well.

There’s more you can do with Yoast as a web designer. You can use it to generate sitemaps, create custom Open Graph and Twitter Card tags, and even automate how your site’s search metadata is written.

Google Search Console: The Best Analytics SEO Tool

You’re already using Google Analytics to review key website metrics as well as to make data-informed decisions for future design improvements. But did you know you can add Google Search Console data to your Google Analytics dashboard, too?

From here, you can pull data on:

Landing page traffic and performance;
Geo-specific data;
Device-specific data;
Search queries and click-through rates.

However, Google Analytics falls short in providing its users with all of the search-specific data it tracks on the web, which is why you should add Google Search Console to your list of SEO tools.

From this dashboard, you can:

Submit your XML sitemaps to Google;
Check for mobile usability and errors;
Quickly scan for security or speed issues (speed is currently in beta);
Review page-specific impressions, rankings, and click-throughs;
Track internal links, backlinks, top linking websites, as well as the text they’re using to link back to you.

Even though this tool won’t necessarily help you plan your search optimization strategy, it’s a good place to go when you want to troubleshoot why your hard work isn’t paying off.

Other SEO Tools Web Designers Should Be Using

There’s more to SEO than just link building and keyword optimization. Google looks for other trust and authority signals, too, when determining the rank of a website. And, as a web designer, you’re in the best position to handle this side of SEO.

Here are some of the SEO tools you should be using in addition to the ones above:

SSL Certificate: If a website is on HTTP, that’s an automatic penalty. So, always make sure your websites have an SSL certificate installed;
Speedy Hosting: Site speed is a huge deal in the scheme of things — and it starts with the quality of your web hosting plan and provider. When it makes sense to do so, power up your hosting with a CDN and caching plugin;
Image Compression Tool: For all their worth, images can cause a lot of grief for web designers. By running each image through a compression tool like TinyJPG you can keep their size from shrinking your website’s ranking.

And, of course, make sure you’re always using high-quality design tools and adhering to mobile-first standards. When a website looks outdated, runs poorly, and isn’t properly managed, Google and your visitors are sure to take notice.

Featured image via Unsplash.

7 UI tools for creating better digital color palettes

October 26, 2019 • Creating, Tools

While there are plenty of fantastic color palette generators available on the web, in this post, we thought we’d share our favorite color tools specific to UI design.

It’s important to keep in mind that choosing colors for user interfaces calls for a different set of requirements than for example, a graphic design project. Not only does UI design require a comprehensive set of colors with a range of variations and shades — but designers also need to think about how color will add to the user experience of a digital product. This means carefully considering color semantics and ensuring designs are accessible, all while remaining on-brand.

It’s no surprise that color is one of the most essential foundations for a digital product’s design language, so it’s crucial that you choose your color palette with intention. Below are a handful of UI color picking tools we recommend that will help ensure the effectiveness of your designs and of course, keep them looking nice and polished!

1. Accessible Color Matrix

When it comes to product design, we should all be keeping accessibility in mind. Ensuring your UI’s color contrasts are in line with the Web Content Accessibility Guidelines (WCAG) is one of the ways you can do this. Accessible Color Matrix makes it super easy to test out potential color schemes for your user interfaces. What makes the tool especially unique is the ability to test a range of colors rather than just two at a time. Check it out:

2bb2cddf25a4d402524f0ebdc224faf0

2. Eva Colors

This handy AI tool generates a semantic color palette based on your brand’s primary color — each color is assigned to a purpose you should apply it to: success, info, warning, and danger. On top of that, Eva Colors produces the various shades for each color generated and has a really easy export feature. You can even toggle to view the colors in both light and dark mode! Simple, effective, and intuitive.

Fb66c99897714385b79a96776a5a3f5a

3. Palx

Palx is an automatic UI color palette generator. Input your base color, and the system instantly provides you with a full-spectrum color palette based on the primary hex code entered. The colors generated work harmoniously together and you can also easily export all of them by scrolling to the bottom of the page.

64ca151cfc1dfdf367df4e7e08c46f50

4. Copy Palette

Created by Dribbbler Dimitris Raptis, Copy Palette enables you to create consistent monochromatic color combinations and export them directly into your favorite design software. According to Dimitris, the idea came to him after struggling repeatedly with generating the consistent monochromatic color palettes he envisioned for his interface designs. We love that Copy Palette also lets you can adjust parameters like the contrast ratio of shades and number of color variations.

4db5c2427ba9b4fe87716dc99619587d

5. Cloud Flare

Cloud Fare is a custom tooling that not only helps you build out color sets, but also preview palettes against a plethora of UI elements like headers, icons, buttons, and much more. The best part is that you can check each palette’s accessibility contrast scores and edit those colors as needed. It’s an insanely helpful two-in-one color palette and visualization tool to help you work more seamlessly with color. Check out their extensive instructions so you can make use out of all of their awesome features!

0416306f0cb0d5e2aa0bbcf8a50e02e7

6. Palettte

Use Palette to create and sample color schemes in which colors seamlessly smooth into each other. You have full editing capabilities in terms of fine-tuning hue and saturation, and adding more color swatches as needed. Simply click on the plus icon at the top left corner of the tool to get started and when you’ve got a palette finalized, hit the export button at the top right! If you already have a color palette on hand, you can easily import and edit it further to get your desired values.

1a3f6193196ca8b8b08a5684d48a802f

7. Open Color

If you prefer to simply pull a pre-made UI color palette that’s guaranteed to work well, check out Open Color. The website essentially provides an open-source color scheme that is optimized for user interfaces. If you don’t have a brand color set in stone, this is a sure-fire way to ensure your UI color palette is both effective and attractive. And, if you’re new to using color in UI design, check out their Instruction tab which includes a helpful manual specifying the intended use of each color!

C7060d0909d5f0d729b272a9a14aa5fb

For more web design resources, check out our roundup of accessibility tools to evaluate your design’s contrast ratio, 7 best illustration resources for web design projects, and learn how to avoid the top 5 mistakes new web designers make when starting out.

Find more Community stories on our blog Courtside.
Have a suggestion? Contact stories@dribbble.com.

2019 Design Tools Survey

October 15, 2019 • Design, Tools

Exciting New Tools for Designers, October 2019

October 8, 2019 • Exciting, Tools

It’s already time to start thinking about all the seasonal design elements that you will use for the rest of the year. That might be icons or illustrations or fonts. We have a few new elements this month that might fit the bill, as well as learning tools and inspiration. Here’s what new for designers this month.

UIPrint

UIPrint is a set of sketching templates for devices that you can print out to create with a pen (because some of us love to draw mocks and ideas in meetings). The current collection includes more than 10 printable wireframes and sketchpads. Grab prints for devices you use most of download the whole set and get printing.

Haptics

Haptics provides developers with a quick and easy way to see what the different haptic feedback is like on supported iPhone & Apple Watch models. Available only in the iTunes store and requires iOS 13.0 .

HTTP Mock

HTTP Mock allows you to intercept and view all of your HTTP (and HTTPS) mock endpoints or entire servers and rewrite, redirect, or inject errors.

Art of Symbols

Art of Symbols is a project published by Emotive Brand that takes a look at the root the design and meanings of common icons and symbols. The project was originally published day by day as an Instagram project, but has been compiled into a website that’s super informative and fun to look at.

Smoother & Sharper Shadows

Smoother & Sharper Shadows is a tutorial that will help you clean up the look of drop shadows using the box-shadow CSS property. You can get more control over the look of shadows for more polished designs.

Copy Monkey

CopyMonkey uses machine learning to mimic your handwriting style like a monkey. There’s not a lot of work value in this one, but it is a lot of fun to play with.

CTRL Z

CTRL Z is a fun interactive flyer that can provide a source of inspiration. Click and drag to see just how this flyer for an upcoming art installation works.

Shape

Shape lets you customize the style, colors and border of more than 1,000 static and animated icons and illustrations. Export to React, SVG and Lottie. The tool also includes UI templates to help you use icon collections.

Winning Icons

Winning Icons is a set of 50 vectors that celebrate achievement. With medals and celebratory icons in three styles, this collection is made for winning. The set is available in SVG and JPG format.

Sketch Devices

Devices is an updated set of modern device mockups for Sketch by the team at Facebook Design. From the design team: “Facebook supports a diverse audience around the world and an equally diverse set of devices. To emphasize that in our design mocks, we redrew a range of devices to show the global diversity of the people using our products. Each device comes with a bitmap of the device (with and without shadows) and the original Sketch file for that device.”

Animated Icons

Animated Icons is a collection of fun line icons with interesting animations for something a little extra in your projects. Download the JSON for Lottie, GIF, or After Effects formats. Pick and choose icons or download them all.

Fresh Folk

Fresh Folk is an interesting collection of illustrations of people, places, and objects to enhance design projects. You can use illustrations as mix and match characters and scene elements to create almost custom illustrations from the library.

Where to Put Buttons on Forms

What’s the perfect placement for a button on a form? Well, it depends on what information is in the form. This great explanation/tutorial by Adam Silver can help you think about the logic behind button placements and make your forms more user-friendly.

Mozilla Developer Video Shorts

The team at Mozilla Developer has launched a new video series packed with demos and tools that teach web technologies. You can find the first few videos on their website or follow the channel on YouTube for new videos when they post.

Fliplet

Fliplet is a “prefab” no-code app editor that helps you build all kinds of different apps without coding. It uses a library of open source components, or you can create your own. The core feature base includes everything you need to get started with an app build.

Quickmetrics

Quickmetrics is a dashboard-based data collection and sharing tool. Track all kinds of data including signups, response times, or almost anything.

Deep Work Stats

Deep Work is a productivity tool that helps you see how you’re actually spending time on the job. It scans your calendar and computer time to determine how much time you have for deep work and shallow work, how much time you spend in meetings, and how you compare to co-workers and globally.

Bridamount

Bridamount is a handwriting style typeface with a fun set of special characters. (And it’s free for commercial use as well.) It includes a full upper- and lowercase character set.

Cascadia Code

Cascadia Code is a monospaced font that’s still in development. You can modify it using glyphs and FontTools. It includes programming ligatures and is designed to enhance the modern look and feel of the Windows Terminal.

Dealerplate California

Dealerplate Cailfornia is a funky typeface that mimics the letterforms on license plates. This is one state in the font set that features 17 fonts.

Krisha

Krisha is a display font with an all caps character set and funky smooth lines for letterforms. It’s big and bold and one of those few free fonts that’s also available for commercial use.

Mallie

Mallie is modern, fusion font with multilingual support. It’s a very versatile font that would make for a fun brand design.

Santa Claus

It’s not too early to start planning Christmas designs. This comic style font, Santa Claus, could be just the right element. It makes for an interesting uppercase only display.

Scarekrowz

Just for Halloween is Scarekrowz, a funky spooky typeface for the season. The font includes just 94 characters, but could make for a fun, seasonal display.

10 Best SEO Tools to boost your organic traffic in 2019

September 16, 2019 • boost, Tools

10 Best SEO Tools to boost your organic traffic in 2019

The average Joe’s guide to experts Top 10 Best SEO tools that won’t break your back or budget.

You should know that you don’t have to do all the heavy lifting your SEO campaign requires by yourself anymore. Even the top-level SEO experts aren’t getting by on their own. So why not free up your time and get more done through adopting the new wave in productivity that SEO tools sponsor? Here’s what you should consider.

Think of that cramping set-back keeping you from dominating your niche, grabbing more opportunities, or just simply getting by. What if you knew that it requires less effort to fix than you thought?. Even better, how would you feel knowing you don’t need to be an SEO expert to get started on it?. Well, you don’t have to answer that yourself too ─ the experts already have.

The Best SEO tools listed here will show how experts have shamelessly used their help to get past competitors plenty of times and how to do it yourself. Even though there’s ten of them. don’t worry about getting a ton of these gizmos, just one of these SEO tools used properly can help you strike the bull’s eye of your SEO goldmine.

Free vs paid subscriptions.

Most of them are free ─ so don’t worry about breaking your budget. And as for the paid subscriptions: you can take advantage of the free trial offers before you commit to making a purchase.

Best SEO Tools in 2019

Let’s begin with SEO Tools…

1) Ahrefs

Ahrefs is a helpful competitor analysis tool which is backed by a large database of back-links. It is one of the most preferred SEO tools. You can check which websites are linking to your competitors and use this information to jump on opportunities to gain a competitive edge in your industry.

Ahrefs

Its capacity to carry out revealing SEO audits is one of its most favored features. Gaining insight on what keywords your competitors are ranking for, what brand of content is doing well in your industry and who is digesting it, as well as showing which key points you need to improve the efficiency of your website is expected from the Ahrefs keyword explorer tool.

That is not all you’re getting out of this. You can use the Ahrefs dashboard to either monitor your website’s ranking, view your competitors, or monitor projects for your clients.

Here is what you can expect from an Ahrefs SEO Audit

The rank of your backlink profile/(AR)Ahrefs Rank

Total ranking of your back-link profile strength/Domain Rank

Total number of backlinks

Referring domains

Rank tracking for both organic & targeted keywords

Try Ahrefs!

2) Moz

Moz

An SEO marketing tool like Moz is necessary to give insights on rankings and shifts that affect the SEO landscape, especially with the frequency of Google algorithm update roll-outs. It can also expose you to new opportunities to increase your advantage over your competitors.

Moz is favored in the SEO community for its capability to produce a transparent overview of website performance. You can optimize each of the pages on your website based on the findings you gather from the reports.

Though you can expect to pay for this due diligence, it is also accessible as a free Moz toolbar download.

Moz Tools

Taking advantage of Moz’s page optimization features can help you know about the following:

Search traffic
Search data
Keyword targeting

The Page SEO Checker tool will help optimizers in monitoring rankings and keeping up with the key areas that stand to be improved by offering performance-enhancing recommendations.

Try Moz!

3) Google Search Console

Google Search Console

This is one of the free SEO tools we were talking about. In a nutshell, this Google-sponsored tool reports on what factors most influence your website’s presence in the Google SERP’s.

Factors such as your website’s visibility in Google’s search results, its usability, your contents (especially keywords) usefulness, and its ranking. It also highlights who is visiting your website through Google’s search engine and how they are interacting with the efforts you have set in place to attract them.

This is a boost to your user experience optimization in regards to having an overview of your impact on Google’s audience. This is especially true when monitoring which devices they use, such as the boost in mobile usage (AMP). All you have to do is copy a tracking code from Google Search Console to paste into your websites HTML. Doing this will help you gain knowledge on the important parts of your SEO campaign.

Connect your website with Google Search Console

You can expect to get the following insights from the Search Console reports:

Page index

Back-links

Geographic targeting

The Google Search Console offers to index changes made to your website immediately instead of the usual waiting period. Doing so with Google Index can take weeks and even months to register

Google Console is also said to help with chasing off cyber threats. This should come in handy for a business/establishment which is vulnerable to malware and spam attacks.

Try Google Search Console!

4. KWFinder

KWFinder

As for KWFinder, we’ve found that it caters a powerful keyword research and management tool with a straightforward user interface. The paid subscription starts at $29 per month billed annually. The subscription offers a generous 100 keyword lookups per 24 hours as well as other useful benefits you can find here. This SEO tool does have a free plan available that allow a user three keyword lookups every 24 hours. You can also try the 10-day free trial.

Overall, the tool is great for focusing on all the information that involves a single keyword. It balances this out by catering for long-tail keyword combinations.

As part of its package, the ‘Rank Tracker’ tool provides keyword suggestions. This gives users insight into data that covers a keywords search volume, the average cost per click, competitiveness, the difficulty score or if the keyword is trending or not.

Users get the capacity to find low competition keyword combinations that have a search volume that should boost their rankings. When you find a suggestion that you like, you can add it to your list of keyword suggestions on the tool.

KWFinder Features

The dashboard is easy to navigate and offers convenience to import or export a list of keywords and analysis reports as a CSV or TXT file.

Try KWFinder!

5. SEMRush

SEMRush is always ending up in the top 10 Best SEO tools lists we’ve come across. It earns its authority from being an SEO keyword research tool famous for boasting a large keyword database. It doubles as a marketing tool, making it efficient as both an SEO & SEM tool. Helping to measure and track your campaigns, evaluating your performance as well as your competitor’s to keep you efficient in your market.

SEMRush Keyword Stats

The API integration makes it compatible with Google Docs, Google Analytics & Google Search Console. That’s three times the advantage and convenience. You can use it as a domain comparison tool to match your websites meta information such as search data, traffic insights, back-link monitoring, position tracking, and other ranking factors against another website through an analysis report that can be accessible in PDF format. A competitive edge can be gained from these findings by making your content unique and your user-experience a cut above the leading competitors in your niche.

SEMRush Content Creation Ideas

You can tweak your website’s performance with the On-Page SEO Checker Tool. The dashboard enables users to get a look at the keywords in their content with the Topic Research tool, keep a finger on the pulse on the social media shares they are collecting and also get backlink ideas. The one-click posting feature is good at supporting multimedia posting across many social media channels.

Try SEMRush!

6) BuzzStream

Buzzstream

Buzzstream is a web-based CRM software which has workforce and email management automation capabilities. You can access emails, track, and follow-up on your email outreach as well as your link-building projects all in one place with the ‘Sequence’ feature.

You won’t need to cross-reference tasks on a spreadsheet anymore, Buzzstream has a chrome plugin that can help to manage and track campaigns within your browser. Users can integrate the software with social media and other API supportive platforms.

The Discovery feature helps with your content marketing efforts. You can look for experts, influencers, and bloggers by inserting your query in the search bar. A list of recommendations will appear on the interface. You can filter these results to get your ideal candidate. There is an option to add them to your prospects lists for consideration if you can’t make a decision on the spot.

Here’s a quick look at how you can use it for scheduling tasks, as well as tracking your team’s work-flow through the course of a particular project.

Buzzstream scheduled Tasks

Buzzstream can handle your back-link strategy by monitoring who is linking back to you. If you get stuck, their notoriously efficient customer services can walk you through any of the issues you run into.

Try Buzzstream!

7) ATP(Answer the Public)

Answer The Public

A free keyword research tool like ATP can help with producing informational long tail keywords. ATP is a combination of SEO and marketing capabilities which are useful for the Press Coverage Reporting aspect of your content distribution to the public.

Answer The Public questions

You can generate a lot of content ideas for your audience from such access to consumer insights. A bulk of questions is supplied by ATP when you enter your query in their search-bar and can be accessed in list-form or a circle.

ATP Questions chart

Preparing your content with strong hints of your audience’s motivations can be helpful in making you a leader in efficiency within your market.

ATP’s ability to produce buying intent keywords makes this easier to draw in organic traffic with the content in your topics. This can be useful for targeting your audience with reviews and buying guides.

Try Answer The Public!

8) Ubersuggest

Ubersuggest

SEO guru Neil Patel’s free keyword tool can be used to gain an edge in your market. Ubersuggest is a free hack to use in boosting your website’s ranking. You can get insights into your competitors content marketing strategies on its user-friendly interface.

Peeking into your internet neighbors SEO, content & social media strategy implementation can be a practical way of getting insights on what’s working. Such insight takes you beyond the limitation of relying only on data insights.

If you know that generating keyword ideas to implement in your content strategy is the first step to improving the relevancy of your content, this will keep you from posting content that your audience is not interested in.

This is what you can expect from Ubersuggest:

Keyword volume

Keyword competition

Seasonal trends

Social network shares

Number of backlink’s

Ubersuggest Backlinks

Building your link profile with the tool provides a view of your competitor’s backlinks. This should help you figure out which links to add to your own. Knowing which websites your audience is linking to can narrow the scope of prospects to approach in your niche/industry by a great deal.

Try Ubersuggest!

9) SpyFu

Spyfu

For search marketing, SpyFu offers a reasonably priced cloud-hosted tool that is structured around increasing efficiency for marketing campaigns. It is believed to be an entry-level to advanced business software solutions. Its enterprise plans start from $33 per month.

When coming up with a marketing strategy, you are going to need a tool that makes it easier to gather information on your competitors. Spying on how they execute paid ads, how they gather profitable keywords and the likes will help chart your course. It gathers this intelligence by zeroing in on your competitors Google SERP’s and Adwords’s activity.

Spyfu Overview

You can track your competitors marketing methods on Google along with their Organic Ranking and Paid Search history on Adwords for the last nine years. Searching any domain active on Google will also present an overview of vital information you can use to get ahead. This information is part of SpyFu’s capacity for showing what keywords they have purchased, the ranking of their organic reach, sales leads, contact details, and the likes.

Try Spyfu!

10) Yoast SEO

Yoast SEO Plugin

You no longer have to worry over whether your article is SEO friendly or not. When producing SEO content, it can be hard to manually evaluate whether you are being effective or not. WordPress users can set up Yoast SEO plugin on their website. It analyses which parts of your articles can be improved to boost its SEO ranking.

These include readability, scannability, writing voice, meta-descriptions, image alt tags and more. It can also keep you from over-optimizing your content by offering suggestions to keep you within the required number of keywords/key-phrases to use.

You can expect a:

Readability analysis
Insights tool
SEO analysis tab

Yoast SEO Plugin Content Analysis

It easy to fall into the trap of creating content that is only focused on ranking in search engines with such a tool. Writing natural content for readers and using the tool along with an LSI keyword tool or a thesaurus can help you appeal to both your audience and search engines.

Try Yoast SEO Plugin for WordPress!

Conclusion: Enough tooling around!

We avoided listing some SEO tools that have the same function. Each one of these SEO tools caters for every distinct corner that shapes the structure of an SEO campaign as well as SEO as a whole to make a big difference to the ROI of your efforts.

Bookmark this for further use. Every SEO engineer, marketer, and the regular internet entrepreneur can find a tool best suited for improving their SEO and conquering the World Wide Web by keeping this with them. Feel free to share your experiences as well as this article with your community. You might be getting someone out of their rut by the virtue of doing so.

Note: This List on the Best SEO Tools is contributed by Pollen Lekau. If you have an extra-ordinary article to contribute, then check our Guest Blogging Guidelines.

Best Tools For Graphic Designers In 2019

September 1, 2019 • Graphic, Tools

The advent of the digital space has created an increasing demand for skilled visual communicators who are able to represent brands online. A vast majority of graphic designers are also no longer working for specialised agencies and consulting companies, choosing instead to work in-house for companies.

These changes in the status-quo have, in turn, propelled the innovation of graphic design software. Designers in 2019 want better, digital-first, cross-platform and more affordable tools — a demand which has catalysed the creation and growth of massive and very innovative companies.

Let’s review the most prominent graphic design tools of 2019, to help you pick the ones best suited to your unique creative workflow.

Raster Graphics Tools

A solid raster graphics design tool is a must-have for any serious designer. The good news is that raster software comes in all shapes and sizes.

Affinity Photo

Affinity Photo is a professional photo editing application that makes no compromises on quality, despite offering one of the most affordable products on the market. It offers powerful features for fettling and fine-tuning images, as well as modules that reveal great depth, colour and detail in raw files.

Photoshop

Photoshop 1.0 was released back in 1990 — and has since become one of the most well-known graphic design tools of all time. In 2019 Photoshop is still a great option for anyone looking to create anything that involves raster graphics.

Procreate

Procreate is a powerful raster graphics tool for iPad and iPhone devices. Using a good stylus, a skilled designer can create stunning graphics and art. Procreate has been around for a while and has amassed a huge social following on Instagram and YouTube by showcasing their most inspiring pieces and detailed tutorials.

Pixlr

Pixlr is a free online photo editor that gives desktop apps some serious competition. While it’s relatively new with some features still in beta-mode, the editor is perfect if you’re looking to fine-tune photos or power complex compositions. It’s easy-to-use, free and bound to get better with time as new features are rolled out.

Vector Graphics Tools

Vector graphics are everywhere, both in online and offline realms of design. For years vector graphics design hadn’t been as accessible and popular among the masses as rasters, mainly because vectors are inherently precise and sophisticated. But in recent years that’s changed, as better and more intuitive software had entered the scene.

Affinity Designer

Affinity Designer is a popular vector graphics editor with advanced features for creating illustrations, icons, branding, UI designs, typography, web graphics and more. The zooming features are particularly useful for ensuring accuracy, while the live and responsive nature of the program is commonly celebrated as its greatest strength.

Illustrator

Adobe Illustrator is another reliable option. Featuring a wide variety of tools, filters and effects, Illustrator is used widely across the graphic design community for websites, video games, logos and more. It allows you to produce artwork with pixel-perfect accuracy, while the design presets and templates ensure speed and convenience.

Vectr

Vectr is a free option for vector graphics. It’s an intuitive option that’s easy for anyone to learn and use, and perfect for those who don’t need the more advanced features of high-end applications. It’s a great option for anyone looking to create simple vector graphics in a jiffy.

Vectornator

Vectornator is the ideal vector graphics tool for iOS and iPad devices. It has an easy drag and drop interface that makes it easy to use for novices, while still offering some advanced features like auto-trace, unlimited layers, colour profiles, live blend modes and alignment tools.

Font & Color Tools

Fontbase

Fontbase is a cross-platform font management system. You can organize the fonts on your laptop into collections, preview them adjusting the color or background and experiment with styling.

Fontbase is free, but comes with a premium subscription option, which includes features like advanced search, auto-activation and advanced glyphs.

Befonts

The idea behind Befonts is quite simple — it’s a platform offering free fonts for creatives. Downloading fonts is easy and the members are encouraged to submit their own free fonts.

Fontspark & Colorspark

If you’re truly passionate about graphics, these two little apps might become irreplaceable in your toolbox. Fontspark helps designers discover and preview fonts, while Colorspark is all about — you guessed it! — colors and gradients.

Stock Photos

There are many free stock photo platforms out there. Sometimes you just have to be persistent and check a couple of platforms before you find what you need. Here are the major royalty-free images directories out there:

Unsplash — probably the most popular and widely used stock images platform out there.
Pexels — another large and popular royalty-free photos directory.
Burst — free stock photos for websites and commercial use.
FoodiesFeed — thousands of beautiful food pictures.
Freestocks.org — high quality photos all released under Creative Commons CC0.
New Old Stock — vintage free of copyright photos from the public archives.
Duotone — free duotone images.
LoremPixel — an API that serves stock photos at specified sizes.

Stock Icons & Illustrations

As a graphic designer, you can never have too many icons and illustrations to use in projects. It’s usually easier to modify pre-made assets instead of creating them from scratch.

Flaticon — 1593000 vector icons in SVG, PSD, PNG, EPS formats.
Iconfinder — a marketplace for SVG vector icons.
Iconmonstr — another big directory.
Icons8 — SVG icons categorized by styles and trends.
Font Awesome — the web’s most popular icon set and toolkit, also it’s open source.

Social Media Design Tools

Social media is a huge and constantly expanding medium for graphic designers. After all, this is primarily what has birthed new roles like Social Media Manager.

Although technically you can use any of the above-mentioned tools to design social media graphics, certain specialized tools might be easier and more practical to use.

Canva

Canva is indisputably the most commonly used image editing software, and it’s not hard to see why. It has an incredibly easy to use interface, has a free tier that comes with a lot of useful features and can be used to make anything from Facebook Cover Photos to Instagram Stories. You can layer images, colours and impressive typography in a myriad of ways to create unique graphics for your social media posts in minutes.

Pablo

Pablo is the fastest and easiest way to create images with quotes for social media. It’s free to use and you won’t even need to sign in to start creating inspirational quote images, blog post headers, testimonial posters and more.

RemoveBG

Ever wanted to use a particular element of an image but remove the clutter or background around it? RemoveBG allows you to do just that, in a matter of minutes. It’s completely automated, so you won’t have to do anything other than upload the photo you wish to remove the background from.

We’ve also compiled a more comprehensive list of social media design tools for you to explore.

Logo Design Tools

If you need to create a logo quickly and effortlessly, DesignEvo might be a perfect choice. It’s a free online logo maker with 10,000 templates that you can use and customize as you like.

Your Unique Toolkit

Now that you’re familiar with some of the best graphic design tools on the market, you can be assured that there’s a perfect tool for you at every step of the process, whatever your budget or skill-level might be. While there are bespoke benefits attached with each tool, the right one for your needs should include all the features that suit your convenience whilst still being suited to your abilities and budget.

When it comes to graphic design software, it appears that the product offerings are only becoming more competitive and advanced with time – so always keep an eye out for the newest tools and return to this list as we’ll be updating it regularly.

5 accessibility tools to check your design’s contrast ratio

August 31, 2019 • Accessibility, Tools

If you’re working on web design projects, then it follows that web accessibility should be one of your top user experience considerations. Whether it’s finessing on-page readability for users with visual impairment, or ensuring that your web page’s visual cues remain effective on mobile devices, sometimes color alone may be what’s standing between you and a truly accessible and inclusive design.

One of the most important considerations is contrast ratio — or the luminance relationship between light and dark elements (most often text) in your design. Users with certain cognitive disabilities may require lower contrast text, while low vision readers may need high contrast user interface considerations in the visual design they consume.

Likewise, color blindness is also a consideration that needs the attention of any designer implementing a design process which strives towards equitable, accessible design.

The good news is that there are a handful of inexpensive — and even free — tools that can help you become more cognizant of design for all, and how you can help people equitably experience the design you’re creating.

1. Contrast

Contrast  is a macOS app that offers designers a way, like its namesake, to immediately gauge the contrast ratio of color choices to assure they are in alignment with Web Content Accessibility Guidelines (WCAG). An app that’s built for immediate feedback without being a burden to your design workflow, Contrast also offers a guide  on their site that acts as a primer on some of the WCAG accessibility standards.

The app acts as a small menu bar which you can integrate into whatever design software you’re using, or move the menu bar around your desktop to use as a floating window anywhere else on your screen.

958823a6d4793b99c8bdcf26f096f458

2. Color Safe

If you’re looking for an in-browser option, Color Safe  is a web-based tool that allows designers to generate color palettes based on WCAG standards for contrast ratio. Simply select your project’s background color, font family, font size and weight — plus the WCAG standard you’re trying to achieve — and Color Safe will generate palettes whose contrast ratio scores you can compare.

B5b023b6c63dd63a59577a22e3d2ddd8

3. Tanaguru Contrast-Finder

Tanaguru Contrast-Finder  is an easy-to-use, web-based tool that allows you to simply enter your preferred foreground and background colors (in either RGB or as a hex code) to monitor your design’s contrast ratio. The tool allows you to select your desired minimum contrast ratio scores, while also generating a list of adjacent colors to evaluate.

These provided alternatives also come with in-use samples of different text sizes, weights, and their resultant contrast ratios — giving you a sense for which color and text choices will not only be more accessible, but play nicely together as part of your overall design.

F1d4337c4ee09101061acc2f0231c9b7

4. Stark

With plugins for Adobe XD, Figma, and Sketch, Stark  is a plugin that features a suite of tools to foster accessible and inclusive design standards — right from within the software designers are already working with. Stark’s contrast checker tool allows designers to double-check that their typography and font size — in conjunction with the design’s background colors or supporting visuals — provides the necessary legibility and sufficient contrast to harmonize with accessibility guidelines.

As a bonus, Stark also assists with additional accessibility issues, including color-blindness. The app allows designers to view their work in color-blindness simulation and make tweaks to their design system.

F4813b3e9edd2f4d3a0fb01d073f4f5c

5. Spectrum

Spectrum  is also a free tool that can assist you as you design with color-blind users in mind. A free Google Chrome extension developed by Yehor Lvivski, Spectrum also allows designers to directly test their sites across a range of over eight different versions of color vision deficiencies, including an array of red-green and blue-yellow color blindness.

12b02fa67c1da7ec46ab0b496e749c12

With over 200 million people in the world who are visually impaired, web accessibility should be a top consideration in every designer’s process. Now that you’ve got some handy apps in your toolkit, it’s your turn to get out there and make the web a more accessible place for all!

For more color resources, check out a practical UI color application guide, and our favorite color palette picking tools.

Find more Community stories on our blog Courtside.
Have a suggestion? Contact stories@dribbble.com.