To provide services at the highest level, we use cookies as described in our cookie policy. By using our website, cookies will be placed on your device. You can change your browser settings at any time. Check our cookie policy.
/All articles
Backgrounds, gradients, and background Images: What's all the fuss about?
May 15, 2024 · 8 minutes
Authors
- Izabela Łaszczuk
Authors
- Izabela Łaszczuk
Content
Categories
The background of the application is its integral part. Nowadays, applications feature increasingly sophisticated backgrounds. The page looks attractive and draws in users. However, there are several important things to keep in mind during the design process.
When I say background, I don’t only mean the background of the entire application, but also smaller elements, such as modals.
It's a complex topic, so I'll break it down into several smaller points.
When I say background, I don’t only mean the background of the entire application, but also smaller elements, such as modals.
It's a complex topic, so I'll break it down into several smaller points.
Gradients
Gradients are becoming a more and more popular choice for backgrounds among clients. Their implementation can be relatively trouble-free, provided you adhere to a few essential principles.
First and foremost, which is rather obvious, you must pay attention to ensure that the text on the page is sufficiently contrasting and does not blend with the gradient. This principle applies, in fact, to all decorations on the page.
Additionally, something that designers almost never anticipate in the mockups, very long pages or infinity scrolls. Developers almost always receive layouts where the gradient is used only once(sic!), and there will be an infinity scroll or a very long page.
There is often no information about what should happen with the gradient as the user scrolls further. Should the gradient repeat itself? Should it just be displayed on window height and the rest of the page should be plain color?
Developers have to know answers to these questions. If the mockup only shows a short example of a vertical gradient it is almost certain that lower on that page something will look bad. It can be many things, insufficient contrast on blocks of text, gray plus sign on FAQ section that blends with gray gradient, pictures’ border blending with contrast.
Let's not forget about this. It's crucial to pay attention to and consider such details when designing gradients as backgrounds.
First and foremost, which is rather obvious, you must pay attention to ensure that the text on the page is sufficiently contrasting and does not blend with the gradient. This principle applies, in fact, to all decorations on the page.
Additionally, something that designers almost never anticipate in the mockups, very long pages or infinity scrolls. Developers almost always receive layouts where the gradient is used only once(sic!), and there will be an infinity scroll or a very long page.
There is often no information about what should happen with the gradient as the user scrolls further. Should the gradient repeat itself? Should it just be displayed on window height and the rest of the page should be plain color?
Developers have to know answers to these questions. If the mockup only shows a short example of a vertical gradient it is almost certain that lower on that page something will look bad. It can be many things, insufficient contrast on blocks of text, gray plus sign on FAQ section that blends with gray gradient, pictures’ border blending with contrast.
Let's not forget about this. It's crucial to pay attention to and consider such details when designing gradients as backgrounds.
Infinite scroll
As I mentioned earlier, it's really rare for designers to provide a mockup that immediately explains where the infinity scroll is and what should happen to background elements during scrolling. This can be bothersome, as the developer needs to constantly come back with questions and invest time in clarifications. Let's keep this in mind during the design process. If you see a mockup e.g. of the FAQ section that ends after 3/4 sample questions and you don’t have any information about what should happen if there are more questions you shouldn’t start coding.
Pay attention to various decorations and consider whether they might cover something below. How should they behave on the mobile version? For instance, if we have some "neon" on the right side on the desktop, should it hide, shrink, or disappear on the mobile version?
Take a look at this example and you will understand why this is so important. This is a desktop view:
Now, pay attention to “DAY 1”, and see what happened on mobile view:
Poorly implemented infinite scroll might slow the user's browser, so make sure that new content is loaded as the user scrolls (lazy loading), rather than loading everything at once, to avoid burdening it.
I don’t know about you, but personally I hate when I’m on a website with infinite scroll and I don’t have any button that takes me back to the top of the page. Especially if the navbar is not sticky and there is no other way of going back to the top than scrolling. Consider adding it to your page (either button or sticky navbar).
Pay attention to various decorations and consider whether they might cover something below. How should they behave on the mobile version? For instance, if we have some "neon" on the right side on the desktop, should it hide, shrink, or disappear on the mobile version?
Take a look at this example and you will understand why this is so important. This is a desktop view:
Now, pay attention to “DAY 1”, and see what happened on mobile view:
Poorly implemented infinite scroll might slow the user's browser, so make sure that new content is loaded as the user scrolls (lazy loading), rather than loading everything at once, to avoid burdening it.
I don’t know about you, but personally I hate when I’m on a website with infinite scroll and I don’t have any button that takes me back to the top of the page. Especially if the navbar is not sticky and there is no other way of going back to the top than scrolling. Consider adding it to your page (either button or sticky navbar).
Using videos as background
Lately, an increasing number of clients decide to add a video as the background of their website. This creates a fantastic effect, making the site truly stand out. You need to be careful though as video on the website can cause more harm than good.
Whatever you do, remember to add an option to mute the sound. Nothing was as annoying as trying to locate a playing tab only to find out there is no option to mute it. Fortunately in 2018 the video autoplay policy has changed and now if you don’t add the option yourself the video will simply not autoplay on the website.
Another problem is that videos can significantly increase the page size. You should choose short videos in lower quality or consider optimization in formats like WebM or other compression formats. You could also add a video poster, so before the video loads on the website the user will be able to see the picture. You could also consider adding a picture instead of a video on mobile devices if the file is too large and there is a possibility that it will slow down the page. Let's not forget about responsive web design (RWD), ensuring proper framing, file size on mobile devices, and checking readability. Perhaps on mobile, we can completely forgo the video?
Whatever you do, remember to add an option to mute the sound. Nothing was as annoying as trying to locate a playing tab only to find out there is no option to mute it. Fortunately in 2018 the video autoplay policy has changed and now if you don’t add the option yourself the video will simply not autoplay on the website.
Another problem is that videos can significantly increase the page size. You should choose short videos in lower quality or consider optimization in formats like WebM or other compression formats. You could also add a video poster, so before the video loads on the website the user will be able to see the picture. You could also consider adding a picture instead of a video on mobile devices if the file is too large and there is a possibility that it will slow down the page. Let's not forget about responsive web design (RWD), ensuring proper framing, file size on mobile devices, and checking readability. Perhaps on mobile, we can completely forgo the video?
Animations
Quite a complex topic, to be honest. They sure look impressive and capture attention, but they need to be added with caution.
First of all, you shouldn't add too many animations. If users have weak equipment, it can kill their processor or at least worsen their experience on the website.
Not every animation will look equally good on different browsers. It's beneficial to use programs that create animations from SVG images (e.g., https://www.svgator.com/). This way, you have more confidence that they won't lag.
Similarly to videos, you need to take under consideration RWD, if the application is also going to be used on mobile devices it is important to adjust animations to it.
Think about SEO, search engine crawlers may not interpret content within animations. Ensuring that essential content is still accessible and indexable is vital for SEO.
First of all, you shouldn't add too many animations. If users have weak equipment, it can kill their processor or at least worsen their experience on the website.
Not every animation will look equally good on different browsers. It's beneficial to use programs that create animations from SVG images (e.g., https://www.svgator.com/). This way, you have more confidence that they won't lag.
Similarly to videos, you need to take under consideration RWD, if the application is also going to be used on mobile devices it is important to adjust animations to it.
Think about SEO, search engine crawlers may not interpret content within animations. Ensuring that essential content is still accessible and indexable is vital for SEO.
3D animations
When it comes to 3D animations themselves, they appear cool and impressive, but there are a few more things you need to keep in mind.
The models must be optimized for use on the website. A well-optimized model can have a smaller file size than a PNG. I could delve into some technical details on how to achieve this, but ultimately, it will mainly involve reducing the polygons in the model. Polygon reduction is a mathematical technique whereby the number of polygons in an object can be reduced without significantly reducing the quality of the resulting model. In order to do this you can use some software, for example Blender or Cinema 4D.
Another thing to consider is the proper preparation of materials applied to the model. They can artificially inflate the model's file size.
If the model doesn't require dynamic shading and manipulation of lighting, and can be monochromatic or relatively simple, without a lot of elements, you can use Matcaps as a material. This significantly changes things when dynamic lighting is disabled on the canvas.
Shading, lighting, scene setup, and post-processing heavily impact performance, and this needs to be taken into account.
The number of elements moving within 3D animations. One element might work fine, but add 50 flying bananas, and suddenly the user's phone can crash.
Using appropriate formats for exported models and excluding unnecessary components from them is also crucial.
The models must be optimized for use on the website. A well-optimized model can have a smaller file size than a PNG. I could delve into some technical details on how to achieve this, but ultimately, it will mainly involve reducing the polygons in the model. Polygon reduction is a mathematical technique whereby the number of polygons in an object can be reduced without significantly reducing the quality of the resulting model. In order to do this you can use some software, for example Blender or Cinema 4D.
Another thing to consider is the proper preparation of materials applied to the model. They can artificially inflate the model's file size.
If the model doesn't require dynamic shading and manipulation of lighting, and can be monochromatic or relatively simple, without a lot of elements, you can use Matcaps as a material. This significantly changes things when dynamic lighting is disabled on the canvas.
Shading, lighting, scene setup, and post-processing heavily impact performance, and this needs to be taken into account.
The number of elements moving within 3D animations. One element might work fine, but add 50 flying bananas, and suddenly the user's phone can crash.
Using appropriate formats for exported models and excluding unnecessary components from them is also crucial.
Insert a picture or write code?
TL;DR: It depends how much time and patience you have.
Sometimes it's easier to add an image than to try to code something. For example, when you receive elements in the design that have irregular, peculiar shapes or have a multitude of gradients, decorations, it's better to ask the designer to provide an image rather than investing time in programming. This is often applicable, especially in the case of backgrounds, not only for the entire page but also for individual smaller elements.
Remember that coding such elements is one thing, but adapting them later to responsive web design (you can read more about RWD here) can give you a headache and additionally, less importantly, consume dozens of hours. On the other hand, if the client is not in a hurry and has a budget for it, you can also consider coding decorations. In case you don’t know how to code some decorations by yourself and need developers to do it for you, contact us, we can help :).
Remember that coding such elements is one thing, but adapting them later to responsive web design (you can read more about RWD here) can give you a headache and additionally, less importantly, consume dozens of hours. On the other hand, if the client is not in a hurry and has a budget for it, you can also consider coding decorations. In case you don’t know how to code some decorations by yourself and need developers to do it for you, contact us, we can help :).
Conclusion
The design of application backgrounds requires careful consideration to ensure a seamless user experience. Gradients demand attention to text contrast and handling long pages, while infinite scroll necessitates clear instructions for background elements during scrolling. Video backgrounds can enhance visual appeal but demand thoughtful optimization to prevent page size issues. Animations, especially 3D ones, should be used sparingly, considering factors like browser compatibility, performance impact, and SEO implications.
Remember that nowadays most (?) of the users visit websites through their phones, so you need to make sure that your page is working properly on mobile devices. Optimize the page performance so it doesn’t scare away users.
Happy coding/ happy designing!