I made the Same Website in 3 No-Code platforms
TLDRIn this video, the creator shares their journey of designing a website to showcase pixelated cat wallpapers using three leading no-code platforms: Webflow, Framer, and Wix Studio. They detail the process of setting up the website layout, including a logo, text, and floating images with a subtle fade effect. The creator also explores the unique features of each platform, such as Wix Studio's AI image creator and responsive AI feature, which simplifies the process of making the website mobile-friendly. The video concludes with the addition of a product gallery and a contact form, emphasizing the ease of use and intuitive interface of Wix Studio for both business and design needs.
Takeaways
- 🎨 The creator wanted to make a custom wallpaper and ended up designing a website to showcase various cat-themed wallpapers.
- 🌐 The website was developed using three no-code platforms: Webflow, Framer, and Wix Studio.
- 🖌️ A key feature of the website is the use of a pixelated cat logo and large, attractive text with floating elements for visual appeal.
- 📱 The creator utilized Wix Studio's advanced features, such as a global CSS file and AI code assistant, to achieve a gradient blur effect.
- 🔄 Animations for the floating elements were added using simple loop functions in Wix Studio and required more complex setups in Framer.
- 📐 Webflow's layout and spacing tools were used to position elements precisely, and custom CSS was employed for specific effects.
- 🛍️ A product showcase was created with a gallery for the wallpapers, including download options and a contact form for custom requests.
- 📱 The responsiveness of the website was ensured using Wix Studio's AI feature, which adapts the design for different screen sizes.
- 🛒 An e-commerce functionality was added to the website, allowing for the sale of wallpapers directly through the platform.
- 📸 The creator used Wix Studio's AI image creator to generate a unique background photo for the product showcase.
- 🎉 The final website was published with monitoring and management tools available in Wix Studio's workspace for the creator to track the site's performance.
Q & A
What was the creator's motivation for making their own wallpaper?
-The creator struggled to find a perfect wallpaper for their phone and felt uncomfortable with the available options, so they decided to make their own.
What is the name of the no-code platform that sponsored the video?
-Wix Studio sponsored the video.
How does the creator describe the process of adding a logo to the website on Wix Studio?
-The creator starts by setting the background color to black, then adds an image element, replaces the default image with their logo, adjusts the size, and positions it at the top of the page.
What is the name of the font used for the text in the website design?
-The font used is called Bricolage Grotesque.
How does the creator achieve the fading effect for the images on Wix Studio?
-The creator uses a global CSS file to add a mass gradient blur in CSS for the fading effect.
What is the main challenge the creator faced when animating images on Framer?
-The main challenge was that animating the images was not as simple as on Wix Studio; the creator had to manually create a new loop, adjust the movement, and change the offset into transition easing.
How does Webflow differ from the other no-code platforms mentioned in terms of design logic?
-Webflow operates with a logic similar to code, requiring the user to position elements using the interface rather than dragging them into place.
What feature of Wix Studio does the creator find particularly useful for creating a responsive design?
-The creator finds the responsive AI feature of Wix Studio particularly useful, as it automatically prepares every section for different breakpoints.
How does the creator add a parallax scroll effect on Wix Studio?
-The creator adds a new section, inserts the image, stretches it to fit the screen, and then selects the image to apply a parallax scroll effect from the animations tab.
What is the name of the feature on Wix Studio that the creator uses to showcase their product?
-The creator uses the Pro Gallery feature on Wix Studio to showcase their product.
How does the creator ensure their website is responsive on mobile and tablet devices?
-The creator uses Wix Studio's responsive AI feature to prepare every section of the website for different screen sizes.
What additional feature does the creator add to their website to allow users to contact them for specific designs?
-The creator adds a quick form to their website, allowing users to input their details and request specific designs.
Outlines
🎨 Creating a Personalized Cat Wallpaper Website
The speaker discusses their journey to create a unique wallpaper for their phone. After failing to find a suitable option, they decide to design a pixelated cat wallpaper themselves. With a vision to offer personalized cat wallpapers to everyone, they explore three no-code platforms to build a website: Webflow, Framer, and Wix Studio. The video outlines the process of creating a website with a logo, attractive text, and floating images using these platforms. Wix Studio is highlighted for its ease of use and features like the AI image creator and responsive AI feature.
🛍️ Building an Interactive Product Showcase with E-commerce Features
The second paragraph delves into the process of creating an interactive and artistic product showcase on the website. The speaker uses Wix Studio's AI image creator to generate a black and white background photo and implements a parallax scroll effect for an engaging user experience. They also discuss the integration of an e-commerce component, such as a pro gallery for displaying wallpapers with descriptions and download options. Additionally, a contact form is added for users seeking custom designs. The paragraph concludes with the speaker's preference for Wix Studio due to its intuitive UI and comprehensive features, including responsiveness across different devices.
Mindmap
Keywords
💡No-Code platforms
💡Pixelated Cat
💡Wix Studio
💡Animations and Effects
💡CSS
💡Parallax Scroll Effect
💡Responsive AI Feature
💡Webflow
💡Framer
💡Product Showcase
💡AI Image Creator
Highlights
The creator struggled to find the perfect wallpaper for their phone and decided to make their own.
A cute pixelated cat was designed as a wallpaper, sparking the idea for a customizable cat wallpaper website.
Three no-code platforms were chosen for building the website: Webflow, Framer, and Wix Studio.
Wix Studio was used to create a new site with a blank canvas, starting from scratch.
The background color was set to black, and elements like the logo and text were added using the platform's interface.
Site Styles tab was used to update default typography and color settings for consistency.
Floating images were added with a subtle fade effect using Wix Studio's animation and effects features.
Coding was utilized to create a CSS gradient blur for the fading effect.
Framer allowed for reusable color and font assets, and a fixed position for the logo.
Animating images in Framer required manual adjustments and the use of loops.
Webflow operates with a logic similar to code, allowing for precise placement and styling.
Custom fonts and styles were added in Webflow, and animations were created using page triggers and interactions.
Wix Studio's AI image creator was used to generate a unique black and white background photo.
A parallax scroll effect was intuitively added in Wix Studio for an enhanced user experience.
Framer required manual setup for the scroll transform effect to achieve a similar parallax effect.
Webflow used a combination of sections and interactions to create a scroll animation for the images.
Wix Studio's responsive AI feature automatically adjusts the website for different screen sizes.
A product showcase was created with a pro gallery, customizable animations, and a download feature.
Wix Studio was chosen for its simplicity, intuitive UI, and comprehensive features for both business and design.
The final website design was monitored and managed from Wix Studio's workspace, allowing for easy updates and maintenance.