AI image generation platform – CGDream site - Featuring a dark theme, bold purple CTA buttons, and a grid showcasing diverse AI-generated artwork.
Project overview

CG Dream AI Image Generator is a cutting-edge tool developed by CGTrader that empowers users to create stunning visuals with AI-driven customization.

Our goal was to design and develop a high-converting landing page, feature pages, and other essential marketing pages to effectively showcase CG Dream’s capabilities. By focusing on clear messaging, engaging visuals, and an intuitive user journey, we aimed to attract new users, highlight key features, and drive conversions.

Tasks
  • Design a conversion-focused landing page to communicate the product's value proposition and drive user engagement
  • Create interactive animations to highlight key product features
  • Design a scalable feature page template to support product marketing and feature discovery
  • Develop a flexible use case page template
  • Design related pages to improve content discoverability and readability
  • Make the website responsive for any device
Tools
Figma
Figma
Webflow
Webflow
Keyshape
Keyshape
Adobe Photoshop
Adobe Photoshop
Adobe After Effects
Adobe After Effects
Solutions
Outcome

We delivered a sleek, high-performing marketing site that brings CG Dream AI’s capabilities to life.  With a strong visual hierarchy and user-focused flow, the design improves engagement, builds trust, and drives conversions – all while reflecting the innovation at the core of CG Dream AI.

Solutions

Wireframes

Before refining the visuals, we created wireframes to establish the structure and layout of the CGDream Landing page.  Early feedback and collaboration helped refine key interactions, leading to a design that feels both functional and visually compelling.

CGDream website wireframes in dark mode, showing side-by-side design layout variations with prominent text headings, call-to-action buttons, and user design feedback comments.
CGDream website wireframes in dark mode, showing side-by-side design layout variations with prominent text headings, call-to-action buttons, and user design feedback comments.

Wireframes

Before refining the visuals, we created wireframes to establish the structure and layout of the CGDream Landing page.  Early feedback and collaboration helped refine key interactions, leading to a design that feels both functional and visually compelling.

Wireframes

Before refining the visuals, we created wireframes to establish the structure and layout of the CGDream Landing page.  Early feedback and collaboration helped refine key interactions, leading to a design that feels both functional and visually compelling.

CGDream website wireframes in dark mode, showing side-by-side design layout variations with prominent text headings, call-to-action buttons, and user design feedback comments.

Wireframes

Before refining the visuals, we created wireframes to establish the structure and layout of the CGDream Landing page.  Early feedback and collaboration helped refine key interactions, leading to a design that feels both functional and visually compelling.

CGDream website wireframes in dark mode, showing side-by-side design layout variations with prominent text headings, call-to-action buttons, and user design feedback comments.

Wireframes

Before refining the visuals, we created wireframes to establish the structure and layout of the CGDream Landing page.  Early feedback and collaboration helped refine key interactions, leading to a design that feels both functional and visually compelling.

CGDream website wireframes in dark mode, showing side-by-side design layout variations with prominent text headings, call-to-action buttons, and user design feedback comments.

Design system

We built the design system around CG Dream’s existing branding, enhancing it with gradients and subtle blur effects to create a modern, dynamic look. This approach maintained brand consistency while adding depth and visual interest, making the interface feel more engaging and futuristic.

UI design system – CGDream brand assets preview with dark theme color palettes, purple call-to-action button variants, and minimalist interface icons.
UI design system – CGDream brand assets preview with dark theme color palettes, purple call-to-action button variants, and minimalist interface icons.

Design system

We built the design system around CG Dream’s existing branding, enhancing it with gradients and subtle blur effects to create a modern, dynamic look. This approach maintained brand consistency while adding depth and visual interest, making the interface feel more engaging and futuristic.

Design system

We built the design system around CG Dream’s existing branding, enhancing it with gradients and subtle blur effects to create a modern, dynamic look. This approach maintained brand consistency while adding depth and visual interest, making the interface feel more engaging and futuristic.

UI design system – CGDream brand assets preview with dark theme color palettes, purple call-to-action button variants, and minimalist interface icons.

Design system

We built the design system around CG Dream’s existing branding, enhancing it with gradients and subtle blur effects to create a modern, dynamic look. This approach maintained brand consistency while adding depth and visual interest, making the interface feel more engaging and futuristic.

UI design system – CGDream brand assets preview with dark theme color palettes, purple call-to-action button variants, and minimalist interface icons.

Design system

We built the design system around CG Dream’s existing branding, enhancing it with gradients and subtle blur effects to create a modern, dynamic look. This approach maintained brand consistency while adding depth and visual interest, making the interface feel more engaging and futuristic.

UI design system – CGDream brand assets preview with dark theme color palettes, purple call-to-action button variants, and minimalist interface icons.

Website design

We designed a modern, dynamic website for CGDream’s AI Image Generator. The key features are clearly showcased, while the design elements like clean typography, intuitive navigation, and vibrant colors make the overall user experience visually rich and exciting.

CGDream AI Image Generator website showcase, featuring the main homepage design with a Key AI Features grid alongside secondary scroll sections highlighting Text to Image, Image to Image, and Image to 3D capabilities.
CGDream AI Image Generator website showcase, featuring the main homepage design with a Key AI Features grid alongside secondary scroll sections highlighting Text to Image, Image to Image, and Image to 3D capabilities.

Website design

We designed a modern, dynamic website for CGDream’s AI Image Generator. The key features are clearly showcased, while the design elements like clean typography, intuitive navigation, and vibrant colors make the overall user experience visually rich and exciting.

Website design

We designed a modern, dynamic website for CGDream’s AI Image Generator. The key features are clearly showcased, while the design elements like clean typography, intuitive navigation, and vibrant colors make the overall user experience visually rich and exciting.

CGDream AI Image Generator website showcase, featuring the main homepage design with a Key AI Features grid alongside secondary scroll sections highlighting Text to Image, Image to Image, and Image to 3D capabilities.

Website design

We designed a modern, dynamic website for CGDream’s AI Image Generator. The key features are clearly showcased, while the design elements like clean typography, intuitive navigation, and vibrant colors make the overall user experience visually rich and exciting.

CGDream AI Image Generator website showcase, featuring the main homepage design with a Key AI Features grid alongside secondary scroll sections highlighting Text to Image, Image to Image, and Image to 3D capabilities.

Website design

We designed a modern, dynamic website for CGDream’s AI Image Generator. The key features are clearly showcased, while the design elements like clean typography, intuitive navigation, and vibrant colors make the overall user experience visually rich and exciting.

CGDream AI Image Generator website showcase, featuring the main homepage design with a Key AI Features grid alongside secondary scroll sections highlighting Text to Image, Image to Image, and Image to 3D capabilities.

Animations

To enhance the user’s perception, we created dynamic and engaging animations using Keyshape and After Effects.

Through smooth transitions and visually appealing effects, users can intuitively grasp the AI’s functionality, making interactions more engaging, informative, and user-friendly.

Animations

To enhance the user’s perception, we created dynamic and engaging animations using Keyshape and After Effects.

Through smooth transitions and visually appealing effects, users can intuitively grasp the AI’s functionality, making interactions more engaging, informative, and user-friendly.

Animations

To enhance the user’s perception, we created dynamic and engaging animations using Keyshape and After Effects.

Through smooth transitions and visually appealing effects, users can intuitively grasp the AI’s functionality, making interactions more engaging, informative, and user-friendly.

Animations

To enhance the user’s perception, we created dynamic and engaging animations using Keyshape and After Effects.

Through smooth transitions and visually appealing effects, users can intuitively grasp the AI’s functionality, making interactions more engaging, informative, and user-friendly.

Animations

To enhance the user’s perception, we created dynamic and engaging animations using Keyshape and After Effects.

Through smooth transitions and visually appealing effects, users can intuitively grasp the AI’s functionality, making interactions more engaging, informative, and user-friendly.

Webflow development

To bring CGDream AI’s vision to life, we leveraged Webflow for development, ensuring a seamless balance between flexibility and efficiency. Webflow’s no-code capabilities allowed us to rapidly prototype, refine interactions, and implement a pixel-perfect design without compromising performance.

Webflow development interface – CGDream site building preview with dark theme, left-hand structural element panel, and feature cards like AI Filters and Upscaling.
Webflow development interface – CGDream site building preview with dark theme, left-hand structural element panel, and feature cards like AI Filters and Upscaling.

Webflow development

To bring CGDream AI’s vision to life, we leveraged Webflow for development, ensuring a seamless balance between flexibility and efficiency. Webflow’s no-code capabilities allowed us to rapidly prototype, refine interactions, and implement a pixel-perfect design without compromising performance.

Webflow development

To bring CGDream AI’s vision to life, we leveraged Webflow for development, ensuring a seamless balance between flexibility and efficiency. Webflow’s no-code capabilities allowed us to rapidly prototype, refine interactions, and implement a pixel-perfect design without compromising performance.

Webflow development interface – CGDream site building preview with dark theme, left-hand structural element panel, and feature cards like AI Filters and Upscaling.

Webflow development

To bring CGDream AI’s vision to life, we leveraged Webflow for development, ensuring a seamless balance between flexibility and efficiency. Webflow’s no-code capabilities allowed us to rapidly prototype, refine interactions, and implement a pixel-perfect design without compromising performance.

Webflow development interface – CGDream site building preview with dark theme, left-hand structural element panel, and feature cards like AI Filters and Upscaling.

Webflow development

To bring CGDream AI’s vision to life, we leveraged Webflow for development, ensuring a seamless balance between flexibility and efficiency. Webflow’s no-code capabilities allowed us to rapidly prototype, refine interactions, and implement a pixel-perfect design without compromising performance.

Webflow development interface – CGDream site building preview with dark theme, left-hand structural element panel, and feature cards like AI Filters and Upscaling.

Template pages

As the product is constantly developing and new features are introduced, we built template pages in Webflow. They reduce design & development time, enforce brand cohesion, and allow teams to reuse layouts across different features – without compromising responsiveness or user experience.

A side-by-side user interface flow diagram showing the CGDream main homepage layout on the left, connected via a dashed line to the specific Text to Image inner feature page layout on the right.
A side-by-side user interface flow diagram showing the CGDream main homepage layout on the left, connected via a dashed line to the specific Text to Image inner feature page layout on the right.

Template pages

As the product is constantly developing and new features are introduced, we built template pages in Webflow. They reduce design & development time, enforce brand cohesion, and allow teams to reuse layouts across different features – without compromising responsiveness or user experience.

Template pages

As the product is constantly developing and new features are introduced, we built template pages in Webflow. They reduce design & development time, enforce brand cohesion, and allow teams to reuse layouts across different features – without compromising responsiveness or user experience.

A side-by-side user interface flow diagram showing the CGDream main homepage layout on the left, connected via a dashed line to the specific Text to Image inner feature page layout on the right.
CMS blog template – Wireframe to live preview comparison split-screen with dark theme, rich text blocks, and AI-generated header artwork.

Template pages

As the product is constantly developing and new features are introduced, we built template pages in Webflow. They reduce design & development time, enforce brand cohesion, and allow teams to reuse layouts across different features – without compromising responsiveness or user experience.

A side-by-side user interface flow diagram showing the CGDream main homepage layout on the left, connected via a dashed line to the specific Text to Image inner feature page layout on the right.CMS blog template – Wireframe to live preview comparison split-screen with dark theme, rich text blocks, and AI-generated header artwork.

Template pages

As the product is constantly developing and new features are introduced, we built template pages in Webflow. They reduce design & development time, enforce brand cohesion, and allow teams to reuse layouts across different features – without compromising responsiveness or user experience.

A side-by-side user interface flow diagram showing the CGDream main homepage layout on the left, connected via a dashed line to the specific Text to Image inner feature page layout on the right.CMS blog template – Wireframe to live preview comparison split-screen with dark theme, rich text blocks, and AI-generated header artwork.

Adaptive design

We carefully optimized typography, spacing, and interactive elements to enhance readability and ease of use. We delivered a responsive, immersive experience that adapts to user needs, whether on a large monitor or a smartphone screen.

Mobile UI design – “CGDream” smartphone app preview with dark theme, prominent hero section, and interactive feature cards.
Mobile UI design – “CGDream” smartphone app preview with dark theme, prominent hero section, and interactive feature cards.

Adaptive design

We carefully optimized typography, spacing, and interactive elements to enhance readability and ease of use. We delivered a responsive, immersive experience that adapts to user needs, whether on a large monitor or a smartphone screen.

Adaptive design

We carefully optimized typography, spacing, and interactive elements to enhance readability and ease of use. We delivered a responsive, immersive experience that adapts to user needs, whether on a large monitor or a smartphone screen.

Mobile UI design – “CGDream” smartphone app preview with dark theme, prominent hero section, and interactive feature cards.

Adaptive design

We carefully optimized typography, spacing, and interactive elements to enhance readability and ease of use. We delivered a responsive, immersive experience that adapts to user needs, whether on a large monitor or a smartphone screen.

Mobile UI design – “CGDream” smartphone app preview with dark theme, prominent hero section, and interactive feature cards.

Adaptive design

We carefully optimized typography, spacing, and interactive elements to enhance readability and ease of use. We delivered a responsive, immersive experience that adapts to user needs, whether on a large monitor or a smartphone screen.

Mobile UI design – “CGDream” smartphone app preview with dark theme, prominent hero section, and interactive feature cards.
No items found.

Outcome

We delivered a sleek, high-performing marketing site that brings CG Dream AI’s capabilities to life.  With a strong visual hierarchy and user-focused flow, the design improves engagement, builds trust, and drives conversions – all while reflecting the innovation at the core of CG Dream AI.

WebFolks has been a reliable design partner for CGTrader, helping us create effective landing pages as well as more complex design solutions. Their team combines strong visual taste with a practical understanding of business goals, delivering clean, user-friendly designs that support our marketplace needs. We appreciate their flexibility, speed, and attention to detail.
Edvardas Smulaitis
CPO at CGTrader

More works

Have a project in mind?

Let’s discuss your goals, challenges, and how WebFolks can help you move forward.

200+
Projects shipped
70+
Clients supported
Startups & Enterprises
Trusted by growing teams