Roasting My Subscribers' Websites (And Fixing Them)
ฝัง
- เผยแพร่เมื่อ 5 ก.ค. 2024
- 🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this video, I reviewed my subscribers' Framer websites and gave honest feedback on what they could improve, while also sharing some tips and tricks inside of Framer.
Hope this video helps! :)
Site 01: asapdesign.co/
Site 02: www.designify.design/
Site 03: websitesforlawyers.framer.ai/
Site 04: www.fiveleaf.co.uk/
Site 05: www.carbondraft.com/
Site 06: www.creativersehq.com/
Site 07: usevisuals.com/
Site 08: www.artiflexstudios.com/
Site 09: manivannan.design/
Site 10: toluwabori.framer.website/
Site 11: discovernotes.framer.website/
0:00 - Introduction
0:28 - Site 01
2:34 - Site 02
4:36 - Site 03
11:06 - Site 04
14:08 - Site 05
15:52 - Site 06
17:26 - Site 07
20:05 - Site 08
22:40 - Site 09
26:05 - Site 10
29:17 - Site 11
32:05 - Additional resources
Follow me on:
X: x.com/learnframer
Instagram: / framer.university
would you like to see more videos like this? if yes, drop your Framer website in the comments:)
FYI, you asked to "drop your Framer website in the comments", I tried doing that and my comment with a url gets deleted or something...
yes
This was fun + super helpful and educational! Definitely would love to see more 🙏🏽
Thank u so much :) I’m glad u liked it.
I might make more then 🙏
Thank you Nandi, we'd love for more of videos like this. It is really helpful.
Hey! Thank you so much for the feedback! :) I’ll think about making similar videos in the future:) stay tuned!!
You are so sweet about the feedback too ❤
This was very helpful , more of these please ❤
Thanks for the feedback
I learnt so much watching this, thanks for the video!!
So happy to hear this 🫶
Awesome I really enjoyed working with him ❤ the designer who owns the website
I’ve just watched and enjoyed the whole video, even though, as you’d agree, it’s not a short video but if the content makes you want to continue watching, you can certainly watch longer videos 😊👍 More like this please 🙌
Thank u for your comment :) will do more of these then!
Love this! So much golden nuggets!
🫶🫶 thanks a lot
This is a great way to learn, you should do more.
Appreciate the comment :) will do more!
Very great video brother! Loved it
Thank you so much 🫶
Thank you! I find it very helpful. Please make more ...and please release the course :)
Glad to hear this :)
Courses are coming this year. One step at a time 🫶 stay tuneed
Love your videos, content, service and website! Been using it religiously. Although I have a question for you. What software do you use to record your screen for your videos? As I noticed some nice little details, like the cursor having motion blur and what not.
Thanks for the support :) i’m glad you enjoy my content!
I use Screen Studio for recording. It’s great.
Great tips ! Thank you for sharing. I'd also recommend to everyone to abandon using custom cursors. They almost never work as smooth and precise as regular OS cursors which in turn makes the site feel sluggish. Plus they are buggy. They switch states properly in one browser but are mixed with OS cursors in the other. It's a mess. It's better to focus on a proper, clean design than to add something that most users are not used to and has potential to introduce viewing problems.
It's the little things that make a website perfect and smooth. Upload Next Episode ❤
You’re absolutely right!
I’ll make similar videos in the future :)) thanks for the comment
I would love to see how you systemize your method of building a site, like a Saas site for example , whilst you apply all of the best practices that are at play from styles , sizings , layouts , placements , colors , components (variants, variables, transitions).
I’ll work on the easiest way to convey that information in my upcoming courses. 🫡
Need more videos like these
Noted 🫡
Was that a bug at 25:37? The system cursor was set overtop of the custom cursor, which was the problem you were trying to fix originally. Otherwise, great video!
Yes, unfortunately the screen recorder sometimes doesn’t record the cursors accurately.
If you follow the steps shown in the video, you can fix the issue though. Lemme know if you need help :)
You are the final boss of Framer Nandi.
Like Elden Ring, no matter how much time it’s gonna take but I will tryhard af to reach your level 🔥
Did you ever consider doing a video about you ? To tell us where your Framer skills brought you professionally ? Are you a freelancer, an employee working for Framer ? Knowing these things would be so much valuable for people wondering where Framer could bring them 👍
Haha thank u so much 😁 never got this compliment:)
I’m fully focused on building Framer University and teaching designers how to use it. I do this full time.
Every now and then I accept freelance website projects but I usually don’t have time for them.
I agree with you, it would be a great idea to give people perspective. One thing is sure: if you master Framer, you can create websites for clients and make a living with it. This is what many people do for example on contra.com/framer.
Lemme know if you have any questions though. 🫶
Hey can you make the video on how do i actually transfer the website to client or host for them for recurring revenue
Here’s how:
x.com/learnframer/status/1783447415905026473?s=46
Tbh I don't agree with most of your feedback about those websites and potential "improvements". Starting from site 01 - all that bit about the primary btn in the header - both buttons (header and hero) leads to the same page/action, so... It's not like the user won't click any due to presence of two buttons instead of one hierarchy-wise. In Site 02 - this IS the case - so here - I do agree.
Second site lacks a little more - the typography is off, especially font-size-wise - the content is way too small + that marquee w. chips w. hover state are misleading.
That PNG is not pixelated, it's blurry. :) I would add some feedback about odd price numbers and too long and too dull FAQ section. But it looks like you just went through hero sections for sake of time.
Site 03 - I'm also a fan of fixing to the horizontal center the menu items like in this case - so I do agree with you, but there's nothing wrong with leaving it space-between - this is just a design-decision that the author went with, but I wouldn't treat this one as something wrong. It's just a personal preference imo. Further on - position and scale of that yellow button is off, and those subheadings above titles - they look like buttons, so I woild restyle them so they would look like an actual text, and not like a misleading clickable button, but you just went with adding more emphasis on that button-ish look.
Footer needs a rework, same with that left-to-right 1/2 1/2 sections - they look like an afterthought instead of something well prepared.
Site 04 - it can look like its scrollable horizontally so I'm missing a scroll-down indicator - it could be just a plain text info, or something fancier.
This site is also a pefect example of a site that lacks text-scaling for bigger resolutions - the whole content across the whole site should be bigger for this resolution. It would fix the whitespace issue and the odd positioning/spacing. So... I don't agree with a simple/easier fix by adding max-width for the main content container. Footer - as almost always - looks like something that was just required, not actually designed.
Site 05 - I like it overall. I would add a little bit more styling to the header-menu links, but overall - as site 04 - this one als lack the global-layout scaling rules/logic. I have mixed feeling about that logo and the way the author went with white outline for first word in the wordmark - I get the idea - make sure its readable on dark background, but again - this looks lazy, it should be addressed with swithing to an alternative version of a logo on dark bg.
Site 06 - needs a lot of work, but at least the header is spot on. Hero - buttons should be bigger, same with parapgraph text. Lack of label for those logos as part of social proof is also not great. And again - those button-like subheadings, especially with almost the same looking buttons in the same section below (Booked/Subscribed). U didn't even scroll through the whole page, so no feedback further on for this one.
Site 07 - again - the buttons are fin in this eaxmple. I miss the site/company name in the header - this type of sign (abstract) is not enough for a first glimpse/contact for the visitor. I would also add a heading above those 3 assets tiles. Learn more for asset tile is also misleading - view details/buy/download, but learn more about digital download? It sounds odd imo.
Great call on the foote width - not matching the header here.
Site 08 - lack of emphasis on a primar action header, while also - the button in the header looks way too similar to the design elements of the graphic on the right, so it not as eye-catching as it should be. The labels itself for the button is also not great "Get _WHAT_? started today"? It doesn't go well with the context of both the menu-links and the heading above the button.
And again - the whole thing is just too small, lacks that content-scaling for 1600+ pixels width.
Site 09 - again - the content is too small for this specific screen estate. If this would be 1.25x bigger, it will align perfectly and pop in a right way. Buttons in those tiles are too small and lacks of bottom-padding. And again - font-sizes are way too small.
Site 10 - first site in this set that actually done the font-scale right.
Lacks the style for cursor: pointer in the header menu links.
And in these black-white sites, I would play more with the grey tones and/or opacity for the link hover effect instead of scrolling the same word. It would be much more elegant and suited for this style of web design + it would be more prominent. But again - this one is a winner imo. :)
Site 11 - too small sign in header, lack of text/site name. Too narrow grid for main content.
Info about star reviews shoudl be above the actual reviews for better readability.
Overall - ok design, but quite boring/too template'y.
I hope I helped a little, and not offended anyone :D
The main takeaway for all of those (besides site 10) - learn more about layout/text scalability for bigger screens.
Thank u so much for all these additions! 🫶🫶 i wanted to focus a bit more on issues that I connect to tips and tricks in Framer and not simply layout/typography errors since those are learned by training your designer eye and practicing a lot.
But, again, thanks for this helpful comment 🙌🙌
we should do themed websites reviews such as SaaS related, ecommerce related etc. Wouldn't it be more fun? Either that or a proposal you choose so we can work on the same kind of website and see the differences between subscribers
I like this idea:)
please make part-2
Noted 🫡🫡
how did you make your twitter look that way?
Minimal Twitter chrome extension:)
please do a detailed CMS video
I’ll definitely make one. What do you wanna learn about the CMS specifically?
@@framer.university I know how CMS work in framer but I don't fully understand how to set up a CMS page and customise the way we want. I know there are so many videos on this but Your way of explanation is easy to understand
you're not fixing the last part, well you did the footer CTA. but not the tablet part.
good video though, keep it up.
So many "would-be designers" promising to deliver a website a cut above the rest, but failing to notice the most common mistakes, sheesh
Everyone starts somewhere! ✌️ totally fine:)
missed mine :((
Sorry mate! Feel free to send it in DM and I’ll share my thoughts:)
whatever you're doing to your audio... you sound like a robot
I know! But don’t know why 😤
hey bro can you please stop putting your face in the thumbnails? thx
I can’t.
@@framer.university cool, love your hairline keep it up. more of your face and less of your teaching
Truly incredible how people focus on these little details instead of applying what they’re learning.
Audacity at its finest.
hi, can you please make a tutorial of how to make masonry grid in framer, and thank you for this amazing work 🤍