Georgy.Design ❇️
37 subscribers
13 photos
1 video
34 links
shape the reality.
one jot to change your story.

— Group chat
@georgychat

— Contact Georgy
@alaverdyan

— Business website
georgy.design

— Personal website
geor.gy

— other
@alaverdyangeorgy

— Для русскоговорящих
@georgystories
Download Telegram
Webflow changed their pricing.

The change didn’t affect site but account plans — the changes are significant: no more team plans and price increase across the board.

The team plans are integrated into account plans and now called “workspaces”. On the one hand, it is a good change because it simplifies the pricing — we had 3 plans before (Site, Account, Team) but now there are only two (Site and Workspaces). However, on another hand, the prices are increased, especially for solopreneurs, freelancers, and other folks who don’t work with a team.

I’m going to compare before/after changes so you can clearly see the difference.

The changes:

1️⃣ “Starter” — nothing changed, still a free plan with the same limitations.

2️⃣ “Lite” is now called “Core” — it costed $16/month (annually) and $24/month (monthly) before.

• Pricing? It costs $19/month (annually) and $28/month (monthly).

• Cost difference? $3 and $4, respectively.

• Any changes? Now you can add up to 3 seats to this workspace plan. Meaning, if you pay annually and want to add 2 teammates to your workspace, then it will cost you $57 ($19×3).


3️⃣ “Pro” is now called “Growth” — it costed $35/month (annually) and $42/month (monthly).

• Pricing? $49/month (annually) and $60/month (monthly).

• Cost difference? $14 and $18, respectively.

• Any changes? Now you can add up to 9 seats in this workspace plan.

Verdict 🤔

The most important change — prices became higher, specifically “Growth” (Pro) plan. I’ve written the cost differences above but I’ll repeat: $14/month more if you pay annually ($35 against $49) and $18/month more if you pay monthly ($42 against $60). Who cares you may ask? For example, those who work use Webflow a lot of storage for their projects — the 10 projects limit in “Core” (Lite) plan makes them switch to the more expensive plan. By the way, the same goes for me because I have a lot of projects. These days, the switch from the “Core” (Lite) plan to the “Growth” (Pro) plan will cost you quite a buck — $30 more if you pay annually (the cheapest option long term). $19 against $49. The difference before was $19 ($16 against $35). This is fucking insane.

The difference between monthly and annual payments is even more visible. If it was $8 for “Core” and $7 for “Growth” before, then it is $9 for “Core” and $11 for “Growth”.

Teams with more than 3 people and who need more than 10 projects — literally, 99% of all teams — will pay way-way more now. Let me explain: we had a dedicated “Team” plan before the changes. The price for one seat was $35/month and “Team” plan was, basically, “Pro” plan with team collaboration features. Now, there is no “Team” plan because of workspaces addition. “Core” plan allows adding up to 3 seats whilst “Growth” plan — up to 9. That being said, as I’ve mentioned earlier, 99% of all teams won’t need “Core” plan due to 10 projects limitation. So the teams are forced to use “Growth” plan that costs $49. The price difference is $14 ($35 against $49). What do teams get? A few new collaboration, role system, and hand-off features. Do they justify a $14 increase? It’s up to you too decide. Oh, by the way, Webflow states that people can reach out to their enterprise customers support for teams with more than 9 seats.

The only people who benefits from these changes are teams with up to 3 people who don’t need more than 10 projects. They will pay $19 for one seat instead of $35 (old “Team” plan).

So what do I think about all of it? Only Webflow profits from these changes, their entire user base is suffering from 30–40% price increase. Teams got some collaboration features while solopreneurs aka freelancers didn’t get anything.
Again, Webflow provides tons of value — it is undeniably one of the best no-code tools for creating websites and web apps. I’ll continue being a happy Webflow user but I just hope that the price increase will be justified somehow.

I really hope that Webflow Logic (a relatively simple native backend) and Webflow Memberships (native user accounts) will be free, hence justify the price increase.

If these new features won’t be free, they will be available only in Webflow Hosting, and, even more, there will be new site plans which include these features, then Webflow would do a shitty thing. Not only their aim is on the US citizens even though their community and user base consist of mostly folks around the globe. Their support and features addition for people from everywhere not only the US is really-really slow, sometimes, non-existent.

I love Webflow and I hope it will prosper even further but I want it to be better for everyone, specifically their core user base — us, freelancers.
I found a way to keep the same pricing for existing Webflow users.

However, it is only applicable for those who is paying for “Pro” plan right now.

You’ll need to fill out the form on the website dedicated for current “Pro” plan users. Then you’ll receive a discount code when Workspaces will be launched official for all users. The code can be used to get a discount for “Growth” plan (“Pro”) — you’ll have the same pricing as before the changes.

Link → https://university.webflow.com/growth-discount-for-pro-plan-account-owners
⌛️ Book a free consultation with Georgy

👥 Group chat
@georgychat

💬 Contact Georgy
@alaverdyan

👨🏻‍💼 Business website
georgy.design

👨🏻‍💻 Personal website
geor.gy

ℹ️ Index
@alaverdyangeorgy

💎 Для русскоговорящих
@georgystories
Georgy.Design ❇️ pinned «⌛️ Book a free consultation with Georgy 👥 Group chat @georgychat 💬 Contact Georgy @alaverdyan 👨🏻‍💼 Business website georgy.design 👨🏻‍💻 Personal website geor.gy ℹ️ Index @alaverdyangeorgy 💎 Для русскоговорящих @georgystories»
Chrome Extension for faster REM and EM calculations in Webflow by Timothy Ricks.

All you need is to choose what you need: EM or REM, then type a size in pixel, and press space.

For example, you have REM and need to calculate 14px: «14px» + press space = «0,88rem».

Link → https://chrome.google.com/webstore/detail/wizardry-technique-conver/oggfflpobpmaaolghdfoofejdjldnnjl

How-To video → https://youtu.be/YXAr7PxwHb8

Shortcuts:

PX TO PERCENT - SHORTCUT

item px width / parent px width
example: 960/1920 space enter

PX TO EM / REM - SHORTCUT

type in any px value without the px unit
example: 967 space enter

PX TO EM / REM - OPTIONS

setunit (toggles between em / rem)
getunit (returns selected unit)

setbase (toggles between 1vw & 16px base font size)
getbase (returns selected base font size)


How-To guide by me:

REM:

Click on any size field be it “Width” or “Font size” (doesn’t matter; it’s being used just for usign commands) → “setunit” + space → popup pops up (no pun intended) that states what you’ve chosen: EM or REM — if it’s EM, then type “setunit” one more time → “setbase” + space — choose 16px.

Settings are saved when you exit a tab with Webflow project, but if you forget what type is being used, then use “getunit” command. “getbase” will show what default settings is being used: 16px or 1vw.

EM:

“setunit” — choose EM → “setbase” — 1vw → “setsize%frame size in design”, e.g., “setsize1440” — your website was designed in 1440px. “getsize” will show you the frame size you’ve setup.

How to calculate:

Type desirable size in px and press space — done! “14” + space = “0.88rem”

How to calculate percentages:

“%object size%/%parent size%”, e.g. «370/158». It’s better to watch tutorial video to understand why, when, and how to use percentages.
How to force child’s font color change on parent’s hover if a child has a color already?

While I was building a website for a client in Webflow, I’ve encountered an annoying thing — text in my “button” didn’t want to change while hovering over the button. Basically, the “button” consists of a text element and an icon. Since, the text element had a color already, it wasn’t change on the “button’s” hover.

Child elements inherit font colors from their parents, but not in my case because the child prioritized its own color over the parent's.

Googled a bit and found a solution: color: inherit

My code looks like this:

<style>
.footer_location:hover .footer_location-text {
color: inherit;
}
</style>

By using color: inherit I forced the child to inherit the parent’s font color while hovering over it.

P.S: I know it’s a noob thing for all ya god-level coders here, but, well, some people might not know about it, so let them learn 😌
If you have any questions related to design, development, no-code, and stuff like that — feel free to join my group chat.

Actually, any other questions are fine too, lol 🥸
CSS Layout Modes found on Reddit.
CSS Selectors.
CSS Grid Layout.
Yesterday I completed all four Webflow Certification tests — my path to Webflow Professional Partner started.

My current Webflow Partner checklist:

🚀 Launch Georgy.Design — my business related website (geor.gy is for personal stuff)

🖼 Showcase my projects on the site

✒️ Review the structure/code/design of my previous works to match all Partner Program’s criteria

I’ll post about my journey to become a Professional Partner, so stay tuned, especially if you want to become one yourself 👀

Feel free to ask questions in my group’s chat!
I’ve got Telegram Premium 👀

Gonna test to find out if it’s worth the money or just a mean to support Telegram devs.

For those who cannot pay via “Settings” — try to use @PremiumBot 🤖
🔥 Finally, me and the boys from MAL-Sync launched a prototype of my redesign.

One of my first projects during my first steps on my freelancing path was MAL-Sync’s redesign. MAL-Sync is a Chrome, Firefox extension (can be used via Userscript too) for anime and manga fans that allows them to track their progress automatically and gives their own library from favorite tracking platform in their hands, so they can search it without hassles.

I’ve been an avid user of the extension for a few years because, well, it’s a blast and I love my anime/manga. It was a no-brainer for me for the first project since MAL-Sync, as the devs said: “Has no design”. I talked to the boys and started working on the project… it took more than one year though because got the job n’ stuff.

Currently, this is only the prototype to get a feel of the vision I was going for MAL-Sync.

Approximate launch date is unknown, but I hope it’ll be Q2 next year 🙏🏻
Feel free to check out the prototype and my Figma design — you can duplicate it too :)

Prototype: https://minimal.malsync.moe/
🖼 Figma design: https://www.figma.com/file/W05K33g9HAY4zvITZOl5q2/MAL-Sync-Redesign

P.S: You’ll see some inconsistencies here and there, but remember that it’s not a final product :)
Official announcement from the MAL-Sync’s team.

Join official Discord channel → https://discord.com/invite/cTH4yaw
<!-- Proper shadows for SVGs -->

Hey guys, I’ve brought you a really-really useful and dope code for making proper shadows for images, specifically SVGs and non-squared objects.

Special thanks to Vimilan from Twitter for highlighting this CSS feature!

⚙️ Code snippet w/ feature and its animation on hover (:hover) and while pressing (:active)

<style>

.fancy-svg {
filter: drop-shadow(25px 20px 15px currentColor);
transition: filter 200ms ease;
}

.fancy-svg:hover {
filter: drop-shadow(25px 20px 15px black);
}

.fancy-svg:active {
filter: drop-shadow(25px 20px 15px #d32020);
}

</style>
This media is not supported in your browser
VIEW IN TELEGRAM
Should I add GIFs like this one for better explanation what the code snippets do?