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 Services

50 Free Presets & Templates for Final Cut Pro

If you own an Apple computer, Final Cut Pro is one of the best solutions for editing and creating videos. The software has powerful tools that allow you to remove unwanted parts of your video, combine several videos into one, and adjust the color, sound, and other properties of the final video or movie.

You can use Final Cut Pro for movie production as well as for business purposes, whether you’re creating videos for your Youtube channel or an online course.

As powerful as Final Cut Pro is, there is no denying that editing a video is a long process. But with the right preset, you can save a lot of time and cut your video editing time significantly.

We’ve rounded up the best free presets and templates for Final Cut Pro that you can download and use in your projects. Check them out below and add them to your resource library today.

Table of Contents

  • How To Install Final Cut Pro Presets
  • Final Cut Pro Animated Elements
  • Final Cut Pro Title Templates
  • Final Cut Pro Transitions
  • Final Cut Pro Special Effects
  • Final Cut Pro Sound Effects
  • Final Cut Pro Gradient, Color & Light Effects
  • Final Cut Pro Lower Thirds & Openers Templates

How To Install Final Cut Pro Presets

Before we dive into the presets, here are the steps to follow to install these presets once you’ve downloaded them.

  1. Start by unzipping the downloaded preset folder. Simply double-click it and the folder will be unzipped.
  2. Now you need to select all the presets in the folder and then copy them by pressing Command+ C.
  3. Open up your Finder and hold down the Option key. Then, go to Go > Library. Once inside the Library folder, go to Application Support > ProApps > Effects Presets.
  4. You can now paste the preset files into the Effects Presets folder by clicking Command+V.
  5. The last step is to restart Final Cut Pro so you can see and access your newly installed presets.

You might also like our collections of free presets for After Effects, free Premiere Pro templates, or free Apple Motion templates.

Free Final Cut Pro Animated Elements

50 Animated Gradient Backgrounds for Final Cut Pro

This preset pack boasts 50 wonderfully created color gradients that you can use for any of your Final Cut Pro video editing software. They will be perfect for use as backgrounds, layouts, film burns, or even light leaks.

Brightly Animations Explainer Toolkit for Final Cut Pro X on Envato Elements

Save yourself a lot of time and energy on your next animated project with this tool kit for Final Cut Pro X and Apple Motion. Easily put together, customize, and animate characters to create explainer videos, educational videos, or enhance any video you use them in.

Brightly Animations Explainer Toolkit free final cut pro fcpx preset template

50 Animated Icons for Final Cut Pro X

This kit of 50 awesome and animated icons is perfect for any of your Final Cut Pro and Final Cut Pro X videos. Each icon is fully customizable and super easy to use, ensuring your projects have a high quality professional look and feel to them.

50 Animated Icons free final cut pro fcpx preset template

Timecode for Final Cut Pro X

This plugin gives you a timecode that is fully customizable and can be moved beyond just the borders of your Final Cut Pro. This allows you to show everyone involved where on the timeline the video is, from anyone watching a second screen to the video being edited.

Timecode free final cut pro fcpx preset template

Splash Animated Elements for Final Cut Pro X on Envato Elements

Save yourself time, money and energy by using these hand drawn, animated splashes in your next video. Quickly customize their colors, add a glowing effect, decide on pixelating them, or even do both for your next Final Cut Pro video.

Splash Animated Elements free final cut pro fcpx preset template

Instagram Stories Template for FCPX

With this plugin, you will be able to quickly and easily edit your Instagram Stories. You can change the duration, color, position, and adjust fonts and font sizes. This plugin also has a built in in-out animation and is available in all the popular resolutions.

Instagram Stories free final cut pro fcpx preset template

YouTube Channel Bar Branding Template

Prompt your YouTube viewers to like, comment and subscribe with an easy to customize YouTube channel bar template. Download for free and add to your next YouTube video with no attribution required from mixkit.co.

YouTube Channel Bar Branding Template

Text Message Template for FCPX

Quickly and easily add some flavor to your next Final Cut Pro or Final Cut Pro X video with this plugin. Built to emulate popular social media platforms, this will make your videos come to life showcasing text messages, comments, notifications and more.

Text Message free final cut pro fcpx preset template

Free Final Cut Pro Titles

Wedding Titles for Final Cut Pro X

This resource gives you four beautifully crafted wedding themed title panels that you can use for any of your Final Cut Pro or Final Cut Pro X videos. They are fully customizable and are available in all the popular resolutions.

Wedding Titles free final cut pro fcpx preset template

Modern Big Titles on Envato Elements

Save yourself time and money by using this resource full of 30 different title screens to use with your Final Cut Pro or Apple Motion 5 editing software. Quickly use, customize, and produce your videos with any resolution.

Modern Big Titles free final cut pro fcpx preset template

Watch in HD FCPX Template

Thanks to this template, you can easily tell your viewers that they are watching videos that are in high definition. These pops are designed to invite viewers to watch in HD, state that the videos are in HD, and even denotes that your videos are in 4K resolution.

Watch in HD free final cut pro fcpx preset template

7 Final Cut Pro X Titles

Quickly get through titles and lower with this resource pack for your Final Cut Pro X video editing software. With 7 different animated titles to choose from, you will be able to find the perfect version for you next video project.

titles free final cut pro fcpx preset template

Creative Titles for FCPX on Envato Elements

Save time and money with this resource pack of title cards. Fully customizable and great for your video campaigns on social media or inhouse use. No plugins required and these titles are great for upto 4K resolution viewing.

Creative Titles free final cut pro fcpx preset template

Template Pop FCPX Title Templates

This resource is perfect for any of your Final Cut Pro X video projects. With 24 high quality title cards to choose from, you will find them easy to customize and even better to watch in action!

Pop Title free final cut pro fcpx preset template

Manifesto Titles for Final Cut Pro

This resource makes adding and customizing text a breeze. Quickly add high quality text scrolling for your endings and stills as lower thirds or block text to your next Final Cut Pro or Adobe Premiere Pro project.

Manifesto Titles free final cut pro fcpx preset template

Lyric Titles for FCPX on Envato Elements

Thanks to these titles, you will be able to easily create a lyric-style title for your videos. This is perfect for any music videos or if you want to spice up the look of your logo opener.

Lyric Titles free final cut pro fcpx preset template

Movie Pop Titles for Final Cut Pro X

Easily generate titles that look like your cinematic favorites like from the Star Wars series, Harry Potter’s Fantastic Beasts, or even from the Assassin’s Creed series. This plugin makes it so easy to make impactful titles that will captivate your audience!

Movie Pop Titles free final cut pro fcpx preset template

Free Final Cut Pro Transitions

Ink Transitions

Create your own special transition with this resource. Learn a valuable technique and then be able to add this and other transitions to any of your Final Cut Pro video projects.

Ink Transitions free final cut pro fcpx preset template

Horizontal & Vertical Close Transition

This resource a horizontal and vertical blur effect transition to put in between your clips. Using these transitions adds a professional touch to every Final Cut Pro video project. Get yours today.

Horizontal Vertical Close Transition free final cut pro fcpx preset template

Toolkit and Transitions on Envato Elements

Save time and money on your next Final Cut Pro or Final Cut Pro X with this resource that gives you all the power you need to create wonderful videos with ease.

Toolkit and Transitions free final cut pro fcpx preset template

8 FCPX Transitions

This resource has 8 wonderfully crafted transitions for Final Cut Pro. Add a touch of panache and pizzazz to your next Final Cut Pro video project with these transitions.

Transitions free final cut pro fcpx preset template

Vertical Reveal Transition

This resource gives you complete control over your vertical moving transitions. With the ability to customize the speed, control the blur speed, and flip it for up and down movements; this is a powerful resource for Final Cut Pro.

Vertical Reveal Transition free final cut pro fcpx preset template

FCPX Zoom Transitions on Envato Elements

Save yourself a lot of time and money by using this resource with 50 fully customizable transitions for Final Cut Pro X. It’s easy to use with its drag and drop method, is ready for all resolutions, and combines well with your titles.

Zoom Transitions free final cut pro fcpx preset template

Flashback Transition

Use this resource to easily incorporate a flashback effect like you see in the old Scooby Doo cartoons. Using this creative touch in your Final Cut Pro video projects will give it a nice dash of flair.

Flashback Transition free final cut pro fcpx preset template

Diagonal Slide Transition

This resource gives you 4 ways to have a diagonal transition in any of your Final Cut Pro videos. These transitions are easy to use and add a professional touch to your final video version.

Diagonal Slide Transition free final cut pro fcpx preset template

Glitch Transitions on Envato Elements

Using a glitch transition in your video editing has never been easier. The pack includes 90 glitch transitions in 4k resolution. These glitches are easy to use and customizable.

Glitch Transitions final cut pro fcpx preset template

Channel Switch Transition

Need to give a video an analog feel? Then this is the perfect resource for you. You will be able to give your videos the feel of flipping through your old analog television set.

Channel Switch Transition free final cut pro fcpx preset template

10 Clean FCPX Transitions

This resource gives you 10 clean, powerful, and easy to use transitions for your Final Cut Pro video projects. These transitions are customizable and available in all major resolutions.

10 Clean Transitions free final cut pro fcpx preset template

RGB Blur Zoom Transition

This resource gives you control over all your zoom styled transitions. Adjust the colors to fit your needs, adjust durations, and render videos in all available resolutions quickly and easily.

RGB Blur Zoom Transition free final cut pro fcpx preset template

10 Flat Transitions

This resource pack of transitions will add a colorful and modern look to your Final Cut Pro videos. The transitions are smooth, vibrant, and trendy; with the ability to change durations and are available in all major resolutions.

10 Flat Transitions free final cut pro fcpx preset template

Warp Roll Transition

This resource gives you a fully customizable warping effect for your transitions. The transition is a combined warp zoom and a roll effect to give you a high quality and professional look.

Warp Roll Transition free final cut pro fcpx preset template

13 Final Cut Pro Transitions

Here’s 13 different transitions that you can use with your Final Cut Pro video projects. Each transition is customizable and can be used in both personal and commercial video projects.

13 Transitions free final cut pro fcpx preset template

Free Final Cut Pro Special Effects

Final Cut Pro Censor Effect

The built in standard censor effect is not very user friendly in Final Cut Pro. This resource aims to change that by giving you complete control over it. It also expands the ability of the standard censor effect.

Censor Effect free final cut pro fcpx preset template

Pan and Zoom Effect

This resource gives you a powerful way to execute pan and zooms in your Final Cut Pro and Adobe Premiere Pro. Key features include support for all popular formats, and animation syncing.

Pan and Zoom Effect free final cut pro fcpx preset template

Slice Transitions on Envato Elements

This resource is perfect when you need to save time, money, and energy with your Final Cut Pro transitions. This resource gives you professional looking sliced transitions, sound effects and a specialized slice animation for your logos!

Slice Transitions free final cut pro fcpx preset template

Ghosting Effect Plugin

This plugin is great when you want to add some special effects to your Final Cut Pro video projects. Easily give your text a ghostlike effect and add a sense of thrill to your videos.

Ghosting Effect Plugin free final cut pro fcpx preset template

Feature Overlay Effects

This plugin adds an overlay to your Final Cut Pro projects that works best in collaboration for feature length films. This plugin adds a header, label, and two different kinds of timers for ease of use.

Feature Overlay Effects free final cut pro fcpx preset template

Space Wipes Final Cut Pro Effect

This wonderful resource is perfect for every fan of Star Wars. You will have complete control of these transitions. Use the circular or side transition and make your videos one with the force.

Space Wipes free final cut pro fcpx preset template

Dolly Zoom Final Cut Pro Effect

This resource will polish up your dull footage in a snap. Quickly add a zoom and rotation to your Final Cut Pro or Final Cut Pro X project and bring your footage to life!

Dolly Zoom free final cut pro fcpx preset template

mVertigo Dolly Zoom Effect

This resource for Final Cut Pro X gives you the power to give a forced vertigo perception. With four customizable ways to induce this perception, you will find it easy to give your projects a polished look and feel.

mVertigo Dolly Zoom Effect free final cut pro fcpx preset template

Binocular & Scope Final Cut Pro Effect

This resource gives you look and feel of looking through various binoculars and firearm scopes. From getting close ups to nightvision, this resource will give your Final Cut Pro videos a feature film feel.

Binocular Scope free final cut pro fcpx preset template

Fade In & Fade Out Final Cut Pro Effect

This plugin changes how the normal fade in and fade out transitions are applied. Instead of bulky blocks denoting transitions, this streamlines and customizes the transition as a dropped in effect.

Fade In Fade Out free final cut pro fcpx preset template

Timecode Effects

This plugin helps those who are working in a collaborative fashion. This gives you the perfect way to mark videos as a time stamp, and as a foot and frame counter. Customise the frame rates, start and stop frames, and the color and size of the counter.

Timecode Effects free final cut pro fcpx preset template

Free Final Cut Pro Sound Effects

10 Pro Audio Final Cut Pro Presets

This resource gives you 10 powerful audio effects for Final Cut Pro X. Give your video project exactly the right kind of audio effect right when it’s needed to create powerful features.

10 Pro Audio free final cut pro fcpx preset template

Sound Effects Pack for Final Cut Pro

This simple resource gives you ten high quality sound effects like camera shutter, electric strike, and wind chimes for Final Cut Pro. Add any of these high quality and crystal clear sounds to any of your projects today.

Sound Effects Pack free final cut pro fcpx preset template

Free Final Cut Pro Gradient, Color & Light Effects

Andy’s Gradient Filter for Final Cut Pro

Ditch the expensive on camera filters to get the color look you need with this resource. The filter works with Final Cut Pro x, Apple Motion 5, and Adobe Premiere Pro, and makes it easy to get a high quality look on all your projects.

Andy's Gradient Filter free final cut pro fcpx preset template

mLooks Grade Presets for Final Cut Pro X

Get the most out of your Final Cut Pro X project with this simple color correction preset. Just drag and drop the effect onto your timeline and adjust the parameters to fit your vision in moments.

mLooks Grade Presets free final cut pro fcpx preset template

Free Final Cut Pro Lower Thirds & Openers

Clean Lower Third Final Cut Pro X Template

Try this template if you want easy to use and customizable lower thirds in 1080p for Final Cut Pro X. You can set the animations, and change the durations for each lower thirds as you need them.

Clean Lower Third free final cut pro fcpx preset template

Cinematic Opener for Final Cut on Envato Elements

With the help of this template, you will be able to have the most modern and colorful way to open all of your transitions. Perfect for the opening title sequences in your feature films, this resource is quick and easy to use.

Cinematic Opener free final cut pro fcpx preset template

Rhythmic Final Cut Pro X Opener Template

The rhythmic opener is a wonderful addition to all your Final Cut Pro X templates. Quickly and easily change text, color, position , and font for your images and videos. Compatible in either 720p or 1080p resolutions.

Rhythmic Opener Template free final cut pro fcpx preset template

FCPX Minimal Lower Thirds Pack on Envato Elements

If you’re looking for minimalist, lower thirds, don’t miss this collection of 25 of the best minimalist lower thirds from Envato Elements. The best part is that they are completely customizable for every one of your Final Cut Pro X video projects.

Minimal Lower Thirds Pack free final cut pro fcpx preset template

Painter Style Lower Third Template

Add a simple brushstroke of color with handwritten style text to your next video. Customize the colors and text to suit your project or brand. Download for free with no attribution required from mixkit.co.

Painter Style Lower Third Template

Simple Lower Thirds Template for FCPX

This template gives you a simple lower third that is quick and easy to use and customize. Adjust the durations, give it an animation, and use with upto 4k resolution projects for Final Cut Pro X.

Simple Lower Thirds free final cut pro fcpx preset template


Final Cut Pro makes it easy to create and edit your videos as well as add special effects and transitions to all your video projects. Check out the presets in this collection, and be sure to add them to your video editing library so you can use them in all your future projects.

The post 50 Free Presets & Templates for Final Cut Pro appeared first on Speckyboy Design Magazine.

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

Webdesign Services

Weekly News for Designers № 624

Doodle CSS – This HTML/CSS theme will give your site a hand drawn look.
Example from Doodle CSS

The State of CSS 2021 – The annual look at CSS trends that made news in 2021.
Example from The State of CSS 2021

12 Days of Web – Check out this year-end celebration of fundamental web technologies.
Example from 12 Days of Web

Guess CSS! – A CSS game where you guess which code snippet matches a layout.
Example from Guess CSS!

The 2021 WordPress Year in Review – The biggest developments for the world’s most popular CMS.
Example from The 2021 WordPress Year in Review

Pico.css – A minimal CSS framework that features styles for all native HTML elements and includes a dark mode.
Example from Pico.css

The ideal line length & line height in web design – Learn how to set up your typography’s line length and height with this tutorial.
Example from The ideal line length & line height in web design

Tips for Running a WordPress Multisite Network – Helpful hints for keeping your WordPress multisite install running in tip-top shape.
Example from Tips for Running a WordPress Multisite Network

GD.CSS – This library promises an accessible alternative to HTML5 CSS resets.
Example from GD.CSS

8 Essential Free Plugins for WordPress Multisite – Add some outstanding functionality to your multisite network with these plugins.
Example from 8 Essential Free Plugins for WordPress Multisite

Writing Better CSS – A look at scenarios where modern techniques can reduce the complexity of your code.
Example from Writing Better CSS

Capsize – This library makes the sizing and layout of text as predictable as every other element on the screen.
Example from Capsize

Tasks Freelance Web Designers Should Consider Outsourcing – Common scenarios where it may be more effective to hire a helping hand.
Example from Tasks Freelance Web Designers Should Consider Outsourcing

An introduction to UI sounds – How sound can be utilized to create a better user experience.
Example from An introduction to UI sounds

The history of data journalism – A historical take on every critical breakthrough from the 1950s until today.
Example from The history of data journalism

The post Weekly News for Designers № 624 appeared first on Speckyboy Design Magazine.

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

Webdesign Ideas

How to Choose a Color For Your Website

Your website’s color scheme is a vital UI element that ensures positive visual appeal leading to a good user experience. You may not realize but a lot of users make their buying decisions n the basis of site colors. Therefore, much thinking goes behind choosing the right colors for your website.

This detailed and interesting infographic, created by WebsiteBuilderExpert, tells us about how to pick the right color for your website or blog. You’ll get to know what each color represents and there are also examples of famous brands and the choice of color for their branding. Let’s take a look.

Color Tools For Web Designers

Color Tools For Web Designers

Setting a basic color theme for your web design project might be an easy task, however, deciding upon… Read more

The post How to Choose a Color For Your Website appeared first on Hongkiat.

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 Ideas

10 WordPress Plugins for Importing and Exporting Data

Data portability is something that we don’t often think about until we need it. This is especially so with WordPress. Our posts, users, eCommerce orders, etc., live happily in a database. But when we want to access and take that information with us (and potentially import it into another site), it’s not always a simple task.

One way to handle this is via backend software like phpMyAdmin. You can import and export a full database or just specific tables. It offers a lot of flexibility. But that is not recommended for the faint of heart. It is entirely possible to bring down a site if you’re not careful.

In most cases, the better way to perform these tasks is through a WordPress plugin. Many feature a more user-friendly GUI and some are built for niche uses like user accounts or WooCommerce orders. This is an added layer of convenience overdoing things through phpMyAdmin.

A word to the wise: Misuse of a plugin can still result in damage. So always make sure to back up your site before messing around with critical data. Even better, make a copy of your site and test things out in a staging environment before touching a live install of WordPress.

With that, here are 10 free plugins you can use to import and export various kinds of data with WordPress. Note that while the plugins are categorized as Import or Export, some will happily perform both functions.

WP All Import

WP All Import is designed for times when you want to import posts from a CSV or XML file that isn’t WordPress-friendly by default. It could be something a client created, or it could be from a different CMS. The plugin doesn’t require any special elements or layouts in the file, making a tough job easier.

A companion Export plugin is also available.

WP Ultimate CSV Importer

WP Ultimate CSV Importer (which also provides Exports) enables you to import an array of data. Included are the abilities to import posts, pages, custom post types, comments, users, custom fields and even SEO information from All in One SEO Pack. You can also import images from external URLs.

WP Ultimate CSV Importer

Import Users from CSV with Meta

If you have many users to import, Import Users from CSV with Meta is a lifesaver. Not only will it bring new users into your WordPress install, but it can also update data for existing users. Plus, it will import Meta from plugins like WooCommerce, or you can create your own custom info.

You’ll also be able to assign each user a specific role and choose whether or not to send an email to new users.

Import Users from CSV with Meta

Customizer Export/Import

Recreating the exact theme settings in the WordPress Customizer can be extremely tedious – especially when you’re using a theme that has lots of options.

Customizer Export/Import makes it a breeze, allowing you to export or import settings from another site (or restore a backup) directly from within the Customizer.

Customizer Export/Import

JSON Content Importer

JSON Content Importer lets you display live data from a JSON feed through a simple Shortcode. Control how many items are displayed, use keyword settings to only display specific types of content, and more. The plugin uses a template engine to help you tweak the layout to your liking.

JSON Content Importer

Export Plugins

Export User Data

Perfect for eCommerce and membership sites, Export User Data makes it easy to export a custom spreadsheet of users. Craft your export from custom user meta (including fields added by BuddyPress), registration date, and user role. This allows administrators to quickly narrow things down to just a specific segment of accounts.

Export User Data

Advanced Orders Export for WooCommerce

Advanced Orders Export for WooCommerce is incredibly flexible. It enables you to export virtually anything associated with a WooCommerce product, including Meta and custom fields.

Powerful filters and the ability to move fields around allow for fine-tuning an export to your liking. Export your orders in CSV, XLS, XML, and JSON. Available code snippets help you add compatibility with certain Woo extensions.

Advanced Orders Export for WooCommerce

Export All URLs

Do you need to quickly grab a listing of all the titles, URLs, and categories for your WordPress Website? Export All URLs will create a page on your site listing it all. Data can be exported and categorized by post type.

Export All URLs

Simple CSV/XLS Exporter

Simple CSV/XLS Exporter is a utility that lets you pick and choose what is included with your export.

Pick from any standard or custom post type, select fields, or get really specific by choosing posts made by a specific user ID. WooCommerce orders can also be included in an export.

Simple CSV/XLS Exporter

Export Media with Selected Content

When exporting a post type in WordPress, the media attached to those posts are not included. Export Media with Selected Content provides a fix by allowing you to choose whether or not to include media files in the package.

Export Media with Selected Content

Portability is Important

The ability to move data around is a necessary feature for many organizations. User data can go back and forth to keep a membership roster up to date. Online sales data can be imported into accounting software to get ready for tax time. And, there’s always the need to move data between websites.

While some of the plugins above have a more narrow focus than others, they can all serve the purpose of making a WordPress website’s data more portable. That, in turn, makes life easier for both designers and site owners.

The post 10 WordPress Plugins for Importing and Exporting Data appeared first on Speckyboy Design Magazine.

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 Services

Weekly News for Designers № 623

Modern fluid typography editor – Use this tool to craft the perfect fluid typography system.
Example from Modern fluid typography editor

Tailwind CSS v3.0 – Learn all about the latest version of the popular CSS framework.
Example from Tailwind CSS v3.0

How Designers Can Market Themselves to the Clients That Best Suit Their Niche – Tips on how good designers can market themselves to exactly the kind of clients that will best suit their services.
Example from How Designers Can Market Themselves to the Clients That Best Suit Their Niche

Tailwind CSS Cheat Sheet – This resource lets you search for all the class names and CSS properties Tailwind CSS has to offer.
Example from Tailwind CSS Cheat Sheet

Coloring With Code — A Programmatic Approach To Design – Create amazing color palettes with your favorite text editor.
Example from Coloring With Code — A Programmatic Approach To Design

Fonts Knowledge – Dive into the world of typography with this set of guides from Google.
Example from Fonts Knowledge

The Grumpy Designer’s 2022 Preview – The boldest satirical predictions for Google, Meta, WordPress, and more.
Example from The Grumpy Designer’s 2022 Preview

The 2021 Web Almanac – The annual report combines the raw stats and trends of the HTTP Archive with the expertise of the web community.
Example from The 2021 Web Almanac

7 Free Plugins for Adding Structured Data to Your WordPress Website – Enhance your site’s SEO and provide useful structured data with these free plugins.Example from 7 Free Plugins for Adding Structured Data to Your WordPress Website

Floating UI – Use this library to position all types of floating elements with full control.
Example from Floating UI

8 Outstanding eCommerce Microinteraction CSS & JavaScript Snippets – Intuitive examples that add something extra to the online shopping experience.
Example from 8 Outstanding eCommerce Microinteraction CSS & JavaScript Snippets

Free Charts Icon Set – Download this free set of 80+ icons with 4 popular categories. Available in PNG and SVG formats.
Example from Free Charts Icon Set

Defensive CSS – Techniques for crafting problem-free CSS.
Example from Defensive CSS

20 Beautifully Imperfect Free Brush Fonts for Designers – A collection of fonts that are rustic in style, yet seamlessly blend in with modern design.
Example from 20 Beautifully Imperfect Free Brush Fonts for Designers

ScreenREC – A handy screen recording app that works from your browser.
Example from ScreenREC

State of APIs – Some insights on API trends for 2021.
Example from State of APIs

Flip, Invert, and Reverse – This tutorial will show you how to use various transformations for SVG path commands.
Example from Flip, Invert, and Reverse

The post Weekly News for Designers № 623 appeared first on Speckyboy Design Magazine.

Webdesign Ideas

Tasks Freelance Web Designers Should Consider Outsourcing

Among the biggest challenges freelance web designers face is the sheer number of responsibilities involved. It goes well beyond design and development. There’s marketing, bookkeeping, client relations, technical support, and continuing education. For some, the list might be even longer.

During busy times, it can feel like you have to be everywhere at once. Not only is it stressful, but it can also take focus away from your projects (you know, the stuff you like to do). With that, the results may not be up to your usual standard.

The first step in improving the situation is in recognizing the problem. While all of these responsibilities come with the territory, that doesn’t mean you have to accept the struggle.

Finding relief sometimes means relinquishing control. The realization that, no, you don’t have to do everything by yourself, can be liberating.

While everyone has different strengths, there are a variety of tasks that you may want to pass along to someone else. Today, we’ll look at a few of the most common ones to remove from your already-full plate.

Aspects of a Project That You Can’t Do Efficiently

Web design projects tend to be multifaceted. There’s the look and layout, to go along with a site’s functionality. Beyond that, you might be looking at complementary pieces such as SEO and performance optimization.

Chances are, there might be one or more areas of a project that don’t play to your strengths. For example, you might be a whiz at CSS but struggle with building certain functionality from scratch.

Or, there could be loads of “busy” work, such as entering content into a CMS. Perhaps it’s not difficult, but it further stresses your tight schedule.

These are prime opportunities to outsource some tasks to another web professional in your network. If they can do it more efficiently and cost-effectively, it makes sense to pass the work along to them. This allows you to focus on what you do best and produce the ideal outcome.

However, this is something you’ll want to plan for ahead of time. That way, you can adjust for any additional costs that come with bringing someone else into the fold.

Taxes and Related Financial Duties

Tax laws around the world vary quite a bit. But their one common feature is in how complex they are. This is especially the case for solo freelancers or other small business arrangements. They’re often a category that is underserved in terms of clear policy.

Thus, it’s easy to get mired in a tangle of arcane rules and nonsensical paperwork. And, even if you understand the basics, there are a lot of little details that could make a huge difference in the outcome. Miss one of them and it could cost you money (or worse).

Why continue waste to your time? Tax professionals and financial advisors are there to navigate these turbulent waters for you. A good one will provide you with helpful information and file your taxes to the letter of the law.

If you aren’t keen on recordkeeping, they might even handle it for you. Alternatively, they can set you up with software that makes the task easier.

For many of us, finance is an area that is far outside of our expertise. When that’s the case, it’s better to delegate the responsibility to someone more qualified.

A person uses a calculator.

Things That Can Be Effectively Automated

Now, about the term “outsource”. It has traditionally meant hiring one or more humans to do a job. But in web design, we’re not limited to just human help these days.

There are a lot of tasks that can be partially, if not fully, automated. Things like browser, device, and performance testing come to mind. Software updates might also be run on an automated schedule.

When done manually, each of these items can potentially eat up a lot of your precious time. The ability to automate them can result in significant savings.

Automation is usually taken care of via a third-party service provider. You pay a fee in exchange for getting a piece of your life back. However, you may find some free, open-source scripts that offer this functionality as well.

Either way, these tools do a lot of the grunt work for you. From there, you can view the results and deal with any issues as needed.

Computer components.

Save Your Time and Your Sanity

Every freelancer is faced with tasks that make running a business more difficult. They might be far outside of our expertise or merely busywork. Regardless, they take our focus off of more important things.

While the items above are common examples, they are by no means a complete list. Since many of us have a specific niche, some tasks will prove to be more of an obstacle than others.

For instance, you may be terrific at logo design and welcome the challenge. Others may want to run away from their computer screaming. In that case, being able to pass that work along to someone else can be a great solution.

But before you go ahead and start outsourcing tasks, do a little thinking. Which ones will save you time and make for a more efficient workflow? Just as important, consider tasks that cause you an undue amount of stress. Outsourcing can benefit your mental health, as well.

There is so much work that goes into being a freelance web designer. Thankfully, you don’t have to do it all on your own.

The post Tasks Freelance Web Designers Should Consider Outsourcing appeared first on Speckyboy Design Magazine.

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

Webdesign Services

The 2021 WordPress Year in Review

Each year, the web is full of new ideas, tools, and trends. But for WordPress, 2021 may be looked upon as one of great foundational shifts. Changes that, while still in their early stages, promise to have a lasting impact on how we work with the content management system (CMS).

That applies not only to the core software but to its massive community and ecosystem as well. There were moments when it felt nearly impossible to keep up with the flurry of movement and acquisitions in this space. For a time, WordPress was akin to an open-source Wall Street.

Now that we’ve reached the end of the year, let’s take a look at the biggest developments as they relate to WordPress.

Blocks Take Over the Back End

The Gutenberg block editor was moved into WordPress core way back in 2018 (has it really been that long?), but 2021 saw the feature go beyond pages and posts.

Block Widgets

The venerable WordPress Widgets screen’s familiar drag-and-drop UI saw wholesale changes this year. As of WordPress 5.8, Widgets are now block-based.

The transition to blocks is more than just cosmetic. It also means that virtually any block can now be placed within a sidebar. This greatly expands the content options available to site owners.

The standard core widgets that come with WordPress were refreshed, while some new additions have also been integrated. Older widgets still work and are available through a Legacy Widgets block.

However, this change may cause issues for some sites that rely on legacy widgets. Thankfully, the Classic Widgets plugin can restore things to their previous state.

It’s a big transition. One that has me thinking about the future of this longtime staple of WordPress.

Full Site Editing

Full Site Editing (FSE) was perhaps the most buzzed-about WordPress feature of the year. It offers the ability to design and edit every aspect of a theme – right from within the block editor.

The potential impact is hard to ignore. WordPress themes are going to look a lot different in terms of how they’re structured. And, with more power in the hands of users, it will be interesting to see how the theme market shifts to take advantage.

FSE could also change the design process itself. Since so much can be achieved via the browser, where does that leave traditional wireframing tools? Some designers may decide to skip them altogether.

As exciting (or terrifying) as this all sounds, FSE is not yet a part of WordPress core. It’s scheduled for full release in WordPress 5.9, which has been pushed back to January 2022.

Here’s a look at what you can expect from WordPress 5.9 when it comes to Full Site Editing.

Popular WordPress Plugins and Providers Change Ownership

The other major storyline involves the business side of the WordPress ecosystem. 2021 saw dozens of plugins, agencies, and hosting providers changing hands. Among close observers, heads were spinning at the sheer number of transactions taking place.

There are several theories as to why there were so many acquisitions. The pandemic, a maturing market, along with the growing complexity of WordPress were among the most common. Some combination of all three seems like a safe bet.

What does it all mean? In the short term, there are user concerns over what will happen to the software and services they rely on. It also means some well-respected members of the community have decided to move on. People such as Elliot Condon (of Advanced Custom Fields) and Pippin Williamson (of Sandhills Development) are two prime examples.

Looking out further, many of these acquisitions have been made by a handful of companies. This consolidation of assets could impact competition. How difficult will it be for a solo entrepreneur or small agency to enter the market? What (if any) influence will these large companies have on WordPress core? Will the acquired products themselves suffer or flourish?

Only time will tell. But it will be interesting to see if this trend continues in 2022.

A person using a credit card.

WordPress Passes 40% Market Share

Early in 2021, WordPress surpassed 40% market share. And it continues to grow at a healthy clip. As of this writing, it has a nearly 40-point lead over the second-most-popular CMS (Shopify).

I put together a few thoughts on the milestone back in February. But it is worth revisiting as we look back on the year.

These usage numbers, along with the aforementioned acquisitions, show that WordPress is a space people want to be a part of. That’s a testament to its relative stability, dedicated community, and continued flexibility.

However, it’s that last piece that concerns me the most. To remain a top choice for developers, WordPress should keep providing multiple paths to build a website. That includes the ability to opt-out of features such as Gutenberg and Full Site Editing.

The idea that a web designer can build in a way that suits the needs of their clients is still attractive. And while I find blocks exciting, I also understand that not everyone is on board.

Having alternative methods to accomplish your goals is what has always set WordPress apart. Hopefully, that will remain the case over the long term.

A 3D chart with WordPress logo.

Laying the Foundation for the Future

Odds are that at least one of the developments above impacted you in 2021. Whether it was wrangling that new widget UI or seeing your favorite plugin change hands, it was an eventful year for the WordPress community.

But the immediate impact will likely pale when compared to how these shifts will affect the future. The way we create content in WordPress has already changed. Next comes the way we go about building websites.

The future of the various product and service acquisitions will also be felt for years to come. Some will inevitably turn out better than others. Here’s hoping it brings energy and innovation, with minimal disruption.

Buckle up, WordPress fans – what we saw this year is just the beginning of something much bigger.

The post The 2021 WordPress Year in Review appeared first on Speckyboy Design Magazine.