How To Make A Template Feel Unique

Key Concepts

Template Transformation: The core idea of taking a basic website template and elevating it to a premium, award-winning design.
Typography: The art and technique of arranging type, including font selection, hierarchy, and spacing.
AI Image Generation: Utilizing artificial intelligence tools to create unique and compelling visuals.
Design Details: Adding subtle elements and touches to enhance uniqueness and break away from template origins.
Animation: Incorporating motion and interactivity to bring a design to life.
Reloom: A UI component library providing pre-built layouts and components.
Figma: A design tool used for prototyping and creating user interfaces.
Webflow: A web design tool that allows for the creation of responsive websites with animations.
Premium Fonts: High-quality, often paid, fonts that offer superior aesthetics and uniqueness compared to free alternatives.
AI Image Models: Different algorithms or versions within AI image generation tools that can produce varying results.

Transforming a Boring Template into an Award-Winning Design in Four Steps

This video demonstrates a four-step process to transform a basic website template into a unique and premium design, challenging the notion that using templates equates to a lack of professional skill. The example used is a website for an AC remote company.

Step 1: Typography

This is presented as the most crucial step, broken down into three parts:

Picking the Right Font: The presenter emphasizes avoiding common, free Google Fonts that often look generic. Instead, the recommendation is to use premium fonts from foundries like Pangram Pangram and Margolave. These fonts are highlighted for their inherent quality, making any text written with them look good. The ability to download and try these fonts for free is also mentioned.
Content of the Text: Experimenting with different wording and phrases for the website's copy.
Hierarchies (Sizes and Spacing): Adjusting font sizes, weights (e.g., bold, light), and line spacing to create visual interest and convey different moods.

Process within Figma:

Importing a basic "header 30" layout from Reloom into Figma.
Testing various premium fonts on the word "remote."
Experimenting with different text hierarchies, such as making "remote" lighter and smaller, or using phrases like "make it 22°" or "cooler by design."
Exploring different styles like uppercase, bold, and minimalistic layouts, noting how these changes dramatically alter the design's feel and uniqueness.
The presenter shows examples that resemble Netflix show slides or fashion magazine layouts due to effective typography.

Key Argument: Good typography alone can elevate a design significantly, with some designers even stopping at this stage for minimalistic websites.

Step 2: Creating Amazing Images

This step focuses on leveraging AI tools to generate unique visuals, moving beyond the limitations of traditional stock photography.

Process:

Gathering Inspiration:
- Looking beyond web design for inspiration, suggesting platforms like Cosmos (a curated visual discovery tool) or fashion websites.
- Collecting images that resonate visually, even if unrelated to the product, to inform the aesthetic.
- The example includes collecting images related to fashion, lifestyle products, and even perfume advertisements, noting the potential visual similarities between an AC remote and a perfume bottle.
Creating Imagery with AI:
- Taking a photo of the actual AC remote.
- Using AI image generation tools (specifically mentioning Freepik and experimenting with different models like "nano banana" from Google).
- Prompt Engineering: Demonstrating the iterative process of refining prompts. An example prompt is "black and white fashion photography, close-up of a model biting the remote, high emotion, high contrast flash photography, black background," along with uploading a reference image of the remote.
- Iteration and Model Selection: Highlighting that initial AI outputs are often not perfect and require experimentation with different prompts, styles, and AI models. The presenter shows examples of failed attempts (e.g., remote dropping from lines, abstract refractions) and successful iterations.
- Specific Visual Concepts Explored:
  - Black and white raw fashion photography with emotional expressions.
  - Compositions involving clouds (related to temperature control).
  - Images with water droplets (cold/hot).
  - Desert scenes with scarves and mirrors for a surreal effect.
  - Close-up product shots with specific lighting.
  - Silhouette imagery inspired by perfume ads.
- The presenter expresses particular excitement for an image with a woman holding the remote, noting its emotional impact and potential for premium design.

Key Argument: AI tools democratize the creation of unique and high-quality imagery, allowing designers to achieve results previously only possible with large budgets.

Step 3: Adding Details

This step involves adding subtle design elements to further differentiate the template and make it look unique.

Examples of Details Added:

Navigation: Incorporating a logo and navigation links at the top.
Text Treatment: Splitting text with a dividing line for better balance and uniqueness.
Interactive Cues: Adding a "scroll for more" indicator.
Layout Breaks: Creating a broken grid layout with images that extend beyond their containers.
Rotated Text: Using text rotated 90 degrees as a visual element, even if it slightly impacts readability, to add a unique touch (e.g., "hit your perfect 22°").
Text Alignment: Aligning text to the top or bottom of visual elements instead of centering.
Grid Lines: Adding a grid of lines at the bottom of the design.
Button Styling: Rounding buttons and adding a "peel" effect for a mouse scroll indicator.

Key Argument: These small additions, when thoughtfully applied, can completely transform the perception of a design, making it appear far removed from its template origins.

Step 4: Adding Animation

The final step involves bringing the design to life with animations, using Webflow for implementation.

Process:

Importing the Reloom components into Webflow.
Replacing placeholder text and images with the developed content.
Utilizing Webflow's animation features, specifically mentioning the "Gap animation" to create timelines for animating elements on the screen.
The presenter notes that animating elements took only a few minutes due to the structured nature of the Reloom components.

Outcome: The animated website is described as having a "super super smooth" intro animation, feeling premium and unique, and comparable to an award-winning design.

Key Argument: Animation adds a final layer of polish and interactivity, making the design feel dynamic and professional, further obscuring its template origins.

Conclusion/Synthesis

The video effectively demonstrates that using templates is not a limitation but a powerful starting point. By focusing on typography, AI-generated imagery, strategic detailing, and animation, designers can transform even the most basic templates into highly unique, premium, and potentially award-winning websites. The process emphasizes creativity, experimentation, and leveraging modern design tools and technologies. The presenter encourages viewers to explore these possibilities and move beyond the stigma associated with template usage.