Webdesign Tips

Fresh Resources for Web Designers and Developers (December 2021)

We are at the end of 2021! Time really flies and the world at the moment is trying to recover from the effects of the pandemic. But we are still here to feature the best tools for our fellow web developers and designers.

In this round of the series, we are featuring various tools related to CSS, JavaScript, and some web tools that will help you be more productive as a web developer. Let’s jump in to see the full list.

Fresh Resources for Web Designers and Developers (November 2021)

Fresh Resources for Web Designers and Developers (November 2021)

One thing that I love with Web development industry is that we, as developers keep innovating to make… Read more

Lighthouse Simulation

A web tool that allows you to test website performance with Google Lighthouse. It simulates the website on various network speeds which covers the bandwidth speed and the latency.

The result will show you the score site FCP (First Content Paint) and LCP (Largest Contentful Paint). A handy tool to lookup and get broader insight of your site performance.

Villus

A GraphQL client for Vue.js. It’s only less than 4KB and is available as a High-order component or hook, which makes it quite flexible to integrate in your Vue.js application. On top of that, it also supports TypeScript and Suspense API out of the box.

Villus

Mess with DNS

DNS is one of the subjects on the Internet that’s not easy to grasp. Editing the DNS entry can also be terrifying because it could cause your site to go down for days if it’s somehow misconfigured.

This is where the Mess with DNS tool comes in. It provides you with a playground – a dummy domain – to experiment with the DNS configuration.

Mess with DNS

Polygon Shapes

Polygon Shape is a showcase to demonstrate the capability of CSS clip-path to create irregular shapes like polygon, a star, a flower, and even a butterfly.

Polygon Shapes

TinyWow

A collection of handy tools for your everyday digital needs. Here you can find a tool to convert images from HEIC to JPG and vice-versa, SVG-to-PNG, trim video, XML-to-JSON, convert an epoch time, merge PDF files, and even create a meme many more.

TinyWow

Omatsuri

Another collection that you should bookmark. Omatsuri contains some handy tools such as one to generate triangle with CSS, one for generating color shade, convert SVG to JSX, lorem ipsum generator, fake data generator, and many more. Both designers and developers will appreciate all these kind of tools.

Omatsuri

ToolHunt

ToolHunt is a kind of tool curator that collects all types of design and development tools. Here you can find tools for designers, developers, for collaboration, or to improve productivity. Some of the themes are free, premium, or freemium. It’s a great source to find new tools or to gather inspiration for new digital products.

ToolHunt

MobbinDesign

A library of design inspiration for mobile apps with more than 50.000 screenshots. They are searchable and sortable in categories so you can easily find screenshots from popular applications like Facebook, Target, Airbnb, WSJ, and many more. It’s a great source to find UI/UX inspiration for mobile apps without having to install the app.

ToolHunt

CSSO

CSSO is a library to “optimize” CSS. It removes redundancies, compresses the code (e.g. transforming syntax or values into its shorthands), and creates restructuring such as merging declarations, rules, and so on resulting in a much smaller CSS styles output.

You can run it as a standalone CLI or integrate it with libraries and tools like Gulp, Grunt, Webpack, and PostCSS.

CSSO

RegexLearn

This tool aims to make learning RegEx more enjoyable and understandable. It provides some interactive lessons to learn RegEx that start from the very basic and will pass you over to the more advanced topic as you accomplish each lesson. You’ll definitely find it to be one of the best sources to learn RegEx.

RegexLearn

Font Knowledge

This is a Google initiative in collaboration with the Google Font team and world-class Typography experts to present the best source to learn Font. These are in-depth materials you can typically only get in colleges such as the basic typography, the glossaries used in typography, classification, and a lot more.

Font Knowledge

Modern Fluid Typography

CSS has advanced so much in the last few years, including how it handles font size on-screen with the clamp() function. This function allows you to set the minimum and maximum size of font size based on the current screen size. And this little tool allows you to generate the code for this in a more intuitive way using a nice GUI.

Modern Fluid Typography

Gradient String

A Node.js library that makes it easier to generate a gradient in terminal/ console. You can use some preset gradients, or compose your own with multiple colors as well as adjust the position in the gradient. It’s a handy library to make a CLI application a lot more attractive.

Gradient String

Pollen Style

A library of CSS variables. These variables contain basic values for typography, layout, and colors. It’s a perfect foundation for a design system with consistent and maintainable styles.

Pollen Style

Open Props Style

Another library of CSS variables that contains styles foundation such as for animation, colors, typography, gradients, dark and light theme, and many more to come. This is another great library if you are looking for a foundation to build a UI design system.

Open Props Style

FloatingUI

A JavaScript library to create floating positional elements. Commonly you’d need it for Tooltip, Dropdown, Popovers, etc. It supports primitive positioning like “left”, “right”, “top” and “bottom” as well as dynamic positioning such as following the browser scroll position. This library handles all the heavy lifting so you can focus on being more productive.

FloatingUI

Act

What if you can run your Github Actions config right in your computer. This is what this tool is trying to achieve, it allows you to run it locally in your computer which can be useful to test the configuration or simply when your internet is down.

Act

Cheat Sheet

PHP has evolved a lot in the past few years. Especially now there are a lot of new syntaxes. This cheat sheet shows you some snippets and comparisons of code between different versions of PHP. It’s a good reference to keep you updated with modern PHP.

Cheat Sheet

Developer Ipsum

Lorem Ipsum text does not have to be boring. Instead of some random text, you can use this little tool to generate dummy text that developers can understand and relate to.

Developer Ipsum

Money

A PHP library that makes it easier to handle currency formatting. It provides an easy intuitive API to convert to different currencies, perform arithmetic and comparison, and many more.

Money

The post Fresh Resources for Web Designers and Developers (December 2021) appeared first on Hongkiat.

Did you miss our previous article…
https://www.jackpinewebdesign.com/?p=2787

Webdesign Tips

How Novice Designers Can Improve Their Client Rosters

Ever feel like you’re getting passed over constantly for new and exciting work by other designers who aren’t quite as, well, good as you are? Don’t worry, you’re not alone – and you’re not a bitter jerk for having those thoughts.

It’s something that most young freelance designers face, especially as they improve their skills and become better designers, yet their client roster is still as uninspiring as ever.

Today, I’m going to give all you young designers out there some tips on what you can do to stop feeling like yesterday’s news, and get in on more of the exciting, high-paying action going on in the design industry.

Gaining Entry to the Clubhouse

I hate to break it to you, good designer wallowing in obscurity, but you’re being kept out of the loop. There’s a secret store of knowledge out there that you’re ignorant of, but that those bad designers around you know all about.

They’re sneaking out at night to attend the meetings, making piles of money while you’re crashed on your friend’s couch with overdue bills and empty soda cans and junk food wrappers scattered around you, like a blanket of sorrow to go with your feelings of rejection and inadequacy.

It’s okay. I know how you feel – but there’s good news! Brew yourself a pot of coffee and read on.

The secret knowledge that these successful designers all share isn’t really all that secret. I was just joking – y’know, for dramatic effect. I’ve got a story to weave here, after all.

These designers really all know just one important thing: how to sell their work to the right audience. That’s it. The “secret sauce” is marketing.

Selling yourself is something that many creatives are famously uncomfortable with, but the truth is that we all already sell ourselves. Every time we meet with a client, we have to sell them on our ideas. Convincing a client to hire you isn’t all that different from what you already do on the job.

Marketing is a skill that tends to be despised, but it really shouldn’t be. It’s the counterpart to good design. If you create the most wonderful, awe-inspiring design in the world, and hide it at the bottom of a drawer, you may as well not have created it at all.

If you don’t make the effort to put your work in front of people who will see it and want to hire you, you’re essentially doing the same thing. You’re creating work and hiding it under a veil of obscurity.

Selling the Sizzle

Marketing yourself to new clients doesn’t mean that the quality of your work has to suffer. Don’t stoop down to the level of the crappy designers around you and create work that’s equally bad.

The solution to your marketing deficiency is not to get down in the mud alongside the bad designers who are outpacing you. Your task is to outperform them with your superior talent and critical thinking skills.

You don’t need to work any differently – you just need to package that work in a way that’s more attention-grabbing to a broader audience.

Many times the biggest marketing issue that talented creatives face is that they’re just too excited about what they can do. Perhaps your code is clean as a whistle and compliant with every web standard known to humankind.

Or maybe you’re a minimalism whiz, with a perfect knack for creating simple, powerful layouts with the perfect balance of clarity, beautiful type, and whitespace.

That’s nice for you, and maybe your mom, to know about, but the cold, hard truth is that most clients couldn’t care less. They’re only concerned about whether you can get the job done competently and on deadline. It’s sad, but true.

The key to marketing yourself well is to sell an experience, not a list of qualifications. You need to be thinking about how, specifically, can your technical skills improve the quality of life for your clients.

It sounds terribly dramatic, but marketing is almost pure psychology. People are motivated, in life and in business, by things most freelancers don’t stop to consider when offering their services.

If you can connect with a client on a personal level – offer them an important benefit that will earn them more money or allow them to free up more time (a huge desire of many overworked business owners and managers), you’ll have more clients than you’ll know what to do with.

designer experience

Find Your Niche

Sometimes you get beat out by the mediocre competition simply because that person has access to a wider pool of clients than you do. Perhaps they live in one city and they’re doing business all around the world with similar clients.

These competitors of yours have found a niche that works for them and they’re out finding clients wherever they happen to be. If they have to get on a plane and travel, well, it’s worth it to them to have access to clients that others in their niche can’t easily get to.

When marketing yourself and selling your services to new clients, it’s important to get specific – don’t just cater to everyone, or you’ll end up catering to no one. Find a lucrative niche within the design industry, and grow your client base from it.

Perhaps you only work with clients in the legal and medicine industries. Or maybe you work with tech startups, or fashion designers, or boutique ad agencies. Whatever your niche is, make sure there’s enough clients in it to supply you with years of new work.

If it’s hard for you to find clients in your niche (maybe you live in a small town or it’s just too competitive), perhaps it’s time to branch out. Travel has never been easier or more economical – if the clients you want to work with aren’t in your area, pack a suitcase and go to theirs.

Alternatively, you can use your design skills and technical expertise to leverage the power of your local media. Become a local design expert in one area you can master.


Marketing doesn’t have to be scary, nor does it have to be particularly hard. The majority of the effort comes at the beginning – determining your niche, finding the right clients, and establishing yourself as someone who provides just the right experience your clients are looking for.

The rest has to do with keeping yourself at the top of your clients’ minds – updating your email list, sending out mailers, etc.

There are plenty of other articles which cover these things in detail. Once you establish a system that works for you, it becomes much easier for you to accelerate your career at a rate that’s more appropriate for your knowledge and skill level.

The post How Novice Designers Can Improve Their Client Rosters appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.jackpinewebdesign.com/?p=2707

Webdesign Tips

3 Quick Ways to Grow Your Web Design Business

Web designers are always looking for ways to give their business a boost. And whether you have an eye towards bringing on new clients or expanding the presence of existing ones, the main goal is to grow your bottom line. It’s part of the natural evolution for freelancers and agencies alike.

And, although we often strive for growth, it can be an intimidating concept. You might, for example, see it as something that takes a significant investment of time and/or money.

However, growth comes in many forms. You don’t necessarily have to toil away for years in hopes of coming up with that one big idea. There are some simple ways to expand your business that won’t require you to move mountains.

To be sure, these aren’t get-rich-quick schemes. Rather, they’re opportunities that may already be sitting right in front of you. Today, we’ll show you how to take advantage of them.

Prepare Clients for Technological Shifts

The web doesn’t stay the same for very long. Both the technology we use to build websites and user expectations change rapidly. Perhaps it’s a little scary – but it’s also a great opportunity.

We tend to implement these changes into new projects. That makes perfect sense, as you want to start with the latest and greatest. But we shouldn’t forget about existing clients.

Whether it’s a change to Google’s search algorithm or a revamped editing experience for WordPress, existing websites need to keep on evolving. Doing so will ensure that these sites can take full advantage of new technology. More importantly, it also means that they won’t fall too far behind the curve.

This can provide a steady stream of revenue. Yet, not all designers take advantage. They instead train their focus on new clients, thus leaving a potentially significant amount of money on the table.

The biggest hurdle here is communication. But by proactively keeping clients informed of these shifts, you open the door to expanding your bottom line.

Offer Complementary Services

Like peanut butter and jelly, some services just go together. And adding the right ones to your web design business can make for a tasty combination. Or, at least improved cash flow.

And there are several complementary services that web designers can choose from. It might be recurring maintenance, web hosting, SEO, or even consulting.

You can configure things in a way that works best for both you and your clients. For example, you might do the dirty work yourself or contract it out to a third-party provider (more on that in a moment). Signing up with various affiliate programs is a popular solution.

That’s not to say that every service, no matter how natural an extension, is the right one for your business. While you can make some money, there is an added responsibility as well. It’s something to consider before making any decisions.

Still, design and development go deeper than just their respective names. There is a whole world of possibilities to grow.

A computer sits on a desk.

Team Up with Other Freelancers

Because web design is such a vast industry, many of us have chosen to focus on a particular niche. This allows for more detail-oriented service. However, it can also mean that we’re lacking in other areas that are important to our clients.

One way to tackle this challenge is by teaming up with other freelancers or agencies. Hire them to take on the work that you don’t typically do – and vice-versa. Tasks like email marketing, social media management, and custom coding are just a few potential areas for collaboration.

If you’re contracting outside help, you can add project management fees on top of what you’re being charged. The result is that you’ll make sure the job is done right while bringing in a little extra cash at the same time.

The other side of the coin is the ability to pick up new projects that cater to your skills. In the right situation, it’s a great way to add to your portfolio without having to hunt for new clients.

Again, there are some extra responsibilities involved. And it requires a solid working relationship with someone you trust. Therefore, it may be wise to test the waters on a project or two before making any commitments.

Two people having a fist bump.

Real Growth You Can Implement Today

The opportunities above are ideal for any web designer who wants to grow without radically remaking their business. They don’t require taking out a loan or spending tons of time developing a new product. They’re off-the-shelf ideas that can be implemented immediately.

And you don’t need to dive in with both feet. Starting small can add up to something over time. It’s possible to create a stable, modest boost to your income. As you become more comfortable, you can aim to take things to a higher level.

The key is in determining which areas will be mutually beneficial to you and your clients. The answer will be different for everyone, depending on your current situation. For some, the potential cash increase may not be worth the cost in terms of maintenance or other hassles.

Still, seizing the right opportunity may be just the thing your business needs to jumpstart growth.

The post 3 Quick Ways to Grow Your Web Design Business appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.jackpinewebdesign.com/?p=2690

Webdesign Tips

How Designers Can Market Themselves to the Clients That Best Suit Their Niche

We’ve all heard the saying, “a designer is only as good as their clients.”

Some designers, regardless of skill level or experience, seem to always have the most interesting assignments that are creative, challenging, and highly paid, while others, who may have more experience, technical skill, or talent, get stuck working for peanuts on unfulfilling, low-level work.

Why is that? Why do some mediocre designers seem to always get the best jobs, while good, talented designers struggle in obscurity?

The answer almost always has to do with marketing. Every designer’s Achilles’ heel, marketing is nonetheless a vital part of freelancing success.

Today, I’m going to share some tips on how good designers can market themselves to exactly the kind of clients that will best suit their services.

It’s All Sales

What’s the difference between a good designer and a great designer? Notoriety, of course. There are literally thousands – possibly millions – of designers out there whose talent and technical skills rival or even surpass those of the tiny handful of designers who are “well-known” or famous.

Are those well-known designers doing something especially different that the talented designer “misses?” Well, yes and no. We already know they’re not necessarily better designers – perhaps their style is more in line with current trends and thus they’ve gotten more recognition in recent years, but good design is good design.

Trends come and go, but a strong understanding of basic design principles will never go out of style. So how do these famous designers differentiate themselves?

If you’ve ever worked in an office, you know that the management positions don’t always go to the most capable or competent leaders, hard workers, and visionaries.

In my time as a corporate employee, I saw brilliant, talented, creative people get passed over for promotions and high-level work by incompetent, lazy, belligerent jerks – over and over again.

Why? Because the jerks knew exactly how to market themselves to their superiors. They knew what to say and how to say it. Every job is a sales job.

It doesn’t matter if you’re a lawyer, an artist, or a Sunday school teacher – we all have to sell something to someone. And we all have to make ourselves known to the people who can help further our careers.

This applies doubly to those of us who make our living freelancing, as there’s no framework or built-in networking platform vis-a-vis a corporate job.

Selling the Experience

Designers who compete for freelance jobs have quite an uphill battle to fight. They constantly have to convince potential clients that they’re the best person for the job, while simultaneously diverting the client’s attention away from the zillions of other designers out there who provide essentially the same service.

Now, I’m about to say something that might depress many of you out there who are hoping for a freelancing miracle.

The sad truth of the matter is this: the typical design client knows next to nothing about design, and couldn’t care less about your technical knowledge, years of experience, or brilliant design sense.

Yup, it’s true. They just don’t give a damn. You say you’re an award-winning branding manager who’s been featured in industry publications? That’s nice. Don’t call us, we’ll call you. Standards-compliant web developer? Eh? What’s that?

It can be extremely frustrating when a client simply doesn’t care about the work you’ve put into perfecting your craft.

designer drinking alcoholic drink

I could be smug and suggest that you only work with clients who do care, but that would be pretty irresponsible of me. No matter how far up the freelancing ladder you go, there’s always going to be a discrepancy between what you think the client should care about, and what they actually care about.

The key to selling yourself as a talented, capable designer lies in the way you present your skills.

The first thing to go should be the idea that you can somehow convince a non-designer to care about the intricacies of design. You can’t. Save it for your fellow designers, and instead focus on the experience you can provide your clients.

Your technical skills and knowledge are not experiences for your clients – they are merely attributes.

Put another way, when you see a television commercial for a pizza shop, do you ever see the inside of the actual pizza kitchen anywhere in the ad (not the fake set meant to sell you on “authentic Italian cooking” or some such nonsense)?

Do you ever see what kind of knife the chef uses to cut the pepperoni and other toppings? Or the Serv-Safe certificates of the pizza-making staff? Of course not.

What you see is a delicious-looking pizza, complete with sizzling sound effects and mouth-watering, rising steam, possibly being paraded in front of the camera on a round dish by an attractive, young actor dressed up as a server or a pizza chef.

In the background, you might see a laughing group of diners seated at a table, pulling apart their pizza slice by cheesy, gooey slice. You’re being sold an experience, not a simple list of attributes or qualities.

If your clients are decent and treat you with a reasonable amount of professionalism, they’re going to expect that you know what you’re doing. They will take it as a matter of course that you have all the necessary skills and know-how to complete the job adequately.

A simple list of the things you can do isn’t going to impress them. You need to sell them an experience – the sizzle, not the steak, in other words.

pizza experience restaurant oven

Having a Backup Plan

You’ve probably heard of the recent business phrase “multiple streams of income.” It’s become quite a popular goal for business owners and freelancers, especially since the internet has become a powerful and simplified way to make multiple income sources a reality.

But you don’t have to be a fast-talking, greasy-haired entrepreneur wannabe to take advantage of this important idea.

Today’s economy makes it challenging for even the most established freelancers to stay afloat, and if your client base is too small, you could find yourself in real trouble if one of them stops calling.

Creating an exclusive niche for yourself is important, but it’s equally important to have a large enough pool that you can easily generate new business.

Keeping up with your marketing efforts, even if you can’t currently take on the new work, will ensure that you always have prospects lined up just in case one of your current clients falls through.

Also, don’t be afraid to ask your current or past clients for referrals. Generally, people are happy to spread the word about freelancers who have done a remarkable job.

And as a bonus, you’ll widen the net of clients who are similar to those clients you’ve already worked for, since people tend to talk to their friends in the same industry.

The post How Designers Can Market Themselves to the Clients That Best Suit Their Niche appeared first on Speckyboy Design Magazine.

Webdesign Tips

The Grumpy Designer’s 2022 Preview

So, how did 2021 work out for you? For this grumpy designer, the year felt quite similar to 2020. Uncertainty, along with both personal and professional challenges were around every corner. Let’s pat ourselves on the back for making it this far.

Now it’s time to straighten up and get ready for another go. 2022 promises to be an eventful year – particularly for web designers.

Do you know what that means? Predictions! But these aren’t the play-it-safe, incremental types of prognostications you’ll see elsewhere. If you’ve read my past columns, you know that I aim for the moon. And this year will be no different.

In fact, let’s see what I can get away with up the ante. The following are the boldest (notice the bold type) predictions for 2022 you’ll find anywhere.

Google’s AMP Fiasco Will Be Resolved

It turns out that Google’s vision for AMP (Accelerated Mobile Pages) didn’t pan out quite the way the omnipresent company had anticipated. Instead of becoming a fast-loading proponent of the “open web”, the framework generally frustrated both developers and publishers alike.

But the real kicker has been the antitrust allegations put forth. Unredacted documents seem to indicate that the real goal was to crush competing advertisers while providing very little benefit to participating websites. Even the perceived speed benefits have come under fire.

These are very serious assertions that will likely play out in a courtroom. But I predict that everyone involved will come to a reasonable solution. One that not only gives AMP’s users some peace of mind but will also result in some major concessions from Google.

How Will It End?
To make up for allegedly slowing down competitor’s ads, Google will introduce “dialup mode”, a universal 10-second delay when loading all of its web properties. Think those ads at the beginning of your favorite YouTube videos are annoying? Imagine waiting 10 seconds for search results to pop up. It’ll be like 1997 all over again.

As an extra measure, irrelevant (and potentially inappropriate) emoji will be interspersed throughout Google’s API documentation.

The Web and Metaverse Will Become BFFs

Facebook’s embrace of the metaverse was a shock to the system. It was so out of the blue that, for some reason, it felt as though they were trying to change the subject. Hmmm…🤔

But there’s certainly intrigue with this virtual world. Watching an early commercial from Meta (oh, that’s Facebook’s name now), one can’t help but want to become fully immersed.

As I see it, this is bigger than just a single social network. The metaverse belongs to all of us. And the web will be the perfect place to give people what they want.

Thus, web designers had better get ready. Our clients are going to start asking us to implement these “Meta®” features into their sites. And just think of the possibilities:

  • A convenience store website where users can simulate the experience of paying for bottled water;
  • A “virtual ATM” that allows banking customers to enter their secret PIN while friendly forest creatures look on;
  • Online events that teleport attendees to the surface of Mars – complete with space dust;

This new MetaWeb (that’s what I’m calling it) will place users anywhere and everywhere at once. After the initial confusion wears off, we’ll be in for quite a ride.

Unintended Side-Effect
All avatars within the MetaWeb will be non-fungible tokens (NFTs). As such, losing your password will also mean a loss of identity. Oh well, it’s always nice to start fresh. Try doing that in the real world!

A group of people wearing virtual reality headsets.

The Continued Gentrification of WordPress

Just like major cities around the world, WordPress has been dealing with gentrification. Out with the old way of doing things and in with the new. You can see it all around the community and ecosystem.

The shakeup started with the Gutenberg block editor, which is rapidly taking over various pieces of the content management system. It’s not just for editing posts. Indeed, it has now enveloped both the widgets screen and even the entire layout of a website via Full Site Editing (FSE).

Elsewhere, plugin and service provider acquisitions were everywhere. Many longtime community members sold off their products to larger firms, leaving users to wonder what it all means.

I don’t expect this to slow down in 2022. If anything, it’s going to ramp up to warp speed. Here are just a few major changes in store:

Competitor Site Editing (CSE)
Why stop at simply editing every aspect of your own website? That’s the idea behind CSE. The feature will provide site administrators access to the innards of a random competitor’s site. While any advantage you might gain is temporary, the ensuing game of tit-for-tat will be incredibly energizing.

The Plugin Acquisition Plugin
For those with a lot of cash or crypto in reserve, this will be a must-have plugin for 2022. And, unlike so many other areas of WordPress, the UI is dead simple.

First, connect your financial accounts via an API. Next, a checklist of WordPress plugins is displayed on the screen. Check off the plugins you want to own and…boom! They’re now in your portfolio.

It’s that easy. Just make sure to send out a reassuring press release to your new customers after each acquisition.

A website displaying a form.

Final Prediction: Web Designers Will Adapt and Thrive

While the above predictions may be in jest, one thing is for certain. Web designers will continue to adapt to a changing landscape. That’s a safe bet in any year.

Thanks for reading. And here’s wishing you a happy, safe, and successful 2022!

The post The Grumpy Designer’s 2022 Preview appeared first on Speckyboy Design Magazine.

Webdesign Tips

20 Beautifully Imperfect Free Brush Fonts for Designers

Distorted, irregular, and beautifully imperfect. Every individual character is unique and carefully created by hand. Rustic in style yet seamlessly blends in with modern design.

Yes, we’re talking about paint brush-style typography, and it is currently enjoying a revival in popularity. And, we love it!

If you’re looking to jump on the brush-style typography bandwagon, in this article, we have a curated collection of our favorite brush fonts that you can freely download and use in your own creative design projects.

All of the fonts have been created by professional designers and can be used to create something truly unique.

As already mentioned, all of the below fonts are free, but please double-check the license before usage as they can change from time to time.

More Free Fonts:

  • 100 Free Fonts
  • Calligraphy Fonts
  • Chunky & 3D Fonts
  • Clean Fonts
  • Coding Fonts
  • Comic Fonts
  • Disney Fonts
  • Gothic Fonts
  • Graffiti Fonts
  • Hand-Drawn Fonts
  • Headline Fonts
  • Icon Fonts
  • Logo Fonts
  • Minimal Fonts
  • Outline Fonts
  • Quirky Fonts
  • Retro Fonts
  • Sci-Fi Fonts
  • Script Fonts

Zallord Brush Font Free, by Husain Assyahid

Namashte Brush Font on Envato Elements

Namashte free font brush hand-written hand-painted

Perfect Moment Handwritten SVG Font Free, by Ivan Rosenberg

Perfect Moment SVG free font brush hand-written hand-painted

Besom Brush Font Free, by Krišjānis Mežulis

Besom free font brush hand-written hand-painted

Northen Brush Font on Envato Elements

Northen free font brush hand-written hand-painted

Hensa Hand-Painter Brush Script Font Free, by Vlad Cristea

Hensa Hand-Painter Brush Script free font brush hand-written hand-painted

Hey October Brush Font Free, by Khurasan

Hey October free font brush hand-written hand-painted

Shuttles Brush Font on Envato Elements

Shuttles free font brush hand-written hand-painted

Painter Brush Font Free, by Jammy Creamer

Painter free font brush hand-written hand-painted

Kust Brush Font Free, by Krisjanis Mezulis

kust free font brush hand-written hand-painted

Mighty Brush Font on Envato Elements

Mighty free font brush hand-written hand-painted

Crocky Brush Font Free, by Creatype Studio

Crocky free font brush hand-written hand-painted

Better Hobby Highlighter Font Free, by Letterhend Studio

Better Hobby Highlighter free font brush hand-written hand-painted

Flat Brush Font on Envato Elements

flat free font brush hand-written hand-painted

True South Brush Font Free, by Stefie Justprince

True South free font brush hand-written hand-painted

Debby Hand-Drawn Brush Font Free, by Artimasa Studio

debby free font brush hand-written hand-painted

Mazak Hand-Drawn Brush Font Free, by Ewelina Gąska

Mazak free font brush hand-written hand-painted

Lemon Tuesday Brush Font Free, by Daria Kwon

Lemon Tuesday free font brush hand-written hand-painted

Chiesty Script Font Free, by CreativeTacos

Chiesty Script free font brush hand-written hand-painted

Thorn Brush Font Free, by Stefie Justprince

thorn free font brush hand-written hand-painted

Chocoleta Brush Font Free, by CruzineDesign

Chocoleta free font brush hand-written hand-painted

Willful Handwritten Brush Sans Font Free, by Mr.Typeman

Willful Sans free font brush hand-written hand-painted

Wildrock Brush Font Free, by Creatype Studio

Wildrock free font brush hand-written hand-painted

Brush King Font Free, by Subectype

king free font brush hand-written hand-painted

The post 20 Beautifully Imperfect Free Brush Fonts for Designers appeared first on Speckyboy Design Magazine.

Webdesign Tips

10 Totally Free WordPress Backup Plugins

Backing up your precious data is a common best practice these days. But, what about your WordPress-powered website? Yes, most web hosting companies do perform regular system backups.

But beware – not every host is reliable when it comes to backups. And you certainly don’t want to wait until disaster strikes to find out how they did.

You’ll get much more peace of mind if you perform regular site backups yourself. Luckily, there are several outstanding free plugins that will do the job for you.

Note that there are some differences in what various plugins will backup. A WordPress website is comprised of both a database (usually MySQL) and a set of files that sit on the webserver.

You’ll really only need to worry about the /wp-content/ folder, which contains your theme, plugins, and file uploads. Some plugins backup both the database and files.

Others will handle one of the two. Keep in mind that you’ll need both the database and the /wp-content/ folder to have access to all of your site’s data.

Now, let’s check out some plugins to keep your site backed up. We’ll take note of whether they back up a site’s database, file system, or both.

Total Upkeep – WordPress Backup Plugin Plus Restore & Migrate

WordPress software updates can sometimes cause problems. That’s why it’s important to have backups that can be restored immediately.

Total Upkeep’s auto rollback feature will create backups before you run updates, allowing you to easily restore the site to its previous state. A Pro version also enables cloud-based backups and staging sites.

Backs Up: Database and File System (with an option to customize what gets backed up)

WP Staging – Backup Duplicator & Migration

Having a staging environment for your WordPress website is always a good idea. But if your web host doesn’t offer this functionality, WP STAGING can help.

The plugin makes it easy to clone your site and into a subfolder (or a subdomain, if you opt for the Pro version).

Backs Up: Database and File System

WP STAGING – Backup Duplicator & Migration

WordPress Backup & Migrate Plugin

Backup, restore or even migrate your site. Also available is the ability to download a copy of a backup to keep on your local machine. A pro version lets you schedule backups and connect to various cloud storage services.

Backs Up: Database and File System (with an option to customize what gets backed up)

BackupGuard free WordPress backup plugin

WP-DBManager

Schedule regular backups of your WordPress database and have it both emailed to you and stored on your web server. Restore a backup with just a couple of clicks.

Also, you can schedule automatic database optimization and repair.

Backs Up: Database Only

WP Time Capsule

Rather than doing a time and resource consuming full backup each time, WP Time Capsule will perform an incremental backup of just the files that have changed.

You have the ability to schedule backups and connect to Dropbox, Amazon S3 and Google Drive.

Backs Up: Database and File System

WP Time Capsule free WordPress backup plugin

WPBackItUp

WPBackItUp touts its ease of use – just one click to backup your entire site. The plugin compresses the backup into a .zip file stored on your web server. Backup status notifications will arrive via email.

Backs Up: Database and File System

UpdraftPlus

Automatically or manually backup your entire site to your web server, multiple cloud services, email or even an FTP server. Restore backups directly from inside WordPress. Site migration packages can also be downloaded.

Backs Up: Database and File System (with an option to customize what gets backed up)

UpdraftPlus free WordPress backup plugin

WP Database Backup

Backup your site’s database to the cloud, email, or FTP. Set up a schedule to run on a routine basis. The ability to exclude specific database tables is included.

Backs Up: Database Only

WP Database Backup free WordPress backup plugin

BackWPup

You can schedule complete automatic backups for your site and store them in the cloud. Backups can be compressed into .zip, .tar, tar.gz or tar.bz2 formats. BackWPup will also check, repair, and optimize your database.

Backs Up: Database and File System

BackWPup free WordPress backup plugin

BackUpWordPress

This plugin is all about simplicity – there is no setup required. Backup your entire site on a schedule and optionally have the archives emailed to you. Backups will run even on low-powered web hosting accounts.

Backs Up: Database and File System (with an option to customize what gets backed up)

No More Excuses – Backup Your Site!

A WordPress site can break for many reasons, including a database crash, theme or plugin incompatibility, or a failed web host. But you don’t have to leave things to chance.

There are free WordPress backup plugins that cater to every need. It’s time to be proactive with your website and prepare for the worst. If something does happen, you’ll be glad that you took steps to regularly backup your website.

The post 10 Totally Free WordPress Backup Plugins appeared first on Speckyboy Design Magazine.

Webdesign Tips

Web Designers Can Get by Without Knowing Code. Here’s Why They Should Learn Anyway.

Among the many wonders of modern web design is the emergence of codeless design tools. Whether it’s a WordPress page builder plugin (or the Gutenberg block editor), a drag-and-drop UI app, or even a ready-to-use framework, writing code has become optional.

For someone who wants to break into the industry, there’s a temptation to head straight for these types of solutions. And plenty of folks have done just that. Marketers who want to add web design to their menu of services are but one example.

The initial results can be quite good. Many of these tools allow for creating an attractive, fully-responsive website. Functionality can be rapidly added in via plugins. So, what’s the worry?

Even for the simplest of websites, code is still worth knowing. Here are a few reasons why learning it will serve you (and your clients) well in the long run.

In Web Design, the Details Matter

How many websites have you built for a client? Now, how many of them haven’t included any design or layout revisions?

Clients are bound to ask for changes. And, as a designer, you’re likely to want to make your own tweaks as well. Sometimes, these changes will go beyond the capabilities of a code-free tool.

To do more than what your tool of choice offers, you’ll need to know some code. Basic HTML and CSS could be the difference between getting things exactly the way you want them or settling for what you have.

It’s often the little things that turn a decent website into a great one. Even with advancements in technology, code is likely to be the difference-maker. Without those skills, your projects may never get to where you want them to go.

Canned Functionality Isn’t Always Enough

Plugins and code frameworks are capable of some incredibly advanced functionality. You can add anything from a support ticket system to a shopping cart with minimal effort. It’s easy to see why so many of us are taking advantage.

The availability of such canned software might make it seem as if code is unnecessary. Who needs the hassle of writing your own functionality when you can achieve the same thing with a few clicks?

Well, things aren’t quite so simple. None of these packages can cover every possible use case. And clients are famous for adding at least one or two “gotcha” features into projects. Thus, some customization is going to be needed.

This is where it pays to know your way around languages such as JavaScript and PHP. They allow you to not only create your own custom features, but also extend existing products as well.

Just as with design, the right programming skills are key to making a website work in a way that suits your needs. Plus, there’s a sense of pride and accomplishment with being able to tackle these types of tasks yourself.

Code displayed on a computer screen.

Future Growth Depends on Increasing Your Knowledge

In order to grow as a designer or as a business, leveling up your knowledge is crucial. And the reality is that tools can only get you so far along on that journey.

Having a fundamental understanding of code lays a great foundation to build upon. It lets you go beyond the ordinary and create truly custom solutions for your clients. This results in the ability to take on more complex projects and increase your revenue stream.

It should be noted that there is another option here: hiring a developer or two to handle whatever needs arise. That would theoretically allow you to avoid digging into programming. But even that has its limits.

Part of knowing a particular language is having the ability to accurately assess a project’s needs. Even if you’re simply passing along those details to another developer, it’s still nice to have a grasp of what is required. This facilitates better communication and is likely to increase efficiency as well.

And there will likely be situations where it’s just easier and more budget-friendly to take care of something yourself. Having those skills means that you have options. Otherwise, you’re forever at the mercy of someone else.

CSS code.

Convenient Tools Aside, Familiarity with Code Is Essential

There’s nothing wrong with utilizing tools that write code for us. They save precious time and allow us to achieve some impressive results.

Yet, code is the underlying foundation of it all. If there’s something one of these tools or products doesn’t do, the odds are that a knowledgeable developer can fill in the gap.

If you’re a non-coder, the whole idea of learning may sound intimidating. After all, there are so many potential languages to master. But don’t let that stop you.

You don’t have to be a full-on expert in any one area to be successful. No one will expect you to write the next great plugin shortly after studying PHP. Likewise, you don’t have to break any layout barriers once you know a bit of CSS.

It’s more about developing a working knowledge of the technologies you’re using. A basic understanding of HTML and CSS, for example, will be a big help in troubleshooting layout issues. Once you figure out the solution, it’s yet another feather to put in your cap.

Start small and work your way up. Over time, you’ll find that a little bit of code can take you a long way.

The post Web Designers Can Get by Without Knowing Code. Here’s Why They Should Learn Anyway. appeared first on Speckyboy Design Magazine.

Webdesign Tips

What Are the Biggest Threats to Freelance Web Designers?

For freelance web designers, change is a way of life. Tools and technologies come and go, as do design trends. If anything, we may be better equipped to handle a rapidly-evolving world than most.

Take, for example, the COVID-19 pandemic. Chaotic as it has been, it’s led to some important realizations. Perhaps the biggest one is that we are indeed essential workers.

Not on the front line, mind you. But our expertise has played a vital role in helping our clients adjust to a new “normal”. We have also served as liaisons, spreading important information to the masses.

One could argue that web designers are as relevant as ever. Still, that doesn’t mean that individual freelancers are immune to the ever-shifting landscape. Long-term survival in this industry is not a guarantee.

As someone who has spent over two decades freelancing, I do see some potential threats ahead. That said, I also believe designers can prepare for them. Here are a few items to watch out for, along with ways you can mitigate their effects.

The Growing Complexity of Building Websites

Building a custom website is becoming more difficult. The development techniques behind the latest functionality trends are vast. In addition, the expectations from clients have also grown.

But, aren’t things supposed to be easier as technology improves? Well, yes and no.

WordPress is a prime example of this. The Gutenberg block editor has evolved to the point where crafting a custom page layout is relatively simple. Thankfully, extra plugins and hard-coding theme templates are no longer 100% necessary.

Yet, if you want to natively develop custom blocks, it’s not necessarily a straightforward experience. There is a steep learning curve for those who are not already proficient with JavaScript and the React library.

Then there is the whole concept of the “headless” website, where a content management system (CMS) feeds into a static HTML front end. Both the setup and maintenance processes are a whole new ballgame for many web designers.

You can still achieve quite a lot using visual, no-code tools. But going fully custom means digging deep into code. Understandably, that’s not everyone’s strong point.

How to Prepare
Experiment with different technologies and find ones that will benefit your business. That will be the key to providing your clients with cutting-edge service.

Another benefit: the more you know, the more you can charge! The ability to take on complex projects is a great way to boost your bottom line.

One-Stop Agencies

Web design is an ultra-competitive marketplace. Yet, it seems like there has always been enough work to go around. That’s a comforting thought.

But it ultimately depends on the types of clients you want to work with. For a certain level of clientele, a niche freelancer is becoming a less attractive option. Why? Because we don’t do “everything”.

Some organizations see a benefit to having all of their needs taken care of by a single provider. That means their web, print, and social media are in the hands of a one-stop agency.

The appeal is understandable. Instead of having a web designer over here, a graphic artist over there, and an SEO expert somewhere else, one company handles it all. Ideally, an agency will have a single point of contact and a more cohesive strategy.

When, for example, it’s time for a rebrand, the agency is there every step of the way. Even if the cost is higher, the ease of management may be worth the premium.

How to Prepare
Short of expanding your offerings and hiring additional people (thus, becoming an agency), competing in this area is difficult. However, there are some things you can do to stay in the game.

The first is to focus on clients who don’t require an all-encompassing level of service. There are plenty of organizations out there that will see the value in what you do.

You might also find an opportunity to work with an agency, as some utilize freelancers quite a bit. Coming on board means playing a key role in their projects. Plus, these types of gigs can become a source of recurring revenue.

People shopping at a convenience store.

Poor Business Habits

While outside threats get all the publicity, nothing can sink a freelance design career faster than poor business habits. They can lead you to lose money and, ultimately, your business.

There are several things here that can spell trouble, including:

  • Spending too much money;
  • Reliance on a single, large client;
  • Charging too little;
  • Failure to be thorough when creating project estimates;
  • Providing poor customer service;
  • Leaving yourself open to legal liability;

Quite often, it’s not a lack of talent or even a saturated market that kills a web design business. Rather, carelessness can be the biggest culprit. The seemingly small details of running a business mean a lot.

How to Prepare
Running a freelance web design business requires a lot of discipline. Therefore, it pays to be organized and develop processes for every aspect of the job.

In practice, this means accurately keeping track of finances, staying on top of ongoing projects, effectively communicating with clients, and general awareness of where your business stands. This will keep you vigilant and less likely to be taken by surprise.

A cluttered office.

Control What You Can

Some threats to freelance web designers are beyond our control. Market trends and the whims of clients are chief among them. Add to that the ever-growing complexity that defines what a website is and should be. Here, all we can do is try and keep pace.

However, there are many things we can control. We can choose to learn new skills that keep us on par with industry standards. This ensures that we won’t fall behind the curve when it comes to top-notch design and functionality.

In addition, we can run our businesses like a well-oiled machine. Doing so will allow us to stay organized and make the most of the opportunities that come our way. We may even recognize new ones that we wouldn’t have before.

Most importantly, we can choose the direction we want our business to go. This means further developing a niche and recruiting clients who fit our vision. The idea is to find clients who will benefit from our expertise and help them grow.

Yes, there are some existential threats to freelancers lurking out there. But with the right approach, they’ll end up as little more than bumps in the road.

The post What Are the Biggest Threats to Freelance Web Designers? appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.jackpinewebdesign.com/?p=2380

Webdesign Tips

Don’t Let Legacy Software Stop You from Adopting the Latest Web Technologies

Web design is an ever-evolving field. It seems like a new tool or technique arrives every day. And there’s a lot of pressure for professionals to keep up with the times.

Maybe it’s a bit scary. But there’s a certain excitement that comes with it as well. You learn something new and apply it to your daily work. Most of the time, you’re all the better for it.

For example, consider a new CSS layout that makes multiple columns a breeze. Or a JavaScript library that enables you to build a stunning UI. These are the things that help to push us forward.

Yet, there’s also something that holds us back. A twist of fate so cruel that it laughs in the face of the great new thing you just mastered. We’re talking about legacy software.

This ragtag collection of old browsers, operating systems, and server configurations can be more than just a painful reminder of the past. They can also get in the way of true progress.

But don’t let it ruin your good time. Today, we’ll look at some reasons why you may not need to hold back on implementing the web’s latest and greatest.

Look at the Potential Risks and Benefits

It’s never a good idea to throw a new technology onto a website without careful consideration. Otherwise, you run the risk of negatively impacting both users and your bottom line.

Before you dive headfirst into that cool feature, take some time for analysis. Creating an old-fashioned list of pros and cons can provide you with a macro view of the situation. From there, you’ll have a better idea of whether or not to move forward.

Let’s take CSS Grid as an example. It’s all the rage these days. But is it right for your project? To find the answer, start by writing a list:

Pros

  • Makes complex layouts easier;
  • Code may be leaner, better performing than other layout methods;
  • Lots of modern browser support;

Cons

  • No or spotty support in legacy browsers;
  • The same layouts may be possible with better-supported methods;

That’s just a partial list, but you get the idea. The mere act of writing (or typing) out your thoughts can lead you to go further in-depth. The deeper you go, the more thorough your analysis will be. The ultimate goal is to make the most informed decision possible.

Usage Statistics Matter

We know there are people out there still using legacy software. And while web designers tend to think in terms of browsers, that doesn’t tell the entire story. Operating systems also play a role. They not only make a difference in what features are available, but they are also likely limited by older hardware configurations as well.

For instance, looking at desktop devices, the version of macOS or Windows a user is running may restrict what browsers are available. On the surface, this might make you think twice about using a newer image format such as WebP.

Mac users who don’t have the Big Sur version of the OS or later or are stuck with a version of Safari that lacks WebP support (Chrome and Firefox support WebP, however). And someone using the aged Windows XP won’t have access to Microsoft Edge.

But that doesn’t necessarily mean that the visitors to your website are among the legacy crowd. By looking at your website’s analytics, you’ll have a better idea of which browsers, operating systems, and devices are being used.

If you find that these users make up a tiny percentage of your overall visits, that may be convincing enough to move ahead with the new technology.

Data charts displayed on a screen.

Fallbacks May Be an Option

OK, perhaps you want the best of both worlds. You not only want to adopt the latest web technologies but also keep on supporting legacy users. “Leave no user behind!” is your motto.

This is very much possible with the use of fallbacks. What’s a fallback? It’s a method of switching out code that a specific browser can’t understand with something that it can.

Sticking with our CSS Grid example, we know older browsers aren’t going to do very well with it. But they do understand something like Flexbox or even old-fashioned CSS floats.

Using a tool such as Modernizr, we can detect which features a browser supports. If it supports CSS Grid, wonderful. If not, we can serve up an alternative layout.

The great thing is, you get to decide how it all works. Maybe someone using IE 11 doesn’t need a full-on replica of a fancy layout – just a reasonable facsimile. Either way, this brings some level of comfort in knowing that you’re covering as many users as possible.

A sign that reads: "Trust".

Keep Moving Forward

Legacy software is still among us. Fortunately, apps that fail to support modern web technologies are increasingly dying out. As their usage numbers shrink, so do the reasons for holding back CSS Grid, WebP, and other goodies.

Even so, it’s still worth doing your homework with regards to any new technology that interests you. Think about the pros and cons of implementation and use analytics to determine the impact on users.

Fallbacks are also an effective way to mitigate any negative effects for users of outdated software. They’ll still be able to use your site. Meanwhile, everyone else gets the latest features.

The web has come a long way over the past few years. It’s time to start taking advantage of that progress.

The post Don’t Let Legacy Software Stop You from Adopting the Latest Web Technologies appeared first on Speckyboy Design Magazine.

Did you miss our previous article…
https://www.jackpinewebdesign.com/?p=2326