Disclaimer: This article is written from the perspective of a person who is relatively new to website design, especially Wix Studio. If you are already an advanced user, you can skip most of the information, but check out the "Usage Tips" section, as you might discover something interesting there.
I recently started learning and using Wix Studio, as this is one of the popular tools among a couple of freelancing communities I am part of.
I was planning to create a portfolio website for myself, and being new to the world of no-code tools and web design in general; I expected it would not be very straightforward. To my surprise, the tool is easy to use, and I was able to create a decent version of my website very quickly.
It was not very soon that I realized that the initial version of my website had a decent structure and basic styling, but it lacked liveliness. That's when I started experimenting with the platform and its design elements, different from the usual containers, colors, and boxes.
In this article, I want to discuss these elements that helped me transform my dull-looking website into something rather playful.
Pattern overlays:
Pattern overlays are like background images, but instead of images, you get patterns made of lines, textures, etc.
They are more like wallpaper, which people use these days to give a premium look to selected walls in your home. That's exactly how I used the pattern overlay on my website, not at all the places but in selected areas to make their uniqueness shine.
Here is an image showing the selective use of Pattern Overlays in the alternate Services section.
Wix Official Documentation Link
Here is the link to the official documentation on "Adding a pattern overlay to the section background."
Usage Tips:
It's possible that some Pattern overlays may not look good on your website immediately, or they may not match your website's color scheme.
In such cases, you can use background overlays to enhance their appearance. Background overlays complement Pattern overlays really well. You can use solid colors or gradients to make it more creative.
Image: Use of Pattern Overlay with Background Overlay (In this case a linear Gradient)
Transparent Video
In my opinion, transparent video is one of those features that fall under the "Cool" category. I have added it to a few places on my website, and I love how easy it is to use and integrate it on your website.
At one point, I was struggling to make the "My Expertise" section on my website look more appealing. Despite trying different approaches, it still felt incomplete.
That's when I stumbled upon Wix Studio's Transparent Videos section and realized it could be the perfect solution. I added one of the videos to the introductory tile, and it made a significant difference to the overall appearance of the section.
Here are two videos showing the before and after of this section.
Video showing "My Expertise" section without "Transparent Video"
Video showing "My Expertise" section with the use of "Transparent Video"
I found it extremely useful that I could resize them according to my needs.
I liked them so much that I ended up using them as a placeholder page for one of the incomplete pages. To my surprise, it made the page look cool even without the actual content.
Video showing the use of “transparent video” on a 404 page
One of the people who reviewed my website explicitly talked about liking this page. I also found a matching copy using ChatGPT to make it work with this video.
Wix Official Documentation Link:
Usage Tips
Take your time finding the right video for your use case.
Experiment with the video option and size.
They can be a great substitute for 404/empty pages.
You can customize and change their behavior to match the theme/styling of the website.
Animations (Inbuilt and Custom)
I was not expecting to use animation on the first website I worked on. Somehow, coming from the software world, I always felt that implementing animation would be difficult, but I was surprised again; creating various animations like entry/hover with the provided options was super easy.
But then I needed something different for my hero section, and while playing with all the available options, it struck me that I could use it cleverly to stack my expertise in the hero section.
This video shows the use of "Bounce" animation on entries for Expertise tags in the Hero section. I used the element's "Rotate" property to give them this random stacking effect.
Custom Animations:
For most scenarios, the options in the animation section should serve as a generic animation use case. But I was just checking out the interactive sections available in the section library that comes with Wix, and that's where I came across an animation that I immediately decided to use for the "My Expertise" section.
Here is the video of the sections I found in the Wix Library.
I didn't want to use it as is, but the good part was that you have access to the layers using which this animation was created, and it was really easy for me to reverse engineer how they created this animation using the custom animation feature.
I just played around for a while and figured out how to make it work for my use case. This is the result. You can see how I made some adjustments here and there to change the position of the CTA button, Card styling, and Stacking behavior to make it personal.
Wix Official Documentation Link: Adding effects and animations
Usage Tips:
Check the existing Interactive Sections Wix library to see if you can use any of them, and then make a couple of tweaks to personalize them as per your needs. Trust me, it is not that hard.
Start with the basic animations and effects available for elements and move to custom when you can't make them work.
Having said that, this is the area where I think I can learn and experiment a lot more.
Gradients:
As I mentioned, I began with a basic website design and experimenting with gradients. They quickly became an important element of my website's overall aesthetic, and you'll find them used in many places throughout the site. Moreover, combining gradients with pattern overlays creates an appealing effect.
I have already shown you how I have used Gradients and the Pattern overlays above. Here are some other ways I have used Gradient on my website.
1. Use of Gradient in Navbar
2. Use of Gradient as image overlay to increase contrast b/w text and image
Wix Official Documentation Link
Usage Tips:
- Do not forget to save your gradients. It helps you apply them in multiple places easily.
- Do not go super crazy; keep them clean and minimal.
- Gradients as Overlays on Patterns make a killer combination.
Images with Masking:
Images are an integral part of any website, and Wix's built-in editor offers many exciting features to enhance them. Although I haven't explored them yet, I have utilized image masks in a couple of places on my website to amplify their impact.
Sometimes, displaying an image as it is may not be enough. The Wix library has an extensive collection of image masks that can help you experiment with different layouts and create unique designs.
Video showing how you can use images with masking options to experiment with various shapes.
The Wix inbuilt image editor is also good. It offers utilities like filters, overlays, and background removal, which makes it really easy to do everything with your image right there.
Wix Official Documentation Link:
Usage Tips
Always use high-quality images on your website.
Do not overuse editing features, and ensure that masking does not remove important parts of your image.
Wix has a “Focus on image part” option, which allows you to focus on a specific portion of the image.
These were all the things that I experimented with from the website's look and feel perspective. I also did other things to improve the website's structure and process of making changes across pages, but that is an article for another day.
You can also check my portfolio website* to see all these pieces stitched together in one place. I am still new to this and hope to learn and share much as I continue this Journey.
*I have updated my portfolio website since the time of writing this post, so you might find that some of the examples present over here are no longer present on the website, but you will still be able to see all the elements being used in one way or another even in the current version.