tools-and-tips-for-getting-paid

Getting paid for a service should be pretty straightforward right? But if you’re running a digital agency you’d know that it’s anything but straightforward. In fact, sometimes it’s an absolute headache.

But with these tips for getting paid, you’ll probably never have to experience these issues again:

  • Clients disappearing before you’re about to launch the site leaving you out of pocket
  • Chasing up payments for finished work
  • Doing small changes for clients after finishing the website for free
  • Feeling obligated to discount when a client is having money issues

Check Your Mindset

Before I even dive into your payment options, the very first thing you need to address is your mindset around getting paid.

The thing is, money is the oxygen your business needs to survive. Without it, you don’t have a business. You can’t help anyone if you go out of business because you “felt bad” for invoicing. You need to start charging for what you do and not feel bad about it.

Would you get in an Uber to go to the local shop and not pay because it was such a short trip?

If a client wants you to make a change to their website once the project is complete, then explain that you only make changes for clients who are on a maintenance plan. However, if you agree to make small changes for them, they will never have a reason to sign up! And having recurring revenue is imperative to sustain your business.

Our very own Troy Dean probably put it the most eloquently when he said:

You’re running a business, not a community service!

Getting Paid Overview

The workflow for getting paid goes a little something like this:

1. Provide proposal / quote / estimate


2. Send invoice


3. Invoice follow-ups


4. Get paid


5. Start work


6. Finish work


7. Get approval


8. Get paid


9. Launch live

In summary:

Don’t start work or launch live until you are paid! 

Options for Getting Paid

Milestone Payments

One of the best ways to ensure that you’re not left out of pocket is to invoice for the milestone once it has been approved. This is great for larger fixed-rate projects such as website builds.

  • 50% deposit to get started
  • 30% after design and functionality have been approved
  • 20% prior to launch

Milestone payments is one of the ways to get paid that we recommend in our Digital Business Blueprint Course. 

Periodic Payment via Credit Card

Set up payments to be taken automatically at certain intervals. This is great as you don’t have to worry about invoicing or follow-ups. This is great for cash flow as you know exactly what you are getting in and when.

For example: $9,000 project over 3 months would have a monthly $3,000 recurring charge applied.

50% Payments

This is good for customisations for existing sites. Get a payment upfront and a payment prior to launching the feature or change.

  • Estimate range e.g. 5 – 7 hours.
  • 50% upfront.
  • 50% prior to launching live

Sprints

You can ask the client to pay for 2 weeks of your team’s time. e.g. $10k per 2-week sprint.

Bending the Rules

For some clients that you like working with and have a good history of paying on time, the rules can be bent so that you invoice at the end of the project for small projects. Do so with caution.

Payment Tools & Software

Having the right tools and software can make your workflow a whole lot easier!

Here are my top picks:

  • Project briefs: Google Docs
  • Estimates: Better Proposals / Xero
  • Bookkeeping & Invoicing: Xero Stripe
  • Recurring payments: WooCommerce Subscriptions Stripe / Xero Stripe
  • Time tracking and margins: Harvest / Toggl

Additional Tools

  • Freshbooks
  • Pancake
  • Free Agent
  • Paypal
  • Western Union
  • Ezidebit (AU)

When it comes to choosing tools, be careful not to overcomplicate the systems that get you paid. The simplest solution is often the best. Find the shortest path to achieve the result before you go into fancy tools and automation.

Bonus Tip

For recovering failed payments on expiring credit cards in Stripe. Check out Stunning. Which is free if you have less than 250 customers.

Final Advice

The key is to keep it as simple as possible and make it automated. Credit card payments or direct debit are ideal options as you can set them up and they will charge without you needing to remember or follow up.

It’s your business so you are the one who sets the rules for how you’re paid. Set them to work for you so that you can spend less time chasing invoices and more time enjoying your life, your business and serving your clients. And if someone has an issue with your payment system then it’s a major red flag!

Let me know if you have any tools or tips that work for you when it comes to getting paid in the comments below.

accessibility-tools-for-designers-and-developers

It’s a practice of creating apps, sites, and products usable for everyone, including people with visual, motor, auditory, speech, or cognitive disabilities.

Why should you support accessibility?

  • You can impact someone’s life by making inclusive and easy-to-use products.
  • One billion people have disabilities: your product can be used by them.
  • Better accessibility support leads to better UX and cleaner code.

In this guide, you’ll find accessibility testing tools, colour contrast checkers and colour blindness simulators, both for designers and developers who work with web and mobile.

“Supporting accessibility could impact someone’s life by making inclusive and easy-to-use products.”

? Tools for making accessible colours

Contrast – A simple macOS app to check colour contrast ratios and identify accessible colour pairings based on WCAG Guidelines.

Accessible Colour Palette Builder — A great tool for building accessible color palettes. Enter up to 6 colours and see the colour matrix to know which colors can be combined.

ColorBox — A tool that algorithmically builds accessible colour systems. It also sorts by colour, hue, saturation, and luminosity when picking colour combinations.

Contraste — a free app for checking the accessibility of text against the WCAG rules.

Hex Naw — A free color accessibility tool for testing entire color systems for contrast and accessibility. You can test about 12 different colors at the same time.

90 examples — A free collection of accessible colour themes:

  • Variety of A11Y compliant colour combos.
  • 90 combinations of text/background colour that has sufficient contrast ratio.

Contrast Checker — Another free colour accessibility tool that helps check the contrast between the background of an element and the page itself.

Colorable — A free web-based contrast tool:

  • Take a set colour palette and get contrast values for every combination.
  • Includes pass/fail scores for the WCAG accessibility guidelines.

Accessibility Tools Colourable

? Colour blindness simulators

Stark — A paid Sketch plugin that will let you simulate different types of colour blindness.

Color Oracle — A free color blindness simulator. It uses the algorithm for simulating colour vision impairment, so you can see colors as they are seen by colorblind people.

Toptal’s color filter — This online tool lets you test your website and shows you how people with different color blindness will see your pages.

Accessibility Tools Toptal

? Accessibility testing tools

ANDI — A free accessibility testing tool for web content:

  • Provides automated detection of accessibility issues
  • Gives practical suggestions to improve accessibility and checks 508 compliance.

WAVE — A free web accessibility evaluation tool:

  • Provides visual feedback by injecting icons and indicators into your page
  • Has browsers extensions for evaluating local, dynamic, or password-protected pages.

Accessibility Tools

AChecker — A free accessibility testing web app, which allows you to check accessibility by web page URL, HTML file or even markup. Also, it enables additional options, such as CSS, HTML validator and more.

A11ygator — A free web tool to analyze websites against WCAG. Also available as a browser extension and as Twitter bot. And to find more accessibility tools, check Awesome Design Tools list.

? Tools for iOS developers

Accessibility Inspector is a part of Xcode, the main IDE for developing iOS apps. Think of it as a built-in accessibility checker that goes through an iOS application and tries to find accessibility issues. Accessibility Inspector shows parts of an iOS app that can be done better and helps to check iOS assistive technologies.

VoiceOver helps navigate the app screen without seeing it. It also can be used for testing iOS apps accessibility, when you enable it and try to use your app.

VoiceOver gives audible descriptions of what’s on your screen — from battery level, to who’s calling, to which app your finger is on. You can also adjust the speaking rate and pitch to suit your needs. When you touch the screen or drag your finger over it, VoiceOver speaks the name of the item your finger is on, including icons and text. To interact with the item, such as a button or link, or to navigate to another item, use VoiceOver gesturesiPhone User Guide

Accessibility Tools Voice Over

Take a look at Accessibility on iOS section on the Apple site to learn more about assistive technology, which you can support in your iOS app:

Useful Guides & Resources

In this guide, we focused more on tools to help you build products usable for more people rather than accessibility practices (which are equally important). So these guides will teach you to follow best practices:

Great image by Pablo Stanley

With all those tools and knowledge we can create more accessible products, reach a bigger audience and make life better for someone. I think it’s a solid motivation to start supporting accessibility in your design and development.

Originally posted on Lisa’s Medium page.

exciting-new-tools-for-designers,-january-2020

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.

dropbox

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.

12-color-tools-to-boost-productivity-for-designers

Whether you’re creating a logo, designing a website, or defining a brand identity, color plays a vital role in any design project.

We designers take color seriously, because it is serious. The colors you choose will not only impact how your site makes people feel, but also what users with various types of color blindness can see. So choose wisely.

There are a variety of tools out there to help us with the important task of color selection. We reached out to dozens of designers (including those in our Webflow office) to find out what color tools and apps they use. Take a look!

Color pickers

Color pickers are among the most common tools used by designers because they let us quickly grab and reuse colors we see on our screens.

1. ColorPick Eyedropper Chrome extension

Great for any designer, the ColorPick Eyedropper is a chrome extension that easily allows you to identify the Hex color code of any UI element you hover your mouse over. It’s great for quick access to colors you gain inspiration from when browsing around online.

colorpick eyedropper

ColorPick allows you to find the Hex color code of any element

2. ColorSnapper 2

ColorSnapper 2 in action

Use ColorSnapper 2’s magnifier to get exactly the shade you want and save it for later.

Out of the many options out there, ColorSnapper proves the most popular color picker among our designers, and for good reason. This popular Mac app lets you quickly use a magnifying color picker on anything you see — online or off.

Once you’ve picked a color, ColorSnapper stores it in the color panel for you to use later. Need to copy the color right now? Just click on the stored color and ColorSnapper will automatically copy it your clipboard.

3. Webflow Chrome Extension

Webflow's Chrome extension enables an in-app color picker


Of course, we’d be remiss if we didn’t mention our very own Webflow Chrome Extension, which activates an in-Webflow color picker to enable web designers to easily grab colors from within their own project. That makes it super simple to pull the right color from a logo, hero photo, or illustration, without having to leave the app. And once you’ve grabbed the color, you can easily make it a global swatch to quickly and easily reuse across your site.

Handy, right?

Color scheme and palette generators

Palette generators give you a great way to see your entire color palette together. This helps you decide what your primary and secondary colors might be, as well as how they fit together.

Actually selecting the colors can be tough — luckily, there are tools that help us do it!

4. Happy Hues

Created entirely in Webflow by none other than Mackenzie Child, Happy Hues gives you various color palettes for inspiration and shows you real examples of how those colors could be used in professional designs.

mackenzie child happy hues

Happy Hues is both a great resource to help you find the best colors for your designs and for educating yourself on color theory to create great user interfaces and experiences.

5. Color

Color palette generator


Color‘s swatch generator is nearly as intuitive as its name, which we are still trying to understand the origin of. You can use this generator right in your browser — so go ahead, give it a try!

6. Coolors

Using Coolors to create a palette

Coolors makes it easy to pick and refine your palette.

Coolors is another popular palette generator. Coolors is another popular palette generator. Though (slightly) less intuitive than Color (hence that extra o), Coolors lets you export, store, and reuse your palette in tools like Adobe. Coolors also has a mobile app, so you can review and modify your colors from anywhere.

7. LOLColors

lolcolors

LOLColors is a simple collection of curated color palettes. The site makes it very easy to ‘favorite’ a specific palette, and view the most popular based on others’ votes as well. Although it doesn’t offer as much volume as others on this list, I found the palettes themselves to be beautifully put together.

8. Brandmark’s Color Wheel

Brandmark’s Color Wheel uses AI to automatically colorize logos, illustrations, wireframes and other graphical art. Simply upload your design to quickly generate color palettes. We love this tool as a source of inspiration as well. When you upload a flat design, you’ll be given thousands of unique color variations to choose from.

Color inspiration

Thanks to advancements in CSS, designers can now take full advantage of colorful gradients on the web without worrying about creating heavy images or writing complex code. The only problem now is trying to narrow down your selection!

The following four tools are our top picks for guiding your color palette selection.

9. Gradients.io

Gradients.io curates cool gradients for you to use in your websites.

Luke Davies’ Gradients.io suggests some beautiful gradients for your designs.

Luke Davies put together a great solution with Gradients.io, a simple site (made in Webflow) that showcases some beautiful gradient color combinations. He kindly included the hex values so you can recreate them in your own designs as well.

10. Adobe Capture CC

Color palettes created by Adobe Color users

User-generated color palettes in Adobe Color.

What better way to get color inspiration than from the world around us? Adobe’s Color ecosystem has a number of resources (including a swatch generator), but the one I find myself using the most is their iOS app, Adobe Capture CC.

Simply take a photo with the app, and it automatically generates a palette from the colors in the photo. You can then save these colors to use in a Photoshop project or anywhere else.

11. Colormind

Colormind is a color palette generator that uses deep learning to make color suggestions from scratch or based on your input. Colormind can learn color styles from photographs, movies, or other sources of media that you may use as inspiration, making it one of the smartest color palette generators out there — color me impressed.

12. Colorable

Developed by Jxnblk, Colorable make it easy for web and print designers to test out different color combinations using their hex codes. The site is extremely easy to use: simply add the hex value for two colors and the system will rate the combination based on WCAG accessibility guidelines. This rating ensures that users who are color blind or visually impaired can still read the design with those two colors.

This site is one of our current favorites — it places accessibility at the forefront of its recommendations.

These are just some of color tools we use every day — let us know which tools you use on Twitter or Facebook.

11. HBR IdeaCast

hbr ideacast

There’s the economics of business. Then there’s the human side that goes beyond numbers and data. The Harvard Business Review IdeaCast covers the human side of business, getting into topics like the struggles of being a working mom and gender equality, but also discusses tech issues like cybersecurity and artificial intelligence.

The HBR IdeaCast covers a wide range of topics, which will expose you to ideas and subjects outside of your comfort zone. With weekly podcast episodes hitting iTunes and other podcast outlets, there’s no shortage of HBR IdeaCast episodes for you to listen to and learn from.

12. Equity

techcrunch equity podcast

Falling under the umbrella of the well respected podcast network TechCrunch, Equity approaches its subject matter through the lense of venture capital, taking on what’s happening right now. From discussing the inflated valuations of companies like Uber and Robinhood, to discussing the gender pay gap, Equity makes for a compelling listen.

13. The Brainy Business

the brainy business

The science of behavior economics studies how peoples’ emotions affect how they spend and in turn impact the greater economy. Brainy Business delves into what affects our brains to buy what we do. This makes for episodes covering such subjects as mental biases, brand identity, and how tactile stimuli like the touch and smell of a product can influence the bottom line.

The psychology of consumerism makes for a fascinating listen, and Brainy Business explores it in a way that’s easy to understand. Whether you want to learn more about how behavior economics effects online business or traditional retail, Brainy Business is full of solid takeaways that will broaden your understanding.

14. ADLANDIA

ADLANDIA podcast

Laura Correnti and Alexa Christon of Adlandia aren’t afraid to challenge long held beliefs in the real-life world of marketing. They’re friendly agitators, challenging the long held norms that are fading away. This fiery idealism may make you question your own understanding of marketing and business for the better. If you want a business podcast that isn’t afraid to challenge the status quo, Adlandia is the best business podcast.

15. Being Freelance

being freelance

Anyone who has tried their hand at freelancing knows that there are challenges. Some of these can be hard lessons, with trial and error being a bumpy road. There are quite a few resources out there to make this process easier, with the Being Freelance podcast being a necessary listen for any freelancer who wants to know how to do things better in real-life.

Host Steve Folland fills his roster of guests with freelancers from a variety of fields. Anyone from illustrators to sound designers all share their experiences navigating their careers as freelancers, along with insights about their own creative work.

16. The Marketing Companion

marketing companion podcast

Whether they’re talking about social media, entrepreneurship, or some other aspect of business, Mark Schaefer and Brook Sellas of the Marketing Companion pack plenty of wisdom into each episode. But this isn’t a dry business podcast. There’s a fun back and forth between the hosts, with plenty of humor mixed in. With the tagline of “The World’s Most Entertaining Business Podcast”, they certainly don’t disappoint.

17. Business Wars

business wars podcast

Fender versus Gibson. Coke versus Pepsi. McDonald’s versus Burger King. These are the brand wars, fought with weaponized advertising, vying for us as consumers to pick a side. Business Wars explores these long-standing rivalries and strategies companies have come up with to outdo their competition. Are there any winners in the ongoing corporate skirmishes? The business wars podcast aims to answer that question and more.

18. The Pitch

the pitch podcast

We watch television shows like Shark Tank, like Romans watching the gladiators. We are transfixed by the high stakes, and the possibility of beautiful victory or crushing defeat.

The Pitch podcast captures this drama, with real company owners pitching in front of real investors. This theater, where those seeking the thumbs up that will give them the money they need to walk out victorious, makes for fun and intriguing listen.

19. Design Matters

design matters podcast

How could we not include in the list Design Matters? They are the first ever design podcast, and have been putting out consistently great shows since they launched. Debbie Millman, a designer herself, has many different guests on from a wide range of disciplines. People like cartoonist Lynda Barry, David Lee Roth, and Adobe executive Scott Belsky have all made appearances.

Debbie brings her design smarts into these conversations, but leaves plenty of breathing room for her guests to talk about what they do. If you haven’t checked out Design Matters yet, you should dive right in.

20. Entrepreneurial Thought Leaders

entrepreneurial thought leaders

The Entrepreneurial Thought Leaders series features business leaders, business owners, and others who have who’ve pushed the bounds of innovation and led companies to success. With the esteemed academic institution of Stanford being behind it, there are no lackluster figures here — with every episode featuring someone whose intelligence and vision has helped transform their given industry. 

Whether they’re talking to Ryan Peterson of Flexport, whose mission is to bring tech to the shipping industry, or Lisa Anderson, the CEO of the biomedical company Genome Medical, each of these stands as a masterclass. Entrepreneurial Thought Leaders will expose you to ideas you may be unfamiliar with and inspire you to take leaps in your work and career.

What are you listening to?

There’s no way to cover the multitude of amazing podcasts out there like Mixergy, or Entrepreneurs on Fire in this given space. Please hit up the comments with what podcasts you’re listening to. We all have time that could be better spent opening our eyes to new ideas, and inspire us in our own work, lives, and careers.

15-tools-web-designers-should-try-in-2020

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

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.

Read Also: Open Color – UI-Optimized color scheme for designers

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.

Adobe Color CC
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.

ColourLovers
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.

Coolors
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.

Color Snapper 2
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.

Colordot
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.

Adobe Capture CC
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.

LOL Colors
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.

Gradients.io
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.

CheckMyColours
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.

Color Hunter
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.

TinEye
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.

Paletton
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.

Colorspire
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.

Color Explorer
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.

0to255
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.

ColorRotate
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.

SpyColor.com

Read Also: Find Awesome User-curated Color Palettes with Color Hunt

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.

Designspiration
ColorMunki

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

ColorMunki
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.

Pantone
ColorZilla

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

ColorZilla
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.

Color Hunt
Material UI Colors

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

Material UI Colors
ColorDrop

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

ColorDrop

4-best-seo-tools-for-web-designers

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.

Moz - one of the best SEO Tools for web designers

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.

Ubersuggest

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.

Yoast Analysis Results

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?

Google Analytics

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.

Google Search Console Dashboard

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

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.

exciting-new-tools-for-designers,-october-2019

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.

uiprint

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 .

swatch

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.

swatch

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.

swatch

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.

swatch

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.

swatch

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.

swatch

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.

swatch

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.

swatch

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.”

swatch

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.

swatch

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.

swatch

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.

swatch

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.

swatch

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.

swatch

Quickmetrics

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

swatch

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.

swatch

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.

swatch

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.

swatch

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.

swatch

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.

swatch

Mallie

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

swatch

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.

santa

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.

swatch