Category: Webdesign Ideas

Software changes all the time. Some tweaks are subtle and melt into the background. Others, however, can be real paradigm shifts. What’s happened with WordPress in the past few years certainly seems to fit into the latter category.

First, it was the rather massive switch from the classic editing experience to the Gutenberg block editor. Now, we can add block-based Widgets and Full Site Editing (FSE) to the mix. And it feels like we’re only scratching the surface of what’s to come.

Taken together, these three features change the way we use WordPress. They also represent a fundamental shift in the underlying techniques for building websites. Even more stunning is that this has taken place within the span of 2½ years.

That’s a lot for both casual users and hardcore developers to contend with. How can we adapt to this evolutionary shift without falling behind?

It may seem overwhelming. But, seriously, there’s no reason to panic! With the right approach, you can make the appropriate adjustments at your own pace. Today, we’ll show you how.

Familiarize Yourself with the New WordPress

The Gutenberg block editor was officially merged into WordPress core back in December 2018. It was a controversial feature at the time. Some users may have taken a quick look and immediately installed the Classic Editor plugin. Others may have never tried Gutenberg at all.

If that describes your initial experience, it might be time to give the block editor another chance. You certainly wouldn’t be the first to do so. And you might be surprised at the number of improvements made since its inception.

But whether you’re smitten with Gutenberg or not isn’t really the point. The reality is that the editor, the revamped Widgets screen, and Full Site Editing are long-term features. They’re the future of WordPress. Therefore, you might as well take the time to familiarize yourself with what these tools do.

A simple walkthrough on a local installation of WordPress could be a great first step. From there, you can dive in deeper with your experimentation.

Focus On the Features That Impact You Most

Both the block editor and its evolutionary offspring may look somewhat simplistic when viewed within the WordPress dashboard. That’s a testament to the recent UI improvements the editor has seen.

However, that belies the complexity underneath. Building for Gutenberg means utilizing a lot of JavaScript, with the React library being a key component. And Full Site Editing brings its own challenges to theme building.

It’s easy to go down a rabbit hole and become frustrated with how much there is to learn. But the good news is that you don’t have to learn every single aspect.

Instead, take it one step at a time. Start with the areas that impact your everyday workflow. Dabble in the documentation and work your way through a few tutorials.

Think about how you can benefit from these features. For example, theme developers may be able to build in more layout flexibility with FSE. Likewise, custom blocks bring functionality that can be used time and again.

By starting small, you’ll have an opportunity to learn in a lower-stress environment. This brings both comfort and confidence. Eventually, you’ll want to branch out into other areas that can take your projects up another notch.

Take Advantage of Helpful Tools

Whether you want to build something custom for the block editor or just expand its capabilities, there are several helpful tools available. They can smooth out your workflow by taking care of the heavy lifting.

When it comes to custom blocks, there are plenty of advantages to building them natively with React. However, it’s also worth looking at plugins that simplify the process. Two that immediately come to mind are Advanced Custom Fields and Block Lab. Each focuses more on PHP code than JavaScript, and makes quick work of block creation.

Then again, you might not even need to create a custom block. Developers are jumping on the Gutenberg bandwagon and releasing a number of outstanding block plugins. It’s very possible that the functionality you need already exists out in the WordPress ecosystem.

Meanwhile, it’s only a matter of time until FSE-enabled themes start flooding the market. Perhaps you’ll want to use them as-is, or as a learning tool. Quite often, digging into a theme’s source code is a great way to see how things work.

Even in the most complex of use cases, the WordPress community is great at developing tools to put new technologies within reach. There may be a few out there that are a perfect fit for your needs.

WordPress Has Changed, but so Can You

The past few years have brought a lot of big changes to WordPress. Because of this, it’s natural to think about the impact it will have on both your workflow and career.

It seems clear that, if we want to continue to work in this space, we’ll have to adapt. Thankfully, there are several different avenues we can take. We can learn new skills and employ the help of some great tools as well.

And, despite the headlines, we don’t have to completely change overnight. Learning step-by-step is still acceptable.

In time, a calm, steady approach will help you take advantage of everything the “new” WordPress has to offer.

The post As WordPress Changes, the Pressure to Adapt Rises appeared first on Speckyboy Design Magazine.

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

Jeremy Gillespie

www.jackpinewebdesign.com

Bootstrap is one of the most popular design frameworks. One of the reasons it’s so popular is that it’s optimized for mobile devices and has a well-organized grid system along with hundreds of elements that make prototyping and designing for the web a lot easier.

There is no doubt that Bootstrap is the best framework to help you design beautiful and responsive web pages. From minimal startup websites to complex admin screens, you can find Bootstrap UI kits and templates for any design. Get inspired by these free Bootstrap UI kits and use them in your next design project.

In this roundup, we’ve collected 20 free UI kits built with Bootstrap (both 4 and 5) that you can use as a starting point for your designs.

Free Bootstrap 5 UI Kits

Pixel Free Bootstrap 5 UI Kit

The free Pixel Bootstrap 5 UI kit comes bundled with over 80 UI elements, 5 example page templates, and more than 50 website sections, so you build any type of website.

Snacked Bootstrap 5 Admin Template

Snacked is Bootstrap 5 admin template and UI kit that comes with over 60 custom HTML page templates, multiple chart options, and a vast collection of UI components.

Boomerang Free Bootstrap 5 UI Kit

This free Bootstrap 5 UI kit includes over fifty custom components, five integrated plugins, and five pre-built page templates. Boomerang kit is perfect for building a business or corporate website.

Qexal Bootstrap 5 Landing Pages

The minimally designed Qexal is perfect for creating landing pages for startups or any other type of business. It comes with nine homepage variations, multiple page templates, and a huge collection of UI components and widgets.

Lindy Free Bootstrap 5 Startup UI Kit

The free Lindy Bootstrap 5 UI kit includes everything you need for creating professional startup landing pages. The UI kit comes with over 200 UI elements and 5 example page templates.

Free Material Design Bootstrap 5 UI KIT

This free Material Design Bootstrap 5 UI kit is an excellent choice for anyone that wants to build a mobile-first website or an app. The kit comes with 400+ material UI elements, 600+ material icons, over 70 CSS animations, numerous templates, tutorials, and much more.

WrapKit Lite – Free Bootstrap 5 UI Kit

WrapKit Lite is a free Bootstrap 5 UI kit that can be used in a variety of projects. It comes with a selection of UI blocks and more than 25 UI elements, and 1 landing page to jumpstart your project.

Material Kit – Free Bootstrap 5 Material Design UI Kit

Material Kit is a perfect choice for anyone who loves the material design. The Bootstrap 5 UI kit comes with over 60 UI elements and three demo page templates to help you get started on your design.

Free Bootstrap 4 UI Kits

Argon – Free Dashboard UI for Bootstrap 4

The Argon UI kit for Bootstrap is the perfect choice if you’re working on a dashboard design. The kit comes with over 100 components, 6 different screens, and 4 custom plugins.

Grandin Bootstrap Admin UI Kit (Envato Elements)

Powered by Grunt, Bower, and SCSS, Grandin is a professional UI kit that comes packaged with plenty of UI components, widgets, forms, tables, charts, pages and applications.

Shards Free Bootstrap 4 UI Kit

The free Shards Bootstrap UI kit comes with 10 extra custom components and 2 custom pre-built landing page templates. You’ll also find more than 1,500 icons both from Material and FontAwesome packs.

Dashboard HTML Template for Bootstrap 4 (Envato Elements)

This lightweight Bootstrap 4 UI kit includes five dashboard layouts, over 100 components, and a complete set of UI elements, including charts, forms, calendars, tables, and many more.

Drunken Parrot Lite Bootstrap 4 UI Kit

This kit includes both HTML and PSD files so you can easily customize and tweak the design to suit your needs. The kit is lightweight and it comes with various components and pages that will help to speed up your design process.

Now Free UI Kit for Bootstrap 4

Now UI Kit is a responsive Bootstrap 4 kit provided for free by Invision and Creative Tim. It features over 50 elements and 3 page templates. The kit provides PSD, Sketch, and HTML versions.

Fuzen Bootstrap 4 Admin UI Kit (Envato Elements)

Fuzen is a Bootstrap 4 UI kit that comes bundled with three dashboard layout templates, over 200 UI components, over 3,000 icons, and multiple widgets. It has been designed with Material Design in mind.

NowSquare – Free Collection of Bootstrap 4 Web Blocks

Built upon Bower, GulpJS, and Sass, this free collection of web blocks has been designed for Bootstrap 4 and allows you to get ahead on your design project. The kit is easy to use straight out of the box and can be easily customized to the needs of your project.

Froala Design Blocks for Bootstrap 4

This Bootstrap UI kit includes over 170 responsive design blocks that are ready to be used in your web or mobile apps. You’ll find blocks for calls to action, profile blocks, contact, blocks, forms, headers, and more.

Paper Dashboard – Free Bootstrap 4 Admin UI Kit

The Paper Dashboard is another great choice if you need to prototype and design an admin dashboard for your project. The UI kit comes with 16 components, 4 customized plugins, and 7 demo page templates.

Anchor – Free Bootstrap 4 UI Kit

Anchor is a free Bootstrap UI Kit with flexible, ready to use UI components that will help you build websites faster. It features a modern and colorful design.

Stream Free Bootstrap 4 UI Kit

The Stream UI Kit is a beautiful and elegant Bootstrap 4 UI Kit. The UI kit comes with five beautiful complete page templates and includes over 20 reusable and customizable UI Blocks.

Bootstrap 4 Startup UI Kit

Try the Bootstrap 4 Startup UI kit if you’re working on the website design of a startup. The kit features a clean and minimal style and comes with 16 UI cards that you can mix and match to create your own unique layouts.

Free Bootstrap 4 eCommerce UI Kit

Check out this kit if you’re designing an e-commerce website or an application. The template comes with several starter templates to get you started as well as numerous icons and elements.

The post 20 Free Bootstrap UI Kits appeared first on Speckyboy Design Magazine.

Jeremy Gillespie

www.jackpinewebdesign.com

Building beautiful and functional things is only part of a web designer’s job. Providing maintenance and support for our creations is also a key part of the equation.

This is often the more difficult task. After all, support can be a years-long commitment. Plus, it requires both technical knowledge and people skills – an important combination.

Support also plays a role in developing customer loyalty. Even if you’ve built an amazing website for your client, poor support is likely to damage the relationship. This could be a deciding factor in whether or not they stick with you for the long haul.

So, what goes into providing great support? Let’s look at a few ingredients for keeping your websites running smoothly and your clients happy.

Respond Quickly to Requests

Waiting is no fun – especially when you have a technical issue or question. Therefore, our first rule of client support is to quickly respond to that initial message.

This doesn’t mean you have to resolve things immediately. It’s more of a common courtesy to let your client know that their request has been received. Knowing that they’re on your radar helps to build trust and confidence.

Ideally, a personal response is preferred. Bonus points if it adds any follow-up questions to get the ball rolling on taking care of the request. But even a well-written auto response is acceptable.

The important thing is confirming that you’re aware of their message. That starts the entire support process off on the right foot.

Be a Good Listener

When a client approaches you with an issue, it’s easy to jump to conclusions. Sometimes it takes the form of thinking you know the answer before they’ve even finished talking. In other cases, you might be quick to dismiss their claim as a case of simple user error.

It may come from good intentions (or a desire to get back to your other projects), but has the potential to rub your client the wrong way. You might be seen as terse or even rude.

Taking the time to listen is a much more effective approach. While it may eat up a bit more of your schedule, it demonstrates that you care about what your client has to say.

Besides, listening is the best way to gather information. You’ll be less likely to miss out on any important details that will help you resolve the issue. And you can always ask questions afterwards.

Exercising patience has a lot of side benefits. It helps to establish a positive rapport with clients. And they’ll feel more comfortable coming to you when they run into a problem. This is especially important for those who are technically-challenged and intimated by the situation.

Avoid Wild Speculation

Clients come to us because they’re hoping we have answers. In an effort to provide comfort and certainty, web designers may resort to speculation. Taking wild guesses as to what’s causing a specific problem or the timeline for fixing it is meant to bring peace of mind. The reality is that it is more likely to cause frustration if you guessed wrong.

Of course, this doesn’t mean you can’t offer up a laundry list of potential causes. But they should be noted as possibilities – not certainties. And, until a proper diagnosis, timelines should reflect investigating an issue rather than fixing it.

In other words: speak in generalities until you know what you’re dealing with. Don’t let your eagerness to please a client get in the way of finding honest answers.

Immediate solutions aren’t always possible. Thankfully, most people are willing to wait for you to look into an issue or research a question. Give them (and yourself) the chance to do so.

Keep the Lines of Communication Open

Complex issues may take a while to resolve. But that doesn’t mean clients should be left in the dark. Periodically checking in with the latest information (even if there aren’t any new developments) goes a long way towards keeping everyone on the same page.

While this may sound relatively simple, it’s not always easy. For example, we web designers often find ourselves acting as liaisons between clients and third-party service providers. If the provider doesn’t keep us in the know, it will make our job that much harder. It can also make us look bad.

Frankly, there’s no need to shield providers from accountability. Thus, if they’re the reason progress is being held up, don’t be afraid to say so. Just keep honesty and fairness in mind when reporting the situation. Painting an accurate picture is still important.

But regardless of who’s in charge of tackling the issue, stay in touch with clients. They must be kept in the loop throughout the entire process.

Doing Right by Your Clients

All of these tips can be tied together by a single word: professionalism. It’s something we expect from those who provide us with support. And our clients expect it of us as well.

It requires us to be honest, responsive and willing to go the extra mile. And, above all, a commitment to keeping clients abreast of what’s happening.

Of course, it helps to have loads of technical knowledge. But there’s more to it than knowing code and design. It’s the people skills that enable you to build a solid relationship. And a combination of both is what makes for top-notch support.

You don’t need to be perfect to succeed in this area. Rather, it’s about putting in the effort to take care of your clients. It may just convince them to stick with you for years to come.

The post How to Provide Great Support to Your Web Design Clients appeared first on Speckyboy Design Magazine.

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

Jeremy Gillespie

www.jackpinewebdesign.com

What do you do if you’re partway through an important project for a client and you get, well… stuck? You simply can’t wring any more good ideas from that brain of yours, and none of your ordinary tricks to relieve creative block are working.

To many designers, this is the kiss of death, but I’m here today to tell you that it doesn’t have to be. We’re going to explore some unusual but very effective ways to get those creative juices flowing again so that you can get back in the flow of things and continue to wow your clients.

Creativity in Routine?

Here’s a fact about the human brain that you may not know: every single decision you make throughout your day will have a negative effect on your ability to successfully complete a task. That’s right – whether it’s choosing which color to make that dropdown menu, or whether you should wear that green shirt or the blue one, every time you’re forced to make a decision, you lose just a bit more mental energy.

This is why you may find yourself burnt out by lunchtime if you begin your day by answering emails or answering silly questions from dense clients. Those small decisions have used up a huge amount of your energy for the day. Sure, you can recover some of it by eating a nutritious lunch or having a quick nap, but you won’t be quite as productive after noon as you were before.

Adopting systems and routines that automate a lot of your daily decisions can help tremendously in recovering some of that creativity you thought was lost forever.

Consider taking a full day to plan the little things you know you will have to do for the week, even down to what color shirt you’ll wear. Try to batch your email responses if you can – it’s not a crime to cut and paste responses if they’re relevant and get the point across.

The more things you can automate, the more you can turn your focus to the work that truly matters.

Getting a Jolt of Energy

Starting a new project can be very intimidating. And yes, I’m about to use yet another of my famous food analogies, so get ready.

Have you ever been to a restaurant, and the waiter hands you a menu that’s absolutely terrifying? I don’t mean it has teeth or it growls at you or anything like that. I mean, there are so many items on the menu, and the descriptions are so lengthy that you almost lose your appetite and want to run back out the front door?

Too much choice can do more than confuse us – it can just about ruin our experience and make us want to hide while we try to process everything in front of us.

For me, it seems like the more freedom I have with a design project, the scarier, more confusing, and more impossible it becomes to get started.

Of course, freedom in my design work is something I’ve strived very hard to achieve, and I’m very fortunate to have it. But sometimes, with a big, hairy project deadline looming over my head, I almost wish I was a student again, with rigid assignments and a limited scope as to what I could work on.

What’s the solution to this problem? I’ve found that doing something spontaneous to get my blood pumping and my creative energy flowing helps tremendously. Exercise is the most obvious choice here, and I don’t need to tell you how many ills it can help cure besides creative block.

However, there are other options, such as spending quality time with friends or loved ones, working on something else, like a personal project, or, my personal favorite, cooking.

Calm Those Jitters

Sometimes, your problem isn’t that you’re frightened into submission by your project. Rather, you’re inundated with too much energy, which can manifest as nervous fidgeting, hair-pulling, or procrastinating by doing meaningless busy work.

This can be just as maddening because you’re not exactly sure where to begin, and you know you should be doing something productive, but you just can’t figure out what.

You may not realize it, but your brain is like clay. Whatever approach you decide to take for your work will leave an impression on your brain for next time. So, if you react to a challenging project with stress, nerves, or excessive anxiety, you’re saving a copy of that reaction in your brain’s hard drive, which will automatically pull up every time you’re faced with a similar dilemma.

In this case, you need a solution that will burn off or diminish some of that excess energy. A calming activity, such as meditation, walking, journaling, or reading, will help soothe your brain and help it focus on the task at hand.

The post How to Get Those Creative Juices Flowing Again appeared first on Speckyboy Design Magazine.

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

Jeremy Gillespie

www.jackpinewebdesign.com

When creating a new digital art project, it’s vital to have the right tools on hand to complete the job. Sometimes, that means software. Other times, that means specific tools within said software. And if you’re looking to create 3D effects in your work, Photoshop actions might just be the thing you need most.

What follows is a concise collection of Photoshop actions that streamline the process for creating 3D effects. Add depth to text. Add shadows and depth of field. Create isometric effects. No matter what end goal you have for your artwork, these actions simplify creating a 3D look, which could very well free up your time for other important tasks.

No more delays. Let’s get into the collection.

3D Isometric Photoshop Action

This 3D Isometric Photoshop action makes it easy to transform text, vector-based shapes, smart objects, layer groups, and pixel layers into images that appear as though they are real 3D objects. This action works in two different directions and includes 12 shadow sizes, 10 extrusion sizes, a choice over light and shadow directions, and more.

Conceptum 3D Sketch Photoshop Action

Here’s another fantastic option. The Concept 3D Sketch Photoshop Action turns any photograph you want into a technical sketch that preserves 3D elements. It can work on any image of an object and creates a highly-detailed graphic that you can use in any number of situations. It comes with a full tutorial as well.

3D Text Effect Photoshop Action

The 3D Text Effect Photoshop Action is another text effect that works to transform your graphics into realistic-looking 3D objects. The results preserve full detail and color and can be tweaked based on extrusion direction and size, shadow and light direction and size, custom colors and fonts, and more. A full PDF help file is included so getting started is easy.

Anaglyph 3D Photoshop Action

Give your artwork an old-style stereoscopic 3D look with this Anaglyph 3D Photoshop Action. It adds this effect to your photos with a single click and the end result actually works with real 3D glasses. It comes with 8 different actions and it doesn’t destroy your original image in the process.

3D Effect Photoshop Actions

Here’s another great option for adding a 3D effect to your images. This one gives your image the appearance of stereoscopic 3D with just a few clicks. It automatically creates layer groups and is non-destructive so your original image remains intact. It also comes with a text file that guides you through the whole process.

3D Text Creator Actions

The 3D Text Creator Actions consists of a whopping 65 separate actions you can use to turn text layers into 3D text graphics. They work in four directions, can be used to create solid, flat, or translucent 3D text, and include five outline styles. All layers are fully editable and these actions are non-destructive.

3D Dispersion Photoshop Action

What an interesting effect this is! The 3D Dispersion Photoshop Action works by taking your images and making them appear as though they’ve broken apart into tiny three-dimensional pieces and said pieces are flying away. This dispersion effect can be applied quickly to your photos and you can select from four different directions of movement.

Animated 3D Parallax Duotone Action

The Animated 3D Parallax Duotone Action works by creating a 3D stereoscopic GIF. It works by creating a looping animation out of two layers. Other features include 25 colorscripts, a thumbnail color preview, fully editable layers, and a quick start guide.

Gold 3D Text Effect Photoshop Action

Giving your text a shiny gold effect has never been easier thanks to the Gold 3D Text Effect Photoshop Action. This one provides a realistic result that’s super easy to implement. With just one click, you’ll have the finished layers. It works on text, vectors, pixel layers, smart objects, and more. It also has a smart shadow you can play with. And a video tutorial is included.

Real 3D Text Mockup Photoshop Actions

Here’s another fantastic option for adding 3D effects to the text elements of your graphics. Just a few clicks and you’ll see your results. You can use it in backgrounds and more. It comes with 6 PSD files with the effect in Smart Objects. It also comes with a help file that includes instructions and fonts.

Isometric Illustration 3D Photoshop Generator

Now this is a fun one. The Isometric Illustration 3D Photoshop Generator makes it easy to create isometric illustrations from all types of illustrations. Apply it to shapes, vectors, smart objects, group layers, pixel layers, or text. It works in 4 directions, you can select from 10 depth sizes, and it comes with a total of 40 different actions.

Animated 3D Photography Stereoscopic Action

Last on our list is another animated option. Great a 3D animated GIF from one images with just a few clicks. It uses a parallax effect to create a shift in the image layers. When played on a look, it creates the illusion of 3D. It comes with 3 different vintage-style color presets, a help file, and a video file.

Though the prospect of creating 3D images might seem daunting at first, it’s actually fairly easy so long as you have the right tools in your toolbox. This selection of Photoshop actions for creating 3D effects ought to shave hours off your workflow time, and the results will be sure to please. Happy creating!

The post The 12 Best Photoshop Actions for Creating 3D Effects appeared first on Speckyboy Design Magazine.

Jeremy Gillespie

www.jackpinewebdesign.com

You’re probably thinking of your own version of the “perfect” design. Whatever it is, you probably have fond, nostalgic feelings around it, and would likely defend its rightful place among the best in the world.

The thing is, there are probably some people who share your opinion, but many more who don’t. This is perfectly okay, because it means that you as a designer have even more opportunities to reach your own special niche audience.

Don’t Think Of Everyone

You don’t have to try to make that “perfect design” that will appeal to everyone. I can’t even imagine what that would look like, but it likely would be terrible.

Why? Because people have such different expectations that trying to fulfill them all is always going to fail miserably.

This is why generic designs never sell as well as many clients seem to think they will.

The next time your client insists that you try to reach a more “general” audience with your design, remind them that no one wants to bother with something that’s made with “everyone” in mind.

Think about it: what else is made for “everyone”?

Let’s see… car dealerships (with a thousand different choices and options), hospitals and health care facilities (with multiple specialists to cater to virtually anyone’s particular problem), newspapers (with hundreds of sections for people to flip right to the information that interests them).

Do you see a pattern here? Even things that are supposedly for everyone have many, many sub-categories, so that “everyone” can filter themselves into more easily manageable groups.

What You Want Vs. What Is Best

You have to line up your message with the needs of your niche audience. If this happens to include your own needs, then it will be easier for you to engage personally with whatever it is you’re selling.

There’s a lot to be said for being able to stomach the work you must do as a designer. If you hate the message you’re sending out, perhaps you need to question whether or not you need to find new clients.

The relationship between designer and client should be symbiotic, and also sync up with whatever it is your client’s target market is looking for.

Which Version Is The “Right” One?

There is never one perfect solution to a design problem that will satisfy absolutely everyone. There are only a series of perfect solutions, each one tailor-made to fit a very specific group of people – sometimes extremely specific.

Malcolm Gladwell famously outlined this tendency of ours to prefer a multitude of different solutions in his legendary TED talk about spaghetti sauce.

He gave examples of the spaghetti sauce manufacturer, Prego, that stumbled upon a completely untapped market when it began offering “chunky” spaghetti sauce, in addition to the thinner, more traditional Italian-style sauces.

To use an even more specific example of multiple solutions to problems, most cat owners are perfectly happy training their cat to use the litter box.

Some owners, on the other hand, choose to take things a step further, and actually hire someone to train their cat to use the toilet. That’s right. There are cats who are actually potty trained.

Quite literally, there is a product or service out there that caters to every possible need.

Don’t confuse your personal favorite designs with the one your target audience is hungry for. Make sure you choose a market that you understand and you can satisfy without selling your soul.

Figure out that unique, perfect solution to your clients’ needs, and the needs of their customers, and everything will be just “perfect” from there.

The post Is There a Perfect Solution to a Design Problem? appeared first on Speckyboy Design Magazine.

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

Jeremy Gillespie

www.jackpinewebdesign.com

Designers and copywriters have a symbiotic relationship. In our modern, web-based industry, one can’t really exist without the other.

Copywriters provide the engaging content that snags users’ attention and prompts them to buy, and designers provide the overall framework that facilitates a great experience for said user.

In fact, designers and copywriters have quite a bit to learn from each other. Having done both for quite some time now, I’m going to let all of you designers in on some important secrets from the copywriting side.

Let’s explore some of the things that you designers can learn from copywriters to improve your problem-solving strategies and communicate better with your target audience.

Headlines Are All Important

If you can’t hook your audience with the first few words, you’re toast. Similarly, if you can’t catch your user’s attention with the initial impression of a design, no one will care how well it solves their problem.

There could be a really useful article behind that bad headline, or a really useful solution behind that ugly design, but no one will care.

Sure, many designers have written and spoken at length about the undue emphasis on “pretty” designs, especially among the crop of so-called “Dribbble designers.” Designers will post work specifically to get praise and positive feedback, and not be concerned about how it actually works.

But there’s something to be said about an eye-catching design. In fact, looking good is part of the function a design serves. You have to get people’s attention somehow, after all. Pretty up those “headline” elements.

Even If You’re Preaching To The Choir

Even if people know and like your work, a copywriter will still need to work to capture people’s attention and keep them coming back. People who subscribe to newsletters will quickly unsubscribe if the content gets boring or unengaging.

It works the exact same with design. Just because people enjoyed your work in the past, it doesn’t mean they will in the future. Especially nowadays, with so many things available to occupy our attention, both designers and copywriters have to work really hard to grab those all-important eyeballs.

Aim For Strategic Hooks

It’s impossible to create a winning piece of content every single time, even within the same project. Not everything can be a winner, as they say. That’s just the reality of any creative endeavor – you win some, you lose some.

Keeping this fact in mind a good copywriter needs to structure their releases to hook people at key times. Holidays and major life changes (buying a new house, weddings, children, etc.) are ideal for your most powerful hooks.

In fact, they might not even work any other time. Same thing for designers. You can get away with certain things for these types of events – crazy type, bold colors, skewed or unconventional compositions – that you would never be able to get away with at any other time.

People Have Less Time Than Ever

People are busier than they’ve ever been before. Everyone is multitasking – checking Twitter and Facebook while skimming their emails at work and texting their spouses about what to eat for dinner.

They don’t have time to slowly peruse your boring or slow website. A copywriter has a very short window to grab someone’s attention, and if they can’t do it, they can kiss that user goodbye.

Designers, you guessed it: the same applies to you. It might not be an ideal situation when someone is only giving an average of three seconds to your content, but there’s nothing you can do about it.

It’s your job to adapt to reality and make sure that people are intrigued enough by your designs to take a closer look.

The post The Symbiotic Relationship Between Designers and Copywriters appeared first on Speckyboy Design Magazine.

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

Jeremy Gillespie

www.jackpinewebdesign.com

Photoshop brushes let you express your creativity in a completely new way. With thousands upon thousands of Photoshop brushes available for download, you are truly spoilt for choice, so there’s no excuse not to use them.

The demand for high-quality Photoshop brushes is huge. Every designer wants them. Every designer needs them. And as you will no doubt already know, we love to highlight and share as many free design resources as possible.

And today, we take a look at some of the best high-resolution Photoshop brush packs currently available in the design community.

So download these free Photoshop Brushes and install them all. You just never know when you might need them.

Scribble Art Photoshop Brushes (Free, 39 Brushes)

If you need to add an abstract line or shape to your designs, then this free collection of scribble art Photoshop brushes is for you.

Da Vinci Pencil Photoshop Brushes (Envato Elements)

This high-resolution set contains twenty-five varied hard and soft lead pencil and sketching brushes.

Subtle Grain Photoshop Brushes (Free, 6 Brushes)

This free Photoshop brush set from Spoon Graphics will allow you to give your clean designs a hint of texture that will quickly give them a vintage appearance.

Wavenwater Photoshop Brushes (Free)

The Wavenwater Photoshop brushes is a set of artistic brushes and tool presets for Photoshop. You can freely use these brushes in your projects and let your creativity run wild.

Stipple Brushes for Photoshop (Envato Elements)

If you’re looking to add a modern twist or a touch of pop-art to your art creations, you will love this Photoshop brush set!

The Thrasher Collection of Photoshop Brushes (Free, 8 Brushes)

The Thrasher Collection is a free set of textures and eight Photoshop brushes for giving a grungy and textured effect to your designs.

Elegant Flower High-Resolution Photoshop Brushes (Free, 15 Brushes)

This high-resolution set contains individual brushes of roses, lilacs, dandelions, and more. In total there are fifteen flowers in the free set.

Watercolor Brushes for Photoshop (Envato Elements)

This tropical watercolor brush set for Photoshop is all you need to create a dreamy tropical watercolor scene. It features 15 watercolor brushes and various watercolor elements and backgrounds.

Ink Brushes for Photoshop (Free, 28 Brushes)

Download this free collection of 28 brushes if you need to give your designs a watercolor or distressed effect.

Real Markers Photoshop Brushes (Free, 12 Brushes)

As well as a small selection of linework brushes, this fantastic collection includes a huge collection of permanent and solid marker Photoshop brushes.

High-Res Photoshop Brushes Watercolor Collection (Envato Elements)

These watercolor brushes feature lovely floral elements. It’s a great set of brushes that will add a dose of elegance to any project. The set contains more than 60 floral, garland, and wreath brushes.

Photoshop Stroke Brushes (Free, 27 Brushes)

Martina Palazzese’s Digital Oil Painting Brushes (Free, 6 Brushes)

Martina Palazzese has released her personal collection of brushes so that you can create your own professional digital oil paintings.

Artistic Studio: Watercolor Toolkit (Envato Elements)

This set is perfect if you want to seriously stock up your design library. It contains 35 watercolor brushes for Photoshop as well as dozens of other watercolor elements such as textures, strokes, backgrounds, and more.

Hi-Res Smoke Photoshop Brushes (Free, 4 Brushes)

Check out this collection of four smoke brushes for Photoshop. The brushes were done in hi-res and you can use them to spice up any design project you are working on.

Dispersion Effect Photoshop Brushes (Free, 20 Brushes)

If you’re looking for a quick way of adding the stunning dispersion effect to your designs, then this free collection of twenty Photoshop brushes is what you need.

Goldish Kit For Photoshop (Envato Elements)

Try this Goldfish kit for Photoshop if you’re working on a luxury or high-end project. The kit contains Photoshop brushes as well as layer styles, patterns, and textures.

Grunge Photoshop Brush Kit (Free, 16 Brushes)

Mixergraph Grunge Brushes (Free, 5 Brushes)

All five of the individual high-resolution textures in this free Photoshop brush pack have been hand-made, digitalised and then individually edited.

Watercolor Design Bundle (Envato Elements)

If you’re looking for a way to add artistic elements to your designs, look no further than these beautiful watercolor brushes. The set contains 169 watercolor brushes along with other various watercolor design elements.

Hand Drawn Arrows Brush Set (Free, 80 Brushes)

All created by hand, this free Photoshop brush set contains eighty individually sketched or drawn arrows.

Real Photoshop Brush Strokes (Free, 53 Brushes)

This high-resolution (2500px) set of Photoshop Dry Brushes contains fifty-three brush presets, giving a huge choice of brush effects.

Coffee Paint Photoshop Brushes (Free, 16 Brushes)

If you need to give your project a distressed or rough appearance, then this collection of 16 Photoshop brushes is what you’re looking for.

Trails Brush Set (Free, 19 Brushes)

This Trails brush set features 19 high quality brushes for Photoshop. The brushes can be used in both commercial and personal project but keep in mind attribution is required.

Bokeh Photoshop Brushes (Free, 8 Brushes)

If you want to apply a bokeh effect to your design easily, try this set of bokeh brushes. You will find 8 different brushes that can be used in any personal project.

Abstract Watercolor Brushes (Free, 12 Brushes)

This stunning free Photoshop bundle includes twelve transparent watercolor brushes and a free paper background texture.

Charcoal Pencil Photoshop Brushes (Free, 6 Brushes)

This is a free hand-drawn charcoal pencil brush set that includes brushed, gritted, grained, flicked, wacked, and dabbed brushes.

Doodle Birds & Frames Photoshop (Free, 9 Brushes)

This free set contains nine free Photoshop brushes of hand-drawn birds and frames.

Water Splash Photoshop Brushes (Free, 11 Brushes)

This package, created by Niño Batitis, contains 11 high-resolution water splash brushes.

Marker Streak Brushes (Free, 20 Brushes)

This set of Photoshop brushes contains 20 high resolution marker streak brushes. The brushes can be used in both personal and commercial projects with no limitations.

Realistic Charcoal Photoshop Brushes (Free)

This set of realistic charcoal brushes was born out of an artist’s need for realistic charcoal feel in their designs. The set features various charcoal style brushes and can be used with no limitations.

High Resolution Cloud Photoshop Brushes (Free, 20 Brushes)

In this high resolution (2500px) pack there are 20 cloud brushes. These brushes are free to download and use in both commercial and personal projects.

High-Resolution Fabric Texture Photoshop Brushes (Free, 20 Brushes)

There are twenty fabric textures in this pack, and are all sized at 2500px.

Distressed Halftone Brush Strokes (Free, 21 Brushes)

In this brush pack there are 21 hand-painted brush strokes that have been post-processed and bitmapped inside Photoshop, giving them a wonderful distressed halftone effect.

Lightning Photoshop Brushes (Free, 43 Brushes)

How about adding some lightning to your project? With the help of this brushes, you’re sure to make some electrifying designs! Brushes can be used for personal projects.

Oil Photoshop Brushes (Free, 20 Brushes)

If you need oil Photoshop brushes, this set will serve you nicely. The set contains twenty brushes that can be used in personal and commercial projects.

Splash Photoshop Brushes (Free, 15 Brushes)

Check out this collection of 15 splash brushes for Photoshop. It’s perfect for any grunge project and you can use these brushes in both commercial and personal projects.

Brush Pack v3 by Fenris31 (Free)

This brush pack by Fenris31 contains various brushes for Photoshop that will be suitable for all kinds of artistic and design projects. Use them in commercial and personal projects alike.

Photoshop Brushes for Painting Rocks and Water (Free)

If you want to achieve great results when painting rocks and water, consider this set of brushes. You will find various brushes that can be used for both commercial and personal projects. Crediting is not required but greatly appreciated.

Radiate Brush Set (Free, 12 Brushes)

This brush set includes 12 unique & abstract techno style brushes. Great for album artwork, abstract backgrounds and decorating tech style design projects.

Fairy Tales Photoshop Brush Set (Free, 9 Brushes)

In this set there are 9 high resolution (1000 up to 2500px) brushes. They can be used for creating fantasy backgrounds and textures like rocks and metals.

Old Technical Drawings Brushes (Free, 10 Brushes)

This set of brushes was made from old technical drawings so they are pretty realistic. The pack contains 10 brushes and they can be used for both commercial and personal projects.

High Res Dry Brush Stroke Brushes (Free, 12 Brushes)

This pack of high resolution brushes contains 12 dry brush stroke brushes. The pack can be used in personal and commercial projects, however attribution is required.

Bokeh Brushes (Free, 12 Brushes)

This set of bokeh brushes comes with 12 individual brushes that are perfect for any project that could use a little extra. The brushes are free to use in personal and commercial projects.

Rain Photoshop Brush Set (Free)

Create realistic rain effect with the help of the Rain brushes for Photoshop. The pack can be used for commercial and personal projects.

TC-EPICA-I (Free, 10 Brushes)

TC-EPICA-I is a set of artistic brushes. It contains 10 different brushes that can be used to apply textures, smudges, and effects to your designs. The pack is free for personal and commercial projects with attribution required.

Fiber Brushes (Free, 16 Brushes)

This pack contains 16 high resolution fiber brushes. They can be used in commercial and personal projects and crediting is not required but it is appreciated.

Custom Brushes of Tyler Street (Free, 40 Brushes)

With an unusual name like this, you’re bound to find some original brushes for your design project. The pack contains 40 different brushes that can be used for personal and commercial projects.

Nature Silhouettes Trees & Grass Brushes (Free, 19 Brushes)

Add a dash of nature to your designs with the help of these nature silhouette brushes. The pack contains 19 brushes and is free for personal and commercial use.

Abstract Bokeh Brushes (Free, 24 Brushes)

Now you can easily add lomo and light-leak effect to your photos without recreating this effect from scratch. The pack contains 24 different brushes.

Grimey Brushes (Free, 5 Brushes)

This pack of 5 brushes will add grime to any design. You can use the pack in personal and commercial projects with no limitations.

Watercolour & Ink Photoshop Brushes (Free, 25 Brushes)

These brushes have been created by using either watercolor paints or Indian ink on card. You can freely use them in both your personal or commercial work.

Aaron Griffin’s Digital Painting Brushes (Free, 6 Brushes)

Cloud Photoshop Brushes (Free, 15 Brushes)

There are fifteen individual cloud brushes in this set. You can use this free brush set with no commercial restrictions

Spray Splatter Photoshop Brushes (Free, 12 Brushes)

These free splattered spray Photoshop brushes will be perfect for adding a grungy or dirty effect to your artwork.

Smoke & Fire Brushes (Free, 22 Brushes)

There are twenty-two brushes in this free high-resolution smoke and fire set.

High Resolution Fire Photoshop Brushes (Free, 20 Brushes)

This pack contains twenty high-resolution fire brushes, perfect for creating fiery text effect, glowing embers, or using them for lighting effects.

Photoshop Smoke Brushes (Free, 13 Brushes)

This pack contains thirteen high quality Photoshop smoke brushes perfect for your next design project.

The post 50 Free High-Resolution Photoshop Brushes appeared first on Speckyboy Design Magazine.

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

Jeremy Gillespie

www.jackpinewebdesign.com

In today’s freelancing climate, one of the best things you can do in terms of marketing yourself is to think in what I like to call “Test Terms.”

What does this mean? When a food company is developing a new product to release into the market, they don’t simply travel in a straight line from recipe to manufacturing to stocking the shelves at the grocery store. What happens is they perform a series of tests, which allow them to tweak their product until it gets just the right kind of response they’re looking for.

As a designer, it’s eminently possible to plan out a system that allows you to do the same thing, with similar results. However, many people remain stuck on one method of promotion, believing they’re too busy working to devote too much time to marketing themselves.

But the sad paradox of that belief is that, by not adjusting the way they market themselves, these freelance designers will always be too busy scraping by. They’re not getting the exposure they need to be choosier about the types of jobs they can take on, because the only jobs available are the ones that limited exposure gets them.

Everyone Tests Everything

One of the best ways to test consumers’ reactions to new food products is to get their direct feedback. Starting with just one local area, a company will test out a variety of different approaches to everything about the product. And I mean everything.

Do people in this small town like the taste of this new product, or do they hate it? If they hate it, it’s back to the test kitchens to improve the recipe. Are they repelled by the packaging?

Get that designer back in here – time to revise! Are the ads falling flat? Well, you get the idea.

Every tiny detail of this new product gets tested and re-tested, adjusted and refined wherever needed. After they’ve made enough improvements that people are now responding well to the product, it’s time to take it to a new area. This process gets repeated again and again until there’s a hugely positive response and people are stockpiling the new food item like they’re preparing for Armageddon.

A similar process happens, by the way, in the movie business, the government (think road signs or jury duty summonses aren’t tested? Think again), and other consumer industries like toys and games.

Testing is a proven strategy to improving a product’s chances of success, and as a designer, you can very easily start taking advantage of some of these sophisticated testing methods to place yourself practically in the lap of your most desired clients. Of course, you can and do test your approaches to design, but trying out new ways of marketing is easier to implement in your regular schedule than you might think.

Sharpen Your Pencils

Start with your main marketing approach, which might be your website, your business card, your cover letter, or your resume. How well does this approach work for you? Are the clients beating down your door, or is something not quite working the way it’s supposed to?

If you regularly hand out business cards at networking events, are they completely up to date? Do they display the important information clearly? Are you giving them to the right people? That last one is an important detail that many creative freelancers miss.

Business cards are practically useless if you don’t use them properly. At a networking event, the people you typically end up chatting with aren’t people who can provide you with tons of high-quality work.

They’re people just like you – struggling entrepreneurs who need services on the cheap. It doesn’t mean you shouldn’t work with these people, but it’s important to keep in mind the overall value of a client when you’re passing out those expensive business cards.

How good of a return on your investment will you be getting? Test out handing your business card to a different sort of person than you ordinarily would, and see what type of response you get.

In a similar way, your website may or may not be bringing you the steady stream of work that it could be. You may be the most brilliant, multifaceted designer the world has ever seen, and yet if no one knows about your work, you might as well be invisible.

The real key to getting better quality clients is not to put as much of your work “out there” as you possibly can. It’s making sure that the work you’ve done is being seen by the maximum number of eyeballs.

In the design world, the best way to do this, in my opinion, is by doing a personal side project that you really love and are passionate about.

The Gold Standard Of Eating

It turns out that as a designer operating a business as a freelancer, you should be adjusting everything you do to market yourself – all the time.

What do I mean by adjusting? In many restaurants, well before the rush of customers comes in, chefs create something called a Gold Standard, a single plate that sets the, well, standard for all the plates the kitchen will produce for that day.

It’s such an important part of the culinary process that the plates used in most restaurants – the ones you eat your main course on – are known as Gold Standard Plates.

The original Gold Standard is a test plate – any changes to the dish are tried out there first. If something is off about the flavor, the ingredients, or the arrangement of the items, the Gold Standard will be the laboratory where those things can be tweaked.

As a designer, incorporating a similar philosophy will be helpful in streamlining your marketing process. Creating your own “Gold Standard” of promotion will allow you to make quick adjustments locally, to one portion of your marketing campaign, before you roll out those changes to everything else.

Whether it’s your website’s analytics, your business card, or your resume, zoom in on one single marketing material and find out what works and what doesn’t.

Usually the information you learn is transferable to other parts of your marketing package, and you may even discover that one or more of your marketing materials are unnecessary.

You definitely need to have a website if you design them for a living, but what about business cards? A CV? Social media? How well are these things really working to directly deliver you the clients you want?

Different types of clients care about different things. Maybe your clients don’t care so much about your resume, but they would really love to read your personal blog or Twitter updates. Other clients might be the exact opposite – it’s essential to know your market and be able to provide them the proof they’re looking for that tells them you’re the designer for the job.

The post Testing Your Marketing Efforts as a Freelancer Designer appeared first on Speckyboy Design Magazine.

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

Jeremy Gillespie

www.jackpinewebdesign.com

It sounds so simple, right? You do a good job on a design project, the client loves it and pays you on time, you both walk away feeling good about the exchange.

But if you simply disappear off your clients’ radar once the work is done, you’re missing massive opportunities for more work, as well as testimonials and referrals to help your business.

There are some important things that most designers never do when ending a freelance project, and today we’re going to go over what they are and why you should always do them, no matter what.

Wrap Up All The Loose Ends

The most important thing you should do when ending your project is to make sure that your client is 100% set to move forward without you. This means providing them with a package that includes everything they will need to manage on their own (site logins, full-resolution files, etc.)

It also means providing them with ways to solve any problems they might have without having to call you, in the form of FAQs, troubleshooting guides, or checklists.

Despite what you might think, it’s actually a waste of your time to have an old client call you for help with minor stuff that you could have easily provided for them in an email or spreadsheet. It’s unprofessional to hoard all the knowledge of how to use the goods you’ve created for your client in your head, making them come crawling back to you to obtain it.

You might not think this is what you’re doing, by neglecting to provide your client with information, but this is the way it comes across.

Keep Them Warm

People are much more likely to purchase services from people they’ve worked with before, so you already have that working in your favor. All you need to do is keep the line of communication open for when you need it again.

We’re all guilty of letting a relationship fade away, then finding ourselves wishing we hadn’t. But you can’t just pop up out of nowhere after months or years of not communicating with a client and ask for more work. The relationship needs to be kept warm in the meantime.

Luckily, it’s easier than you think to do this and make sure your clients never fail to think of you when they need high-level work done by a professional they trust.

It does you no good to drop off the face of the earth and never talk to your old clients again. You never know when a former client might be handy as a reference or provide some other career-boosting aid. You can’t just ignore someone for months and only contact them when you need something.

For clients, you definitely want to maintain a relationship with, make a minimum contact of one email per month. You can send them a brief update on what you’re up to, letting them know subtly that you’re still interested in referrals.

You might think you’re important and unforgettable, but you’re really not. You’re replaceable just like anyone else. In addition to your main client (as in, whoever signed your paycheck), send regular emails to any team members you worked with who you want to maintain a relationship with.

They’ll be more likely to let you know about any new projects or opportunities that might be of interest to you. Let them know what projects you’re currently working on (of course, never reveal any confidential or sensitive info).

Be Of Service

Always be thinking about how you can help your former clients, even though you’re no longer working for them. Send them information or introduce them to others you think might be able to help them. Just because you’re no longer getting paid by your former client, it doesn’t mean that you still shouldn’t try to help them in other ways.

Send 3-5 emails throughout the year that offer some kind of value – a link to a useful article, an offer to introduce someone who might be helpful, whatever – before you go asking for something.

A great way to instantly add value to any type of professional relationship is to become a connector. What that means is, if there’s someone you know whom you know a former client would benefit from knowing, don’t be afraid to make the connection and introduce them to one another. Your client will be grateful and you’ll be on the top of his or her mind the next time a juicy opportunity comes up.

It’s far easier to keep a current client happy than it is to gain a brand new client. You should always strive to acquire new quality clients; however, it’s possible to get trapped in a never-ending cycle of finding new clients and totally ignoring the old ones.

This is the worst thing a freelance designer can do – it means you’re spending valuable time generating new leads instead of designing, which will ensure that your portfolio work never develops or makes any interesting progress and you never get picked for the cool, high-level jobs you want.

But if you can retain most of your current clients, staying in touch with them so they never forget about you when they need more work done, you’ll have the opportunity to live life at a more leisurely pace (well…for a freelancer, that is) and spend more time designing.

Now that you have finished this project, here are five questions you should ask before starting your next.

The post Those Things You Must Do When Ending a Freelance Design Project appeared first on Speckyboy Design Magazine.

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

Jeremy Gillespie

www.jackpinewebdesign.com