New
New
New
Tips & tricks
- Mistakes
- Websites
Tips & tricks
- Mistakes
- Websites
Tips & tricks
- Mistakes
- Websites
Don’t Make These Mistakes on Your Framer Website
I went through my subscriber’s sites and found a few common mistakes made on Framer websites. And then gave specific solutions on how to fix them. I’ll be listing out the mistakes and their fixes. Enjoy.
Posted by
Nandi
Table of contents
1. Out of sync animation on different items
The mistake:
While taking a look at one website, I noticed something a little weird after clicking on the nav bar. The “about” text was looking slightly delayed. Animations on a site that are out of sync, disrupt the flow.
1. Out of sync animation on different items
The mistake:
While taking a look at one website, I noticed something a little weird after clicking on the nav bar. The “about” text was looking slightly delayed. Animations on a site that are out of sync, disrupt the flow.
1. Out of sync animation on different items
The mistake:
While taking a look at one website, I noticed something a little weird after clicking on the nav bar. The “about” text was looking slightly delayed. Animations on a site that are out of sync, disrupt the flow.
The "about" text is getting animated in differently.
The "about" text is getting animated in differently.
The "about" text is getting animated in differently.
The fix:
The issue arose because the transition settings were different compared to other items. To fix this, ensure that the transition settings are consistent. To take the animation to the next level, you can add different delays to each item, creating a staggered effect from top to bottom.
2. Too much variation in hero section text
The mistake:
When there are too many variations in text size and color within the hero section, it can make it look cluttered and messy.
Inconsistent text styling can take away from your message and make your design look unprofessional.
The fix:
The issue arose because the transition settings were different compared to other items. To fix this, ensure that the transition settings are consistent. To take the animation to the next level, you can add different delays to each item, creating a staggered effect from top to bottom.
2. Too much variation in hero section text
The mistake:
When there are too many variations in text size and color within the hero section, it can make it look cluttered and messy.
Inconsistent text styling can take away from your message and make your design look unprofessional.
The fix:
The issue arose because the transition settings were different compared to other items. To fix this, ensure that the transition settings are consistent. To take the animation to the next level, you can add different delays to each item, creating a staggered effect from top to bottom.
2. Too much variation in hero section text
The mistake:
When there are too many variations in text size and color within the hero section, it can make it look cluttered and messy.
Inconsistent text styling can take away from your message and make your design look unprofessional.
Too much text variation.
Too much text variation.
Too much text variation.
The fix:
Make sure not to use more than two fonts and maintain a few consistent text sizes. Avoid using random sizes for each text element and different fonts.
3. Blurry logos
The mistake:
I noticed some sites used images for logos, resulting in a blurry, pixelated appearance.
Blurry logos can give the impression of a low-quality site and reduce brand credibility.
The fix:
Make sure not to use more than two fonts and maintain a few consistent text sizes. Avoid using random sizes for each text element and different fonts.
3. Blurry logos
The mistake:
I noticed some sites used images for logos, resulting in a blurry, pixelated appearance.
Blurry logos can give the impression of a low-quality site and reduce brand credibility.
The fix:
Make sure not to use more than two fonts and maintain a few consistent text sizes. Avoid using random sizes for each text element and different fonts.
3. Blurry logos
The mistake:
I noticed some sites used images for logos, resulting in a blurry, pixelated appearance.
Blurry logos can give the impression of a low-quality site and reduce brand credibility.
Blurry Lemon squeexy logo.
Blurry Lemon squeexy logo.
Blurry Lemon squeexy logo.
The fix:
You need to find and use SVG logos. SVGs are made up of vectors that can be scaled down or up without becoming pixelated, ensuring crisp and clear logos at any resolution.
4. Inconsistent padding on buttons
The mistake:
The buttons on one site I saw had inconsistent padding, making it look unbalanced, and a bit weird.
If you have inconsistent padding, it can make buttons look uneven and affect the overall aesthetic of your site.
The fix:
You need to find and use SVG logos. SVGs are made up of vectors that can be scaled down or up without becoming pixelated, ensuring crisp and clear logos at any resolution.
4. Inconsistent padding on buttons
The mistake:
The buttons on one site I saw had inconsistent padding, making it look unbalanced, and a bit weird.
If you have inconsistent padding, it can make buttons look uneven and affect the overall aesthetic of your site.
The fix:
You need to find and use SVG logos. SVGs are made up of vectors that can be scaled down or up without becoming pixelated, ensuring crisp and clear logos at any resolution.
4. Inconsistent padding on buttons
The mistake:
The buttons on one site I saw had inconsistent padding, making it look unbalanced, and a bit weird.
If you have inconsistent padding, it can make buttons look uneven and affect the overall aesthetic of your site.
Left side padding on 8.
Left side padding on 8.
Left side padding on 8.
The fix:
Clean up the padding by ensuring the same amount is applied all the way around each button. This creates a harmonious and visually pleasing design.
5. Inconsistent max width
The mistake:
The different sections of some websites I had a look at, had varying max widths, creating an uneven visual flow.
Inconsistent max widths can make a site look disconnected and affect readability.
The fix:
Ensure the max width is set consistently across all website sections. This maintains a unified layout and enhances the user experience.
6. Image flashing on hover
The mistake:
Some images on one site flashed abruptly when hovered over, which can be super distracting.
It just looks quite unprofessional and not clean at all.
The fix:
Create two separate frames, each with a different image fill, and place them on top of each other. Since image fill changes are not animated across variants, using opacity value changes allows for a smooth transition rather than an abrupt switch.
The fix:
Clean up the padding by ensuring the same amount is applied all the way around each button. This creates a harmonious and visually pleasing design.
5. Inconsistent max width
The mistake:
The different sections of some websites I had a look at, had varying max widths, creating an uneven visual flow.
Inconsistent max widths can make a site look disconnected and affect readability.
The fix:
Ensure the max width is set consistently across all website sections. This maintains a unified layout and enhances the user experience.
6. Image flashing on hover
The mistake:
Some images on one site flashed abruptly when hovered over, which can be super distracting.
It just looks quite unprofessional and not clean at all.
The fix:
Create two separate frames, each with a different image fill, and place them on top of each other. Since image fill changes are not animated across variants, using opacity value changes allows for a smooth transition rather than an abrupt switch.
The fix:
Clean up the padding by ensuring the same amount is applied all the way around each button. This creates a harmonious and visually pleasing design.
5. Inconsistent max width
The mistake:
The different sections of some websites I had a look at, had varying max widths, creating an uneven visual flow.
Inconsistent max widths can make a site look disconnected and affect readability.
The fix:
Ensure the max width is set consistently across all website sections. This maintains a unified layout and enhances the user experience.
6. Image flashing on hover
The mistake:
Some images on one site flashed abruptly when hovered over, which can be super distracting.
It just looks quite unprofessional and not clean at all.
The fix:
Create two separate frames, each with a different image fill, and place them on top of each other. Since image fill changes are not animated across variants, using opacity value changes allows for a smooth transition rather than an abrupt switch.
Smooth opacity transition setup.
Smooth opacity transition setup.
Smooth opacity transition setup.
Final thoughts
Mistakes happen, but with a little guidance, you can turn them into opportunities for growth. You’ll be a Framer pro in no time.
If you want to see some other mistakes to avoid, check out my Youtube video: Roasting My Subscribers’ Framer Websites
Final thoughts
Mistakes happen, but with a little guidance, you can turn them into opportunities for growth. You’ll be a Framer pro in no time.
If you want to see some other mistakes to avoid, check out my Youtube video: Roasting My Subscribers’ Framer Websites
Final thoughts
Mistakes happen, but with a little guidance, you can turn them into opportunities for growth. You’ll be a Framer pro in no time.
If you want to see some other mistakes to avoid, check out my Youtube video: Roasting My Subscribers’ Framer Websites
