Webdesign Tips

What Are the Biggest Threats to Freelance Web Designers?

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

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

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

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

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

The Growing Complexity of Building Websites

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

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

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

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

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

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

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

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

One-Stop Agencies

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

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

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

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

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

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

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

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

People shopping at a convenience store.

Poor Business Habits

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

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

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

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

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

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

A cluttered office.

Control What You Can

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

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

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

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

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

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

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

Webdesign Services

8 CSS Snippets for Creating Split-Screen Layouts

Split-screen UIs have become a popular way to showcase content. We often think of them as being utilized in areas where we want users to choose between two options. But we’re also seeing other creative uses of the technique.

For example, a split-screen can also be used to great effect as a full-page layout or even as a transitional animation.

Here are 10 examples of split-screen UIs, complete with source code that you can edit to fit your needs. Each has something unique to offer.

Making a Choice by Bridget Reed

This is certainly the most common way to use a split-screen. A website visitor is presented with two options. Here, the background image colors help provide nice separation, while the rounded logo in the middle ties everything together.

See the Pen Website – Split Screen by Bridget Reed

Splitting Up a Slider by Fabio Ottaviani

A split-screen also makes for an interesting transitional effect, as we see with the slideshow example below. Scrolling down causes each half of the screen to split and reveal the next image in the queue. The result is a very smooth and high-end UI.

See the Pen Split Slick Slideshow by Fabio Ottaviani

Split Page Layout With a Static Sidebar by Travis

With HD screens dominating and 4k gaining ground, more designers are taking advantage of that extra screen real estate. This example layout provides a static sidebar with a bold background image. But it also looks great on smaller screens, as that sidebar becomes a header. It’s both attractive and functional.

See the Pen Split screen layout by Travis

For Comparisons’ Sake by Envato

Another trend gaining traction is utilizing the split-screen to compare “before” and “after” images. Here we have a setup that allows users to simply move their mouse to see the differences between two images. Utilizing just a little bit of JavaScript, this UI is an interesting twist on the technique.

See the Pen Split-Screen UI by Envato Tuts+

Alternating Gallery by Kseso

The “half by half” scrolling effect with this example adds a unique touch. It almost seems as if the cards and photos are alternately stacked on top of each other as you scroll. And since it uses less than 150 lines of pure CSS, load time shouldn’t be much of a concern.

See the Pen Scrolling half by half pure #CSS by @Kseso by Kseso

Magazine Split-Layout by Brian Haferkamp

This layout emulates something you might find in a print magazine. The bold title and introductory text on the left provides terrific contrast with the photo and multicolumn article on the right. Overall, it makes for a very slick and professional look.

See the Pen Personal Profile // Keanu Reeves by Brian Haferkamp

Split-Layout Services Overview by Luke Meyrick

The concept here is really cool from a branding perspective. It uses a split-screen within a page with a static branding message on the left, combined with a scrollable listing of services offered on the right. It’s just different and a way to stand out from the crowd a bit.

See the Pen by Luke Meyrick

3D Carousel Split-Layout by Paul Noble

The transitions between slides in this carousel literally add a new dimension to split screens. Each slide “splits” in half as the next one is revealed in a cool 3D format. There’s a certain machine-like quality here that could be a great fit for an engineering or industrial firm.

See the Pen Split 3D Carousel by Paul Noble

Splitting’s the Difference

What started as a way to choose between A or B has become something more. Split layouts and animations are offering designers another creative avenue for encouraging interaction.

While we still see them in their traditional form, we also find that they are being used to enhance things like scrolling through content and image galleries. It’s even being used to mimic print design techniques.

Hopefully, the examples above will serve as an inspiration for ways you can add a split UI to your own projects. Have fun experimenting and implement features that both look great and add something unique to the mix.

The post 8 CSS Snippets for Creating Split-Screen Layouts appeared first on Speckyboy Design Magazine.

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

Webdesign Services

Weekly News for Designers № 604

A framework for building Open Graph images – A look at GitHub’s new Open Graph image generator.
Example from A framework for building Open Graph images

There Is No Such Thing As A CSS Absolute Unit – Learn why CSS units aren’t so absolute after all.
Example from There Is No Such Thing As A CSS Absolute Unit

UI patterns & design inspiration from real products – Browse this curated library of screenshots & interaction patterns from the world’s best digital products.
Example from UI patterns & design inspiration from real products

Learn How to Determine Website Project Requirements Like a Pro – Strategies that can help you paint a clearer picture of what a website project will require.
Example from Learn How to Determine Website Project Requirements Like a Pro

uxbullshit – Read some not-so-recommended UX quotes.
Example from uxbullshit

Image optimisation: the ultimate guide – Learn the ins and outs of getting the best performance from your images.
Example from Image optimisation: the ultimate guide

The State of Developer Ecosystem 2021 – Annual look at the latest trends in the tech industry, as well as interesting facts about tools, technologies, programming languages, and many other facets of the programming world.
Example from The State of Developer Ecosystem 2021

Will Full Site Editing Help WordPress Themes Finally Reach Their Potential? – How Full Site Editing (FSE) could bring a one-size-fits-all approach to WordPress themes.
Example from Will Full Site Editing Help WordPress Themes Finally Reach Their Potential?

Layout with Reveal Animations and Content Preview – Learn to create experimental reveal animations on typographic elements as a repeating pattern.
Example from Layout with Reveal Animations and Content Preview

Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property – How a new CSS property could be a solution to a common problem.
Example from Prevent unwanted Layout Shifts caused by Scrollbars with the scrollbar-gutter CSS property

A Web Designer’s Guide to Working on the Go – Tips for staying productive and secure when you’re away from the office.
Example from A Web Designer’s Guide to Working on the Go

Advanced CSS Gradient Editor – This free CSS design app is full of useful features.
Example from Advanced CSS Gradient Editor

8 CSS & JavaScript Code Examples for Creating Interactive Timelines – Top examples of timelines that are both attractive and engaging.
Example from 8 CSS & JavaScript Code Examples for Creating Interactive Timelines

Project Hunt – A resource for finding the latest no-code projects.
Example from Project Hunt

Is it Time to Ditch the Design Grid? – Why the design grid feels more like a hangover from print than ever.
Example from Is it Time to Ditch the Design Grid?

Thinking About The Cut-Out Effect: CSS or SVG? – Which approach works best for a cut-out effect? Here’s a look at the benefits and drawbacks of each.
Example from Thinking About The Cut-Out Effect: CSS or SVG?

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

Webdesign Services

8 CSS & JavaScript Snippets for Creating Onboarding Carousels

Everyone that creates a professional product and cares about their users, takes onboarding seriously. It plays a vital role in bridging the gap between the user and application. It is the foundation of a great user experience. It simply cannot be overlooked.

As there are many onboarding solutions available, to make things easier for you, we have prepared this collection of onboarding CSS and JavaScript code snippets. While they are not all teeming with artistic charm and extravagant illustrations, they will all give you a solid base for creating your own user-friendly onboarding UI.

1. Beautiful Onboarding UI by Fabio Ottaviani

Our first code example is an eye-pleasing onboarding solution that uses beautiful graphics and user-friendly animation. It is based on a conventional horizontal slider that offers the universally known three dots for navigation. It has three screens, but you can easily increase that number to however many your project requires. Use this snippet if you would like to make your onboarding unobtrusive.

See the Pen DailyUI – #023 Onboarding by Fabio Ottaviani

2. Onboarding Slides with jQuery by Hainer Savimaa

While the previous example takes a more traditional route to onboarding, this snippet makes use of a split layout, offering a carefully organized UI for displaying information that allows you to separate the visual content from the textual. Along with the classic dot-based navigation, there are also supporting “Next” and “Back” buttons for those who prefer traditional controls.

See the Pen Onboarding slides with jquery by Hainer Savimaa

3. Simple Onboarding by Nahom Ebssa

This minimally designed onboarding snippet manages to accommodate all of the necessary information in one tiny screen while still providing a comfortable user experience. As for the navigation, it may feel a little unfinished since there is no back button, but you could easily add that in yourself. On the whole, this code snippet could serve as a great foundation for your own onboarding UI.

See the Pen Onboarding by Nahom Ebssa

4. Minimal Onboarding UI by Fersho Pls

Inspired by the outstanding onboarding screens created by Ennio Dybeli, this onboarding snippet, with its minimal design and smoothly animated behavior, isn’t anything ground-breaking in concept. The details are standard, and the transitions are basic, yet they work together perfectly. The concept is simple yet straight-to-the-point. It is ideal for use on smaller projects.

See the Pen Onboarding by Fersho Pls

5. Split-Screen Onboarding Carousel by Dario Corsi

We have already featured a split-screen layout in this collection, but this time, the onboarding UI has been rotated ninety degrees and transformed into a traditional stripe layout – looking pretty much like a basic slider from a few years ago. Beyond that, it has the potential to cover all of the onboarding information that you need to deliver to users. Even though it has a relatively wide layout, you could quickly make it responsive.

See the Pen Onboarding Carousel by Dario Corsi

6. Clasic Onboarding UI by Nick Wanninger

This snippet is not the kind of thing that wins over users with beautiful aesthetics or extraordinary animation. Rather, it serves as a base for your own onboarding creations. It does not have a particularly fancy design – just a classic structure. Unlike the previous snippets, this component comes with short lines instead of dots and standard arrows for navigation instead of the words “Next” and “Back,” but the result still feels intuitive.

See the Pen Onboarding by Nick Wanninger

7. Android App Onboarding by Mat Swainson

This onboarding UI may look dated, but it does its job perfectly well. It comes in two parts. The first shows four standard carousel screens that can be used to offer visitors more information, and the second includes an email subscription form for those who want to get straight to the point by pushing the “Get Started” button.

See the Pen Android App Onboarding by Mat Swainson

8. Open-Source Liquid Swipe by Cuberto

We have looked at solutions that provide a base technique for showing a series of screenshots or animations in a row. Liquid Swipe is a bit different. It is centered around a transition effect that perfectly imitates a liquid swipe behavior that feels incredibly natural. You can download the files from its GitHub repo.


In essence, an onboarding UI can be created using a basic carousel system. All you need to do is divide each slide into two parts. One for content, and the other for navigation. After that, you can add your own creative flair and transition effects to make the user experience not just informative but enjoyable as well.

The post 8 CSS & JavaScript Snippets for Creating Onboarding Carousels appeared first on Speckyboy Design Magazine.

Webdesign Ideas

How to Provide Great Support to Your Web Design Clients

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.

A woman having a phone conversation.

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.

A sign that reads "TRUTH".

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.

A paper airplane.

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

Webdesign Ideas

How to Get Those Creative Juices Flowing Again

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.

energy flowing light stream idea creative

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

Webdesign Ideas

The 12 Best Photoshop Actions for Creating 3D Effects

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.

More Actions: Art Effects, B&W Effects, Bokeh Effects, Cinema & Movie Effects, Comic & Cartoon Effects, Duotone Effects, Dispersion Effects, Double Exposure Effects, Glitch Effects, HDR Effects, Ligh Leak Effects, Retro & Vintage Effects, Sketch Effects, or Text Effects.

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.

Conceptum 3D Sketch Photoshop Action

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.

3D Text Effect Photoshop Action

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.

Anaglyph 3D Photoshop Action

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 Effect Photoshop Actions

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 Text Creator Actions

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.

3D Dispersion Photoshop Action

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.

Animated 3D Parallax Duotone Action

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.

Gold 3D Text Effect Photoshop Action

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.

Real 3D Text Mockup Photoshop Actions

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.

Isometric Illustration 3D Photoshop Generator

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.

Animated 3D Photography Stereoscopic Action

How to Install Photoshop Actions

  1. Download and unzip the action file
  2. Launch Photoshop
  3. Go to Window > Actions
  4. Select Load Actions from the menu and go to the folder where you saved the unzipped action file to select it
  5. The Action will now be installed
  6. To use the newly installed action, locate it in the Action panel
  7. Click the triangle to the left of the action name to see the list of available actions
  8. Click the action you want to play and press the play button at the bottom of the Actions panel

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.

Webdesign Tips

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

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

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

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

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

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

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

Look at the Potential Risks and Benefits

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

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

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

Pros

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

Cons

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

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

Usage Statistics Matter

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

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

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

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

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

Data charts displayed on a screen.

Fallbacks May Be an Option

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

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

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

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

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

A sign that reads: "Trust".

Keep Moving Forward

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

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

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

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

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

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

Webdesign Services

10 WordPress Plugins for Email Marketing Management

Email marketing should be one of the key components of your customer retention strategy. Engaging in regular communication will keep subscribers informed about your latest news and promotions. So it’s vitally important that your website focuses on enticing people to opt-in to your mailing list.

WordPress is an ideal platform for collecting data. There are many plugins available that allow you to connect with your favorite email marketing service. You can even run your own service directly through your website.

Whatever your ideal setup, we’ve collected 10 of the best plugins for managing your email marketing through WordPress.

MailPoet

MailPoet started out as a free/premium plugin that turns your WordPress install into a mailing list service. Their new version continues this (free up to 2,000 subscribers), but also offers to deliver email for you.

This solves one of the tough issues with running your own lists – ensuring messages don’t get caught in spam filters. For that matter, your host server could get blacklisted as well. So sending through your own server in the free version is best left to smaller lists that don’t send very often.

MailChimp for WordPress

The nice aspect of MailChimp for WordPress is that you have the option of creating signup forms directly through the plugin or integrating with other plugins (Contact Form 7, Gravity Forms, Ninja Forms, BuddyPress, WooCommerce and Easy Digital Downloads – to name a few).

Advanced WooCommerce integration is one of the features of the premium edition.

MailChimp for WordPress

Constant Contact Forms

Using Constant Contact Forms, you can enable visitors to easily subscribe to your email list. The plugin also lets you create custom fields so that you can collect additional data.

You can even use the plugin without having a Constant Contact account – but obviously, the features are geared towards those who do use the service.

Constant Contact Forms

Hustle

Hustle provides a means to not only connect with popular services such as MailChimp, Campaign Monitor, Constant Contact, GetResponse and Mad Mimi, it also lets you target users through slide-ins, popups, widgets and shortcodes.

So it’s more of a complete marketing suite that you can use to encourage subscriptions, along with other functionality. It also provides nifty features like social sharing and statistical data regarding opt-ins.

Hustle

MailMunch

It’s fair to say that MailMunch and Hustle are somewhat similar in scope. Where they differ is that MailMunch really is solely focused on email marketing. You can create a variety of different opt-ins ranging from popups, embedded forms, top bar, scroll box and sidebar.

The plugin is compatible with many third-party services (AWeber, Campaign Monitor, Constant Contact, GetResponse, InfusionSoft, and MailChimp). You can also take advantage of A/B testing and analytics.

MailMunch

Email Subscribers & Newsletters

With Email Subscribers & Newsletters, you can take a more holistic approach to email marketing. You’ll be able to collect user information and send out HTML newsletters through your WordPress website.

But you can also set up automatic email notifications when new posts are added to your site. That provides an incredibly easy way to keep users engaged with your content.

Email Subscribers & Newsletters

Contact Form 7 Campaign Monitor Extension

Beyond your standalone opt-in form, it’s a great idea to integrate subscription options into other existing forms on your site. Contact Form 7 Campaign Monitor Extension is one of many available plugins that will do this for you. Compatible with the ever-popular Contact Form 7, users who are filling out a form on your site are just a click away from also subscribing to your Campaign Monitor list.

The very same plugin author has similar offerings for AWeber, GetResponse, iContact and MailChimp.

Contact Form 7 Campaign Monitor Extension

ConvertKit

ConvertKit is a bit of a unique service, as it is geared towards bloggers. It offers some automation features that will help keep your readers in the loop. Their WordPress plugin allows you to connect to your ConvertKit account via API and easily add opt-in forms either globally or on a post-by-post basis.

Overall, it’s a nice option for content creators.

ConvertKit

Yith WooCommerce MailChimp

An online store’s checkout is the perfect opportunity to offer your customers a place to subscribe. After all, if someone is willing to spend some hard-earned cash on your site, there’s a mutual interest in forming a relationship.

Yith WooCommerce MailChimp will hook up with the mailing service and enable customers to subscribe to a list of your choosing via a simple checkbox on the front end.

Yith WooCommerce MailChimp

Newsletter Glue

A relative newcomer, Newsletter Glue enables WordPress site owners to create email newsletters directly within the CMS. The unique selling point is that the plugin connects to an outside email service provider via an API. You write the newsletter in WordPress and send it through the provider. The result is a familiar content creation UI and a more reliable way to actually deliver those newsletters.

The free version connects to your MailChimp account. The pro version has more sending options, along with the ability to embed social media and WordPress posts.

Newsletter Glue

Bonus: MailOptin

MailOptin aims to be a complete solution for email marketing via WordPress. It connects with a wide variety of third-party providers (MailChimp, Constant Contact, etc.). But it also enables you to create list signup forms that can be implemented in several ways and even let you send mail to your lists from within WordPress. You can run your entire email marketing operation without leaving your website. A premium version adds automation capabilities, like sending out new post notifications, enables mail scheduling and more.

MailOptin

WordPress as a Marketing Hub

The plugins profiled above provide some flexibility with how you collect and distribute information through email marketing channels. Some even allow you to create a channel that’s all your own. This wide array of options allows you to tailor things to match your needs and philosophy.

What’s really great is that you can reach people on any part of your site. Whether through a traditional sidebar widget or an option on your checkout form, you can encourage visitors to build a relationship.

If you’re just getting started with email marketing, think about the various ways you can implement it into what you’re already doing. For example, if people are already interacting with a specific feature (like a contact form), then it makes perfect sense to add an opt-in. But you may also want to approach them at other times, like at the bottom of a blog post or through a popup window.

Wherever and however you want to reach out, there are WordPress plugins out there to help make it happen.

The post 10 WordPress Plugins for Email Marketing Management appeared first on Speckyboy Design Magazine.

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

Webdesign Services

Weekly News for Designers № 620

330 React Interview Questions – Perhaps the most comprehensive collection of React JS interview questions you’ll ever find.
Example from 330 React Interview Questions

The Power of Automating WordPress – A look at WordPress automation tools and basic examples of what they can do for you.
Example from The Power of Automating WordPress

Layout patterns – Check out this collection of CSS layouts for common UI elements.
Example from Layout Patterns

Parallax Powered by CSS Custom Properties – A step-by-step guide to creating some unique parallax effects.
Example from Parallax Powered by CSS Custom Properties

JOY.JS – This JavaScript library provides a fun GUI for creating your own tools.
Example from JOY.JS

10 WordPress Plugins to Supercharge Advanced Custom Fields – Power up your usage of ACF with these companion plugins.
Example from 10 WordPress Plugins to Supercharge Advanced Custom Fields

Flip, Invert, and Reverse – Learn some handy SVG transformation techniques with this tutorial.
Example from Flip, Invert, and Reverse

Slideshow with Filter Reveal Effect – The steps behind building a slideshow page layout with a filter enhanced navigation effect.
Example from Slideshow with Filter Reveal Effect

Stop Worrying About People Stealing Your Ideas – Why you don’t need to be paranoid about others taking your ideas.
Example from Stop Worrying About People Stealing Your Ideas

RegexLearn – This tool will help you learn RegEx with step-by-step instructions.
Example from RegexLearn

A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH – Some advice on the not-so-obvious things you have to keep in mind when handling colors in CSS today.
Example from A Guide To Modern CSS Colors With RGB, HSL, HWB, LAB And LCH

25 Free Bootstrap Dashboard & Admin Templates – Find the perfect free Bootstrap template for your application’s dashboard.
Example from 25 Free Bootstrap Dashboard & Admin Templates

Using Position Sticky With CSS Grid – Learn how to make sticky elements play nicely with the modern CSS layout technique.
Example from Using Position Sticky With CSS Grid

Runno – Use this tool to create runnable code examples.
Example from Runno

How WordPress Full Site Editing Could Impact the Design Process – This new feature has the potential to change how we design for WordPress.
Example from How WordPress Full Site Editing Could Impact the Design Process

Swiffy Slider – A slider and carousel script that takes advantage of modern browser technology.
Example from Swiffy Slider

BubblesJS – A visualization framework that provides a variety of chart types, filters and KPIs that can be composed to create cross connected dashboards.
Example from BubblesJS

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