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.