Тёмный

Framer - 2hr Responsive Web Challenge 

Omar Farook | Building Tech Startups
Подписаться 10 тыс.
Просмотров 27 тыс.
50% 1

The hardest part for any web designer is making your entire site fully responsive for any screen size.
Follow me in this 2 hour challenge or exercise style tutorial where we try to hack through making a Figma website design into a fully responsive Framer website.
Resources
- Final site design: ledbyux.com
- Figma project file: bit.ly/3HQcQfi
00:00 Introduction
00:54 Copying Figma design to Framer with the Framer Plugin
05:55 Navigation
10:00 Header section
19:23 Logos section
22:34 Section 2 - content tables
50:58 Section 3 - Event agenda
58:46 Testimonial
1:01:51 Section 4 - Education blurb
01:07:34 Help and footer section
01:18:44 Mobile responsive
02:01:45 Adding links / scroll links
02:09:01 Final checks
#framer #webdesign #responsivewebsite #landingpagedesign #tutorial #nocode #challenge #bootcamp #uiuxdesign
------------------------------------------------------------------------------------------------
Check out Framer’s FREE Canvas Based Website Builder
Sign up here → www.framer.com?via=buildwithomar
Other tools used
- loom.com - What I used to record my screen for this video
- www.figma.com - The worlds best UI/UX design tool of course :)
------------------------------------------------------------------------------------------------
Follow me here for more content:
📱 TIKTOK ‧ / omar.builds
📷 INSTAGRAM ‧ / omar.builds
🐦 TWITTER ‧ / omar_builds
🌐 LINKEDIN ‧ / omarbuilds
------------------------------------------------------------------------------------------------
Startups I am currently building:
👉 www.Glorify.com - A VC-backed SaaS design tool startup
👉 www.Together.Design - A productized UI/UX service platform
👉 www.Blitzit.app - a personal productivity tool that keeps you in flow state
And a few more in stealth mode :D

Опубликовано:

 

8 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 43   
@user-ge1in5vt9b
@user-ge1in5vt9b 10 месяцев назад
the best video so far about making responsive websites. thank you so much :) I have watched a few videos about making a website responsive but most of them only shared the basics of how things work which wasn't enough especially that I'm new to this. but your video is completely different, watching you make a full website responsive helped me get a better understanding of the process of making a website responsive.
@JT-dt9lp
@JT-dt9lp 5 месяцев назад
I want to thank you for sharing this as its given me the confidence to go in and play around with the tool. It was so helpful to see you trying different things and making the end product look amazing.
@KarolisTan
@KarolisTan Год назад
You have no idea how much I needed that Z-Index thing, thank you so much!
@BuildwithOmar
@BuildwithOmar Год назад
Glad I could help! 🙌🏾
@davidrivers2734
@davidrivers2734 10 месяцев назад
Very nice, you're a good teacher
@elysiumcore
@elysiumcore Год назад
This channel is a gold mine for framer 🔥 keep it up mate
@BuildwithOmar
@BuildwithOmar Год назад
Thanks dude 🙏🏽🫶
@elysiumcore
@elysiumcore Год назад
@@BuildwithOmar I need to make a test website ...it looks easier than webflow 👀
@omnimat
@omnimat Год назад
Great case study!
@BuildwithOmar
@BuildwithOmar Год назад
Thanks dude!
@Exezvfx
@Exezvfx Год назад
thanks for this video!
@user-vo5zt6qn5t
@user-vo5zt6qn5t 8 месяцев назад
Sir, it help me so much to create my own portfolio. My biggest thank from me. Can't wait to see animation part video.
@angelicojohnrago2878
@angelicojohnrago2878 Год назад
Great contenttt
@ausome0me
@ausome0me Год назад
Thanks Man!
@mkbfhd
@mkbfhd Год назад
thank you for this!
@BuildwithOmar
@BuildwithOmar Год назад
No worries dude, let me know how you get on!
@vishanfernando6774
@vishanfernando6774 Год назад
This is super useful
@BuildwithOmar
@BuildwithOmar Год назад
Thanks buddy ❤
@leslie8
@leslie8 Год назад
Never subscribed so fast. lol 😁
@BuildwithOmar
@BuildwithOmar Год назад
Glad your getting value!
@neverforget1575
@neverforget1575 Год назад
Wow was watching more and I feel your pain it keeps changing, framer says its quick to build a website, but having to spend so long just trying to fit some text is ridiculous, did you manage to work out a defacto way of doing things? Thanks
@srinathjk
@srinathjk 11 месяцев назад
Really The best comparison video. And can you make me clear that I'm Building a site which uses chatbot features and File Upload feature where users upload their files so we receive them in back end and revert back to them outside our site. So confused whether to use framer or webflow, as webflows's file upload feature is expesive but there's no option i could find for this in framer ( I'm more of ok with the framer price range so wonder if i could work this out within the framer)
@razvanmuresan6683
@razvanmuresan6683 Год назад
all the framer websites i have seen have a max width of 1440. how can I make a website that is full width (100%) and everything scales properly. i have problems with images when they scale
@taylorjackson3691
@taylorjackson3691 Год назад
Thinking about switching to this from Webflow.
@BuildwithOmar
@BuildwithOmar Год назад
We’re moving my entire SaaS company from webflow to this. Just keeps designers and non coders as gatekeepers! So much more efficient!
@des7638
@des7638 Год назад
@@BuildwithOmar YO can you make a video talking about this in depth? I Ive been on webflow for years and just discovered Framer. thanks :)
@BuildwithOmar
@BuildwithOmar Год назад
@@des7638 comin soon!
@neverforget1575
@neverforget1575 Год назад
This is the problem with Framer, 30:00 mark, the fill, fit is very confusing and even more sometimes you set properties and they get removed or changed, if Framer just did a regular flex box grid type layouts it would make the switch from Webflow a no brainer and stop the confusion of having to try to work out what you need to choose. Is it fill, fit, rel, etc Thanks for the tutorial though.
@BuildwithOmar
@BuildwithOmar Год назад
Yea lots of parent child layer dependencies- but Once you get the hang off it, it becomes natural. I’m much more fluid now after these exercises.
@MixLife96
@MixLife96 9 месяцев назад
From good looking site we want, that site should be can be aslo web app on framer
@nordine4359
@nordine4359 Год назад
hello, thank you bro for this tutorial, do you plan to make others? 😁
@BuildwithOmar
@BuildwithOmar Год назад
Yes more coming soon! ❤
@omararellanomx
@omararellanomx Год назад
Hi Omar, how are you? I greet you from Cancun, Mexico, I see that the link to your twitter account does not exist, how do I find you on that social network?
@BuildwithOmar
@BuildwithOmar Год назад
I am on Twitter señor. Use the same handle everywhere @buildwithomar
@naeempersonal
@naeempersonal 4 месяца назад
Is html css essential for making website responsive in framer? or html css essential in framer?
@mrk3676
@mrk3676 Год назад
this to fast for me for beginner tutorial hahaha can you recommend some comprehensive tutorial? thanks
@Gearyco
@Gearyco Год назад
The DOM output is a nightmare.
@adnanmehedii
@adnanmehedii Год назад
Can you explain?
@osks
@osks Год назад
DOM???
6 месяцев назад
Ain't that funny that the best practice is to design mobile first, but in framer you better design desktop first...
@jayce3820
@jayce3820 Год назад
Promo SM 🙏
@LorettaBangBang
@LorettaBangBang Год назад
Why even design in Figma anymore? Why not design in Framer? I thought that was the whole point
@BuildwithOmar
@BuildwithOmar Год назад
That’s why I mentioned at the end that direct to Framer is one possible workflow. But to answer your question, many Ui/Ux designers get better clarity from a Figma mockup design before migrating it to Framer.
Далее
Framer Crash Course
34:49
Просмотров 29 тыс.
Webflow to Framer - My 1 Year SEO Review (2024)
9:53
Каха и суп
00:39
Просмотров 1,1 млн
Who has won ?? 😀 #shortvideo #lizzyisaeva
00:24
Просмотров 4,4 млн
Responsive Design in Figma: Crash Course 2023
20:47
Просмотров 102 тыс.
Build an E-com Store with Framer CMS
33:15
Просмотров 69 тыс.
Designing the new Dive website in Figma + Framer
17:10
Making Responsive Websites in Framer
18:54
Просмотров 39 тыс.
Why I switched to Framer from Webflow
12:17
Просмотров 152 тыс.
Crash Course on Framer CMS (Beginner Tutorial)
18:32
Просмотров 23 тыс.