Learn Framer In 10 Days, Build Your Website In 5 Days.
This is the best time to live.
If you’re wondering why, you can learn to use a simple tool like Framer which allows you to build a website without writing a single line of code.
Imagine this :
Building a website in the 1990s took a team of 5-10 people - a team leader to manage them, developers, testers, designers, user experience analysts, etc.
That’s a lot of people !
Now, you have the power to do it all alone while sitting on your chair or bed, enjoying your coffee, scrolling online, and yet can build a website.
Because 2 weeks ago, I never built a website in my life (not fully functional).
But, it took me just 10 days to learn Framer and less than a week to build a website.
That’s insane to me.
If you feel the same, let me share with you 6 Framer features that’ll shorten your web design learning curve :
Start Designing On A Canvas
Frame
The canvas on which you design your website is the “Frame”. A frame serves as the basic layout for any design element on your page like sections, images, animations, and even buttons.
You can create frames for different sizes with custom width and height or a predefined size for devices like a laptop, an iPhone, an iPad, etc.
Initially, it creates a white canvas on which you place your elements to design your website.
Reuse Blocks For Simplicity
Components
Components are the reusable blocks of elements in your design assets. It would be hard to create a design only to duplicate it multiple times.
With components, you only create once, then drag it into your website as instances of those components.
You can add special features to existing components using “Variants“.
Imagine you have a white button.
You can turn it into a component, add a variant, and turn it into a black button. Now, whenever you create a new instance of the button, you can easily switch between them.
Create Blogs Has Never Been Easier
CMS
Content Management System (CMS) is an internal storage mechanism in Framer to save and manage your data.
You can create CMS collections that can act as your blog and product listing inside which you can add individual CMS data.
Do You Enjoy Website Popups ?
Overlays
Let’s be honest. I’m not too fond of popups on websites.
But, it’ll be helpful for your website.
Overlays provide a masking layer that appears on top of your website, acting much like a popup. But, it’s more than that !
You can create confirmation requests, a cool animation, or a product listing without redirecting the website.
Making Your Website More Dynamic
Effects & Animations
If a static website is professional, an animated webpage is cool.
Striking the balance between them will make your website and you the coolest professional at what you do.
It all starts with adding effects to your designs.
Some primary effects you can use to give life to your website include “Hover“, “Press“, “Appear“ and “Drag“.
Set transitions between components, add specific effects and play with the time delay.
You’ll build an outstanding website I can assure you.
Build For Every Device In The World
Breakpoints
“Wow, your website looks great on my desktop. Huh, but it sucks on my iPhone.” is the last sentence you wanna hear about your website.
Trust me.
But, with Framer, it takes no effort to solve this.
You can create “Breakpoints“ for different screen resolutions for multiple layouts.
This allows you to create your website for a desktop, and adjust it for an iPad, an iPhone, or every other device in the world all at once.
You can create overrides for smaller screen sizes while retaining the designs for the desktop.
In short,
If you’re new to web development, start with Framer
If you’re a web designer, switch to Framer
Because its features are unparalleled and it’s Free to use
And it’s not hard to learn.
Remember, I didn’t know a lot about Framer, and today ?
I built my first website with cool effects, launched it, and had a couple of sales.
That’s all for today.
See you on the next Sunday.
Before you leave, if you missed out on my previous post, I talk about how you can run your entire business with just 3 Free tools.
I hope you’ll enjoy reading it.
.
.
Thanks for reading !
TemplaterGuy.