1Clanek

Today, I want to talk about our favorite subject as designers: clients. Oh, clients. You can’t live with them, you can’t punch them! The primary thing to remember when dealing with clients is this: you can never – I repeat, never – make a bad client into a great client. Let me say that again: you can never make a bad client into a great client.

Sometimes you can make a bad client into a passable one, but, unless you’re getting compensated extremely well, it’s rarely worth the effort.

An unreasonable, demanding, emotionally disturbed client already has those qualities before you even meet them. It’s not personal – they’d most likely be that way with any designer.

If you want to have a challenging yet rewarding, insanity-free working relationship, you must start with a good client.

Fair enough, you say. But how am I supposed to tell which clients are good and which ones aren’t before I work with them?

In my experience, there’s an easy way to determine which clients are worth the trouble and which ones you should just skip over, and it has to do with their budget. Not the specific amount, per se, but their attitude towards budgeting in general.

There’s a profoundly important difference between a reasonable client who doesn’t have much of a budget, and a client who’s just, well, cheap.

The former you should, by all means, seek out and work with – the little guys need good design too! Clients who can’t pay you what you feel your standard rate should be can usually help you out in other ways that will lead to much more lucrative opportunities later. Let me explain what I mean.

Something For Nothing

When working for less than your standard rate (and again, there’s nothing wrong with that, especially in today’s economy), you should always negotiate for something else in exchange for your “discount.”

And you should treat it like a discount. Your client is receiving your services at a lower rate, and they need to be aware that, as such, there are certain deliverables that won’t be available to them.

If your client can’t pay the initial price you quote them for the work, the second price must carry a reduced amount of work. The initial price you quoted them has value in the client’s mind.

If you are willing to “bend” on that price – if you, say, do a job worth several thousand dollars for a few hundred – what happens is that you reduce your perceived value to the client. The client will know then that you weren’t serious about your standard rate, and they may try to take advantage of you and get more work for even less money.

Always be firm about how much you cost. When clients know that you value your work and don’t compromise your own worth by wavering on your prices, they will value your work as well. Just as you wouldn’t expect to get an oil change and new brakes for the price of a car wash, your potential clients must know that there is a limit to how much service you can provide on a budget.

If a client is worth working for, they’ll accept that your higher-priced services are out of their range, and will be willing to discuss other, non-monetary options as part of your compensation. What kind of options? Well, I’ll tell you.

If you’re dealing with a reasonable client, you’ll be able to negotiate for three main forms of non-monetary compensation. You can negotiate for just one, or all three, but using this technique will help you quickly weed out those clients who don’t value you or your work.

The three main elements that can be included in your compensation are:

1. Referrals

Not “exposure” – that’s a vague word which can mean almost anything. But actual, genuine referrals from your client personally to people who can and will hire you. A list of warm leads directly from a paying client is worth its weight in gold, and can sometimes be more valuable than a single paying job.

It’s not too much to ask, and if you’ve got a good client, they should be more than happy to provide at least a few. If not, run far away. That client is not worth the trouble because they aren’t going to get any more reasonable.

If someone can’t be bothered to come up with two or three referrals among their friends or colleagues, what makes you think they’re going to trust your design decisions or resist unnecessary scope creep?

2. Creative Freedom

You can and should use your lack of financial compensation as leverage to secure more creative freedom on a project than you would have otherwise.

This doesn’t mean go berserk with the composition or give them something completely inappropriate. But a client who’s receiving a discounted form of your services can absolutely be expected to hand you the reins and allow you the freedom to make the decisions you feel are best for the project.

3. A Guarantee of Future Paid Work

Whether it’s at your current rate or at a more standard one, your client can offer to provide you with more work in lieu of more money upfront.

Perhaps something more challenging that has a bigger budget, or something recurring that you can deliver on a regular basis. Be creative, and think of all the ways you can provide value to your client.

A good, satisfied client will be happy to give you first priority for future work, if you let them know that you would like it to be part of your compensation. Again, this is not too much to ask for, and any client who thinks it is is a bad client. Period. Runaway.

Never Slave Away for Peanuts

Always make sure to discuss these options with your clients to make sure you’re never just slaving away for peanuts. It goes without saying that, if you expect to receive these kinds of extras, you should do your very best work and provide as much value to your client as possible for the price they’re paying.

No client is going to refer a bad designer to their friends, nor should they be expected to. But if you’re awesome, and you do awesome work, there’s no reason why you shouldn’t expect to be fairly compensated, even if the client is on a budget.

I think that the most important thing a designer can learn is how to be discerning, and how exactly to go about negotiating extras.

There’s an art to it, which many designers, sadly, have not yet mastered. The key is to project confidence and subtly make your clients aware that you have other options without coming off as arrogant, rude, or condescending.

By gently but firmly negotiating extras in your compensation package, you’ll make even the most budget-conscious clients respect you and desire to work with someone of your performance level.

And the “cheap” clients who won’t budge? Leave ’em – they’re impossible conversions!

The post How to Work With Both Good & Bad Design Clients appeared first on Speckyboy Design Magazine.

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

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

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

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

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

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

Look at the Potential Risks and Benefits

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

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

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

Pros

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

Cons

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

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

Usage Statistics Matter

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

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

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

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

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

Fallbacks May Be an Option

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

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

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

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

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

Keep Moving Forward

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

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

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

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

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

Google has a way of creating a wave of panic among both web designers and website owners. When they make a change to their search algorithm, people start scrambling to catch up. It’s easy to understand why. No one wants their SEO rankings to suffer.

So, when the Core Web Vitals metrics were announced, the response was pretty predictable. As these changes are based on site performance, our attention has turned to ensuring load times are lightning-fast.

But it’s not always simple. Websites that run a content management system (CMS) such as WordPress can be especially challenging. There are a lot of factors at play. Therefore, improving performance requires a multi-pronged approach.

Where to start? Check out our guide to boosting the Core Web Vitals score of your WordPress website.

Implement Caching

One of the simplest ways to increase the speed of a WordPress website is to implement caching. In many cases, a previously sluggish site will become significantly faster with this single step. This holds true even on relatively cheap hosting.

By default, WordPress pages and posts must retrieve content and settings from the site’s database. This takes time. Cache, on the other hand, will serve up content as static HTML files – cutting out the need for a database call. With the middleman (i.e., database) out of the way, snappier load times will follow.

Some hosting packages, particularly managed WordPress hosting, will include server-based cache. This is often the best option, as it requires very little from web designers and performs quite well. It may need to be cleared out every so often. Otherwise, it’s a hands-off experience. And it can be effectively combined with a plugin to further enhance speed.

Even if your host doesn’t provide caching on the server level, you can still optimize performance via a plugin. Caching plugins vary in scope, complexity and pricing. But they do provide tangible results when it comes to improving load times. That, in turn, is a positive boost for Core Web Vitals as well.

Defer Loading of Render Blocking Scripts and Styles

When testing your website’s performance in Google PageSpeed Insights, the subject of render-blocking resources seems to come up a lot. These are the scripts and styles that aren’t considered “critical” – meaning they’re not required to render the “above-the-fold” page content.

These resources can get in the way of faster load times. Specifically, they impact the “Largest Contentful Paint (LCP)” score in Core Web Vitals. This is the time it takes for the main content area of a page to load. Reducing LCP is, well, vital.

One way to improve the situation is to delay (or defer) when various content elements (images, videos, block-level text) load. This ensures that only the needed scripts and styles load first, while everything else comes in afterward.

Along with minification, many WordPress caching/optimization plugins also happen to include this type of functionality. It can take a bit of experimentation, however, as deferring the wrong resource can be problematic.

Be sure to test out any changes you’ve made and check the browser console for errors. Once you find the right configuration, the number of render-blocking resources on your page should be significantly reduced.

Optimize Images

The widespread use of large hero images and complex sliders only adds to the challenge of performance optimization. These assets may look nice, but can easily add up to megabytes worth of data. That’s not going to get you a passing grade for Core Web Vitals – particularly on mobile.

Thankfully, there are a couple of ways to lighten the load. First and foremost, get rid of any images you deem unnecessary. The removal of even one large image can make a difference.

The rest of your images can be optimized. This will reduce their file size and lessen the impact they have on load time.

How you go about image optimization is up to you. You could download a copy of your worst offenders and compress them using your favorite image editor, then upload them back onto your website. Or, you can automate the process with a helpful WordPress media plugin.

Responsive Images

For mobile users, WordPress includes the ability to serve up responsive images via srcset. In fact, it will automatically do the dirty work for you on images placed within your content. This is incredibly valuable, as it prevents massive desktop-sized media from slowing down the mobile user experience. For images outside of the main content area, you may need to do some custom work to implement this feature.

Modern Image Formats

It’s also worth looking at the file formats you’re using. For example, Google’s WebP format can often reduce file size while maintaining image quality. Note that some newfangled formats aren’t supported in legacy browsers (ahem, IE), so fallback versions may be necessary. Plugins can help with that as well.

Lazy Load All the Things

Lazy load functionality only loads items once they are in the browser’s viewport. By delaying the loading of images, iframes, and other third-party content (such as social media widgets), you can focus resources on the elements users will see first.

WordPress already implements native, browser-based lazy loading to images. When you add an image to a page or post, the loading="lazy" attribute is placed within the <img> tag. That is, provided the image includes height and width attributes.

This is great – but what about other elements, such as videos or iframes? These items can also weigh down a page when loaded right from the get-go.

Iframes are now lazy-loaded by default – so no worries there. Some more complex elements may require custom code or a plugin to implement this functionality.

Clear Out the Clutter

Over time, even a well-maintained WordPress site can become cluttered. A clogged database, unused plugins that are still active, a bloated theme with features you’re not using – it happens. And it can also drag down your Core Web Vitals.

That’s why it’s important to tidy up now and again. Your site’s database can be optimized manually or set to do so regularly. Unused plugins can be deactivated and trashed. Themes can be made leaner or replaced with something better.

Study up on what’s slowing down your website, find the culprits and deal with them. You might be surprised at how much of a difference this can make.

Improve Your Website’s Core Web Vitals

Core Web Vitals complicates the already tricky process of optimizing WordPress website performance. Even a website that scores well in other performance metrics may still fall short in this area. This shines through in mobile testing most of all.

The good news is that there are plenty of little things designers can do to catch up. Implementing cache sets a great foundation and provides an immediate boost. From there, it’s a matter of reducing file sizes and loading up styles and scripts in order of importance.

Taking things even further, it also makes sense to adjust your site’s CSS with Core Web Vitals in mind. This can help with the dreaded Cumulative Layout Shift (CLS) score and cut down on bloat.

In general, the things that are good for performance are also good for Core Web Vitals. Scores can improve rather quickly. Just know that it’s going to take some trial-and-error to sort out some of those individual shortcomings.

The overarching goal is to ensure that only the essentials are loaded when a user visits your website. Doing so will make both visitors and Google quite happy.

The post Tips for Improving the Core Web Vitals of Your WordPress Website appeared first on Speckyboy Design Magazine.

Welcome to the W3C design system – A look at how the W3C’s design system is structured. You can even download templates for use in your own projects.

How to Work With Both Good & Bad Design Clients – How to determine which clients are worth the trouble and which ones you should just skip over.

CSS Container Query Units – Experimenting with CSS container queries using different units.

Paper to HTML Converter – Check out an experimental prototype that aims to render scientific papers in HTML.

Doodle Ipsum – Create custom doodles for use on your project prototypes, etc.

10 WordPress Plugins to Help Improve Website Accessibility – A wide selection of tools to help us meet the challenges of accessibility.

Purity UI Dashboard – Grab a copy of this free ReactJS Dashboard based on Chakra UI.

Koloicons – A fully-customizable library of 3,000+ free SVG icons.

Mechanic – An open-source framework that makes it easy to create custom, web-based design tools that export design assets right in your browser.

Clients Make Too Many UX Decisions. Here’s How to Stop Them. – Tips for inviting client feedback while keeping them at a safe distance from UX.

iPod.js – This JavaScript app uses the familiar iPod Classic UI and pairs it with the ability to connect with popular streaming services.

Basic Pattern Repository – A collection of simple and seamless SVG patterns that you can copy and paste into projects.

Faust.js, the Framework For Headless WordPress – Take a peek at WPEngine’s new headless WordPress framework.

Grainy Gradients – Learn how to create noise effects with CSS and SVG.

Tips for Improving the Core Web Vitals of Your WordPress Website – Optimize your site’s performance and stay in Google’s good graces.

iPhone 13 Mockup (FREE) – Add the latest iPhone to your device mockup collection with this free Figma file.

Create Content That Targets Your Existing Design Clients – Write informative content that is sure to pique your client’s interest.

Tove – This new WordPress theme takes advantage of Full Site Editing (FSE) and the Gutenberg block editor.

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

Did you miss our previous article…
https://www.1clanek.info/?p=1206

The bokeh effect has a multitude of uses within digital art. It can be overused, sure. But it can also be simply stunning. Trying to recreate this look on your own would be a time-consuming task. Thank goodness for Photoshop actions, right?

What you’ll find here is a fantastic set of Photoshop actions that greatly simplify the process for making the bokeh effect. Most of these can be implemented with just one click and offer a wide range of stunning results.

It’s a good idea to try a few of these effects for yourself to see which would best serve your work. You’re certain to find something that works well, and that speaks to your specific needs. Now, without further delay, let’s jump right into the list!

Dual Light Photoshop Actions

The Dual Light Photoshop Actions set creates a beautiful double light effect on any photo of your choosing and add smoke and bokeh effects. The final image is layered and can be customized in a wide number of ways. This action set also comes with 20 color presets.

Soft Focus Photoshop Actions

Another action set you might want to consider is the Soft Focus Photoshop Action. This one works quite simply. Just add it to a specific area of a photo that you want to remain in sharp focus, then play the Action. The end result is a soft focus on the rest of the image which provides a bokeh effect.

Bokeh Kit for Photoshop

The Bokeh Kit for Photoshop is another fantastic option. It’s minimal in effect but really cool and can transform your photographs in a variety of ways. This kit actually has a lot going for it, in that it’s not just a bokeh Photoshop action. It also comes with 8 bokeh gradients and 40 bokeh brushes to help give you more control over the end result.

Bokeh Bomb Creation Kit for Photoshop

Another great option is the Bokeh Bomb Creation Kit for Photoshop. It’s chock full tools and resources for adding bokeh effects to your photographs. This kit comes with eight smoke effects, fast rendering, and snapshot prerendering play. It’s also nondestructive, so you can revert an image back to your original photo if need be. Other features include 20 bokeh gradients and 180 bokeh overlays.

Holidays Bokeh Photoshop Action

You might always want to check out the Holidays Bokeh Photoshop Action set. This one comes with just one action file and one brush file and is supplemented by a thorough how-to file. It’s completely easy to use, non destructive and compatible with all of the latest versions of Photoshop.

Bokeh Photoshop Actions

This is another great option designed with selfies in mind. This Photoshop action works by turning your selfies or iPhone photos into professional-looking photos by adding a bokeh effect. The action has 10 color effects that you can use as well to further customize the finished product. A help file and video tutorial are also included for your convenience.

Brightum Soft Focus Photoshop Action

The Brightum Soft Focus Photoshop Action is definitely worth considering as well. This action works by creating soft focus and light effects on your photos. All you have to do is select on area then click play. From there, you can make adjustments to color, contrast, and gradients as well thanks to 10 color presets and well-organized layers.

Shimmer Photoshop Action

If you want to leave your viewers dazzled, the Shimmer Photoshop Action is a great option. This action works as follows: brush the area of the photo you want to add a sparkle effect to then click play. That’s it! The end result is bright area of the photo that draws the eye and looks like it’s shining with tiny pieces of glitter.

Circles Animation Photoshop Action

And check this one out! The Circles Animation Photoshop Action is a great one to add to your toolbox. With just one click, you can add soft focus light effects around The end specific area of a photo that you select. The end result is a sparkling effect that pulls in the eye.

Glory Photoshop Action

The Glory Photoshop Action is super easy to use. All you have to do is fill in your chosen subject with a color of your choice, select a light direction, then play the action. That’s it! You can select from 8 different light directions and the end result is non destructive as well so you can undo the effect if you don’t like how it turned out.

Magicum Studio Lights Photoshop Action

The last action on our list is the Dreamy Photoshop Action. This one adds firefly effects with soft focus to your images. Select the area you want to highlight and click play. That’s all there is to it. This action comes with 10 color presets, graphic elements, and it’s layered and organized for convenient use (and undoing, should the need arise).

We hope you enjoyed this list of the best Photoshop actions for creating the bokeh effect. Bokeh is versatile and relevant for a wide number of photographs and design choices. And in the end, after you’ve experimented with a few of the actions provided here, you’re bound to capture a look that fulfills your artistic preferences. Best of luck!

The post The 10 Best Photoshop Action Sets for Creating the Bokeh Effect appeared first on Speckyboy Design Magazine.

If you’re working on a website redesign for your creative agency, it pays off to have a few design resources stored on your computer that will help you speed up the design process. This includes web templates for Photoshop that you can use when you need inspiration.

In this roundup, we’ve gathered web templates that are perfect for design agencies and will help you complete the redesign concept in no time.

We also have free portfolio PSD templates, free landing page PSD templates, free eCommerce PSD templates and free blog & magazine PSD templates. If you’re looking for a complete PSD web template round-up, take a look at this post.

Evana – Creative Agency PSD Template

The Evana template starts off the roundup strong with its creative and feminine design. Although the template looks like it would work well for feminine websites, you can easily customize the design to use whatever colors you prefer.

Poseidon – Creative Portfolio & Agency PSD Template (Envato Elements)

The Poseidon template will not disappoint you as it comes with an impressive number of PSD files that will help you design not only the homepage for your agency website but also all the other important pages needed to win new clients.

MI Talent – Web Design Agency PSD Template

The MI Talent has a minimal and simple design paired with classic typography that gives it an upscale, timeless look. The template includes several PSD files that are well-organized for quick and easy editing.

Splashes Creative Agency Template (Envato Elements)

The Splashes is a unique and creative template, suitable for a wide variety of agency websites. Standout features include fresh and clean design and included HTML files so you can get your new website design live as fast as possible.

Piroll – Free Agency & Portfolio PSD Templates

This template has a modern look that provides great flexibility. You can use it for designer, photography, web agency and studio websites. The template comes with 5 PSD sample pages and well-organized layers.

Deck – Free Card-Style PSD Template

Try the Deck template if you’re looking for a unique layout for your agency website. This template has an interesting card-based layout and comes with 45 unique templates and more than 200 design elements.

Cesis – Creative Agency PSD Web Template

The Cesis template has a professional design with a corporate feel so don’t miss this one if that’s the style you prefer. The template is well-structured and includes layers that make it easy to customize this design.

Digital Design Agency Free PSD

The Digital Design Agency template has a fun and fresh design with pops of color that draw your visitors’ attention to your call to actions or important sections such as portfolio or contact. The template includes a fully editable Photoshop file.

Free Creative Studio Website PSD Template

This free Creative Studio Website template includes both Photoshop and Illustrator formats. The template has a dark color scheme which gives it a sophisticated look and feel but you can easily customize it to match your brand.

Startuply – Design Agency Landing Page PSD Template

The Startuply is a perfect choice if all you want is a simple but creative landing page. Customize this template with your brand’s colors and fonts and make sure to include all the information about your portfolio, contact information, and agency history.

Cesis Creative Agency Free PSD Template

This minimal and unique PSD template comes with 8 different page templates so you can design your entire agency website. The template is based on 1920px screen and 1170 grid system and includes stunning full-screen components.

Free Agency Landing Page PSD

The Free Agency Landing Page features a modern design with an interesting color scheme and clean typography. You’ll find several PSD files that are well-organized for quick editing.

Coming up with a perfect design for your creative agency can be time-consuming. Save time with one of the premade web templates for Photoshop so you can get the initial design out of the way and focus on bringing your website to life.

The post 10 Free Design Agency Web Templates for Photoshop appeared first on Speckyboy Design Magazine.