September 27, 2024

Slide Through Unlimited Dimensions With CSS Scroll Timelines

The creator of CSS has said he originally envisaged CSS as the main web technology to control behavior on web pages, with scripting as a fallback when things weren’t possible declaratively in CSS. The rationale for a CSS-first approach was that “scripting is programming and programming is hard.” Since introducing the :hover pseudo-class, CSS has been standardizing patterns developers create in JavaScript and “harvesting” them into CSS standards. When you think about it like that, it’s almost as if JavaScript is the hack and CSS is the official way.

We can, therefore, feel less dirty implementing script-like behavior with CSS, and we shouldn’t be surprised that something like the new scroll-timeline feature has appeared with pretty good browser support. Too many developers implemented clever parallax scrolling websites, which has summoned the CSS feature genie we cannot put back in its bottle. If you don’t want janky main-thread animations for your next parallax-scrolling website, you must now come to the dark side of hacking CSS. Just kidding, there is also a new JavaScript API for scroll-linked animations if imperative programming better fits your use case.

Migrating a JavaScript sample to CSS

It was satisfyingly simple to fork Chris Coyier’s pre-scroll-timeline example of a scroll-linked animation by replacing the CSS Chris was using to control the animations with just one line of CSS and completely deleting the JavaScript!

body, .progress, .cube {
  animation-timeline: scroll();
}

Using the scroll() function without parameters sets up an “anonymous scroll progress timeline” meaning the browser will base the animation on the nearest ancestor that can scroll vertically if our writing mode is English. Unfortunately, it seems we can only choose to animate based on scrolling along the x or y-axis of a particular element but not both, which would be useful. Being a function, we can pass parameters to scroll(), which provides more control over how we want scrolling to run our animation.

Experimenting with multiple dimensions

Even better is the scroll-scope property. Applying that to a container element means we can animate properties on any chosen ancestor element based on any scrollable element that has the same assigned scope. That got me thinking… Since CSS Houdini lets us register animation-friendly, inheritable properties in CSS, we can combine animations on the same element based on multiple scrollable areas on the page. That opens the door for interesting instructional design possibilities such as my experiment below.

Scrolling the horizontal narrative on the light green card rotates the 3D NES console horizontally and scrolling the vertical narrative on the dark green card rotates the NES console vertically. In my previous article, I noted that my past CSS hacks have always boiled down to hiding and showing finite possibilities using CSS. What interests me about this scroll-based experiment is the combinatorial explosion of combined vertical and horizontal rotations. Animation timelines provide an interactivity in pure CSS that hasn’t been possible in the past.

The implementation details are less important than the timeline-scope usage and the custom properties. We register two custom angle properties:

@property --my-y-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --my-x-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: -35deg;
}

Then, we “borrow” the NES 3D model from the samples in Julian Garner’s amazing CSS 3D modeling app. We update the .scene class for the 3D to base the rotation on our new variables like this:

.scene {
  transform: rotateY(var(--my-y-angle)) rotateX(var(--my-x-angle));
}

Next, we give the <body> element a timeline-scope with two custom-named scopes.

body {
  timeline-scope: --myScroller,--myScroller2; 
}

I haven’t seen anything officially documented about passing in multiple scopes, but it does work in Google Chrome and Edge. If it’s not a formally supported feature, I hope it will become part of the standard because it is ridiculously handy.

Next, we define the named timelines for the two scrollable cards and the axes we want to trigger our animations.

.card:first-child {
  scroll-timeline-axis: x;
  scroll-timeline-name: --myScroller;
}

.card:nth-child(2) {
  scroll-timeline-axis: y;
  scroll-timeline-name: --myScroller2;
}

And add the animations to the scene:

.scene {
  animation: rotateHorizontal,rotateVertical;
  animation-timeline: --myScroller,--myScroller2;
}

@keyframes rotateHorizontal {
  to {
    --my-y-angle: 360deg;
  }
}

@keyframes rotateVertical {
  to {
    --my-x-angle: 360deg;
  }
}

Since the 3D model inherits the x and y angles from the document body, scrolling the cards now rotates the model in combinations of vertical and horizontal angle changes.

User-controlled animations beyond scrollbars

When you think about it, this behavior isn’t just useful for scroll-driven animations. In the above experiment, we are using the scrollable areas more like sliders that control the properties of our 3D model. After getting it working, I went for a walk and was daydreaming about how cool it would be if actual range inputs could control animation timelines. Then I found out they can! At least in Chrome. Pure CSS CMS anyone?

While we’re commandeering 3D models from Julian Garner, let’s see if we can use range inputs to control his X-wing model.

It’s mind-boggling that we can achieve this with just CSS, and we could do it with an arbitrary number of properties. It doesn’t go far enough for me. I would love to see other input controls that can manipulate animation timelines. Imagine text fields progressing animations as you fill them out, or buttons able to play or reverse animations. The latter can be somewhat achieved by combining the :active pseudo-class with the animation-play-state property. But in my experience when you try to use that to animate multiple custom properties, the browser can get confused. By contrast, animation timelines have been implemented with this use case in mind and therefore work smoothly and exactly as I expected.

I’m not the only one who has noticed the potential for hacking this emergent CSS feature. Someone has already implemented this clever Doom clone by combining scroll-timeline with checkbox hacks. The problem I have is it still doesn’t go far enough. We have enough in Chrome to implement avatar builders using scrollbars and range inputs as game controls. I am excited to experiment with unpredictable, sophisticated experiences that are unprecedented in the era before the scroll-timeline feature. After all, if you had to explain the definition of a video game to an alien, wouldn’t you say it is just a hyper-interactive animation?

Slide Through Unlimited Dimensions With CSS Scroll Timelines originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

from CSS-Tricks https://ift.tt/pUX7wjR
Gain $200 in a week
via Read more

September 27, 2024

How To Manage Dangerous Actions In User Interfaces

By definition, an interface is a layer between the user and a system, serving the purpose of communication between them. Interacting with the interface usually requires users to perform certain actions.

Different actions can lead to various outcomes, some of which might be critical.

While we often need to provide additional protection in case users attempt to perform dangerous or irreversible actions, It’s good to remember that one of the ten usability heuristics called “Error Prevention” says:

“Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.”

What Is A Dangerous Action?

Surprisingly, when we talk about dangerous actions, it doesn’t necessarily mean that something is being deleted.

Here’s an example of a dangerous action from the banking application I use:

The bank approved a loan for me, and as soon as I clicked “Get Money,” it meant that I had signed the necessary documents and accepted the loan. All I have to do is tap the yellow button, and I’ll get the money.

As a result of an accidental tap, you might end up taking a loan when you didn’t intend to, which is why this action can be considered significant and dangerous.

Therefore, a dangerous action does not necessarily mean deleting something.

Some examples may include the following:

Sending an email,
Placing an order,
Publishing a post,
Making a bank transaction,
Signing a legal document,
Permanently blocking a user,
Granting or revoking permissions.

Ways To Confirm Dangerous Actions

There are many methods to prevent users from losing their data or taking irreversible actions unintentionally. One approach is to ask users to explicitly confirm their actions.

There are several ways to implement this, each with its own pros and cons.

Modal Dialogs

First of all, we should understand the difference between modal and non-modal dialogs. It’s better to think about modality state since dialogs, popups, alerts — all of these might be presented either in the modal state or not. I will use the term dialogs as a general reference, but the keyword here is modality.

“Modality is a design technique that presents content in a separate, dedicated mode that prevents interaction with the parent view and requires an explicit action to dismiss.”

— Apple design guides

Modal dialogs require immediate user action. In other words, you cannot continue working with an application until you respond in some way.

Non-modal dialogs, on the other hand, allow you to keep using the application without interruption. A common example of a non-modal element is a toast message that appears in the corner of the screen and does not require you to do anything to continue using the app.

When used properly, modal dialogs are an effective way to prevent accidental clicks on dangerous actions.

The main problem with them is that if they are used to confirm routine actions (such as marking a task as done), they can cause irritation and create a habit of mindlessly confirming them on autopilot.

However, this is one of the most popular methods. Besides, it can be combined with other methods, so let’s dive into it deeper.

When To Use Them

Use modal dialogs when a user action will have serious consequences, especially if the result of the action is irreversible. Typical cases include deleting a post or project, confirming a transaction, and so on.

It depends on what kind of action users want to take, but the main thing to keep in mind is how serious the consequences are and whether the action is reversible or not.

Things To Keep In Mind

Avoid vague language.
If you ask users, “Are you sure?” chances are, they will not have any doubts.
In the title, specify what exactly will happen or which entity will be affected (e.g., project name, user name, amount of money).
Provide an icon that indicates that the action is dangerous.
It both increases the chances that users will not automatically confirm it and is good for accessibility reasons (people with color blindness will notice the icon even if it appears grey to them, signaling its importance).
In the description, be specific and highlight the necessary information.
The CTA button should also contain a word that reflects the action.
Instead of “Yes” or “Confirm,” use more descriptive options like “Delete,” “Pay $97,” “Make Transaction,” “Send Message,” and so on — including the entity name or amount of money in the button is also helpful. Compare: “Confirm” versus “Pay $97.” The latter is much more specific.

However, this might not be enough.

In some cases, you may require an extra action. A typical solution is to ask users to type something (e.g., a project name) to unblock the CTA button.

Here are a few examples:

ConvertKit asks users to type “DO IT” when removing subscribers.

Pro tip: Note that they placed the buttons on the left side! This is a nice example of applying proximity law. It seems reasonable since the submit button is closer to the form (even if it consists of only one input).

Resend asks users to type “DELETE” if they want to delete an API key, which could have very serious consequences. The API key might be used in many of your apps, and you don’t want to break anything.

This modal is one of the best examples of following the best practices:

The title says what the action is (“Delete API Key”).
In the text, they mentioned the name of the API Key in bold and in a different color (“Onboarding”).
The red label that the action can not be undone makes it clearer that this is a serious action.
Extra action is required (typing “DELETE”).
The CTA button has both a color indicator (red usually is used for destructive actions) and a proper label — “Delete API Key”. Not a general word, e.g., “Confirm” or “Delete.”

Notice that Resend also places buttons on the left side, just as ConvertKit does.

Note: While generally disabling submit buttons is considered bad practice, this is one of the cases where it is acceptable. The dialog’s request is clear and straightforward both in ConvertKit and Resend examples.

Moreover, we can even skip the submit button altogether. This applies to cases where users are asked to input an OTP, PIN, or 2FA code. For example, the bank app I use does not even have a log in button.

On the one hand, we still ask users to perform an extra action (input the code). On the other hand, it eliminates the need for an additional click.

Accessibility Concerns

There is ongoing debate about whether or not to include a submit button when entering a simple OTP. By “simple,” I mean one that consists of 4-6 digits.

While I am not an accessibility expert, I don’t see any major downsides to omitting the submit button in straightforward cases like this.

First, the OTP step is typically an intermediate part of the user flow, meaning a form with four inputs appears during some process. The first input is automatically focused, and users can navigate through them using the Tab key.

The key point is that, due to the small amount of information required (four digits), it is generally acceptable to auto-submit the form as soon as the digits are entered, even if a mistake is made.

On the one hand, if we care about accessibility, nothing stops us from providing users control over the inputs. On the other hand, auto-submission streamlines the process in most cases, and in the rare event of an error, the user can easily re-enter the digits.

Danger Zones

For the most critical actions, you may use the so-called “Danger zone” pattern.

A common way to implement this is to either have a dedicated page or place the set of actions at the bottom of the settings/account page.

It might contain one or more actions and is usually combined with other methods, e.g., a modal dialog. The more actions you have, the more likely you’ll need a dedicated page.

When To Use Them

Use a Danger Zone to group actions that are irreversible or have a high potential for data loss or significant outcomes for users.

These actions typically include things like account deletion, data wiping, or permission changes that could affect the user’s access or data.

Things To Keep In Mind

Use colors like red, warning icons, or borders to visually differentiate the Danger Zone from the rest of the page.
Each action in the Danger Zone should have a clear description of what will happen if the user proceeds so that users understand the potential consequences.
Ask users for extra effort. Usually, the actions are irreversible and critical. In this case, you may ask users to repeat their password or use 2FA because if someone else gets access to the page, it will not be that easy to do the harmful action.
Keep only truly critical actions there. Avoid making a danger zone for the sake of having one.

Inline Guards

Recently, I discovered that some apps have started using inline confirmation. This means that when you click on a dangerous action, it changes its label and asks you to click again.

This pattern is used by apps like Zapier and Typefully. While at first it seems convenient, it has sparked a lot of discussion and questions on X and Linkedin.

I’ve seen attempts to try to fix accidental double-clicking by changing the position of the inline confirmation label that appears after the first click.

But this creates layout shifts. When users work with the app daily, it may cause more irritation than help.

As an option, we can solve this issue by adding a tiny delay, e.g., 100-200ms, to prevent double-clicking.

It also matters who your users are. Remember the good old days when we used to click a dozen times to launch Internet Explorer and ended up with dozens of open instances?

If your target audience is likely to do this, apparently, the pattern will not work.

However, for apps like Zapier or Typefully, my assumption is that the target audience might benefit from the pattern.

Two-factor Authorization Confirmation

This method involves sending a confirmation request, with or without some kind of verification code, to another place, such as:

SMS,
Email,
Authenticator app on mobile,
Push notifications (e.g., instead of sending SMS, you may choose to send push notifications),
Messengers.

Notice: I’m not talking about authentication (namely, login process), but rather a confirmation action.

An example that I personally face a lot is an app for sending cryptocurrency. Since this is a sensitive request, apart from submitting the requisition from a website, I should also approve it via email.

When To Use It

It can be used for such operations as money transfers, ownership transfers, and account deletion (even if you have a danger zone). Most of us use this method quite often when we pay online, and our banks send us OTP (one-time password or one-time code).

It may go after the first initial protection method, e.g., a confirmation dialog.

As you can see, the methods are often combined and used together. We should not consider each of them in isolation but rather in the context of the whole business process.

Passkeys

Passkeys are a modern, password-less authentication method designed to enhance both security and user experience.

“Passkeys are a replacement for passwords. A password is something that can be remembered and typed, and a passkey is a secret stored on one’s devices, unlocked with biometrics.”

— passkeys.dev

There are a few pros of using passkeys over 2FA, both in terms of security and UX:

Unlike 2FA, which typically requires entering a code from another device or app (e.g., SMS or authenticator apps), passkeys streamline the confirmation process. They don’t require switching between devices or waiting for a code to arrive, providing immediate authentication.
While 2FA provides extra protection, it is vulnerable to phishing, SIM-swapping, or interception. Passkeys are much more resistant to such attacks because they use public-private key cryptography. This means no secret code is ever sent over the network, making it phishing-resistant and not reliant on SMS or email, which can be compromised.
Passkeys require less mental effort from users. There’s no need to remember a password or type a code — just authenticate with a fingerprint, facial recognition, or device-specific PIN. This way, we reduce cognitive load.
With passkeys, the authentication process is almost instant. Unlike 2FA, where users might have to wait for a code or switch to another device, passkeys give us the opportunity to confirm actions without switching context, e.g., opening your email inbox or copying OTP from a mobile device.

The passkeys are widely supported and more and more companies adopt it.

Second-person Confirmation

This is a mechanism when two users are involved in the process. We may call them initiator and approver.

In this case, the initiator makes a request to take some action while the approver decides whether to confirm it or not.

In both roles, a confirmation dialog or other UI patterns may be used. However, the main idea is to separate responsibilities and decrease the probability of a bad decision.

Actually, you have likely encountered this method many times before. For example, a developer submits a pull request, while a code reviewer decides whether to confirm it or decline.

When To Use It

It is best suited for situations when the seriousness of decisions requires few people involved.

There is a direct analogy from real life. Take a look at the picture below:

The Council of Physicians reminds us that in medicine, seeking a second opinion is crucial, as collaboration and diverse perspectives often result in more informed decisions and better patient care. This is a perfect example of when a second opinion or an approver is essential.

Here, you will find some apps that use this method:

GitHub, as previously mentioned, for merging pull requests.
Jira and other similar apps. For example, when you move issues through a certain workflow stage, it may require manager approval.
Banking applications. When you make a high-value transaction, it could be necessary to verify it for legal issues.
Deel, which is a global hiring and payroll. One part (e.g., employer) draws up a contract and sends it to another part (e.g., freelancer), and the freelancer accepts it.

But here is the thing: We can consider it a separate method or rather an approach for implementing business logic because even if another person confirms an action, it is still a dangerous action, with the only difference being that now it’s another person who should approve it.

So, all of the examples mentioned above are not exactly a standalone specific way to protect users from making wrong decisions from the UI point of view. It’s rather an approach that helps us to reduce the number of critical mistakes.

Do We Actually Need To Ask Users?

When you ask users to take action, you should be aware of its original purpose.

The fact that users make actions does not mean that they make them consciously.

There are many behavioral phenomena that come from psychology, to name a few:

Cognitive inertia: The tendency of a person to stick to familiar decisions, even if they are not suitable for the current situation. For instance, the vast majority of people don’t read user agreements. They simply agree with the lengthy text because it’s necessary from the legal point of view.
Availability Heuristic: People often make decisions based on information that is easily accessible or familiar to them rather than making a mental effort. When users see the same confirmation popups, they might automatically accept them based on their previous successful experience. Of course, sooner or later, it might not work, and the acceptance of required action can lead to bad consequences.
Cognitive Miser: The human mind is considered to be a cognitive miser due to the tendency of humans to think and solve problems in simpler and less effortful ways rather than in more sophisticated and effortful ways, regardless of intelligence. This explains why many users just click “yes” or “agree” without carefully reading the text.
Quite a representative example is banner blindness, even though not related to confirmation but, in fact, revolves around the same human behavior idiosyncrasies.

A reasonable question that may arise: What are the alternatives?

Even though we cannot entirely affect users’ behavior, there are a few tactics we can use.

Delaying

In some scenarios, we can artificially delay the task execution in a graceful way.

One of my favorite examples is an app called Glovo, which is a food delivery app. Let’s have a look at the three screens you will see when you order something.

The first screen is a cart with items you chose to buy (and an annoying promotion of subscription that takes ⅓ of the screen).

After you tap the “confirm order” button, you’ll see the second screen, which asks you whether everything is correct. However, the information appears gradually with fade-in animation. Also, you can see there is a progress bar, which is a fake one.

After a few seconds, you’ll see another screen that shows that the app is trying to charge your card; this time, it’s a real process. After the transaction proceeds, you’ll see the status of the order and approximate delivery time.

Pro tip: When you show the status of the order and visually highlight or animate the first step, it makes users more confident that the order will be completed. Because of the trick that is called Goal-Gradient Effect.

You’ve just paid, and “something starts happening” (at least visually), which is a sign that “Oh, they should have already started preparing my order. That’s nice!”

The purpose of the screen with a fake progress bar is to let users verify the order details and confirm them.

But this is done in a very exquisite way:

On the first screen, you click “confirm order”. It doesn’t invoke any modals or popups, such as “Are you sure?”.
On the second screen, users can see how information about their order appears right away, and the scroll bar at the bottom goes further. It seems like that app is doing something, but it’s an illusion. An illusion that makes you take another quick look at what you’ve just ordered.

In the previous version of the app, you couldn’t even skip the process; you could only cancel it. Now they added the “Continue” button, which is essentially “Yes, I’m sure” confirmation.

This means that we return back again to the drawbacks of classic confirmation modals since users can skip the process. But the approach is different: it’s a combination of a feedback loop from the app and skipping the process.

This combination makes users pay attention to the address, order, and price at least sometimes, and it gives them time to cancel the order, while in the classic approach, the confirmation is “yes or no?” which is more likely to be confirmed right away.

The Undo Option

The undo pattern allows users to reverse an action they have just performed, providing a safety net that reduces anxiety around making mistakes.

Unlike confirmation modals that interrupt the workflow to ask for user confirmation, the undo pattern provides a smoother experience by allowing actions to be completed with the option to reverse them if needed.

When To Use It

It works perfectly fine for non-destructive, reversible actions &mdashl actions that don’t have significant and immediate consequences:

Reversing actions when editing a document (The beloved ctrl + z shortcut);
Removing a file (if it goes to the trash bin first);
Changing the status of a task (e.g., if you accidentally marked a task completed);
Deleting a message in a chat;
Applying filters to a photo.

Combined with a timer, you can extend the number of options since such tasks as sending an email or making a money transfer could be undone.

When You Cannot Use It

It’s not suitable for actions that have serious consequences, such as the following:

Deleting an account;
Submitting legal documents;
Purchasing goods (refund is not the same as the undo option);
Making requests for third-party APIs (in most cases).

How To Implement Them?

The most common way that most people use every day is to provide a shortcut (ctrl + z). However, it’s constrained to some cases, such as text editors, moving files between folders, and so on.
Toasts are probably the most common way to implement these web and mobile apps. The only thing that you should keep in mind is that it should stand out enough to be noticed. Hiding them in a corner with a tiny message and color that is not noticeable might not work — especially on wide screens.
A straightforward solution is simply to have a button that does the undo option. Preferably close to the button that evokes the action that you want to undo.

The undo option is tightly related to the concept called soft deleting, which is widely used in backend frameworks such as Laravel.

The concept means that when users delete something via the UI, it looks like it has been deleted, but in the database, we keep the data but mark it as deleted. The data is not lost, which is why the undo option is possible since we don’t actually delete anything but rather mark it as deleted.

This is a good technique to ensure that data is never lost. However, not every table needs this.

For example, if you delete an account and don't want users to restore it (perhaps due to legal regulations), then you should erase the data completely. But in many cases, it might be a good idea to consider soft deleting. In the worst case, you’ll be able to manually restore user data if it cannot be done via the UI for some reason.

Conclusion

There’s something I want everyone to keep in mind, regardless of who you are or what you do.

Every situation is unique. A certain approach might work or fail for a variety of reasons. You might sometimes wonder why a specific decision was made, but you may not realize how many times the interface was revised based on real user feedback.

User behavior is affected by many factors, including country, age, culture, education, familiarity with certain patterns, disabilities, and more.

What’s crucial is to stay in control of your data and users and be prepared to respond when something goes wrong. Following best practices is important, but you must still verify if they work in your specific case.

Just like in chess, there are many rules — and even more exceptions.

Aggregating my distributed self

Miriam Suzanne’s in the middle of a redesign of her personal website. It began in August 2022. She’s made an entire series out of the work that’s worth your time, but I wanted to call out the fifth and latest installment because she presents a problem that I think we can all relate to:

But the walls got in my way. Instead of minimal renovation, I got just far enough to live with it and then started a brand new Eleventy repo.

The plan was to prototype […] and bring back well-formed solutions. To echo Dave Rupert, prototyping is useful. It’s easier to play with new ideas when you’re not carrying a decade of content and old code along with you.

But prototyping evolved into what I would call tinkering (complimentary). Maybe I mean procrastinating (also complimentary), but it’s a wandering process that also helps me better understand what I want from a website. I might not make visible progress over two years, but I start to form a point of view […]. Keeping things easy is always where things get complicated. And it brings me back to where my redesign started – a desire to clarify the information architecture. Not only for visitors, but for myself.

Don’t even tell me you’ve never been there! Jim Neilsen blogged along similar lines. You get a stroke of inspiration that’s the kernel of some idea that motivates you to start, you know, working on it. There’s no real plan, perhaps. The idea and inspiration are more than enough to get you going… that is until you hit a snag. And what I appreciate about Miriam’s post is that she’s calling out content as the snag. Well, not so much a snag as a return to the founding principle for the redesign: a refined content architecture.

Sometimes I do events where I speak, or teach a workshop, or perform. Events happen at a time and place.

Sometimes I create artifacts like a book or an album, a website, or specification. Artifacts often have a home URL. They might have a launch date, but they are not date-specific.

Some of my projects are other channels with their own feeds, their own events and artifacts.

Those channels are often maintained by an organization that I work with long-term. A band, a web agency, a performance company, etc.

These boundaries aren’t always clean. A post that remains relevant could be considered an artifact. Events can generate artifacts, and vice versa. An entire organization might exist to curate a single channel.

So, Miriam’s done poking at visual prototypes and ready to pour the filling into the pie crust. I relate with this having recently futzed with the content architecure of this site. I find it tough to start with a solidified design before I know what content is going into it. But I also find it tough to work with no shape at all. In my case, CSS-Tricks has a well-established design that’s evolved, mostly outside of me. I love the design but it’s an inherited one and I’m integrating content around it. Design is the constraint. If I had the luxury of stripping the building to the studs, I might take a different approach because then I could “paint” around it. Content would be the constraint.

It’s yet another version of the Chicken-Egg dilemma. I still think of the (capital-W) Web as a content medium at least in a UA style sense in that it’s the default. It’s more than that, of course. I’m a content designer at heart (and trade) but I’m hesitant to cry “content is king” which reminded me of something I wrote for an end-of-year series we did here answering the question: What is one thing people can do to make their website better? My answer: Read your website.

We start to see the power of content when we open up our understanding of what it is, what it does, and where it’s used. That might make content one of the most extensible problem-solving tools in your metaphorical shed—it makes sites more accessible, extracts Google-juicing superpowers, converts sales, and creates pathways for users to accomplish what they need to do.

And as far as prioritizing content or design, or…?

The two work hand-in-hand. I’d even go so far as to say that a lot of design is about enhancing what is communicated on a page. There is no upstaging one or the other. Think of content and design as supporting one another, where the sum of both creates a compelling call-to-action, long-form post, hero banner, and so on. We often think of patterns in a design system as a collection of components that are stitched together to create something new. Pairing content and design works much the same way.

I’d forgotten those words, so I appreciate Miriam giving me a reason to revisit them. We all need to be recalibrated every so often — swap out air filters, top off the fluids, and rotate the ol’ tires. And an old dog like me needs it a little more often. I spent a few more minutes in that end-of-year series and found a few other choice quotes about the content-design continuum that may serve as inspiration for you, me, or maybe even Miriam as she continues the process of aggragating her distributed self.

This sounds serious, but don’t worry — the site’s purpose is key. If you’re building a personal portfolio, go wild! However, if someone’s trying to file a tax return, whimsical loading animations aren’t likely to be well-received. On the other hand, an animated progress bar could be a nice touch while providing visual feedback on the user’s action.
Cassie Evans, “Empathetic Animation”

Remember, the web is an interactive platform — take advantage of that, where appropriate (less is more, accessibility is integral, and you need to know your audience). Whether that’s scrollytelling, captioned video, and heck, maybe for your audience, now’s the time to start looking into AR/VR! Who knows. Sometimes you just need to try stuff out and see what sticks. Just be careful. Experimentation is great, but we need to make sure we’re bringing everyone along for the ride.
Mel Choyce, “Show, Don’t Tell”

Your personal site is a statement of who you are and what you want to do. If you showcase your favorite type of work, you’ll get more requests for similar projects or jobs — feeding back into a virtuous cycle of doing more of what you love.
Amelia Wattenberger, “Exactly What You Want”

And one of my favorites:

But the prime reason to have a personal website is in the name: it is your personalhome on the web. Since its early days, the web has been about sharing information and freedom of expression. Personal websites still deliver on that promise. Nowhere else do you have that much freedom to create and share your work and to tell your personal story. It is your chance to show what you stand for, to be different, and to be specific. Your site lets you be uniquely you and it can be whatever you imagine it to be.

So if you have a personal site, make sure to put in the work and attention to make it truly yours. Make it personal. Fine-tune the typography, add a theme switcher, or incorporate other quirky little details that add personality. As Sarah Drasner writes, you can feel it if a site is done with care and excitement. Those are the sites that are a joy to visit and will be remembered.
Matthias Ott, “Make it Personal”

That last one has the added perk of reminding me how incredibly great Sarah Drasner is.

Aggregating my distributed self originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

from CSS-Tricks https://ift.tt/uJi9qQz
Gain $200 in a week
via Read more

September 27, 2024

70+ Best Social Media Kit Templates & Graphics 2024

Are you working on crafting a content plan to promote your brand and business on social media? Then these social media kits and templates will help you design amazing graphics for your social media campaigns like a pro.

Preparing content for your social media promotions is a time-consuming process that most social media managers and marketers have to deal with.

But don’t worry. You can use these social media kits and graphics templates designed by professionals to quickly edit and use with your own social media campaigns. The best part is you can easily edit and customize them all by yourself (and we’re sharing some helpful social media template tips to help get you started!)

Motion Array – Unlimited Video Downloads

Motion Array is a one-stop-shop for all your graphic design needs. With their vast collection of video templates, audio, graphics, icons, and illustrations, you’ll find everything you need to make your projects stand out. Whether you’re a graphic designer, video editor, or content creator, Motion Array has something for you.

Their graphics library is extensive and diverse, with designs that cater to every niche and style. From retro to modern, you’ll find the perfect graphics to enhance your projects. Their social media template collection is equally impressive, with a vast array of styles and themes to choose from.

Motion Array’s Standard Universal License allows you to use unlimited assets from Motion Array marketplace in as many projects as you’d like. It’s all membership based, so you can sign up for a month or a year and grab any assets you need, when you need them (plus, you can cancel any time and keep the items you licensed).

Not only that, you can grab a $50 discount for annual subscriptions by clicking through the link above!

Social Media Templates Volume II

If you’re looking for an all-in-one pack of social media templates that are compatible with all popular social networking platforms, this bundle is for you.

This social media templates kit includes 20 different template designs optimized for Facebook, Instagram, and Twitter.

The templates in this pack feature designs in 5 different categories, including business, blog, fashion, magazine, and shop. This allows you to use this bundle to create posts for many different types of businesses.

Social Media Booster Kit Templates

If you’re looking for a social media kit that has templates with multipurpose designs, this bundle is for you. It includes 15 social media post templates that can be customized to create banners for promoting all kinds of brands and businesses. Each template comes in 3 sizes for Instagram, Facebook, and Twitter.

AMR – Creative Social Media Kit

This is a social media kit for running promotional campaigns. In addition to its creative and colorful design, the template kit includes multiple post designs in two sizes for promoting sales and offers on Instagram and Facebook.

Product Promotional Social Media Kit

Running an effective product promotion will be a walk in the park with this modern social media kit. It includes 3 stylish social media post and banner templates with different designs. You can use them to run a cross-platform campaign on Instagram, Facebook, and Twitter.

Minimal Social Media Banner Templates

If you prefer social media posts with minimalist designs, this pack is a must-have for you. There are multiple sizes of templates in this bundle featuring optimized PSD and AI templates for Instagram, Facebook, Twitter, Pinterest, and LinkedIn.

Free Gym & Fitness Social Media Kit

Promoting a gym or fitness center but low on budget? Then be sure to grab this free social media kit to create simple yet effective social media posts to promote your gym on Instagram and Facebook.

Hologram 10 – Social Media Template Kit

This is a trendy collection of editable Photoshop templates, perfect for promoting electronic music events on social media. Featuring neon colors and gradients on a holographic background, these minimalistic templates are ideal for multiple music genres. The kit provides Instagram story, post templates, and a Facebook event cover template.

Saint Patrick’s Day Social Media Template Kit

A collection of ready-to-customize social media post templates, ideal for promotions around the holiday. Whether you’re using Illustrator or Photoshop, these user-friendly templates allow for easy editing of texts, images, and graphics on separate layers.

Fashion Sale Instagram Post Templates

Get an edge on promoting your fashion brand with the elegant and professional fashion sale Instagram post templates. This set of post templates, designed for Photoshop, is easy to use and fully editable. It lets you craft stylish Instagram posts that sparkle with beautiful graphics.

Christmas Fashion Sale Instagram Post Templates

These social media templates are ideal for all your holiday sale promotions. The templates come with well-organized, customizable, and editable files that aid in quick designing of your social posts.

Merry Christmas Sale Banners Ad Templates

A collection of social media templates ideal for designers, entrepreneurs, and businesses looking to advertise on social media during the festive season. Its features include 12 different sizes for platforms such as Facebook, Instagram, Twitter, and Google Adwords.

New Year Eve’s Instagram Story Templates

Improve your Instagram posts this New Year’s Eve with this bundle of user-friendly templates. Offering a set of six unique, high-resolution designs, that can be edited according to your tastes. The templates are compatible with Adobe Illustrator and Photoshop.

FREDOW – Streetwear Instagram Post Templates

Spruce up your streetwear brand’s Instagram account with FREDOW, a set of professional post templates. It’s an effortless way to enhance your profile, offering six fully customizable, drag-and-drop templates with editable text and image elements.

Podcast Live Instagram Post Templates

A collection of customizable social media templates ideal for promoting any podcast and live events. The package offers a user-friendly, well-organized file that facilitates quick design for your social media posts. The templates are ready-to-use PSD files with a resolution of 1200 x 1200 px.

Instagram Stories – Fashion Sale Templates

A set of Instagram story templates ideal for promoting fashion sales and brands on social media platforms. These templates are versatile and customizable; you can adapt the colors, text, images, and fonts to suit your brand. Whether you’re announcing new arrivals, advertising sales, or featuring customer reviews, these templates can help increase your visibility.

Geometric Business Instagram Templates Kit

This template kit is for businesses aiming to boost their Instagram presence. It equips users with customizable story and post templates that can enhance visual engagement with their audience. Optimized for Adobe Illustrator CC and Adobe Photoshop CS4-C6, the kit also provides a well-organized layout for easy usability.

Retro Gradient Instagram Templates Kit

If you’re a fan of gradient colors and trendy designs, this Instagram template kit is perfect for your promotions. It features retro-themed Instagram post designs with beautiful gradient colors. There are 30 unique post layouts in this pack that are available in square and vertical sizes.

Tecanel – 90s Instagram Templates

Add a splash of color to your Instagram feed using this colorful Instagram template kit. It features cool 90s-style Instagram post layouts with bright colors. The bundle has 12 different post designs that you can easily customize to change text, colors, and images.

Threads Hype – Energetic Social Media Templates

The bold and modern designs of this template kit make them a perfect choice for sports, gym, and fitness-related brands. It has 6 templates that can be used to make both Instagram posts and stories.

Minimal Instagram Quote Templates

Looking for a beautiful post template to make attractive quote posts? Then be sure to grab this collection of Instagram templates. It features 50 unique post layouts that are ideal for quotes. They are available in vertical format too.

Free Colorful Instagram Templates

A collection of free Instagram templates featuring colorful and trendy designs. This pack includes Instagram posts and story templates that are most suitable for fashion and lifestyle channels.

SRTP – Lifestyle Social Media Templates Kit

This premium social media kit features a set of templates for promoting lifestyle and fashion brands on Instagram. A collection of 6 unique templates are included in this pack that also feature easily editable designs. The templates come in AI and EPS formats.

Artsky – Colorful Social Media Kit

With this beautiful social media kit, you can create banners and posts for various creative agencies and businesses. There are 9 different post templates in this bundle. And you can use them to create carousel posts as well.

Modern & Minimal Social Media Kit

A minimal post design with plenty of space for including images is the ideal way to promote furniture, interior design, and real estate brands. There are 12 unique templates in this pack that are most suitable for making banners for Instagram.

Burgers & Restaurant Social Media Kit

Whether you’re promoting a restaurant or a food truck, this social media kit has some of the best designs you can use to spread the word about your business. There’s a total of 24 templates in this pack, which includes 12 post designs for Instagram, Facebook, and Twitter. As well as 12 Instagram Story templates.

Free Freelancer Portfolio Social Media Kit

If you’re a freelancer promoting your personal brand on social media, this social media kit will surely come in handy. It allows you to promote your portfolio in style using multiple banner designs. And this kit is free to download as well.

Social Banner Templates Kit PSD & Sketch

This is a complete social media templates kit that features a professionally crafted post design for promoting businesses. The template comes in multiple layouts and sizes that are compatible with Facebook, Instagram, Pinterest, and more. It will allow you to create more consistent social media posts across all social media channels.

Social Media Post Templates Kit PSD & Figma

This template kit also includes its post design in multiple sizes. It’s available in PSD format featuring organized layers, editable vector shapes, and smart objects for easily placing your own images into the template design. It comes in Adobe XD, Figma, and Sketch formats as well.

Minimal Fashion Social Media Post Templates

A beautifully minimalist social media template collection for promoting luxury and high-end fashion brands. The templates in this pack are fully customizable with Photoshop and Illustrator. It includes 6 different post designs.

Fitness Instagram Story Templates PSD

Promote your gym and fitness brands to your Instagram audience using this Instagram story templates bundle. It includes 15 different story designs with fully editable layouts. You can change their colors, fonts, and images with just a few clicks.

Uno – Free Social Media Templates PSDs

Uno is a collection of free social media templates that can be used to create both Facebook and Instagram posts. It includes 8 different designs in PSD format with fully customizable colors, text, and backgrounds.

Modern Social Media Post Templates Kit

Another complete social media post template kit featuring the same post design in multiple sizes and layouts. This template also includes multiple file-formats for editing the design in Photoshop, Sketch, and Figma. It has sizes for all popular social networks.

Business Instagram Puzzle Template PSD

Instagram puzzles offer a creative way to design a unique profile feed. This template will allow you to create a similar Instagram puzzle design for your business or brand page. It’s easily editable and comes in multiple formats including PSD, Sketch, and Figma.

Yoga Class Social Media Templates

Promote your Yoga classes, courses, and training programs across your social media channels using this template kit. It features 9 different social media post designs with lots of space for describing your programs. It’s available in PSD and AI formats.

Colorful Social Media Templates Kit

If you’re promoting a fashion or lifestyle brand, this social media templates kit will come in handy. It includes 3 Instagram story and 3 post templates for showcasing your apparel items and fashion products. The templates are available in Photoshop and Illustrator file formats.

Tanska – Free Instagram Templates Collection

This is a collection of 10 free Instagram templates that feature mood board style post layouts. They are perfect for showcasing your designs, fashion, and creative photography.

Creative Marketing Social Media Kit

Featuring 6 different design layouts, this modern social media marketing kit is perfect for creating posts to promote your brand, products, and sales across multiple social media platforms. The templates are fully customizable and available in Illustrator file format.

Product Promotion Social Media Kit

If you’re looking for social media templates to promote a product on Instagram, Twitter, and Facebook, this bundle of templates will come in handy. It includes a set of editable templates that have been designed to highlight your products and features.

Product Sale Social Media Templates

This set also includes 6 unique social mediate banner templates similar to the ones above. These templates are designed to help promote your seasonal offers and special sales on social media. The templates can be customized with Illustrator as well.

New Arrival Turquaise – Social Media Banner Kit

This bundle of social media banner templates is perfect for promoting the latest arrivals of your product lineup. It’s most suitable for fashion and apparel brands. The pack includes 10 unique template designs in Illustrator and EPS file formats.

Roesmary – Social Media Templates Pack

Another beautifully minimalist social media templates pack featuring 9 unique post designs. These templates can be used to create Instagram, Twitter, and Facebook posts. The templates are available in PSD, AI, and EPS formats.

Business Social Media Instagram Story Templates

If you’re looking for an Instagram story template to streamline your business or brand story, this bundle will come in handy. It includes 10 fully customizable Instagram story templates you can use to create effective Instastories.

SOKA – Free Social Media Templates Pack

Soka is a bundle of unique social media templates that features highly professional designs. It includes 12 template designs in editable PSD files that are also compatible with all popular social networks.

Free 8 Social Media Instagram Templates

This free social media templates pack comes with 8 different post designs you can use to promote fashion and luxury brands on Instagram. The templates are available in PSD files and are easily customizable.

Modern Colorful Instagram Feed Post Templates

The beautiful and colorful designs of these Instagram templates will definitely make your feed stand out from the crowd. This bundle comes with 6 different post templates you can use to create content for Instagram.

Creative Social Media Templates Pack

This is a multipurpose social media templates kit that comes with post templates in multiple resolutions. The posts are compatible with Facebook, Instagram, and Pinterest. You can customize them quite easily using Photoshop.

Business Events Instagram Story Templates Kit

Promoting a business event on Instagram? Then use this template kit to create a professional Instagram story for your feed. The kit includes 6 different Instagram story designs with fully editable layouts.

Business With Us – Social Media Pack

Business With Us is a modern, and professional social media pack that will surely make an impression on your target audience. It features 5 attention-grabbing square designs that can be used to post content on Facebook, Instagram, Pinterest, and other social media platforms.

Promotional Social Media Templates Kit

Next up we have a minimal, yet impressive set of social media templates that are designed with the sole purpose of boosting your brand visibility and engagement. There are 9 templates in total, and each can be fully customized to suit your needs.

Shoes Shop Social Media Templates

Designed to help reach your shoe business new heights, this social media templates kit comprises Instagram posts and stories layouts that you can mix and match to create personalized content that creates an impact on most of your followers.

Rose – Free Social Media Story Template Kit

Stacked with 9 templates for various social media platforms, Rose is a perfect social media kit for your brand marketing. Although the kit can be used for virtually any industry under the sun, it best suits businesses dealing with feminine clothes, and products.

Blue Sky – Free Social Media Templates Kit

Blue Sky is a collection of 12 social media banners that will add a bright blue aesthetic to your feed. The beautiful design and ocean-esque color scheme instantly draw attention and make sure the audience is left in awe of your creative prowess.

Facebook Cover Templates Pack

No need to waste hours crafting Facebook covers for your client pages. Use this template pack to create a professional page or profile cover in minutes. This pack comes with 5 different cover designs optimized for Facebook.

Sienna – Free Fashion Social Media Kit

Sienna is another great free social media kit featuring multiple templates in 2 different resolutions. They fit in well with both Instagram and Facebook feeds. You can create fashion, travel, and lifestyle posts using these templates for free.

Monolisa – Instagram Post Template Kit

Monolisa is a collection of beautiful Instagram post templates. It features a stylish and trendy design with an attractive color scheme. The pack lets you choose from 6 unique template designs to create unique posts for your feed.

Holiday – Social Media Templates Pack

If you’re managing social media accounts for travel blogs or hotels, this social media template kit will come in handy. It includes 5 unique post designs for promoting travel locations and vacations. And they are compatible with Facebook, Instagram, and Pinterest.

Lifestyle – Social Media Templates Kit

A collection of social media templates designed for promoting lifestyle businesses and brands. This kit includes 5 templates in 3 different sizes to fit all photo-blogging social platforms. The templates can be easily customized with Photoshop.

Minimal Social Media Templates Kit

If you prefer to create Instagram and Facebook posts with minimal and clean designs, this template kit is made just for you. It comes with 6 high-quality post templates with simple designs. They are easily customizable and comes with smart objects and organized layers.

Verbena – Free Instagram Templates Kit

Verbena is a collection of beautiful Instagram post templates. You can use them to create content for modern lifestyle and fashion pages. It’s completely free to download and use.

Business Strategy Social Media Kit

Looking to promote a small business or a corporate brand on social media? Then grab this social media kit to easily create effective posts for your campaign. This bundle includes 10 different and customizable template designs. They are made for Instagram but you can use them with other social networks as well.

Fruit & Food Social Media Kit

Promote your food-related brands and businesses on Instagram more easily using this social media kit. It includes a set of modern Instagram post designs. You can easily customize them to edit text and place your own images. The bundle features 6 different post layouts.

Orange Instagram Stories Pack

Use this Instagram story templates pack to design attractive stories for your social media promotions. The template features a modern and trendy design that will surely attract the attention of your audience. You can choose from 5 different story designs as well.

Samantha – Instagram Puzzle Pack

Instagram puzzles are quite popular among many users. This template kit allows you to create a similar Instagram puzzle on your profile feed. It includes 12 post slices that can be combined to create a unique puzzle while promoting your brand.

Free Fashion Instagram Templates Pack

This is a free Instagram post templates kit made specifically for fashion brands. The templates can be used to promote your latest items and sales. It includes 10 templates you can customize to fit other social networking platforms as well.

Social Media Kit Colorful Fashion

If you’re promoting a casual brand targeting young audiences, this social media kit will come in handy. It features 9 unique Instagram post templates featuring bright and colorful designs. The templates are easily customizable with Photoshop.

Agency Marketing Social Media Pack

Promote your creative and corporate agencies on various social networking platforms using this templates kit. It includes 5 different post designs. And they are available in 3 sizes to fit Facebook, Instagram, and Pinterest.

Pinterest Social Media Banner Templates

Pinterest is a great platform for promoting visuals. With this templates kit, you can design stylish banners to attract the attention of your Pinterest followers. The pack includes 9 unique designs in AI, PSD, and Sketch file formats.

Bright Instagram & Social Media Titles Pack

This is a unique social media kit that features a set of 21 unique post designs with bright and attractive titles. The posts are designed with different colors and gradients to make them stand out from the crowd. You can use them to create unique posts for Instagram, Facebook, and other social networks.

Beon – Free Instagram Grid Template

Another free Instagram post templates kit. This kit includes 18 different post designs you can use to craft an Instagram grid. The templates are fully customizable and come in both light and dark color themes.

Hexxa – Business Social Media Kit

Promoting your business or agency on social media will get much easier with this social media kit that comes with 15 modern and minimal designs that are designed to help promote your brand and services in a professional way.

Modern Social Media Banners Templates

A set of 5 unique social media banner templates that’s most suitable for designing Instagram, Facebook, and Pinterest posts for educational businesses, schools, and agencies. The templates are fully customizable with Photoshop.

Creative Brand Social Media Kit

This modern social media kit comes with a set of creative banner templates with an attractive dark color theme. You can use these templates to promote fashion and creative brands across all social media platforms.

Casada – Minimal Social Media Kit

The minimalist and clean designs of this social media kit make it a great choice for creative agencies and small businesses. It includes 25 attractive social media banner and post templates in 2000 x 2000 resolution.

Real Estate Social Media Kit

Having a strong social media presence is very important for growing a real estate business. This social media kit comes with 20 unique banner templates specifically designed for promoting real estate businesses. The templates are also available in 3 sizes to fit Facebook, Instagram, and Twitter.

Free Pinterest Social Media Templates

Use these gorgeous free social media templates to promote your products and campaigns on Pinterest. The bundle features 15 professionally crafted templates you can easily customize however you like.

Vana – Free Fashion Instagram Templates Pack

A set of creative Instagram post templates for showcasing and promoting products. The bundle includes 8 different templates you can easily edit using Photoshop and Sketch app.

Claretta – Social Media Templates

Claretta is a bundle of 10 creative social media banner templates you can use to promote an online store or a small business on Instagram and Twitter. It also comes with Instagram story templates as well.

SRTP – Social Media Kit Templates

This is a collection of branded social media templates that comes with a colorful design and professional layouts. These are ideal for promoting brands and businesses. The pack includes 6 different templates.

Calisto – Creative Social Media Kit Templates

Calisto is a bundle of creative social media templates that comes with 25 different templates featuring colorful and attractive designs. These templates are most suitable for promoting digital marketing and creative agencies on social media.

SRTP – Fitness Social Media Kit Templates

This social media templates kit is specially designed for promoting fitness and gym related brands, products, and services on social media. It includes 6 unique templates featuring professional designs.

Free Social Media Promotion Banner Templates

The professional banner templates in this pack are ideal for promoting fashion and clothing brands on Instagram and Facebook. The templates are available in 1500 x 1500px resolution PSD files.

Free Social Media Templates Pack For Designers

A free set of social media templates made specifically for designers, allowing you to easily edit and customize the template designs for clients. It includes 6 unique designs in 800 x 800px resolution.

Sunny – Fashion Social Media Kit Templates

Sunny social media kit includes 25 clean and simple templates you can use to promote fashion brands and clothing products on social media. The templates are available in 2000 x 2000 resolution and in PSD file format.

Adventure – Travel Social Media Banner Templates

If you’re an Instagram travel blogger, this social media templates kit will definitely come in handy. It includes 15 unique templates designed for travel-themed posts. Each template is available in two sizes for Instagram and Facebook.

Fresh – Instagram Post & Instagram Story Templates

A collection of professionally designed Instagram post and story templates for making posts for brands and businesses. This bundle includes 20 different templates and they are available in both Illustrator and Photoshop file formats.

New Year & Holidays Sales Social Media Kit

This bundle of social media templates is designed for creating promotional campaigns for businesses and shops. The pack includes 10 unique templates in 4 different sizes optimized for Facebook, Twitter, Instagram, and Pinterest.

Vanesha – Modern Social Media Kit Templates

Vanesha is a set of modern social media templates specially designed for promoting fashion-related brands and products. It includes 25 easily customizable templates in PSD format.

Minimal Instagram Banner Templates Kit

A pack of minimalist and clean social media banner templates. This bundle includes 30 different templates you can use to promote many different types of brands and businesses, including travel, food, creative agency, and more.

LUMINA Social Media BUNDLE

Lumina is a highly minimalist social media kit that comes with several different styles of designs. It includes 32 unique designs and they are available in square, rectangle, and vertical sizes optimized for blogs, Instagram, Facebook, Pinterest, and more. The files are available in PSD and InDesign versions.

Apparel Social Media Pack

This social media kit is designed specifically for promoting fashion and clothing related brands. It’s fully optimized for Instagram as it comes with 18 square shaped post designs and 8 additional designs for creating Instagram Stories. The post templates are available in 1080 x 1080-pixel resolution.

Pro Social Media Kit

If you’re promoting a luxury brand or a high-end product, this social media kit will come in handy. It includes 15 professionally designed post templates with different styles. The templates are available in 3 different sizes for Facebook, Instagram, and Twitter. You can also choose from 5 different color combinations to customize the designs as well.

Clean Social Media Kit

This kit is perfect for creating social media content for fashion and travel brands. It includes 15 unique post templates, each in 3 different sizes and 5 color combinations. Thanks to its smart objects and vector shapes, editing the templates is also quite easy.

Minimal Social Media Design Kit

This is a bundle of social media post designs that are ideal for bloggers and business brands. The templates feature minimalist designs that highlight its text and content to help promote information. The pack includes 8 different post templates in square designs.

Modern Social Media Kit

A set of clean and modern social media post templates for crafting graphics for Facebook, Instagram, and Twitter. The pack includes 15 templates in 5 different colors and easily customizable PSD files.

Travel Social Media Pack

This bundle comes with 30 post templates in 3 different sizes for creating content for different social networks. The templates are available in fully-layered PSD files with vector shapes and smart objects, allowing you to quickly edit the designs to make them your own.

Social Media Design Kit

A set of fully-customizable social media templates that you can easily edit to fit all types of your promotions works. It includes 8 unique social media post templates in square sizes, specially optimized for Instagram.

Green Lifestyle Social Media Templates

This pack of social media templates is perfect for showing off green and healthy products. It’s designed with lifestyle brand promotions in mind but the templates can also be used for blogging, yoga, and other types of content as well. The pack includes 15 templates, each in square, horizontal, and vertical designs.

The Wedding – Social Media Pack

If you’re a photographer or a business related to wedding events, this bundle of social media post templates will be quite useful to you. It includes a set of creative social media templates with minimal designs to help promote your work with a special wedding vibe.

Social Media Banner Templates

The templates in this bundle are designed for promoting your special offers, product sales, and seasonal offers across your social media channels. The bundle includes several different types of templates for you to use when promoting different types of promo offers. The templates can be easily edited using Photoshop.

NATURALIS Social Media BUNDLE

Naturalis is a bundle of professionally designed social media templates that features a nature-inspired theme. It includes 32 unique designs in square, rectangle, and vertical sizes. As a bonus, you’ll also receive 50 original stock photos along with the templates as well.

10 Duotone Social Media Banners

Duotone is a popular design trend that you can often see on Instagram and Pinterest. This templates pack adopts the same trend in its templates. It includes 10 social media banner templates featuring the duotone effect. You can customize them easily to change the colors and shapes as well.

24 Instagram Templates

If you’re working on crafting a content plan for a food, bakery, restaurant, or a coffee shop social media campaign, grab this bundle to get a head start. This pack includes 24 beautiful Instagram post templates for promoting food-related brands. You can also use it to promote other types of businesses as well.

Celebgram Instagram Fashion Pack

Celebgram is a fashion-themed social media packed that includes 10 unique Instagram post templates featuring pop-culture themed designs. The templates can be easily customized to use on Facebook, Twitter, and Pinterest as well.

Gradient Social Media Pack

Another pack of Instagram post templates. This bundle includes 10 Instagram post designs and 10 Instagram Story templates. Each with free images and easy to use smart objects.

40 Instagram Banners

This bundle of Instagram banners includes 40 different banner templates you can use to promote your brand, products, special offers, and seasonal deals on Instagram. The templates are available in easily editable PSD files with smart objects and vector shapes.

500 Facebook Banners

Another huge bundle of multipurpose Facebook banner templates for promoting your brand and products. This pack comes with 50 unique banner designs, each in 2 sizes and available in 5 different color combinations.

Instagram Post Template

Creating an eye-catching post for your Instagram feed doesn’t have to be difficult. With this Instagram post template, you can create your own posts to drive new followers or new business. You can quickly add your own images, select your desired color palette, and adjust the copy.

Impressive Pinterest Template

Give your Pinterest account a design upgrade with the Japan Liquid Acid Fluid Memphis template. This template contains 9 fully editable and customizable templates that were designed in Sketch, Photoshop, and Illustrator to stand out from the crowd. This kit is ideal for bloggers, fashion brands, lifestyle bloggers, magazines, and techno blogs who doing sports-related activities or campaigns.

Social Media Template

This social media pack is ideal for Instagram, Facebook, Twitter, and more, with the purpose to promote your brand to increase more followers. Change the text, colors, images, strokes, and shapes to achieve the best result you want. Mix and match to create your custom stories, and achieve the best impact on your followers.

Travel Social Media Templates

The product includes 24 templates designed for Instagram. However, You can also use the design on your Twitter, LinkedIn, Blog etc. These are for Adobe illustrator, and also Photoshop. Each of them is easy to edit and customize, all you have to do is replace images with your artwork via Smart Objects or Clipping Mask and add your copy. That’s it!

Minimal Social Media Template

Social Media Booster Kit includes 10 templates designed for Instagram, Twitter, and Facebook. Thanks to Smart Objects, you can easily customize the colors and fonts and replace photos. This kit is perfect for bloggers, fashion, and lifestyle brands.

Christmas Party Social Media Template

The pack covers all basic design template variations for social media posts and headers to choose from and apply to your brand. Modern, clean and customizable, they are fully optimized for social platforms and ideal for promoting products, brands and businesses.

Sale Promotion Social Media Template

This pack is perfect for businesses selling luxury and elegance, high-quality professional b2b products and premium goods. Feel free to experiment with design within the pack, mix different backgrounds, visual elements, and colors to create your own new pictures.

If you haven’t used social media templates before these simple tips will help you get started.

1. Find the Right Theme

The most important part of using templates for social media posts and covers is finding the templates that match the theme of your promotions or campaign.

For example, if you’re running a social media campaign to promote a Halloween sale then you should try to find templates with a Halloween theme. The same applies to finding templates that match your industry and niche as well.

2. Pick Appropriate Template Designs

There are many different types of social media templates crafted to perfection by professionals you can use to promote various types of campaigns. Which means you don’t have to use the same templates over and over again.

Whether you’re promoting a fashion brand, a digital product, a service, gym membership, or even a seasonal sale, be sure to pick a template design that matches your purpose.

3. Use Great Images

Most of the pre-made social media templates won’t include images due to licensing requirements. You’ll have to find your own images. Thankfully, there are many great sites you can use to download high-quality and royalty-free images for free like Unsplash and Pexels. Edit your templates and Use the image placeholders to easily place your own images in the post designs.

4. Change Colors and Resize to Preference

Even though most social media templates look gorgeous as it is, you can always customize them however you like to change their colors and resize shapes to fit your needs.

Use the organized layers to make changes to the template design as necessary and use your own brand colors to personalize the designs.

5. Use Custom Fonts

Don’t like the look of the fonts used in the social media template? Then use a custom font that matches your brand and industry.

There are many great sources you can use to find all kinds of free and premium fonts with great designs. Use them to make your social media posts look even more unique.

If you’re working on an Instagram campaign, check out the Instagram templates and banners collection for more inspiration.

September 27, 2024

10 Illustration Trends to Look Out for in 2025

Every year we see new trends emerge in the world of design. While most of these new trends fade away with time, some remain to change and influence the industry for the better.

In this post, we explore the ever-evolving world of illustration trends and designs. From the rise of AI-assisted drawings to the resurgence of retro and psychedelic art, these are the trends you can expect to see more of this year.

Let’s take a look at some of the top upcoming illustration trends and how you can apply them in your own designs and projects. Some of these trends will not only be popular but also groundbreaking by bringing in new advancements and innovations.

1. AI-Assisted Illustrations

Designers have different opinions about the advancements of AI and how it’s impacting the industry. However, AI has clearly made work much easier for us. And that’s the main goal of using AI. It should not be used to replace designers but to enhance your workflow and make you more efficient.

Adobe understood this concept better than most other AI startups. During the Adobe MAX 2023 event, Adobe showed how they have improved Adobe Illustrator to help artists and designers create art more easily.

You can now generate vectors with text prompts, find exact matches for fonts, create icons, get variations of your illustrations, copy art styles, and more. These new tools will save you a ton of time and supercharge your process of finding inspiration, coming up with different concepts, and experimenting with different ideas.

2. Representation of Diversity

One of the trends that we hope to see more of this year is illustrations that represent diversity, culture, and traditions. We saw many brands and companies use these beautiful illustrations on their marketing campaigns, websites, and social media platforms to promote inclusiveness and diverse representation.

This trend is not just about representation, it’s also about celebrating different cultures, expanding the boundaries of perspectives, and bringing people together. It’s a mission that we will always promote with an open heart.

3. Colorful Abstract

Abstract illustrations have been a powerful visual form that amplifies storytelling for many years. This year, we expect to see this art trend continue to grow.

These beautiful illustrations excel at captivating audiences with colorful visuals and communicating ideas, moods, and messages much more effectively. Whether it’s for branding design or packaging design, colorful abstract illustrations fit perfectly for many types of projects as well.

4. Retro and Psychedelic

We all have a soft spot for those classic and groovy illustrations full of vibrant colors and weird shapes. Last year, we saw many artists combine this retro style from the 70s and 80s with psychedelic-style art to create very uncommon and trippy illustrations.

We’ve been seeing these retro and psychedelic illustrations on everything from product packaging designs to website designs and even branding designs. It seems to be getting more popular with casual and lifestyle brands that target younger audiences as well.

5. Art Deco

The Art Deco design trend is commonly used in various types of packaging designs, brand identities, and graphic designs as a way of showing off elegance and sophistication. It’s a trend that’s been around for decades but over the past few years we saw this trend being used more commonly by modern brands.

This trend will likely continue to be popular in the world of design and illustrations thanks to its ability to combine vintage aesthetics with futuristic vibes. Especially when it comes to luxury and high-end illustrations, Art Deco is unmatched for creating unique nostalgic feels.

6. Comic Book Art

The illustrations done in comic book art style are another new trend that’s slowly gaining momentum in the design world. This trend helps add a playful, humorous, and exaggerated look to your illustrations to create a bold retro aesthetic for various types of designs.

Whether it’s website design, poster design, or packaging design, comic book-style art blends perfectly with many different types of mediums as well. It’s also quite effective for brand storytelling and creating designs that communicate with the audience more effectively.

7. Doodle Art

No matter how old we get, we all have childhood memories that we always long for. Doodle art is a trend that’s designed to take you back to that wonderful childhood while evoking a sense of playfulness and free spirit. It’s one of the reasons why this trend has been around for such a long time and it will continue to be as effective as ever before.

Many popular brands have been using doodle art and illustrations as a way to create a more relaxed vibe and also bring out a sense of joy in the audience at the same time. The quirkiness and the imperfections of this art style allow any business or brand to strip away the formalities and create a close connection with its target audience.

8. Surrealism

The unreal, bizarre, and nightmare-ish surrealism illustration trend continues to surprise us every year by maintaining its popularity across many different industries. When it comes to creating designs that spark curiosity and imagination, nothing comes close to surrealist illustrations.

The distorted human figures, weird manipulations, and the weird elements used in surrealist illustrations often have hidden meanings and tell a story that explores controversial topics. And it opens up new doors for artists, media, and brands to share their narratives in mesmerizing ways.

9. Textured Illustrations

Illustration trend - Textured Illustrations

We went through several different illustration trends over the years from flat design to minimal artwork and the latest to join this lineup is the textured illustrations trend. This new trend sees illustrations getting a much-needed texture upgrade that adds more depth to the overall look and feel.

Textured illustrations will be one of the most popular illustration trends this year for two main reasons. First, they add an authentic and hand-crafted look to digital illustrations. Second, they create a more rugged and tactile vibe for the illustrations, replacing the overly smooth, artificial look of ordinary digital art.

10. Line Art

The great thing about line art illustrations is their versatility. Line art drawings can be as simple as a few lines or complex artwork but they will always maintain an overall simple and minimal look. This gives line art illustrations a classic yet timeless look.

Especially when designing illustrations for digital platforms, minimalist line art is an obvious choice as it reduces file sizes and helps improve performance. They are also quite effective in conveying ideas and creating adaptable art across different platforms and mediums.

11. Realistic 3D Art

3D art generation tools like Blender and Unreal Engine received significant updates last year that expanded their capabilities beyond our imagination. Designers have been using these tools to generate ultra-realistic 3D art and illustrations and the results were mind-blowing.

We will surely see more of these realistic 3D art and illustrations this year as well. Especially since the demand for this art is increasing as more industries seem to be embracing this new trend.

12. Nostalgia

When it comes to creating art and illustrations that connect with the audience on a personal level, nostalgic art is the perfect way to go. These illustrations excel at evoking emotions and good memories from the past and go a long way to establishing a strong connection with the audience.

Many brands have been using this trend to create emotional connections with their customers while also celebrating the history and good times from the past.

13. Geometric Art

There were many interesting art and design trends over the years that were inspired by the geometric style of art, including the popular Bauhaus style. And now, they are slowly influencing illustrations as well.

Illustrations inspired by geometric art styles have their own unique styles and we love how artists keep reinventing this trend while putting their own unique spins to create cool artworks.

14. Cartoon and Comic

Caroon and comic-themed illustrations do two things perfectly: They are great at adding a sense of whimsy to your creations and also conveying emotions more effectively.

When it comes to educational projects, casual and fun designs, and even creating mascots, and characters that represent brands, cartoon-style illustrations have been the ideal choice for decades.

Even though it’s not a new trend, we will surely see more cartoon and comic-style illustrations this year. Because it simply works wonders!

15. Outline Drawings

This is an illustration trend that will never go out of style. Because it’s the perfect style for creating art and illustrations that exude elegance and simplicity.

Outline drawings and illustrations have a particular way of creating a minimalist vibe for any other project. It helps create that subtle, fine art-style look that you can’t achieve with any other illustration style. And that’s why it will always be a trend you can rely on.

16. Brave and Bold

Recently, designers have been creating some radical and bold creations, much more than they used to. Mainly because modern brands and businesses now seek to create more open and authentic identities. And these brave and bold illustrations help achieve that goal.

This is a trend we would love to see more of this year. We are particularly curious how designers and artists will handle this experimental illustration style.

Conclusion

There will also be many other new trends this year, possibly ones we couldn’t even imagine. So be sure to keep an eye out for those. You can always check out our Trends category to stay on top of your game.

Migrating a JavaScript sample to CSS

Experimenting with multiple dimensions

User-controlled animations beyond scrollbars

Modal Dialogs

When To Use Them

Things To Keep In Mind

Accessibility Concerns

Danger Zones

When To Use Them

Things To Keep In Mind

Inline Guards

Two-factor Authorization Confirmation

When To Use It

Passkeys

Second-person Confirmation

When To Use It

Delaying

The Undo Option

When To Use It

When You Cannot Use It

How To Implement Them?

Further Reading

5 Tips for Using Social Media Templates

1. Find the Right Theme

2. Pick Appropriate Template Designs

3. Use Great Images

4. Change Colors and Resize to Preference

5. Use Custom Fonts

1. AI-Assisted Illustrations

2. Representation of Diversity