Creating Backgrounds

Types of Backgrounds

There are many options available when it comes to backgrounds. It depends on your design what you want to communicate to the viewer. As you can see in the example image, different backgrounds are being used, and all convey different emotions.

• 3D: Brings a sense of Playfulness
• Illustration: Perfect for Storytelling
• Abstract Patterns: Helps in setting the vibe
• Photography: To Showcase your Products

Top left to bottom right: CarbonMade, Todoist, Stripe and Semplice

Be Aesthetically Appealing

Mainly, because a well-designed background provides a great visual perception that straight on creates a positive response in the user's mind, keeping them engaged right at the start of the whole experience.

Using Right Colors

For colors, we sometimes tend to use competing colors that distract and feel completely unnatural. Start with a vibrant, pastel color that is Primary or Secondary. There is no wrong pick. It’s how you use it and what you choose to complement it. Focus on its utility and pleasantness.

Background Blur

It is also important not to bring too much attention to the background as the content should always be the Hero and center of attention. I suggest using a background blur, it elevates the content and keeps your background interesting as always.

Animations

Animations will make the website more engaging and make your background more dynamic but make sure not to go overboard. Add subtle animations, for example, like a parallax scroll or a gradual change in color as this could elevate your whole background up a notch with little effort.

Backgrounds in Websites

Backgrounds serve the purpose of pleasing the viewer's eyes visually and for storytelling. They give personality to the designs and make your layout more interesting. Although, there are many use cases for backgrounds when it comes to the web.

Backgrounds in Apps

Backgrounds are perfect for using splash screens, onboarding walkthroughs, loading screens, background images or empty state placeholders in your app designs. Designing a background that perfectly goes alongside the brand can improve your design a lot.

Designing Wave Background

Creating a wave background that is adaptable for both light and dark mode.

1. Draw a rectangle and set the Fill to Linear from Solid. Set the colors to #4C1AC4 and #38AAE4

2. Using the Pen-tool, draw a wave pattern. Use the Bezier handles to adjust the irregular curves.

3. Remove the Stroke and set the Fill to Linear. Set both colors to #FFFFFF and the transparency of the bottom color to 0%. Set the Blend-mode to Overlay

4. Now, create two more different wave patterns and give a dark linear transparent gradient and set the Blend-mode to Overlay. You can also use the Get Wave Figma plugin to do this.

5. Duplicate the first wave pattern and set the Fill to Linear from Solid. Set the colors to #BCC6F6 and #F2F6FF.
6. Set the background color of the Frame to a darker color and match the gradient of the Rectangle for the dark mode.

7. Add the necessary content to your design and play with colors to find out what fits you the best!

Using the Get Wave Plugin

If you have difficulties in creating wave patterns, don't worry! With the help of a plugin called Get Waves, you can generates SVG wave patterns in your design file.

1. Navigate to the community tab from the Dashboard and select Plugins.

2. In the search input, type in 'Get Waves' and select the one by Richard Zimerman. Install it by clicking on the Install button on the top right.

3. Headback to our design file and hit Command + Forward Slash (⌘+/) to open the menu. Now, let's search for Get Waves and open it!

4. The first set of options are for the curve of the wave. The next two options are for deciding whether you'd like the wave to be at the top or at the bottom. You can drag the slider to set the complexity and lastly, to generate a random wave, click on the dice.
5. Now let's add the wave to our design by pressing on the "Create" button. Awesome! Now you can style and follow the exercise on creating the "Wave Background"

Note: Remember to always aim for subtle curves so that it's easy on the eyes.

Mesh Gradient Plugin

The easiest way to create mesh gradients is to use the Mesh Gradient plugin from the Figma community. It's a brilliant tool that allows you to create a gradient image with an underlying 2d mesh and modify the vertices and edges of the mesh to get a perfect gradient.

• Install the Mesh Gradients plugin.
• In the canvas, right-click, click on Plugins and then click on Mesh Gradients.

Mesh Gradient Usage

You will see a panel with a setting that allows you to choose the colors, the number of mesh points, and the control's visibility. Then you can play with the points and lines until you get the mesh gradient you want.

• Colors: The color section lets you choose four colors or write the color code.
• Number of Mesh Points: Choose the number of mesh points for your gradient. You can choose 1x1, 2x2, 3x3 and 4x4 grid points. By default, it will select the 2x2 that corresponds to four color points.
• Control Visibility: Control the desired visibility by choosing None, Handles or Lines. None allows you to see anything. The handles let you see the point, and the lines let you see the point and the line at the same time.

• Editage Edges: If you want to experiment further, you can turn on the editable edges which allow you to edit the edges and curves the borders.
• Randomize: A randomization option also exists to create a mesh gradient in just one click.

Generate

When you generate, you will get a rectangle image.

Create Mesh Gradients

This time, we’ll create mesh gradients using circles or blobs and then blur them together in a different color.

Using Unsplash

Unsplash is an online community of photographers who have dedicated their time to creating images that can be used freely by anyone on the internet. The images are high quality and free for commercial use, so you can use them for your website, blog, social media or even a book cover.

You can also download the photos as desktop wallpapers, which is great if you're looking for free images to use on your desktop! You can explore on their Website or you can download their Plugin. Unplash is the best way to save a lot of time when you're working on your project. You can find exactly the right background for your project and use it without having to create it from scratch.

Unsplash Plugin:

• Search for Unplash on the Figma Community and click on Try it out.
• To use it, create a shape of your choice, right click, select Plugin then select Unsplash.
• On the search bar, type in your topic then click on Search.
• Choose a background image you like and select it.
• It will apply to your shape!

Unsplash Browser:

If you want to quickly find something on Unsplash, I recommend to use their site Unsplash.com. It's easy to use and has a great search function that lets you filter by categories and other options.

• Search for Background, Abstract Wallpaper,Paint, 3D, Rendering, etc, select your image, then download photo (arrow on the bottom right).
• Drag and drop to your Design File.

Background and Design Combination

Now that you've chosen a background, it's time to add your design into it! When you have a glass design, the most interesting thing is that you can see the silhouette of your background image.

Make Blob Plugin

If you're having trouble creating blob shape patterns, don't worry! The Make Blob Plugin can help. This plugin is a great way to create shapes faster, without having to create them from scratch. Simply randomize the shape you want to use, and then apply it into your design.

• Search for Make blob on the Figma Community and click on Try it out.

Make Blob Usage

• To use it, right click, select Plugin then select Make blob.
• Play with the Complexity number: means how many anchor points are on your vector path.
• Play with the Contrast number: means the intensity of a shape, and it's usually expressed as a number. The higher the contrast, the sharper the curve.
• When you're satisfied, click on Add, and it will appear as a single blob shape.
• If you click the Random button, your shape will be chosen randomly.
• If you click Bulk, your shape will be generated in groups of 3-5 blobs at a time.

Blobs Background Example

A blob background example is a demonstration of how abstract, organic shapes can be used to create a dynamic and visually interesting background for a website or app.

Blur Shape

Another interesting way how to add cool effect on your background is creating your own shape and blend it with the main background using a lot of blur. This is a really easy way to give your design a unique look.

• Create an oval with the Ellipse tool, play with the anchor point to create different shape or use Make Blob Plugin.
• Fill in the shape with vibrant color and then blur it as much as possible. The more blurred it is, the better result will be!

Conclusion

Creating backgrounds is a fairly simple process but what makes it standout is it's personality, style and the mood it sets for the users. Use this as a base and start designing something that best suits you.